CSS工作原理

关于CSS规则如何为HTML添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多种样式值的时候，CSS就要靠层叠机制来决定最终应用哪种样式。

剖析CSS规则

添加CSS样式的方法

主要有三种：

  • 行内样式：写在特定HTML标签的style属性里

  • 嵌入样式：将CSS样式放在HTML文档的head元素中

  • 链接样式：用link标签引入外部css文件

另，样式表中链接其他样式的方法：@import url(css/styles2.css)

CSS规则命名惯例

  1. 第一种方法：多个声明包含在一条规则里。

p{color:red; font-size:12px; font-weight:bold;}

  1. 第二种方法：多个选择符组合在一起。

h1,h2,h3{color:red; font-size:12px; font-weight:bold;}

  1. 第三种方法：多条规则应用给一个选择符。

h1,h2,h3{color:red; font-size:12px;}
h3{font-weight: italic;}

所有用于选择特定元素的选择符又分三种：

  • 上下文选择符：基于祖先或同胞元素选择一个元素

  • ID和类选择符：基于id和class属性的值选择元素

  • 属性选择符：基于属性的有无和特征选择元素

上下文选择符

格式：

标签1 标签2 {声明}

其中，标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。

特殊的上下文选择符

子选择符

格式：

标签1>标签2

注意：标签2必须是标签1的子元素。

紧邻同胞选择符

格式：

标签1+标签2

标签2必须紧跟在其同胞标签1的后面。

一般同胞选择符

格式：

标签1~标签2

标签2必须跟（不一定紧跟）在其同胞标签1后面。

通用选择符

通用选择符*是一个通配符，它匹配任何元素。

例如：

p *{color:green;}

会把p包含的所有元素的文本变成绿色。 注：所有子元素文本变成绿色，但p标签的文本不变色。

如果通配符前面没有标签，则表示网页所有元素。

ID和类选择符

类属性

body标签中包含的任何HTML元素都可以添加class属性。

类选择符

格式：

.类名

标签带类选择符

格式：

标签.类名

多类选择符

可以给元素添加多个类：class="class1 class2"。

格式：

.类名1.类名2

不要乱用类 不要像使用ID一样，每个类都指定一个不同的类名，然后再为每个类编写规则。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的CSS量。

ID属性

格式：

#ID名{声明}

用于页内导航的ID：（俗称锚点） 例如下面这个链接，其目标是同一页的另一个位置：

<a href="#bio">Biography</a>

若只有“#”，那么点击链接会返回页面顶部。如果没有“#”，浏览器就会尝试加载bio目录下的默认页面了。 另外，如果你暂时不知道某个href应该放什么URL，也可以用#作为占位符，但不能把该属性留空。因为href属性值为空的链接的行为跟正常链接不一样。这样团队中其他人将来可以用中间层（比如PHP）变量替换#，以便动态接收来自数据库的URL。

属性选择符

属性名选择符

格式：

标签名[属性名]

例如：img[title]{border:2px solid blue;}，带有title属性的img标签会被选择。

属性值选择符

格式：

标签名[属性名="属性值"]

选择任何带有值为属性值的属性名的标签名。

伪类

伪类分为两种：

  • UI伪类，会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

  • 结构和伪类，会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

使用方法：冒号“:”表示伪类，两个冒号“::”表示CSS3新增的伪元素。

UI伪类

  1. 链接伪类

  • link：默认。

  • visited：用户此前点击过这个链接

  • hover：鼠标指针正悬停在链接上

  • active：链接正在被点击（鼠标在元素上按下，还没有释放） 注意：由于这4个伪类的特指度相同，所以必须按照顺序使用。

  1. :focus伪类 表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。

  2. :target伪类 例如下面例子，CSS规则：#more_info:target{background:#eee;}，会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.<h2>

结构化伪类

常见的结构化伪类：

  1. :first-child和:last-child

  2. :nth-child 例如：li:nth-child(3)会选择一组列表项中的每个第三项。 注意：是li！！！不是ul！！！

伪元素

常见的伪元素：

  1. ::first-letter伪元素 例如：p::first-letter{font-size: 300%;}，可以得到段落首字符放大的效果。

  2. ::first-line伪元素 可以选中文本段落的第一行。

  3. ::before和::after伪元素 用于在特定定元素前面或后面添加特殊内容。 例如给<p class="age">25</p>添加一下标签会得到：Age：25 years.

p.age::before{content:"Age：";}
p.age::after{content:" years.";}

继承

CSS中的祖先元素会向后代传递一样东西：CSS属性的值。 例如：

body{font-family: helvetica,arial,sans-serif;}
``
文档中的所有元素都会继承这个样式。

CSS中有很多属性可以继承，比如颜色、字体、字号等。也有很多CSS属性不能继承，因为继承这些属性没有意义，比如边框、外边距等。

# 层叠
层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。
## 样式来源
浏览器层叠各个来源样式的顺序：
- 浏览器默认样式表
- 用户样式表（比如某些视障用户，他们可以通过用户样式表，强制浏览器加载的所有网站都以更大的字号等显示内容）
- 作者链接样式表（按照它们链接到页面的先后顺序）
- 作者嵌入样式
- 作者行内样式

**浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个更新过程结束后，再将每个标签以最终设定的样式显示出来。**
## 层叠规则
1. 层叠规则一：找到应用给每个元素和属性的所有声明。
浏览器在加载每个页面时，都会据此查到每一条CSS规则，标识出所有收到影响的HTML元素。
2. 层叠规则二：按照顺序和权重排序。
浏览器依次检查5个来源，并设定匹配的属性。如果匹配的属性在下一来源也有定义，则更新该属性的值。
3. 层叠规则三：按特指度排序。
4. 层叠规则四：顺序决定权重。
如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出。

## 计算特指度
利用“I-C-E”公式计算：
1. 选择符中有一个ID，就在I的位置上加1；
2. 选择符中有一个类，就在C的位置上加1；
3. 选择符中有一个元素名，就在E的位置上加1；
4. 得到一个三位数。

例如：

选择符|特指度
------|------
p|1
p.largetext|11
p#largetext|101
body p#largetext|102
body p#largetext ul.mylist|113
body p#largetext ul.mylist li|114

注意：0-1-12的特指度仍然比0-2-0低。
# 规则声明
声明包括两部分：属性和值。

值包含三类：
- 文本值：例如bold、hidden等。
- 数字值：绝对值和相对值。
- 颜色值
  - 颜色名：red、blue等。
  - 十六进制颜色：#ff8800等。
  - RGB颜色值：rgb(0,255,0)表示纯绿色。
  - RGB百分比值：100%,0%,0%表示纯红色。
  - HSL（色度，饱和度%，亮度%）
PreviousCSS定位NextCSS控制背景

Last updated