2.3 CSS样式表
CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，它的全称是Cascading Style Sheet。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在CSS还没有引入页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。
2.3.1 CSS规则
在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式如下：
选择符{属性:属性值;}
语法说明如下。
选择符：又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS属性的使用变得更加复杂。
属性值：为某属性的有效值。属性与属性值之间以“:”号分隔。当有多个属性时，使用“;”分隔。图2.17为大家标注了CSS语法中的选择器、属性与属性值。
图2.17 CSS语法
2.3.2 CSS选择器
CSS选择器常用的是标记选择器、类别选择器、id选择器等。使用选择器即可对不同的HTML标签进行控制，从而实现各种效果。下面对各种选择器进行详细介绍。
1．标记选择器
HTML页面是由很多标记组成的，例如图像标记<img>、超链接标记<a>、表格标记<table>等。而CSS标记选择器就是声明页面中哪些标记采用哪些CSS样式。例如a选择器，就是用于声明页面中所有<a>标记的样式风格。
【例2.15】 定义a标记选择器，在该标记选择器中定义超链接的字体与颜色。
2．类别选择器
使用标记选择器非常快捷，但是会有一定的局限性，如果声明标记选择器，那么页面中所有该标记内容会有相应的变化。假如页面中有3个<h2>标记，如果想要每个<h2>的显示效果都不一样，使用标记选择器就无法实现了，这时就需要引入类别选择器。
类别选择器的名称由用户自己定义，并以“.”号开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明即可。
【例2.16】 使用类别选择器控制页面中字体的样式。（实例位置：资源包\TM\sl\2\10）
在上面的代码中，页面中的第一个<h2>标记应用了one选择器，第二个<h2>标记应用了two选项器，第3个<h2>标记应用了three选择器。运行结果如图2.18所示。
图2.18 类别选择器控制页面文字样式
说明
在HTML标记中，不仅可以应用一种类别选择器，也可以应用多种类别选择器，这样可使HTML标记同时加载多个类别选择器的样式。在多种类别选择器之间用空格进行分割即可，例如“<h2 class="size color">”。
3．id选择器
id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但需要注意的是，由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。
命名id选择器要以“#”号开始，后加HTML标记中的id属性值。
【例2.17】 使用id选择器控制页面中字体的样式。
运行本段代码，结果如图2.19所示。
图2.19 使用id选择器控制页面文字大小
2.3.3 在页面中包含CSS
在对CSS有了一定的了解后，下面介绍如何实现在页面中包含CSS样式的几种方式，其中包括行内样式、内嵌式和链接式。
1．行内样式
行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式比较容易被初学者接受，但是灵活性不强。
【例2.18】 通过行内定义样式的形式，实现控制页面文字的颜色和大小。（实例位置：资源包\TM\sl\2\11）
运行本实例，结果如图2.20所示。
图2.20 定义行内样式
2．内嵌式
内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中。本章中的例2.16就是使用这种内嵌样式表的模式。内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。
与行内样式相比，内嵌式样式表更加便于维护。但是每个网站都不可能由一个页面构成，而每个页面中相同的HTML标记又都要求有相同的样式，此时使用内嵌式样式表就显得比较笨重，而使用链接式样式表即可轻松解决这一问题。
3．链接式
链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。
<link>标记的语法结构如下：
<link rel='stylesheet' href='path' type='text/css'>
参数说明：
rel：定义外部文档和调用文档间的关系。
href：CSS文档的绝对或相对路径。
type：指的是外部文件的MIME类型。
【例2.19】 通过链接式样式表的形式在页面中引入CSS样式。（实例位置：资源包\TM\sl\2\12）
（1）创建名称为css.css的样式表，在该样式表中定义页面中<h1>、<h2>、<h3>和<p>标记的样式。代码如下：
（2）在页面中通过<link>标记将CSS样式表引入页面中，此时CSS样式表定义的内容将自动加载到页面中。代码如下：
运行程序，结果如图2.21所示。
图2.21 通过链接形式引入CSS样式