【CSS】样式的计算过程-CSDN博客

标签的 CSS 样式

现在有这么一段 HTML 代码

<div class="test">
    <h1>Hello World</h1>
</div>

目前我们没有给 h1 设置任何样式可以看到 h1 自带了一些样式egfont-size、font-weight、margin。

这里我们需要注意的是h1 上面会有所有的 CSS 属性。我们可以打开浏览器的开发者面板选择 [元素] - [计算样式] - 勾选 [全部显示]就能看到 h1 上应用的 CSS 属性。这里展示的属性值都是计算后的具体值颜色值都是 rgb 的格式、长度值都以 px 为单位。

就是说我们书写的任何一个 HTML 元素实际上都应用了一整套 CSS 样式。

样式的计算过程

总的来讲CSS 属性值的计算过程分为如下 4 个步骤

1. 确定声明值
2. 解决层叠冲突
3. 继承属性值
4. 使用默认值

确定声明值

我们编写如下 CSS层叠样式表代码

h1 {
    color: red;
}

我们编写的层叠样式表称为 “作者样式表”浏览器内置的层叠样式表称为 “用户代理样式表”。

现在就可以确定声明值了“作者样式表” 设置了 color 属性“用户代理样式表” 设置了 display、font-size 等属性。

解决层叠冲突

在确定声明值时可能出现 “声明的样式发生冲突” 的情况此时会进入解决层叠冲突的流程。

这一步可以分为下面这 3 个步骤

1. 比较源的重要性
2. 比较样式的权重
3. 比较编写的位置

1. 比较源的重要性“作者样式表” > “用户代理样式表”

h1 {
    font-weight: 400;
    color: red;
}

使用上述样式可以看到页面上的 h1 最终应用了 font-weight: 400 这个属性值。

2. 比较样式的权重

.test h1 {
    font-size: 50px;
}

h1 {
    font-size: 20px;
}

上面的样式同属于 “作者样式表”即源的重要性相同此时就会比较样式的权重。样式的权重有 3 个等级

1. ID 选择器(1, 0, 0)
2. 类选择器、属性选择器、伪类选择器(0, 1, 0)
3. 元素选择器、伪元素选择器(0, 0, 1)

上例 .test h1 的权重为 (0, 1, 1)而 h1 的权重为 (0, 0, 1)因此最终会应用 font-size: 50px 这个属性值。

这里需要注意权值不能跃迁。就是说无论有多少个第 4 等的元素选择器都不能超过一个第 3 等的类选择器。

也有说法是最开始权重的计算是 256 进制的(0, 0, 255) + (0, 0, 1) = (0, 1, 0)。后随着计算机的发展 这个进制在不断增大。

不管怎样我们就当作权值不能跃迁就好了。毕竟再怎么样写代码也不可能写出几百上千个选择器吧。

3. 比较编写的位置行内样式 > 样式表的样式位置靠后的样式 > 位置靠前的样式

h1 {
    font-size: 50px;
}

h1 {
    font-size: 20px;
}

以上样式具有相同的源重要性和样式权重此时位于下面的样式会覆盖掉上面的样式最终会应用 font-size: 20px 这个属性值。

继承属性值

对于可继承属性如果经过 “确定声明值”、“解决层叠冲突” 后属性仍没有值则会尝试继承最近的父元素身上的属性值。

div {
    color: red;
}

上例给 div 设置了 color 属性由于 color 是可以继承的因此 h1 从最近的父元素 div 身上继承了 color 属性。

大致上与文本相关的属性都是可继承的而与布局相关的属性都是不可继承的。

以下是一些可继承的 CSS 属性

• 字体系列属性font、font-family、font-weight、font-size、font-style 等。
• 文本系列属性color、line-height、word-spacing、letter-spacing、text-transform、text-indent、text-align 等。
• 列表系列属性list-style、list-style-type、list-style-position 等。
• 表格系列属性border-collapse、border-spacing 等。
• 其他属性visibility、cursor、direction 等。

以下是一些不可继承的 CSS 属性

• 盒模型系列属性margin、padding、border、width、height 等。
• 定位系列属性position、top、right、bottom、left 等。
• 背景系列属性background、background-color、background-image 等。
• 显示系列属性display、overflow 等。
• 其他属性vertical-align、z-index 等。

使用默认值

经过 “确定声明值”、“解决层叠冲突”、“继承属性值” 后如果属性仍没有值才会使用默认值。

DEMO

<div>
    <a href="#">Hello World</a>
    <h1>Hello World</h1>
</div>

div {
    color: red;
}

问a 元素是什么颜色 h1 元素又是什么颜色

答a 元素为蓝色h1 元素为红色。

解释因为 a 元素的 “用户代理样式表” 设置了 color 属性因此会应用此声明值。而在 h1 元素中无论是 “作者样式表” 还是 “用户代理样式表”都没有对此属性进行声明由于 color 属性是可继承的因此 h1 元素会继承父元素 div 的 color 属性。

如果希望 a 元素可以继承 div 的 color可以显式地设置 color: inherit。

除了 inherit 这个特殊值还有 initial可以通过 color: initial 显式地设置 color 属性值为默认值。