12.2　使用CSS

现在CSS已经广泛应用于各种网页的制作当中，在CSS的配合下，HTML语言能发挥出更大的作用。

12.2.1　CSS的基本语法

CSS的语法结构仅由3部分组成，选择符、样式属性和值，基本语法如下：

image219_1

image01　选择符（Selector）指这组样式编码所要针对的对象，可以是一个XHTML标签，如body、hl；也可以是定义了特定id或class的标签，如#lay选择符表示选择<div id=lay>，即一个被指定了lay为id的对象。浏览器将对CSS选择符进行严格地解析，每一组样式均会被浏览器应用到对应的对象上。

image01　属性（Property）是CSS样式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。

image01　值（value）是指属性的值，形式有两种，一种是指定范围的值，如float属性，只能使用left、right、none三种值。另一种为数值，如width能够使用0～9999px，或其他数学单位来指定。

在实际应用中，往往使用以下类似的应用形式：

image219_2

表示选择符为body，即选择了页面中的<body>标签，属性为background-color，这个属性用于控制对象的背景色，而值为red。页面中的body对象的背景色通过使用这组CSS编码，被定义为红色。

除了单个属性的定义，同样可以为一个标签定义一个甚至更多个属性定义，每个属性之间用分号隔开。

12.2.2　添加CSS的方法

添加CSS有4种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。下面分别进行介绍。

1．链接外部样式表

链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件，<link>标记必须放到页面的<head>标签内。这种方法最适合大型网站的CSS样式定义。如下：

image220_1

上面这个例子表示浏览器从slstyle.css文件中以文档格式读出定义的样式表。rel=stylesheet是指在页面中使用外部的样式表，type=text/css是指文件的类型是样式表文件，href=slstyle.css是文件所在的位置。

一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都随着改变。在制作大量相同样式页面的网站时，它非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

2．内部样式表

内部样式表一般位于HTML文件的头部，即<head>与</head>标签内，并且以<style>开始，以</style>结束，这些定义的样式就可应用到页面中。下面的实例就是使用<style>标记创建的内部样式表。

image220_2

3．导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import。看下面这个实例。

image221_1

此例中@import slstyle.css表示导入slstyle.css样式表，注意使用时外部样式表的路径、方法和链接外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它是相当于存在于内部样式表中。

4．内嵌样式

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单地对某个元素单独定义样式，它主要是在body内实现。内嵌样式的使用是直接在HTML标记里添加style参数，而style参数的内容就是CSS的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。

如：

image221_2

这种方法使用比较简单，显示很直观，无法发挥样式表的优势，因此不推荐使用。