[原]层叠样式表（CSS）的规则

    层叠样式表（CSS）类似于面向对象编程中的类，可以一次定义、重复使用，通过CSS有助于实现网站的统一布局。CSS不仅可以将样式信息与页面内容分离，还可以控制许多仅使用HTML无法控制恶属性。在《JavaScript DOM编程艺术》的笔记：CSS-DOM 一文中曾经介绍过CSS的若干规则，但内容不完整，而且表达以说明DOM的使用为主，本文的内容可作为补充。

一、概述
层叠样式表（CSS）是一组格式设置规则，用于控制网页内容的外观。通过使用CSS样式设置页面的格式可以把页面的内容与表示形式分离开。页面内容（即HTML代码）存放在HTML文件中，而用于定义代码表示形式的CSS规则存放在另一个文件（外部样式表）或HTML文档的另一部分（通常为网页首部）中。
将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易，而在进行更改时无须对每个页面上的每个属性都进行更新，还可以得到更加简练的HTML代码，缩短浏览器加载时间。
使用CSS可以非常灵活地控制页面的确切外观，还可以控制网页中块级元素的格式和定位。块级元素之一段独立的内容，在HTML中通常由一个新行分割，并在视觉上设置为块的格式。例如，h1标记、p标记和div标记都在网页上生成块级元素。对块级元素可以执行以下操作：为它们设置边距和边框，将它们放置在特定位置，向它们添加背景颜色，在它们周围设置浮动文本等。对块级元素进行操作的方法，实际上，就是使用CSS进行页面布局设置的方法。
术语“层叠”表示同一个页面元素应用多种样式的能力。对于同一个页面元素，可以创建多个CSS规则来表达其表示形式，所定义的样式向下“层叠”到页面元素，并最终实现想要的设计。
CSS的主要优点在于它提供了便利的更新功能，很容易为网站内的所有网页提供一致的外观和风格。当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。
CSS在Ajax开发中的作用是创建风格相同的页面布局，并提供随时修改部分页面元素样式的能力。

二、定义CSS规则
CSS样式表由一些规则组成，每个规则由选择符和属性声明两部分组成，其中，选择符用于标识格式元素（如p、h3标记、类名或id），属性声明则用于定义元素的样式。
定义CSS规则的语法如下：

属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号（:）分割，不同属性-值对用分号（;）分割。
当在HTML网页中定义CSS规则时，应把规则定义放在<style>与</style>标记之间；如果是在单独的CSS文件中定义规则，则不必使用<style>标记。

三、选择符的类型
定义CSS样式时，可以使用各种类型的选择符。选择符主要有以下几种类型。
1、类型选择符
类型选择符用于选择以特定HTML标记定义的页面元素。语法是：

其中，tagName表示某个HTML标记的名称。
使用特定的HTML标记作为选择符，可以对这个HTML标记的外观样式进行重新定义，由此定义的CSS样式将自动应用于页面中所有通过该标记定义的元素。
例如：

2、类选择符
类选择符用于选择具有特定class属性的页面元素。语法是：

其中，className指定类选择符的名称，tagName表示某个HTML标记名称。
使用“*”作为类选择符的前缀时，若要应用所定义的类样式，把元素的class属性设置为此选择符的名称即可。此类样式可以应用于所有页面元素。此处的型号可以省略。
若使用某个HTML标记作为类选择符的前缀时，对于要应用所定义的类样式，把元素的class属性设置为选择符的名称即可；这时，此类样式只能应用于页面上的特定HTML元素（由tagName指定，同时满足两个条件）。
例如：

3、id选择符
id选择符用于选择具有特定id属性的元素。语法是：

其中，idName指定id选择符的名称，tagName表示某个HTML标记名称。
其组合规则含义与类选择符相同，可对于某一id属性或同时满足特定标记的页面元素定义CSS规则。
例如：

4、包含选择符
包含选择符由E1和E2两个选择符组成，用于选择所有被E1包含的E2，也就是“与”的关系。语法是：

其中，E1和E2可以是HTML标记名称、类选择符或id选择符。该CSS规则只适用于，同时满足E1和E2选择的页面元素上。
例如：

5、选择符分组
若希望把同一个CSS规则应用于多个选择符，此时，应以逗号分隔的方式把那些选择符合并为主，它们之间是“或”的关系。语法是：

例如：

6、伪类选择符
CSS中的伪类概念延伸了CSS样式的表现形式，可作用与某些动作行为：

例如：

四、CSS样式表的位置
按照存储位置，CSS样式表分为内嵌样式表和外部样式表，前者包含在网页首部，后者存储在单独的样式表文件中，此外还可以再HTML元素中通过style属性直接设置各种CSS属性。
这部分的内容，请见：《JavaScript DOM编程艺术》的笔记：CSS-DOM 一文中的介绍。
※ 注意，对于同一页面元素，如果同时通过设置id、class和style属性应用了不同的CSS样式规则，则作用的优先顺序是：style属性最高，id属性次之，class属性更次之。

五、CSS单位应用
在定义CSS规则时，经常遇到对CSS属性选择单位的问题。
1、长度单位
长度单位是网页设计中最常用的单位。其可分为绝对长度单位和相对长度单位两种。
a、绝对长度单位
有：cm（厘米）、mm（毫米）、in（英寸）、点（pt）、pc（派卡）。它们之间的换算关系如下：

b、相对长度单位
有：px（像素）、em和ex。

2、百分比单位
它用百分号“%”表示。百分比值是相对另一个值而言的，这个参照值可以是长度单位或其他单位。对于每个可以使用百分比单位的属性，这个参照值通常就是该元素的字体大小。
例如：

其中，line-height属性指定段落文本的行高。若段落文本的字体大小为12pt，则行号就是12pt x 150% = 18pt。

3、颜色单位
在CSS中，有以下三种颜色单位：
a、#RRGGBB：三个两位十六进制正整数。这些正整数带的取值范围为00~FF。
b、rgb(R,G,B)：其中R、G、B分别表示红、绿、蓝的正整数或百分数。以上三个参数，正整数的取值范围为0~255；百分数值的取值范围为0.0%~100.0%。超出范围的数值将被截至最接近的取值极限。并非所有的浏览器都支持使用百分数值。
c、颜色名称：不同的浏览器会有不同的预定义颜色名称。它们与第一种单位有对应关系。

六、CSS属性
要通过CSS样式规则来控制网页的外观，就需要对各种各样的CSS属性进行设置。按照功能，CSS属性可以分为字体、背景、区块、方框、边框、列表、定位和扩展等8个类别。
七、参考资料
CSS属性列表 和 属性值含义
常用CSS缩写语法总结
CSS属性按字母顺序索引
CSS属性按功能顺序索引