彭　莹

[摘要]通过研究CSS层叠样式表的主要思想，结合具体实例介绍如何在网页设计中使用样式表的方法，使读者准确掌握CSS技术，并可进行实践运用。

[关键词]CSS 网页 级联样式表 HTML

中图分类号：TP3文献标识码：A文章编号：1671－7597（2009）0420048－01

一、引言

CSS是一种样式表（stylesheet）技术。也有的人称之为层叠样式表

（Cascading Stylesheet）。它的作用简单的说就是可以使你在同一页面里使用不同的超链接样式。用CSS仅仅改变一个文件就可以改变数百个网页的外观，个性化的表现而不损，这些都因为网页样式表的强大和灵活特性。

二、CSS与HTML的结合方式

一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中：

＜LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen＞

＜LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"＞

＜LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"＞

＜LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural＞

＜LINK＞标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。

外部样式表不能含有任何像＜HEAD＞或＜STYLE＞这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由

P {margin: 2em }

组成的文件就可以用作外部样式表了。

＜LINK＞标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有：

screen（缺省值），提交到计算机屏幕；

print，输出到打印机；

projection，提交到投影机；

aural，扬声器；

braille，提交到凸字触觉感知设备；

tty，电传打字机 （使用固定的字体）；

tv，电视机；

all，所有输出设备。

多样的媒体通过用逗号隔开的列表或值all指定。

Netscape Navigator 4.x错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA="screen,projection"会令到样式表被Navigator 4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x也忽略使用MEDIA=all声明的样式表。

REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet

指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个＜LINK＞标记，定义一个固定样式。

一个首选样式会自动被应用，就像例子中的第二个＜LINK＞标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。

交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个＜LINK＞标记定义一个交互样式，用户可以选择用来代替首选样式表。

注意现在的浏览器一般都缺乏选择交互样式的能力。

单一的样式也可以通过多个样式表给出：

＜LINK REL=StyleSheet HREF="basics.css" TITLE=”Contemporary"＞

＜LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"＞

＜LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"＞

在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。

当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。

三、CSS在网站中的应用实例

在设计网站的页面中，增加以下定义，会使页面有特殊的显示效果。

网站中CSS样式表使用：

huali {font-family: "宋体"; font-size: 12px; cursor: crosshair; font-style: normal; text-decoration: none; background-color: #FFFFFF; background-image: none; list-style-image: none}

.text {cursor: crosshair; filter: Mask(Color=#ff9900); font-size: 12px; font-style: normal; text-decoration: none}

在这个样式表中使用了：font-family:"宋体" ; font-size: 12px定义了网页文字的字体和大小，以避免因网页浏览器的设置改变而引起的网页字体和大小的变化，影响页面浏览者的信息浏览；cursor: crosshair定义了页面鼠标样式，在这里将它定义为十字型，以反映网页的总体设计思想；font-style: normal定义了网页字体风格，可以定义为普通、加粗、倾斜三种样式，background-color: #FFFFFF; background-image: none它们是对网页背景颜色和背景图片的设置。

四、结束语

本文结合实例对CSS进行了简明扼要的介绍，展现了CSS在网页设计中灵活、强大的功能，可以看到，在网页中使用CSS能达到三个目的：一是优化网页结构，显著减小网页文件的大小，使得网页浏览速度更快。二是网页的布局和样式的调整都可以在CSS文件中进行，不需要改动每个HTML文件，这对于维护一个大型网站很重要，能为网站维护人员节省大量时间和精力。三是轻松设计具有复杂布局的网页，使网页更美观。