4.2 CSS的引用方法
15 在HTML中使用CSS的方法
要想在浏览器中显示出样式表的效果，就要让浏览器识别并调用样式表。当浏览器读取样式表时，要依照文本格式来读。这里介绍在页面中引入CSS样式表的4种方法：定义行内样式、定义内部样式表、链入外部样式表和导入外部样式表。
4.2.1 定义行内样式
行内样式是引用CSS样式表的各种方法中最直接的一种。定义行内样式就是通过直接设置各个元素的style属性，从而达到设置样式的目的。这样的设置方式，使得各个元素都有自己的独立样式，但是会使整个页面变得更加臃肿。即便两个元素的样式是一模一样的，用户也需要写两遍。
定义行内样式可以很简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。行内样式在style属性中定义，style属性值可以包含任何CSS样式声明，格式如下。
需要说明的是，由于行内样式将表现和内容混在一起，不符合Web标准，因此慎用这种方法。当样式仅需要在一个元素上应用一次时可以使用行内样式。
【例4-1】使用行内样式将样式表的功能加入到网页。本例在浏览器中的显示效果如图4-1所示。
图4-1 行内样式示例
【说明】代码中第1个段落标签被直接定义了style属性，此行文字大小是18px，颜色为红色；而第2个段落标签没有被定义，将按照默认的设置显示文字样式。
4.2.2 定义内部样式表
内部样式表是指样式表的定义处于HTML文件一个单独的区域，与HTML的具体标签分离开来，从而可以实现对整个页面范围的内容的显示进行统一的控制与管理。与定义行内样式只能对所在标签进行样式设置不同，内部样式表处于页面的<head>与</head>标签之间。单个页面需要应用样式时，最好使用内部样式表。定义内部样式表的格式如下。
<style>…</style>标签用来说明所要定义的样式，type属性指定使用CSS的语法来定义，当然也可以指定使用像JavaScript之类的语法来定义。属性和属性值之间用冒号“:”隔开，各属性之间用分号“;”隔开。
<!-- … -->的作用是应对旧版本浏览器不支持CSS的情况，把<style>…</style>的内容以注释的形式表示，这样不支持CSS的浏览器会自动略过此段内容。
样式名可以使用HTML标签的名称，所有HTML标签都可以作为CSS样式名使用。
【例4-2】 使用内部样式表将样式表的功能加入到网页。本例在浏览器中的显示效果如图4-2所示。
图4-2 内部样式表示例
【说明】代码中第1个段落标签使用内部样式表中定义的.red类，此行文字大小为18px，颜色为红色；而第2个段落标签没有被定义，将按照默认的设置显示文字样式。
4.2.3 链入外部样式表
外部样式表通过在某个HTML页面中添加链接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用，这就是它最大的优点。如果说内部样式表在总体上定义了一个网页的显示方式，那么外部样式表可以说在总体上定义了一个网站的显示方式。
外部样式表把声明的样式放在样式文件中，当页面需要使用样式时，通过<link>标签链接外部样式表文件。使用外部样式表，只须改变一个样式文件就能改变整个站点的外观。
1.用<link>标签链接外部样式表文件
<link>标签必须放到页面的<head>…</head>标签对内。其格式如下。
其中，<link>标签表示浏览器从“外部样式表文件名.css”文件中以文档格式读出定义的样式表。rel="stylesheet"属性定义在网页中使用外部的样式表，type="text/css"属性定义文件的类型为样式表文件，href属性用于定义CSS文件的URL地址。
2.样式表文件的格式
样式表文件可以用任何文本编辑器（如记事本）打开并编辑，一般样式表文件的扩展名为.css。样式表文件的内容是定义的样式表，不包含HTML标签。样式表文件的格式如下。
一个外部样式表文件可以应用于多个页面。在修改外部样式表时，引用它的所有外部页面也会自动地更新。在设计者制作大量相同样式页面的网站时，外部样式表文件非常有用，不仅减少了重复的工作量，而且有利于以后的修改，浏览时也减少了重复下载的代码，加快了显示网页的速度。
【例4-3】使用链入外部样式表将样式表的功能加入到网页，链入外部样式表文件至少需要两个文件，一个是HTML文件，另一个是CSS文件。本例在浏览器中的显示效果如图4-3所示。
CSS文件名为style.css，存放于文件夹style中，代码如下。
本例网页结构文件4-3.html的HTML代码如下。
图4-3 链入外部样式表示例
【说明】代码中第1个段落标签使用链入外部样式表style.css中定义的.red类，此行文字大小为18px大小，颜色为红色；第2个段落标签没有被定义，将按照默认的设置显示文字样式。
4.2.4 导入外部样式表
导入外部样式表是指在内部样式表的<style>标签里导入一个外部样式表，当浏览器读取HTML文件时，复制一份样式表到这个HTML文件中。其格式如下。
导入外部样式表与链入外部样式表很相似，都是将样式表定义保存为单独文件。两者的本质区别是：导入方式是在浏览器下载HTML文件时将样式表文件的全部内容复制到@import关键字位置，以替换该关键字；而链入方式仅在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式表文件读取需要的内容，但是并不进行替换。
需要注意的是，@import语句后的“;”号不能省略。所有的@import声明必须放在样式表的开始部分，在其他样式表声明的前面，其他CSS规则放在其后的<style>标签对中。如果在内部样式表中指定了规则（如.bg{color:black;background:orange}），其优先级将高于导入的外部样式表中相同的规则。
【例4-4】使用导入外部样式表将样式表的功能加入到网页，导入外部样式表文件至少需要两个文件，一个是HTML文件，另一个是CSS文件。本例在浏览器中的显示效果如图4-4所示。
CSS文件名为extstyle.css，存放于文件夹style中，代码如下。
网页结构文件的HTML代码如下。
图4-4 导入外部样式表示例
【说明】代码中第1个段落标签使用导入外部样式表extstyle.css中定义的.red类，文字大小为18px、红色文字；第2个段落标签没有被定义，将按照默认的设置显示文字样式。
以上4种定义与使用CSS样式表的方法中，最常用的是先将样式表保存为一个样式表文件，然后使用链入外部样式表的方法在网页中引用CSS。