当一个网页文件具有单一的样式时，可以使用内嵌样式表。但是，如果多个网页都使用同一个样式表，这时就应该采用外部样式表。

1.链接样式表文件

如果要应用一个（或一组）样式到多个XHTML文档中，首先要建立包含样式说明的外部样式表文件（.css），然后在XHTML文件中用＜link＞标记链接到这个样式表文件，＜link＞标记必须放到XHTML文件的＜head＞...＜/head＞标记区域中。其格式为：

＜head＞

……

＜link rel="stylesheet"href="样式表文件名.css"type="text/css"/＞

……

＜/head＞

说明：

（1）＜link＞标记表示浏览器从“样式表文件名.css”文件中读出定义的样式表。

（2）rel="stylesheet"属性定义在网页中使用外部样式表。

（3）type="text/css"属性定义文件的类型是样式表文本。

（4）href属性用于定义.css文件的URL。

2.样式表文件

样式表文件可以用任何文本编辑器（如“记事本”）编辑，内容是定义的样式表，一般样式表文件的扩展名为.css。样式表文件中不能包含XHTML标记。

样式表文件的格式为：

选择符1｛属性：属性值；属性：属性值；……｝/＊注释内容＊/

选择符2｛属性：属性值；属性：属性值；……｝

……

选择符n｛属性：属性值；属性：属性值；……｝

应用CSS文档的最大好处，是可以在每个XHTML文档中引用这个CSS文档，从而可使整个站点的XHTML文档在风格上保持一致；当改变这个样式表文件时，所有网页的样式都随之改变。这在制作大量相同样式网页的网站时非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。浏览器显示时会保存外部样式表文件到缓冲区，从而加快了显示网页的速度。

【例7-4】链接到外部样式表文件。

在一个XHTML文件中链接到一个外部的样式表文件，至少需要两个文档，一个是XHTML文档，另一个是CSS文档。

XHTML文件名为ex7-4.html，文档内容为：

＜！--文件名：ex7-4.html--＞

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"(www.daowen.com)

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"＞

＜head＞

＜meta http-equiv="Content-Type"content=text/html；charset=gb2312"/＞

＜title＞链接到外部样式表文件＜/title＞

＜link rel="stylesheet"href="exstyle.css"type="text/css"/＞

＜/head＞

＜body＞

＜body＞

＜h3＞赞扬＜/h3＞

＜hr＞

＜p＞一个朋友邀请一个了不起的品酒师去他家，想给这人看看他的收藏。他想得到这个人的赞赏，就拿出一种最名贵的酒。那人品尝了一下，却保持沉默。他没有说任何话，甚至不说它是好的。那个朋友觉得受了伤害，然后他又拿出一种非常粗糙的普通的酒。那位朋友品尝了一下说：“非常、非常好，很好！”收藏家糊涂了，他说：“我被搞糊涂了，我给你最稀有、最名贵的酒，你保持沉默；但对这种普通的酒你却说：‘非常、非常好！’”鉴赏家说：“对第一种酒，没有人需要说什么，它本身已经说明；但对第二种，必须有人赞扬它，不然它会受挫！”＜/p＞

＜/body＞

＜/html＞

CSS文件名为exstyle.css，文档内容为：

/*文件名：exstyle.css*/

h3｛color：blue；text-align：center｝/*定义h3为红色；居中*/

p｛font-size：14pt；color：blue；background-color：#FFFF00；text-indent：2em｝

/*定义段落字号为14pt，蓝色，背景为黄色，文本缩进2个字符*/

hr｛color：green；width：85%｝/*水平线颜色为绿色，长度是浏览器窗口的85%*/

body｛background-image：url（"ph1.jpg"）｝/*网页的背景图片*/

由于本例在CSS文档中用到了图片文件phl.jpg，因此在当前路径下要有该图片文件。本例在浏览器中的显示效果如图7-6所示。

图7-6　链接外部样式表文件