2.4 CSS的使用
在正式学习CSS众多样式规则前，需要先了解CSS的编写方式、基础的语法以及如何将CSS应用到HTML文档中，还需要理解CSS中“层叠”的含义。
2.4.1 编写CSS
CSS可以写在HTML文档中，也可独立地以文件形式保存，这里介绍如何编写一个独立的CSS文件。
一个CSS文件其本质就是一个拥有.css扩展名的文本文件，可利用任何一个文本编辑器编写，最简单的方式是使用系统自带的文本编辑器。有不少专业代码编辑器支持CSS的编写，能提供例如语法突出显示及代码提示的功能，这会让编写CSS更轻松，目前支持HTML编写的编辑器也都支持CSS的编写。
利用文本编辑器来创建一个CSS文件的方法如下。
第一步，启动文本编辑器，并输入【例2-3】中的示例代码。
【例2-3】 创建CSS文件stylesheet.css。
输入后的效果如图2-1所示。
第二步，将文件另存为“stylesheet.css”文件。这样就得到了自己编写的第一个CSS文件。
图2-1 一个简单的CSS样式表文件
2.4.2 CSS基础语法
CSS是样式规则的集合，包含一条样式规则的CSS如下所示。
上述样式规则包含如下几个部分。
● 选择器（Selector）：由它指定该条规则应用于HTML文档的哪些元素，多个选择器之间用逗号“，”分开。
● 样式声明（Declaration）：样式声明是样式规则中｛｝括起来的部分，用来具体设定元素的样式。一条样式声明包括“属性（Property）”和“值（Value）”两个部分，“属性”是希望设置的样式属性（Style Attribute），“值”是描述该样式的展示方式，属性和值之间用冒号（：）分开，多条样式声明之间用分号（；）隔开。以【例2-3】中建立的CSS文件为例来进行分析。
在stylesheet.css文件中定义了两条样式规则，第一条样式规则如下。
第一条样式规则的选择器是“h1”，它代表该样式规则将应用于HTML文档一级标题。
该样式规则包含两条样式声明，第一条样式声明为：
其中“color”是属性，代表设定的样式是“颜色”，“red”是该属性的值，代表希望将“颜色”设为“红色”。
第二条样式声明为：
其“属性”是“font-size”，“值”是“15px”，代表将一级标题的字体大小设为15px。
总的来说，第一条样式规则是将HTML文档中的一级标题的字体颜色设为红色，同时将字体大小设为15px。
继续分析第二条样式规则。
第二条样式规则的“选择器”是“p”，表示该样式规则是为HTML文档中的段落设置样式。它包含了三条样式声明，其“属性”和“值”的说明如表2-1所示。
表2-1 样式属性及其值
2.4.3 应用CSS
要用写好的样式表来控制HTML文档的展示，还需将样式表应用到HTML文档中，可以通过几种不同的方式在HTML文档中应用CSS，每种方式都有自己的优点和缺点。选择正确的方法非常重要，因为它可以减少工作量，还可以提高页面访问的速度。
由于CSS样式表有不同的编写方式（写在HTML文档内部或是单独的CSS文件），在网页中应用CSS样式表的方法也有所不同，可分为以下四种。
● 在HTML标签中定义行内样式（In-line）。
● 在HTML文档中定义嵌入式样式表（Embedded）。
● 在HTML文档中通过链接加载外部的样式表（Linked）。
● 在HTML文档导入外部的样式表（Imported）。
下面对这四种方法分别加以介绍。
（1）在HTML标签中定义行内样式
若只需要修改HTML文档中某个元素的样式，可以不需要独立的CSS文件，而是直接在标签的style属性中加入所需的样式声明，这种方式又称行内设定，方法如下。
上述代码就是直接在<h1>标签的style属性中加入了一条样式声明，通过该样式声明将一级标题颜色设为红色，字体大小设为15px。
行内样式的优点是设置方便，但缺点是：样式声明与HTML内容混在一起，当样式声明较多时会使代码难以阅读；由于这种设定只对当前元素起作用，不影响其他相同类型的元素，当需要为大量元素设置样式时，不得不多次重复进行样式设置。这种方式没有体现出CSS的优势，一般不推荐使用。
（2）在HTML文档中定义嵌入式样式表
嵌入式样式表同样没有将样式规则放在单独的CSS文件中，而是在HTML文档头部，即<head>和</head>标签之间用一组样式标签（<style></style>）来包含所需样式规则，如下例所示。
【例2-4】 嵌入式样式表示例。
用此方法定义的样式规则对整个文档中<h1><p>元素都起作用。
嵌入式样式表的优点是实现了样式规则与HTML内容的分离，使代码易于阅读，并且可以批量地为相同类型的标签设置样式。不足之处在于共享性不好，因为必须在每个页面中都包含样式规则，而且一旦要修改某个样式时，需要重复进行样式修改。
（3）在HTML文档中链接一个外部样式表文件
一个独立的样式表文件可以作为一个样式模板应用于多个Web文档。因此，当许多网页需要有相同的外观设计时（经常会有这种情况），则可将样式部分独立出来形成一个CSS文件。这样，这些网页就可以用外部链接的方式套用这些样式了，链接一个外部样式表文件的方法如下。
● 将所有样式规则组合在一起，保存到扩展名为.css的CSS文件中。
● 在HTML网页的<head>和</head>标签之间加上如下格式的链接标签。
这样就可以在HTML网页上使用CSS文件中定义的样式规则了。
如果有多个样式文件要使用，只要在每一行加入一个<link>标签即可。
以链接方式引入外部样式表是目前最受欢迎的CSS引入方式，具有结构清晰、复用性好的特点。
（4）在HTML文档中导入一个外部样式表
使用＠import关键词从外部样式表文件中导入样式表，具体的方式是在网页的<head>和</head>标签之间，其他嵌入式样式表之上，加上如下标签。
无论是导入外部样式表还是链接外部样式表都需要浏览器在展示HTML文档前加载外部的样式表，在需要加载多个外部样式表的情况下，链接外部样式表的并行加载能力高于导入外部样式表，具有较快的页面访问速度，因此推荐使用链接外部样式表的方式为HTML文档设置样式。
2.4.4 样式的层次结构
CSS之所以叫作层叠（Cascading）样式表，是指可以对一个元素多次设置样式声明，而这些样式声明形成一种层次结构，样式声明不冲突的部分，将共同作用于元素；对于冲突的部分，上层的样式声明将覆盖下层的样式声明。就像堆叠印有图案的透明塑料片一样，最后看到的图案是上层图案覆盖下层图案后形成的。那么样式声明的层叠顺序是怎么确定的呢？
样式声明的层叠顺序是根据样式声明在HTML文档中所处位置的先后确定的，越靠近HTML元素的样式声明层级越高。
下面举例来说明样式声明的层叠顺序。
【例2-5】 以四种方式应用CSS。
其中link.css文件内容如下。
import.css文件内容如下。
在【例2-5】所示的HTML文档中，为h1声明了行内样式，声明其颜色为黄色，同时通过定义的嵌入式样式表声明h1、h2的颜色为红色，通过链接的外部样式表声明h1、h2、h3的颜色为黑色，通过引入的外部样式表声明h1、h2、h3、h4的颜色为紫色。
上述样式声明中，离元素最近的是行内样式中的样式声明，第二近的是嵌入式样式表中的样式声明，第三近的是链接样式表中的样式声明，第四近的是导入外部样式表中的样式声明。因此可分析得出，层次结构是行内样式声明>嵌入式的样式声明>链接的外部样式声明>导入的外部样式声明。相对应的结果就是h1为黄色，h2为红色，h3为黑色，h4为紫色。可以浏览HTML文档来进行验证。