继承

继承即后代元素拥有父元素的样式性质。这部分属性不仅可以应用到指定的元素，还会应用到其后代元素。

CSS3中具有继承性的属性

表格

border-collapse：设置表格的边框是否被合并为一个单一的边框
border-spacing：表格的边框间距
caption-side：表标题相对于表框的放置位置

字体

font-family：文本字体
font-size：文本字号
font-style：文本字体风格
font-variant：设置小型大写字母的字体显示文本
font-weight：文本字重
font：文字字体复合属性

文本

color：文本颜色
direction：文本方向
letter-spacing：字符间距
line-height：行高
white-space：设置如何处理元素内的空白
word-spacing：字间距
text-align：设置元素中的文本的水平对齐方式
text-indent：首行文本的缩进
text-transform：控制文本的大小写

列表

list-style-image：使用图像来替换列表标记
list-style-position：设置在何处列表标记位置
list-style-type：设置列表标记的样式
list-style：列表标记复合属性

其他

cursor：光标形状
quotes：设置嵌套引用的引号类型
visibility：规定元素是否可见

参考来源：Full property table

层叠

HTML 中的一个元素可以有多个选择器及多个样式，而 CSS 层叠规则则会确定最终哪条样式会起作用。

样式来源

样式有很多来源，分别为浏览器默认样式，用户样式、链接样式、嵌入样式和行内样式。

浏览器默认样式、用户样式

每种浏览器都有一个默认的样式表，在没有任何 CSS 样式的情况下，元素表现的样式即浏览器的默认样式。
用户样式是十分少见的，由用户自行添加，主要针对有特殊需求的用户。

行内样式

写在 HTML 标签的 style 属性里。

1	<p style="border:1ps solid black;color:gray;">行内样式</p>

嵌入样式

写在 HTML 的 head 元素中。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        p {
            border: 1px solid black;
            color: gray;
        }
    </style>
</head>
<body>
    <p>嵌入样式</p>
</body>
</html>

链接样式

把 CSS 样式写在一个单独的文件里。并在 HTML 页面链接样式表。
style.css

p {
    border: 1px solid black;
    color: gray;
}

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <p>链接样式</p>
</body>
</html>

从其他样式表导入样式

在样式表里使用@import url(style.css)方式链接其他样式表，且 @import 必须位于样式表顶端，样式表自己的样式定义在其后。

@import "style.css";
p {
    border: 1px solid black;
    color: gray;
}

声明样式表字符编码

在 CSS 样式表中可以出现 @import 之前的只有 @charset 语句。用于声明样式表所用的字符编码。

@charset "UTF-8";
@import "style.css";
p {
    border: 1px solid black;
    color: gray;
}

规则

规则一：有!important的声明 > 不带!important的声明。
规则二：按来源排序，行内样式 > 嵌入样式 > 链接样式 > 用户样式 > 浏览器默认样式
规则三：按特指度排序，ID 选择符 > 类选择 > 标签名选择符
规则四：特指度 > 来源
规则五：后面出现的声明 > 前面出现的声明。（设定样式 > 继承样式）

特指度

特指度（specificity）用来表示某一条规则有多明确。越明确的规则权重越大。特指度可以使用 “ICE” 公式来计算。其结果并不是一个三位数，如果某个样式计算出 “I” 的值较大，则其特指度更高；当对于某个样式计算出 “I” 值相等时才会比较 “C” 值，此时 “C” 值较大的特指度更高；以此类推。
用 “ICE” 公式计算三个值：I - C - E
计分方法：

选择符中每有一个 ID，就在 I 的位置上加 1
选择符中每有一个类，就在 C 的位置上加 1
选择符中每有一个标签名，就在 E 的位置上加 1；

举例：

选择符	特指度
`*`	`0-0-0`
`div`	`0-0-1`
`#box`	`1-0-0`
`.box`	`0-1-0`
`#box .box div h1`	`1-1-2`
`#box .box div>h1`	`1-1-2`