2.3 CSS样式表
视频讲解：光盘\TM\lx\2\03 CSS样式表．mp4
CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在CSS还没有引入到页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。
2.3.1 CSS规则
在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式如下：
选择符{属性：属性值；}
参数说明：
选择符：又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的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标记选择器，在该标记选择器中定义超链接的字体与颜色。代码如下：
<style>
a{
font-size:9px;
color:#F93;
}
</style>
2．类别选择器
使用标记选择器非常快捷，但却有一定的局限性。声明一个标记选择器后，页面中所有该标记的内容都会有相应的变化。假如页面中有3个<h2>标记，如果想要每个<h2>的显示效果都不一样，使用标记选择器就无法实现了，这时就需要引入类别选择器。
类别选择器的名称由用户自己定义，并以“.”开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明即可。
【例2.16】使用类别选择器控制页面中字体的样式。（实例位置：光盘\TM\sl\2\10）
关键代码如下：
//以下为定义的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>
图2.18 类别选择器控制页面文字样式
在上面的代码中，页面中的第一个<h2>标记应用了one选择器，第二个<h2>标记应用了two选项器，第三个<h2>标记应用了three选择器。运行结果如图2.18所示。
说明
在HTML标记中，不仅可以应用一种类别选择器，也可以应用多种类别选择器，这样可使HTML标记同时加载多个类别选择器的样式。在多种类别选择器之间，用空格进行分隔，例如“<h2 class="size color">”。
3.id选择器
id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但需要注意的是，由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。
命名id选择器要以“#”开始，后加HTML标记中的id属性值。
【例2.17】使用id选择器控制页面中字体的样式。关键代码如下：
<style> //定义id选择器
#frist{
font-size:18px
}
#second{
font-size:24px
}
#three{
font-size:36px
}
</style>
<body>
<p id="frist">id选择器</p> //在页面中定义标记，则自动应用样式
<p id="second">id选择器2</p>
<p id="three">id选择器3</p>
</body>
图2.19 使用id选择器控制页面文字大小
运行本实例，结果如图2.19所示。
2.3.3 在页面中包含CSS
在对CSS有了一定的了解后，下面介绍在页面中包含CSS样式的几种方式，其中包括行内样式、内嵌式和链接式。
1．行内样式
行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式比较容易令初学者接受，但是灵活性不强。
【例2.18】通过行内定义样式的形式，实现控制页面文字的颜色和大小。（实例位置：光盘\TM\sl\2\11）
关键代码如下：
<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.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>标记的样式。关键代码如下：
h1, h2, h3{ //定义CSS样式
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 通过链接形式引入CSS样式