2.2 CSS样式表
CSS（Cascading Style Sheet）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在CSS还没有引入到页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如，要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。
2.2.1 CSS规则
CSS规则
在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式为：
选择符{属性：属性值;}
语法说明如下。
□ 选择符：又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
□ 属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS属性的使用变得更加复杂。
□ 属性值：为某属性的有效值。属性与属性值之间以“：”号分隔。当有多个属性时，使用“；”分隔。图2-17所示为大家标注了CSS语法中的选择器、属性与属性值。
图2-17 CSS语法
2.2.2 CSS选择器
CSS选择器
CSS选择器常用的是标记选择器、类别选择器、包含选择器、ID选择器等。使用选择器即可对不同的HTML标签进行控制，从而实现各种效果。下面对各种选择器进行详细介绍。
1. 标记选择器
大家知道HTML页面是由很多标记组成，例如，图片标记<img>、超链接标记<a>、表格标记<table>等。而CSS标记选择器就是声明页面中哪些标记采用哪些CSS样式。例如，a选择器，就是用于声明页面中所有<a>标记的样式风格。
【例2-13】 定义a标记选择器，在该标记选择器中定义超链接的字体与颜色。
<style>
a{
font-size:9px;
color:#F93;
}
</style>
2. 类别选择器
使用标记选择器非常快捷，但是会有一定的局限性，页面如果声明标记选择器，那么页面中所有该标记内容会有相应的变化。假如页面中有3个<h2>标记，如果想要每个<h2>的显示效果都不一样，使用标记选择器就无法实现了，这时就需要引入类别选择器。
类别选择器的名称由用户自己定义，并以“。”号开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明即可。
【例2-14】 使用类别选择器控制页面中字体的样式。
<!--以下为定义的CSS样式-->
<style>
.one{ <!-定义类名为one的类别选择器->
font-family:宋体; <!--设置字体-->
font-size:24px; <!--设置字体大小-->
color:red; <!--设置字体颜色-->
}
.two{
font-family:宋体;
font-size:16px;
color:red;
}
.three{
font-family:宋体;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h2 class="one"> 应用了选择器one </h2><!--定义样式后页面会自动加载样式-->
<p> 正文内容1 </p>
<h2 class="two">应用了选择器two</h2>
<p>正文内容2 </p>
<h2 class="three">应用了选择器three </h2>
<p>正文内容3 </p>
</body>
在上面的代码中，页面中的第一个<h2>标记应用了one选择器，第二个<h2>标记应用了two，第三个<h2>标记应用了three选择器，运行结果如图2-18所示。
图2-18 类别选择器控制页面文字样式
说明
在HTML标记中，不仅可以应用一种类别选择器，也可以应用多种类别选择器，这样可使HTML标记同时加载多个类别选择器的样式。在使用多种类别选择器之间用空格进行分割即可。例如，“<h2 class="size color">”。
3. ID选择器
ID选择器是通过HTML页面中的ID属性来进行选择增添样式，与类别选择器的基本相同，但需要注意的是，由于HTML页面中不能包含有两个相同的ID标记，因此定义的ID选择器也就只能被使用一次。
命名ID选择器要以“#”号开始，后加HTML标记中的ID属性值。
【例2-15】 使用ID选择器控制页面中字体的样式。
<style> <!--定义ID选择器-->
#first{
font-size:18px
}
#second{
font-size:24px
}
#three{
font-size:36px
}
</style>
<body>
<p id="first">ID选择器</p> <!-在页面定义标记，则自动应用样式->
<p id="second">ID选择器2</p>
<p id="three">ID选择器3</p>
</body>
运行本段代码，结果如图2-19所示。
图2-19 使用ID选择器控制页面文字大小
2.2.3 在页面中包含CSS
在页面中包含CSS
在对CSS有了一定了解后，下面为大家介绍如何实现在页面中包含CSS样式的几种方式，其中包括行内样式、内嵌式、链接式和导入式。
1. 行内样式
行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式也是比较容易令初学者接受，但是灵活性不强。
【例2-16】 通过行内定义样式的形式，实现控制页面文字的颜色和大小。
<table width="200" border="1" align="center"> <!--在页面中定义表格--> <tr> <td><p style="color:#F00; font-size:36px;">行内样式一</p></td><%--在页面文字中定义CSS样式--%> </tr> <tr> <td><p style="color:#F00; font-size:24px;">行内样式二</p></td> </tr> <tr> <td><p style="color:#F00; font-size:18px;">行内样式三</p></td> </tr> <tr> <td><p style="color:#F00; font-size:14px;">行内样式四</p></td> </tr> </table>
运行本实例，运行结果如图2-20所示。
图2-20 定义行内样式
2. 内嵌式样式表
内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中。本章中的例2-14就是使用这种内嵌样式表的模式。内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。
与行内样式相比，内嵌式样式表更加便于维护，但是如果每个网站都不可能由一个页面构成，而每个页面中相同的HTML标记都要求有相同的样式，此时使用内嵌式样式表就显得比较笨重，而用链接式样式表解决了这一问题。
3. 链接式样式表
链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。
<link>标记的语法结构如下：
<link rel=’stylesheet’ href=’path’ type=’text/css’>
参数说明如下。
□ rel：定义外部文档和调用文档间的关系。
□ href：CSS文档的绝对或相对路径。
□ type：指的是外部文件的MIME类型。
【例2-17】 通过链接式样式表的形式在页面中引入CSS样式。
（1）创建名称为css.css的样式表，在该样式表中定义页面中<h1>、<h2>、<h3>、<p>标记的样式，代码如下：
h1,h2,h3{ /*定义CS样式 */
color:#6CFw;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p{
color:#F0Cs; /*定义颜色*/
font-weight:200;
font-size:24px; /*设置字体大小*/
}
（2）在页面中通过<link>标记将CSS样式表引入到页面中，此时CSS样式表定义的内容将自动加载到页面中，代码如下：
<title>通过链接形式引入CSS样式</title> <link href="css.css"/> <!--页面引入CSS样式表--> </head> <body> <h2>页面文字一</h2> <!--在页面中添加文字--> <p>页面文字二</p> </body>
运行程序，结果如图2-21所示。
图2-21 使用链接式引入样式表
说明
在这3种样式同时作用于同一个区域时，浏览器会优先执行行内样式，其次是内嵌样式，最后才是链接式样式。