link标记

首先考虑link标记的使用：

<link rel="stylesheet" type="text/css" href="sheetl.css" media="all"/>

link标记是一个很少用但完全合法的标记，它在HTML规范中已经存在多年，一直等待着“施展才华”。其基本目的是允许网页设计师将包含link标记的文档与其他文档相关联。这称为外部样式表（external style sheet），因为它们是HTML文档外部的样式表。

为了成功地加载一个外部样式表，link必须放在head元素中，但不能放在其他元素内部（如title）。这样一来，Web浏览器就能找到并加载样式表，然后使用其中包含的样式来显示网页文档。

样式表中不能包含XHTML或任何其他标记语言，只能有样式规则。以下是一个外部样式表的内容：

h1 {color: red;}

h2 {color: maroon; background: white;

h3 {color: white; background: black; font: medium Helvetica;}

仅此而已——完全没有HTML标记或注释，只有简单的无格式样式声明。这些会保存到一个纯文本文件中，通常有.css扩展名，如sheet1.css。

警告：外部样式表不能包含任何文档标记，只能有CSS规则和CSS注释，本章后面将解释CSS规则和CSS注释。如果一个外部样式表中出现了标记，会导致其中一部分或全部被忽略。

不一定非得有这个文件扩展名，但是一些较老的浏览器无法识别包含样式表的文件，即使在link元素中确实包含了正确的text/css类型也无济于事，除非它有.css扩展名。实际上，除非文件名以.css结尾，有些Web服务器甚至不会将文件作为text/css传递，不过这个问题通常可以通过改变服务器的配置文件来修正。

属性

对于link标记的余下部分，其属性和值都很直接明了。rel代表“关系”（relation），在这里，关系为stylesheet。type总是设置为text/css。这个值描述了使用link 标记加载的数据的类型。这样一来，网页浏览器就知道了样式表是CSS样式表，这将确定浏览器如何处理其导入的数据。毕竟，将来可能会使用其他的样式语言，所以声明使用何种语言很重要。

接下来可以看到href属性。这个属性的值是样式表的URL。可以是绝对URL，也可以是相对URL，具体取决于要做的工作。当然，在我们的例子中，该URL是相对URL。

一个文档可能关联有多个链接样式表。如果是这样，文档最初显示时只会使用rel为stylesheet的link标记。因此，如果希望链接名为basic.css和splash.css的两个样式表，可以如下设置：

<link rel="stylesheet" type="text/css" href="basic.css"/>

<link rel="stylesheet" type="text/css" href="splash,css"/>

这将会让浏览器加载这两个样式表，合并它们的规则，并将其全部应用于文档。例如：

<link rel="stylesheet" type="text/css" href="basic.css"/>

<link rel="stylesheet" type="text/css" href="splash.css"/>

<p class="al">This paragraph will be gray only if styles from the stylesheet "basic.css" are applied.</p>

<p class="bl">This paragraph will be gray only if styles from the stylesheet "splash.css" are applied.</p>

上述示例标记中没有title属性，不过title确实是link的一个属性。这个属性不经常使用，但将来可能会很重要，而且如果使用不当，可能会有意想不到的后果。

style元素

可以用style元素包含样式表，它在文档中单独出现：

<style type="text/css">

style—定要使用type属性：对于CSS文档，正确的type属性值是"text/css"，这与link元素类似。

style元素始终要以<style type="text/css">开头，如上例所示。其后可以有一个或多个样式，最后以一个结束</style>标记结尾。还可以为style元素指定一个media属性，其可取值与先前讨论链接样式表时介绍的media属性值相同。

开始和结束style标记之间的样式称为文档样式表（document style sheet），或嵌套样式表（embedded style sheet），因为这个样式表嵌套在文档中。其中可能包含应用到文档的多个样式，还可以使用@import指令包含多个外部样式表链接。

@import 指令

下面我们来讨论style标记中的内容。首先来看与link非常类似的@import指令：

@import url(sheet2.css);

与link类似，@import用于指示网页浏览器加载个外部样式表，并在表现HTML 文档时使用其样式。唯一的区别在于命令的具体语法和位置。可以看到，@import:出现在style容器中。它必须放在这里，也就是要放在其他CSS规则之前，否则将根本不起作用。考虑下面的例子：

<style type="text/css">@import url(styles.css);/* @import comes first */

h1 {color:gray;}

</style>

类似于link，—个文档中可以有不只一个@import语句，但不同于link，每个@import:指令的样式表都会加载并使用；用@import无法指定候选样式表。因此，给定以下标记：

@import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

这3个外部样式表都会加载，而且其中的所有样式规则都会在文档的显示中使用。

警告：许多较老的浏览器无法处理不同形式的@import指令，可以适当利用这一点，对这些浏览器“隐藏”样式。相关的更多细节，请参见

与link—样，可以限制所导入的样式表应用于一种或多种媒体，可以在样式表的URL 之后列出要应用此样式的媒体：

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

@imporc url(zany.css) projection, print;

如果有一个外部样式表，它需要使用其他外部样式表中的样式，此时@import就非常有用。由于外部样式表不能包含任何文档标记，所以不能使用link元素，但能用。@import。因此，可以有一个包含以下内容的外部样式表：

@import url(http://example.org/library/layout.css);

@import url(basic-text.css);

@import url(printer.css) print;

body {color:red;}

h1 {color:blue;}

不错，尽管具体的样式可能并非如此，不过从中你应该能了解到我的意思。注意，前例中不仅使用了绝对URL，还使用了相对URL。这两种URL形式都可用，这一点与link 元素一样。

还要注意，@import指令出现在样式表的开头，如示例文档所示，CSS要求@import指令出现在样式表中的其他规则之前。如果一个@import出现在其他规则（如body {color:red;}）之后，兼容用户代理会将其忽略。

警告：Windows平台的Internet Explorer不会忽略任何@import指令，甚至出现在其他规则之后的@import也不会忽略。由于其他网页浏览器确实会忽略放置不当的@import指令，所以很容易错误地将@import指令放在不合适的位置，以至于改变了其他浏览器中的显示。

具体的样式规则

本例中，@import语句之后就是一些正常的样式规则。这些规则对于这里的讨论意义不大，不过你可能会猜出它们将h1元素设置为紫红色，并设置body元素有一个黄色背景。

h1 {color:maroon;}

body {background:yellow;}

所有嵌套样式表都主要由这种样式构成，可以简单也可以复杂，可以很短也可以很长。如果一个文档中style元素不包含任何规则，这倒是很少见。

向后可访问性

如果你想知道如何让较老的浏览器也能访问你的文档，需要注意一个很重要的问题。你可能知道浏览器会忽略其无法识别的标记。例如，如果Web页面中包含一个blooper标记，网页浏览器会完全忽略这个标记，因为网页浏览器无法识别这个标记。

对于样式表也同样如此。如果一个浏览器无法识别<style>和</style>，就会将其统统忽略。不过，这些标记中的声明不一定会被忽略，因为对浏览器而言，它们看上去就像是正常的文本。所以，样式声明会出现在页面的最上面！（当然，浏览器应当忽略这些文本，因为这不是body元素的一部分，但是事实总是相反。）

为了解决这个问题，建议将声明包含在一个注释标记中。在此给出的示例中，注释标记的开始标记（<!——）紧接着出现在style开始标记之后，注释结束标记（——>）出现在style结束标记之前：

<style type="text/css"><!--

@import url(sheet2.css);

h1 {color:maroon;}

body (background:yellow;}

--></style>

这样一来，较老的浏览器不仅会将style标记完全忽略，还会忽略声明，因为HTML注释不会显示出来。与此同时，能理解CSS的浏览器仍能正常地读取样式表。

CSS注释

CSS还支持注释。与C/C++注释非常相似，CSS注释也用/*和*/包围：

/* This is a CSS1 cornment */

类似于C++，注释可以跨多行：

/* This is a CSS1 comment, and it can be several 

lines long without any problem whatsoever.*/

要记住重要的一点，CSS注释不能嵌套。所以，举例来说，以下注释是不正确的：

/* This is a comment, in which we find another comment, which is WRONG

/* Another comment */ and back to the first comment */

不过，一般不太需要嵌套注释，所以这个限制不算什么问题。

警告：可能偶尔会创建这种“嵌套”注释，比如说暂时将已经包含注释的一个样式表块注释掉。由于css不允许嵌套的注释，“外部”注释会在“内部”注释结束处结束。

如果希望将注释放在标记的同一行上，要谨慎处理注释的放置。例如，以下是正确的做法：

h1 {color:gray;}/* This CSS comment is several lines */

h2 {color:silver;}/* long, but since it is alongside */

p {color:white;}/* actual styles, each line needs to */

pre {color:gray;}/* be wrapped in comment markers.*/

对于这个例子，如果没有对每一行分别增加注释符号，那么样式表中的大部分都会成为注释，以至于无法正常工作：

h1 {color: gray;}/* This CSS comment is several lines

h2 {color: silver;} long, but since it is not wrapped

p {color: white;} in comment markers, the last three

pre {color: gray;} styles are part of the comment.*/

在这个例子中，只有第一个规则（h1 {color:gray;}）会应用到文档。余下的规则都会作为注释的一部分，将被浏览器的表现引擎忽略。

继续看这个例子，会看到XHTML标记中还有更多CSS信息！

内联样式

如果你只是想为单个元素指定一些样式，而不需要嵌套或外部样式表，就可以使用HTML的style属性来设置一个内联样式（inline style）（译注2）[2]:

<p style="color:gray;">The most wonderful of all breakfast foods is the waffle—a ridged and cratered slab of home-cooked, fluffy goodness..

</p>

除了在body外部出现的标记（例如，head或title），style属性可以与任何其他HTML标记关联。

style属性的语法很普通。实际上，看上去它与style容器中的声明非常相似，只不过这里大括号要换成双引号。所以<p style="color:maroon;background:yellow;">只会把段落的文本颜色设置为紫红色，背景设置为黄色。文档的其他部分不受此声明影响。

注意，一个内联style属性中只能放个声明块，而不能放整个样式表。因此，不能在style属性中放@import，也不能包含完整的规则。style属性的值中只能是规则中出现在大括号之间的部分。

通常并不推荐使用style属性。实际上，XHTML 1.1已经将其标注为不建议使用，而且除了XHTML外，XML语言中不太可能出现这个属性。如果把样式放在style属性中，会抵消CSS的一些重要优点，如原本CSS可以组织管理能控制整个文档外观（或者一个网站服务器上所有文档的外观）的集中式样式，而内联样式会削弱这个功能。从很多方面来讲，内联样式并不比font标记强多少，不过内联样式确实提供了更大的灵活性。