门户网站建设方案专门做考研的网站
标签的 CSS 样式
现在有这么一段 HTML 代码：
<div class="test"><h1>Hello World</h1>
</div>
目前我们没有给 h1 设置任何样式，可以看到 h1 自带了一些样式，eg：font-size、font-weight、margin。
这里我们需要注意的是：h1 上面会有所有的 CSS 属性。我们可以打开浏览器的开发者面板，选择 [元素] - [计算样式] - 勾选 [全部显示]，就能看到 h1 上应用的 CSS 属性。这里展示的属性值都是计算后的具体值，颜色值都是 rgb 的格式、长度值都以 px 为单位。
就是说，我们书写的任何一个 HTML 元素，实际上都应用了一整套 CSS 样式。
样式的计算过程
总的来讲，CSS 属性值的计算过程，分为如下 4 个步骤：
- 确定声明值
- 解决层叠冲突
- 继承属性值
- 使用默认值
确定声明值
我们编写如下 CSS（层叠样式表）代码：
h1 {color: red;
}
我们编写的层叠样式表称为 “作者样式表”，浏览器内置的层叠样式表称为 “用户代理样式表”。
现在就可以确定声明值了，“作者样式表” 设置了 color 属性，“用户代理样式表” 设置了 display、font-size 等属性。
解决层叠冲突
在确定声明值时，可能出现 “声明的样式发生冲突” 的情况，此时会进入解决层叠冲突的流程。
这一步可以分为下面这 3 个步骤：
- 比较源的重要性
- 比较样式的权重
- 比较编写的位置
- 比较源的重要性：“作者样式表” > “用户代理样式表”
h1 {font-weight: 400;color: red;
}
使用上述样式，可以看到页面上的 h1 最终应用了 font-weight: 400 这个属性值。
- 比较样式的权重：
.test h1 {font-size: 50px;
}h1 {font-size: 20px;
}
上面的样式同属于 “作者样式表”，即源的重要性相同，此时就会比较样式的权重。样式的权重有 3 个等级：
- ID 选择器：
(1, 0, 0) - 类选择器、属性选择器、伪类选择器：
(0, 1, 0) - 元素选择器、伪元素选择器：
(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)）。后随着计算机的发展 这个进制在不断增大。不管怎样，我们就当作权值不能跃迁就好了。毕竟再怎么样写代码也不可能写出几百上千个选择器吧。
- 比较编写的位置：行内样式 > 样式表的样式；位置靠后的样式 > 位置靠前的样式
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 属性值为默认值。