CSS求值过程 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天。 今天从浅入深地学习了CSS，那浏览器是如何渲染某一个元素的呢？今天来聊聊CSS的求值过程。
举例一个元素的CSS值（还未确定）：

{
    color:?
    background-color:?
    text-align:?
    font-size:?
    font-weight:?
    display:?
}

浏览器默认样式表：

h1 {
    display: block; 
    font-size: 2em; 
    font-weight: bold;
}

用户样式表：

.red {
    color:red;
    font-size:40px;
}
h1 {
    font-size:26px;
}
div h1.red {
    font-size:3em;
    font-size:30px;
}

①确定声明值：

将没有样式冲突的属性先确定下来：

    display: block;
    color:red;
    font-weight: bold;

{
    color:red;
    background-color:?
    text-align:?
    font-size:?
    font-weight: bold;
    display:block;
}

②解决层叠冲突：

对样式表中有冲突的声明使用层叠规则，确定css属性值：（层叠规则!important > 用户样式表 > 浏览器默认样式表，具体可以参考链接）

div h1.red {
    font-size:3em;
    font-size:30px;
}

上面这个选择器权重最高，比较源次序确定font-size：30px。CSS属性值为：

{
    color:red;
    background-color: ?
    text-align: ?
    font-size:30px;
    font-weight:bold;
    display:block;
}

③继承：

对仍然没有值的属性，若可以继承，则继承父元素的值。CSS可以继承的属性：

1.字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：
caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表属性：
list-style-type、list-style-image、list-style-position、list-style

6、光标属性：cursor

text-algin属性是可以继承的，假设h1标签的父元素的text-algin的值为center，则h1的text-algin的值也为center。

④默认值：

对仍然没有值的属性，使用默认值。background-color的默认值为transparent，至此我们就将所有的属性值确定了下来：

{
    color:red;
    background-color: transparent;
    text-align: center;
    font-size:30px;
    font-weight:bold;
    display:block;
}