HTML文档中CSS的应用方法

尽管CSS功能强大、涵盖面极广，但仍然有较强的规律可循，比较简单、易学。用户一旦掌握了其精髓，就可以轻松地将其为己所用，即便是与HTML结合使用也不例外。不过，当将CSS实际运用于HTML文档中时，CSS的使用方法也有所不同。总结起来，在HTML中常用3种方式定义CSS，即Embedding（嵌入式）、Linking（外部引用式，或者称为引用式）和Inline（内联式）。

1.嵌入式

使用HTML中的style元素可以在HTML网页内定义CSS样式，这也是嵌入式CSS的定义。style元素的定义位于HTML文档头部，它位于head元素内。

CSS样式定义的内容位于style元素之间，例如下面的代码：

＜head＞;

＜style＞;

...内嵌式CSS样式定义...

＜/style＞;

＜/head＞;

在HTML4中通过HTML注释标签（＜！--和--＞;）隐藏style元素的内容，虽然被隐藏，浏览器也可以读取隐藏的内容并应用于呈现元素的style属性，但是允许不支持此类型的浏览器忽略样式表。

例如下面的代码使用注释隐藏了style元素的内容，但是其定义仍然可以被浏览器使用：

＜styletype="text/css"＞;

＜！--下面是内嵌式CSS样式定义

h1{color：blue}

P{color：red}

--＞;

＜/style＞;

这样做主要是为了使那些旧的、不支持样式表的浏览器不呈现style元素的内容。

但是对于HTML5，注释不再被允许，因为符合HTML5标准的浏览器都可以识别style元素并正确地执行。现在旧式的浏览器已经很少了，所以我们不再推荐使用注释。

用户可以在一个HTML文档头部定义多个style元素，实现多个样式表。除了全局属性以外，style元素还包括以下几个重要的属性。

1）style属性用来定义样式表的语言，该属性可以指定样式表语言的类型，必须是正确的MIME类型，如type="text/css"表示使用CSS。

在HTML4中，必须定义该属性，并为该属性指定一个值，因为该属性没有默认值。在HTML5中，该属性可以被忽略，因为该属性有默认值"text/css"。

2）media属性用来指定样式表所要应用的介质。属性值可以是单个介质描述符，也可以是用逗号隔开的多个介质描述符，这样就可以应用于多种介质。

如果忽略该属性，那么默认值就是“all”，表示适用于多种介质。

3)scoped属性是一个逻辑值，表示样式应用的范围。如果一个style元素定义该属性，那么当前style元素定义的样式仅应用到它的直接父元素的内容（子节点）。如果不指定scoped属性，该style元素定义的样式可以应用到整个文档。

4)全局属性中的title属性对于style元素有特殊的含义，如果定义title属性，则可以声明一个“可替换样式表”，用户使用浏览器就可以从多个“可替换样式表”中选一个，将仅应用选择的“可替换样式表”，而不应用其他样式表。

特定的样式表语言有不同的实现规则，对于CSS，可以在style元素中实现多种样式的定义，这会使用到选择符，用户可以定义多种类型的选择符。

这些选择符总体上可以分为以下几类：

1）为某个特定的元素名定义样式，这样网页中所有的该元素都可以应用该样式。

2）为某个特定的class属性名定义样式，网页中所有的class属性值为该属性名的元素都可以应用该样式。

3）为某个特定的元素定义样式，该元素使用id属性来标识，样式也同样使用id属性值来定义。

4）为某些特定用途定义的使用以上3类无法实现的选择符，包括伪类和伪元素选择符等。

如下面的代码分别应用了这几种定义，并且由于为h1元素定义了多种样式源，所以样式可以叠加。

2.外部引用式

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表可以通过更改一个文件来改变整个站点的外观。外部引用就是指HTML文档本身不含有CSS样式定义，而是通过动态引用外部CSS文件来定义HTML文档的表现形式。通过将样式表使用单独的文件来定义，就可以将样式表与HTML文档分离。将样式表与HTML文档分离有以下几个优点：

1）在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义成一个一个独立的文档，也可以有效地提高效率，并有利于对网站风格的维护。(https://www.xing528.com)

2）改变样式表，而无须更改HTML文档，这和HTML语言内容与形式分开的原则相一致。

3）根据介质有选择地加载样式表。

有很多种方法可以实现CSS文件的外部引用。

（1）使用处理指令

在HTML文档的开头部分写一个关于样式表的处理指令语句，例如：

＜？xml-stylesheet type="text/css"href="style.css"？＞;

＜html＞;

...

＜/html＞;

按照这条处理指令语句的指令，该文档在浏览器上的表现方式由CSS样式文件style.css决定。因此，CSS样式文件style.css将会被导入当前HTML文档，最终形成“内嵌的”模式，就像在该文档中定义的一样。

大多数浏览器仅当该文档被保存为.xhtml或.xml扩展名时（也就是使用XHTML或者以XML语法编写HTML时）才会有效，所以不推荐这样做。

（2）使用@import指令

用户也可以在style元素之间使用@import指令导入外部的CSS样式表文件，例如下面的代码：

＜style＞;

/*下面两行导入外部样式表代码的效果是相同的*/

@import"style.css"；

@import url{"style.css"}；

＜/style＞;

任何@import规则必须出现在样式表中的所有规则之前。@import指令的参数是一个CSS样式表文件的URL地址，表示URL地址的字符串也可以包含在url（）函数内。上面两个@import规则实现的效果是相同的。

在一个单独的CSS样式表文件中，也可以使用@import指令将另一个CSS样式文件导入到当前文件中。

（1）使用link元素

在HTML代码中使用link元素也可以引用外部样式表，使用href属性指定样式表文件所在的URL，并且指定rel="styesheet"、type="text/css"，前者表示引用的是样式表，后者表示引用的是CSS样式表。例如：

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

（2）使用HTTP消息报头链接到样式表

用户可以使用HTTP消息报头的link字段链接一个外部样式表，link字段的功能和HTML中link元素的功能相同，有相同的属性设置，例如下面的字段：

link：＜style.css＞;；rel=stylesheet

等同于：

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

当把HTML文档作为电子邮件正文发送时，这个也可以发生作用，但是一些电子邮件管理程序可能会改变报头字段的顺序，为了保证样式表的顺序不被更改，应该将报头字段串联起来，将相同报头字段融合到一个字段。

属性值无须使用引号，除非属性值包含空格。对于HTTP或者电子邮件消息报头中不被允许的字符，可以使用字符实体交换。在HTTP报头中可以使用多个link字段，从而可以使用link字段链接多个外部样式表，并且HTTP报头中的link字段比HTML文档中的link元素具有的优先级高。

3.内联式

当特殊的样式需要应用到个别元素时，可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性，样式属性可以包含任何CSS属性。每一个HTML元素都包含一个style属性，使用该属性可以直接指定样式，该样式仅能作用于该元素的内容，对于另一个同名的元素则不起作用。

例如下面的HTML代码片段：

＜p style="color：#000；font-weight：bold；"＞;请单击＜a herf="index.html"＞;首页的链接＜/a＞;＜/p＞;

这种方式虽然比较直接，但不适合模块化管理，并且仅能用于一个元素，如果出现另一个同名元素，则必须重新定义。