从零开始学前端 - 4. CSS基础知识
作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。
从零开始学前端 - 4. CSS 基础
- 一、CSS 简介
- 二、基本语法
- 三、CSS 的书写位置
-
- 1. 外部样式表 （外联）
- 2. 内部样式 （内嵌）
- 3. 内联样式 （行内）
- 4. 样式优先级
- 四、CSS 选择器
-
- 1. 标签选择器
- 2. id 选择器
- 3. class 类选择器
- 4. 属性选择器
-
- 4.1 纯属性
- 4.2 属性 + 值
- 4.3 属性 + 多个值
- 4.4 属性 + 含有值
- 5. 后代选择器
- 6. 子元素选择器
- 7. 兄弟选择器
-
- 7.1 相邻兄弟选择器 +
- 7.2 通用兄弟选择器 ~
- 8. 伪类选择器
-
- 8.1 静态伪类：只能用于超链接的样式。
- 8.2 动态伪类：针对所有标签都适用的样式。
- 9. 通配符 *
一、CSS 简介
CSS 是 Cascading Style Sheets 的简称，中文称为层叠样式表。它为 HTML 提供了一种样式描述，决定了如何显示 HTML 元素。我们通常不使用 HTML 标签自带的各种属性等来控制样式，而是通过 CSS 来控制，这也是为了更好的让 结构层 和 表现层 分离，CSS 一般都保存在一个单独的 .css 文件中。
二、基本语法
CSS 由：选择器（selector），声明两个主要的部分组成，声明又分为属性（property）和值（value）。每个属性有一个值。属性和值被 : 英文冒号分开。多条声明之间用 ; 英文分号隔开。
例：
h1 {
color:red;
font-size:14px;
}
h1 {color:red; font-size:14px;}
一般我们为了加强代码的可读性，采用第一种书写方式。例子代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
通过上方的代码，我们可以很好的总结出 CSS 的基本语法：
selector {
property: value;
......
property: value;
}
- 属性和值用冒号连接
- 一条声明结束要添加分号
- 属性和属性不分先后顺序
三、CSS 的书写位置
1. 外部样式表 （外联）
首先需要创建一个 CSS 文件（后缀名为.css），然后在 html 文件内使用 link 标签引入css文件。这种方式也是我们工作中最常用的引用方式。
<head>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
head>
index.css 文件内部可以直接输入 CSS 代码，如下：
h1 {color:red; font-size:14px;}
2. 内部样式 （内嵌）
不推荐使用
<head>
<style type="text/css">
h1 {
color:red;
font-size:14px;
}
style>
head>
3. 内联样式 （行内）
强烈不推荐使用
<h1 style="color:red; font-size:14px;">14像素大小，红色的字体h1>
4. 样式优先级
浏览器采用从上到下的解析模式，这意味着下方的样式会覆盖上方的样式，也就说说，离目标标签最近的样式优先级最高，所以内部样式和外部样式会按照我们在页面中的书写顺序决定优先级
CSS 中还有一个特殊的规则 !important ，当它被应用在一个样式声明中时,该样式声明会覆盖 CSS 中任何其他的声明。
所有，样式的优先级规则如下：
!important > 内联样式 > （内部样式 或 外部样式） > 浏览器默认样式
例：
<head>
<link rel="stylesheet" href="./index.css">
<style>
h1{
color: blue;
}
style>
head>
<body>
<h1 style="color: red;">h1的文字颜色？/h1>
四、CSS 选择器
要使用 css 对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。说白了就是用一种方式将想要选择的那个元素选中，然后给他添加相应的样式。我们有很多种选择元素的方式，这些不同的方式，就是不同的选择器，但它们的目的是一样的，那就是把想要的元素选中。
1. 标签选择器
语法：tagName { property: value;}
实例：p{ color: red;}
作用：匹配页面中所有的 p 标签，设置文字颜色为红色。
<h1>不可以被选中的标签h1>
<p>可以被选中的标签p>
<div><p>可以被选中的标签p>div>
- 标签选择器也被称为元素选择器、类型选择器等；
- 如果想统一页面某个标签的显示效果时，可以使用标签选择器，更加方便；
2. id 选择器
语法：#ID { property: value;}
实例：#title{ color: red;}
作用：匹配页面中具有 id="title" 属性的标签，设置文字颜色为红色。
<div id="title">可以被选中的标签div>
<div class="title">不可以被选中的标签div>
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式；
- id 名不能以数字和特殊字符开头；
- id 名具有唯一性，在一个页面中不能出现同名的 id；
- id 名区分大小写，必须与 html 中的 id 相对应；
3. class 类选择器
语法：.className { property: value;}
实例：title{ color: red;}
作用：与 id 选择器类似，匹配页面中所有具有 class="title" 属性的标签，设置文字颜色为红色。
<div id="title">不可以被选中的标签div>
<div class="title">可以被选中的标签div>
- class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式；
- class 名不能以数字和特殊字符开头；
- class 名在同一个页面中可以存在多个；
- class 名区分大小写，必须与 html 中的 class 相对应；
4. 属性选择器
4.1 纯属性
设置所有具有title属性的标签元素；
语法：[tagProperty] { property: value;}
实例：[title]{ color: red;}
作用：匹配页面中具有 "title" 属性的标签，设置文字颜色为红色。
<p title="">可以被选中的标签p>
<p>不可被选中的标签p>
4.2 属性 + 值
设置所有具有title属性的标签元素；
语法：[tagProperty=value] { property: value;}
实例：[title=html]{ color: red;}
作用：匹配页面中具有 "title" 属性，且属性值为 html 的标签，设置文字颜色为红色。
<p title="html">可以被选中的标签p>
<p title="html css javascript">不可被选中的标签p>
4.3 属性 + 多个值
语法：[tagProperty~=value] { property: value;}
实例：[title~=html]{ color: red;}
作用：匹配页面中所有具有 title 属性，且属性值中的 html 由 空格 分隔的属性值的标签，设置文字颜色为红色。
<p title="html">可以被选中的标签p>
<p title="html css javascript">可以被选中的标签p>
<p title="html-css javascript">不可以被选中的标签p>
4.4 属性 + 含有值
语法：[tagProperty|=value] { property: value;}
实例：[title|=html]{ color: red;}
作用：匹配页面中所有具有 title 属性，且属性值中的 html 由 连字符 分隔的属性值的标签，设置文字颜色为红色。
<p title="html">可以被选中的标签p>
<p title="html-css javascript">可以被选中的标签p>
<p title="html css javascript">不可以被选中的标签p>
关于更多的属性选择器知识，请 点击这里查看。
5. 后代选择器
语法：selector1 selector2 { property: value;}
实例：.title p{ color: red;}
作用：先查找页面中所有类名为 title 的标签，然后查找标签中所有的 p 标签，将符合条件的标签文字颜色设置为红色。
<div class="title"><p>可以被选中的标签p>div>
<div class="title"><ul><li><p>可以被选中的标签p>li>ul>div>
<div><p>不可以被选中的标签p>div>
<p>不可以被选中的标签p>
- 也被称为包含选择器，派生选择器等；
- 选择符1和选择符2必须是包含与被包含关系；
- 后代选择器属于多个选择器组合而成，每个选择器间通过 空格 分隔，从左向右依次查找；
- 两个选择器之间的层次间隔可以是无限的，当我们使用 less / sass 时我们通常会严格划分层级；
6. 子元素选择器
语法：selector1 > selector2 { property: value;}
实例：.title > p{ color: red;}
作用：先查找页面中所有类名为 title 的标签，然后查找标签的子元素中所有的 p 标签，将符合条件的标签文字颜色设置为红色。
<div class="title"><p>可以被选中的标签p>div>
<div class="title"><ul><li><p>不可以被选中的标签p>li>ul>div>
- 只会选择指定标签元素的第一代子元素；
7. 兄弟选择器
7.1 相邻兄弟选择器 +
语法：selector1 + selector2 { property: value;}
实例：.title + div{ color: red;}
作用：先查找页面中所有类名为 title 的标签，然后查找与该标签具有相同父元素，紧跟在该标签后方的 div 标签，将符合条件的标签文字颜色设置为红色。
<div>不可以被选中的标签div>
<div class="title">不可以被选中的标签div>
<div>可以被选中的标签div>
<div>不可以被选中的标签div>
7.2 通用兄弟选择器 ~
语法：selector1 ~ selector2 { property: value;}
实例：.title ~ div{ color: red;}
作用：先查找页面中所有类名为 title 的标签，然后查找与该标签具有相同父元素，且在该标签后方的所有 div 标签，将符合条件的标签文字颜色设置为红色。
<div>不可以被选中的标签div>
<div class="title">不可以被选中的标签div>
<div>可以被选中的标签div>
<div>可以被选中的标签div>
- “+” 选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。
- “~” 选择器则表示某元素后所有同级的指定元素，强调所有的。
- selector1 表示的是哥哥，selector2 表示的是弟弟，无论如何都不会匹配到属于 selector1 哥哥的标签。
8. 伪类选择器
语法：selector : pseudo-class { property: value;}
实例：a:hover{ color: red;}
作用：鼠标经过 标签时，链接的颜色变为红色。
同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”，伪类用冒号来表示。
| 属性 | 效果 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
8.1 静态伪类：只能用于超链接的样式。
:link未访问过的超链接:visited链接被点击过之后
8.2 动态伪类：针对所有标签都适用的样式。
:hover“悬停”：鼠标放到标签上的时候:active“激活”： 鼠标点击标签，但是不松手时。:focus“聚焦”：某个标签获得焦点时的样式（比如某个输入框获得焦点）:first-child第一个子元素
9. 通配符 *
语法：* { property: value;}
实例：*{ color: red;}
作用：所有的标签文字颜色都设置为红色。
由于*会匹配所有的元素，影响网页渲染的时间，因此正常情况下我们不会使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。
我们工作中主要常用的选择器如上所示，更多选择器请 点击这里查看
种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。
都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。