CSS 构造块

样式表中的每条规则都有两个主要部分：选 择 器（selector） 和 声 明 块（declaration block）。选择器决定哪些元素受到影响；声明块由一个或多个属性 - 值对（每个属性 - 值对构成一条声明，declaration）组成。
构造样式规则的步骤
(1) 输入selector，这里的selector 表示希望进行格式化的元素。
(2) 输入 {（前花括号）开始声明块。
(3) 输入property:value;，其中property是 CSS 属性的名称，描述要应用哪种格式；value 是该属性允许的选项之一。
(4) 根据需要，重复第 (3) 步。通常一行输入一个 property: value（一条声明），但这并非强制要求。
(5) 输入 }，结束声明块和样式规则。

为样式规则添加注释
(1) 在样式表中，输入 /* 开始注释。
(2) 输入注释。
(3) 输入 */ 结束注释。

继承（inheritance）是 CSS 里一个很重要的概念。浏览器会将这份 HTML 理解为文档树。文档树有助于你理解 CSS。原因是，当你为某个元素应用 CSS 属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。也就是说，这些下层的元素继承了其祖先元素的属性。只不过，它们继承的可不是冷冰冰的钞票，而是颜色、字体大小这样的东西。

哪些属性会被继承
以下是会被继承的 CSS 属性，我们按照类型对其进行了分组。这些属性中的大多数都将
在本书后续章节进行讲解，不过你可以根据它们的名称猜出其作用。
◎ 文本
color（颜色，a 元素除外）
direction（方向）
font（字体）
font-family（字体系列）
font-size（字体大小）
font-style（用于设置斜体）
font-variant（用于设置小型大写字母）
font-weight（用于设置粗体）
letter-spacing（字母间距）
line-height（行高）
text-align（用于设置对齐方式）
text-indent（用于设置首行缩进）
text-transform（用于修改大小写）
visibility（可见性）
white-space（用于指定如何处理空格）
word-spacing（字间距）
◎ 列表
list-style（列表样式）
list-style-image（用于为列表指定定制的标记）
list-style-position（用于确定列表标记的位置）
list-style-type（用于设置列表的标记）
◎ 表格
border-collapse（用于控制表格相邻单元格的边框是否合并为单一边框）
border-spacing（用于指定表格边框之间的空隙大小）
caption-side（用于设置表格标题的位置）
empty-cells（用于设置是否显示表格中的空单元格）
◎ 页面设置（对于印刷物）
orphans（用于设置当元素内部发生分页时在页面底部需要保留的最少行数）
page-break-inside（用于设置元素内部的分页方式）
widows（用于设置当元素内部发生分页时在页面顶部需要保留的最少行数）
◎ 其他
cursor（鼠标指针）
quotes（用于指定引号样式）

样式的来源很多。每个浏览器都有其默认样式。不过，你可以用自己的样式覆盖它们或对它们进行补充。应用样式有三种方式：从一个或多个外部文件导入（推荐），插入到 HTML 文档的顶部，或直接应用于代码中特定的 HTML 元素上（不过，应该尽可能地避免这样做）。
一条规则定义了一个元素的颜色，而另一条规则定义了它的宽度，这两条规则会有效结合，一起应用到元素上。

有时候多条规则会定义元素的同一个属性，CSS 用层叠的原则来考虑样式声明，从而判断相互冲突的规则中哪个规则应该起作用。首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。不要受这些术语的影响，你只要去试，就能明白 CSS 决定该应用哪些样式以及何时应用这些样式的方式。

1. 特殊性
   特殊性规则指定选择器的具体程度。选择器越特殊，规则就越强。遇到冲突时，优先应用特殊性强的规则。
2. 顺序
   有时候，特殊性还不足以判断在相互冲突的规则中应该优先应用哪一个。在这种情况下，规则的顺序就可以起到决定作用：晚出现的优先级高。例如，直接应用在 HTML 元素上的规则（不推荐使用这种做法）被认为比外部样式表中或插在 HTML 文档顶部的特殊性相同的规则出现得更晚（因此优先级更高）。
3. 重要性
   如果这还不够，可以声明一条特殊的规则覆盖整个系统中的规则，这条规则的重要程度要比其他所有规则高。也可以在某条声明的末尾加上 ！important，比如 p{ color: orange !important; }（除非是在特殊情况下，否则不推荐使用这种方法）。
4. 小结
   你编写的样式会覆盖浏览器的默认样式。 当两个或两个以上的样式发生冲突时，会应用特殊性高的样式声明，不管它位于样式表中的哪个位置。如果两个或两个以上的规则拥有相同的特殊性，则使用后出现的规则，除非其中某条规则标记了 !important。如果某元素没有直接指定某条规则，则使用继承的值（如果有的话）。

每个 CSS 属性对于它可以接受哪些值都有不同的规定。有的属性只能接受预定义的值。有的属性接受数字、整数、相对值、百分数、URL 或者颜色。有的属性可以接受多种类型的值。

1. inherit
   对于任何属性，如果希望显式地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用 inherit 值。例如，假设有一个 article 元素，其中包含几个段落。article 元素设置了一个边框。边框通常不会被继承，因此 p { border: inherit; } 这条规则可以让这些段落获得相同的边框样式。（在 IE8 之前的 Internet Explorer 版本中，大部分属性都不支持 inherit值，不过你大概也不需要支持那些大多数网站都不再支持的旧浏览器。）
2. 预定义的值
   大多数 CSS 属性都有一些可供使用的预定义值。例如，float 属性可被设为 left、right或 none。与 HTML 不同，不需要（也不能）将预定义的值放在引号里。实际上，大多数 CSS 值，无论是否为预定义的值，都不需要加引号。（也有一些例外，如超过一个单词的 font-family 名称，以及要生成的内容。）
3. 长度和百分数
   很多 CSS 属性的值是长度。所有长度都必须包含数字和单位，并且它们之间没有空格。例如 3em、10px。唯一的例外是 0，它可以带单位也可以不带。效果是一样的，因此 0 一般不带单位。
4. 纯数字
   只有极少数的 CSS 属性接受不带单位的数字，如 3、0.65。其中最常见的就是 line-height、z-index 和 opacity。
5. URL
   有的 CSS 属性允许开发人员指定另一个文 件（ 尤 其 是 图 像） 的 URL，backgroundimage 就是这样一个属性。在这种情况下，使用 url(file.ext)，其中 file.ext 是目标资源的路径和文件名。注意，规范指出，相对 URL 应该相对于样式表的位置而不是相对于 HTML 文档的位置。
6. CSS 颜色
   我们可以使用预定义颜色关键字或以十六进制（通常称为 hex）、RGB、HSL、RGBA、HSLA 等格式表示的值中为 CSS 属 性指定颜色。最后两种格式可以指定具有一定程度 alpha 透明度的颜色。HSL、RGBA 和HSLA 格式都是在 CSS3 中引入的。
7. RGB
   可以通过指定红、绿、蓝（这也是 RGB这一名称的由来）的量来构建自己的颜色。可以使用百分数、0 ～ 255 之间的数字来指定这三种颜色的值。例如，如果创建一种深紫色，可以使用 89 份红、127 份蓝、0 份绿。这个颜色可以写做 rgb(89, 0, 127)。
8. 十六进制数
   我把最常用的方法放在最后讲解。将这些数字值转化为十六进制，然后将它们合并到一起，再在前面加一个 #，就像 #59007F 这样。你心里可能想：“为什么不用十进制呢？”别慌，类似于 Photoshop 这样的工具在选择颜色时可以显示颜色的 RGB值，以及对应的十六进制数。此外你也可以上网搜索免费的转换工具（如输入 rgb to hex converter）。
9. 更多 CSS3 提供的指定颜色的方式：
   RGBA、HSLA 和 HSLCSS3 引入了另一种指定颜色的方式——HSL， 以 及 通 过 RGBA 和 HSLA 设 置 alpha透明度的能力。（使用十六进制记法无法指示 alpha 透明度。）