link標(biāo)記

首先考慮link標(biāo)記的使用：

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

link標(biāo)記是一個(gè)很少用但完全合法的標(biāo)記，它在HTML規(guī)范中已經(jīng)存在多年，一直等待著“施展才華”。其基本目的是允許網(wǎng)頁設(shè)計(jì)師將包含link標(biāo)記的文檔與其他文檔相關(guān)聯(lián)。這稱為外部樣式表（external style sheet），因?yàn)樗鼈兪荋TML文檔外部的樣式表。

為了成功地加載一個(gè)外部樣式表，link必須放在head元素中，但不能放在其他元素內(nèi)部（如title）。這樣一來，Web瀏覽器就能找到并加載樣式表，然后使用其中包含的樣式來顯示網(wǎng)頁文檔。

樣式表中不能包含XHTML或任何其他標(biāo)記語言，只能有樣式規(guī)則。以下是一個(gè)外部樣式表的內(nèi)容：

h1 {color: red;}

h2 {color: maroon; background: white;

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

僅此而已——完全沒有HTML標(biāo)記或注釋，只有簡單的無格式樣式聲明。這些會(huì)保存到一個(gè)純文本文件中，通常有.css擴(kuò)展名，如sheet1.css。

警告：外部樣式表不能包含任何文檔標(biāo)記，只能有CSS規(guī)則和CSS注釋，本章后面將解釋CSS規(guī)則和CSS注釋。如果一個(gè)外部樣式表中出現(xiàn)了標(biāo)記，會(huì)導(dǎo)致其中一部分或全部被忽略。

不一定非得有這個(gè)文件擴(kuò)展名，但是一些較老的瀏覽器無法識(shí)別包含樣式表的文件，即使在link元素中確實(shí)包含了正確的text/css類型也無濟(jì)于事，除非它有.css擴(kuò)展名。實(shí)際上，除非文件名以.css結(jié)尾，有些Web服務(wù)器甚至不會(huì)將文件作為text/css傳遞，不過這個(gè)問題通?？梢酝ㄟ^改變服務(wù)器的配置文件來修正。

屬性

對(duì)于link標(biāo)記的余下部分，其屬性和值都很直接明了。rel代表“關(guān)系”（relation），在這里，關(guān)系為stylesheet。type總是設(shè)置為text/css。這個(gè)值描述了使用link 標(biāo)記加載的數(shù)據(jù)的類型。這樣一來，網(wǎng)頁瀏覽器就知道了樣式表是CSS樣式表，這將確定瀏覽器如何處理其導(dǎo)入的數(shù)據(jù)。畢竟，將來可能會(huì)使用其他的樣式語言，所以聲明使用何種語言很重要。

接下來可以看到href屬性。這個(gè)屬性的值是樣式表的URL?？梢允墙^對(duì)URL，也可以是相對(duì)URL，具體取決于要做的工作。當(dāng)然，在我們的例子中，該URL是相對(duì)URL。

一個(gè)文檔可能關(guān)聯(lián)有多個(gè)鏈接樣式表。如果是這樣，文檔最初顯示時(shí)只會(huì)使用rel為stylesheet的link標(biāo)記。因此，如果希望鏈接名為basic.css和splash.css的兩個(gè)樣式表，可以如下設(shè)置：

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

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

這將會(huì)讓瀏覽器加載這兩個(gè)樣式表，合并它們的規(guī)則，并將其全部應(yīng)用于文檔。例如：

<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>

上述示例標(biāo)記中沒有title屬性，不過title確實(shí)是link的一個(gè)屬性。這個(gè)屬性不經(jīng)常使用，但將來可能會(huì)很重要，而且如果使用不當(dāng)，可能會(huì)有意想不到的后果。

style元素

可以用style元素包含樣式表，它在文檔中單獨(dú)出現(xiàn)：

<style type="text/css">

style—定要使用type屬性：對(duì)于CSS文檔，正確的type屬性值是"text/css"，這與link元素類似。

style元素始終要以<style type="text/css">開頭，如上例所示。其后可以有一個(gè)或多個(gè)樣式，最后以一個(gè)結(jié)束</style>標(biāo)記結(jié)尾。還可以為style元素指定一個(gè)media屬性，其可取值與先前討論鏈接樣式表時(shí)介紹的media屬性值相同。

開始和結(jié)束style標(biāo)記之間的樣式稱為文檔樣式表（document style sheet），或嵌套樣式表（embedded style sheet），因?yàn)檫@個(gè)樣式表嵌套在文檔中。其中可能包含應(yīng)用到文檔的多個(gè)樣式，還可以使用@import指令包含多個(gè)外部樣式表鏈接。

@import 指令

下面我們來討論style標(biāo)記中的內(nèi)容。首先來看與link非常類似的@import指令：

@import url(sheet2.css);

與link類似，@import用于指示網(wǎng)頁瀏覽器加載個(gè)外部樣式表，并在表現(xiàn)HTML 文檔時(shí)使用其樣式。唯一的區(qū)別在于命令的具體語法和位置。可以看到，@import:出現(xiàn)在style容器中。它必須放在這里，也就是要放在其他CSS規(guī)則之前，否則將根本不起作用。考慮下面的例子：

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

h1 {color:gray;}

</style>

類似于link，—個(gè)文檔中可以有不只一個(gè)@import語句，但不同于link，每個(gè)@import:指令的樣式表都會(huì)加載并使用；用@import無法指定候選樣式表。因此，給定以下標(biāo)記：

@import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

這3個(gè)外部樣式表都會(huì)加載，而且其中的所有樣式規(guī)則都會(huì)在文檔的顯示中使用。

警告：許多較老的瀏覽器無法處理不同形式的@import指令，可以適當(dāng)利用這一點(diǎn)，對(duì)這些瀏覽器“隱藏”樣式。相關(guān)的更多細(xì)節(jié)，請(qǐng)參見

與link—樣，可以限制所導(dǎo)入的樣式表應(yīng)用于一種或多種媒體，可以在樣式表的URL 之后列出要應(yīng)用此樣式的媒體：

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

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

如果有一個(gè)外部樣式表，它需要使用其他外部樣式表中的樣式，此時(shí)@import就非常有用。由于外部樣式表不能包含任何文檔標(biāo)記，所以不能使用link元素，但能用。@import。因此，可以有一個(gè)包含以下內(nèi)容的外部樣式表：

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

@import url(basic-text.css);

@import url(printer.css) print;

body {color:red;}

h1 {color:blue;}

不錯(cuò)，盡管具體的樣式可能并非如此，不過從中你應(yīng)該能了解到我的意思。注意，前例中不僅使用了絕對(duì)URL，還使用了相對(duì)URL。這兩種URL形式都可用，這一點(diǎn)與link 元素一樣。

還要注意，@import指令出現(xiàn)在樣式表的開頭，如示例文檔所示，CSS要求@import指令出現(xiàn)在樣式表中的其他規(guī)則之前。如果一個(gè)@import出現(xiàn)在其他規(guī)則（如body {color:red;}）之后，兼容用戶代理會(huì)將其忽略。

警告：Windows平臺(tái)的Internet Explorer不會(huì)忽略任何@import指令，甚至出現(xiàn)在其他規(guī)則之后的@import也不會(huì)忽略。由于其他網(wǎng)頁瀏覽器確實(shí)會(huì)忽略放置不當(dāng)?shù)腀import指令，所以很容易錯(cuò)誤地將@import指令放在不合適的位置，以至于改變了其他瀏覽器中的顯示。

具體的樣式規(guī)則

本例中，@import語句之后就是一些正常的樣式規(guī)則。這些規(guī)則對(duì)于這里的討論意義不大，不過你可能會(huì)猜出它們將h1元素設(shè)置為紫紅色，并設(shè)置body元素有一個(gè)黃色背景。

h1 {color:maroon;}

body {background:yellow;}

所有嵌套樣式表都主要由這種樣式構(gòu)成，可以簡單也可以復(fù)雜，可以很短也可以很長。如果一個(gè)文檔中style元素不包含任何規(guī)則，這倒是很少見。

向后可訪問性

如果你想知道如何讓較老的瀏覽器也能訪問你的文檔，需要注意一個(gè)很重要的問題。你可能知道瀏覽器會(huì)忽略其無法識(shí)別的標(biāo)記。例如，如果Web頁面中包含一個(gè)blooper標(biāo)記，網(wǎng)頁瀏覽器會(huì)完全忽略這個(gè)標(biāo)記，因?yàn)榫W(wǎng)頁瀏覽器無法識(shí)別這個(gè)標(biāo)記。

對(duì)于樣式表也同樣如此。如果一個(gè)瀏覽器無法識(shí)別<style>和</style>，就會(huì)將其統(tǒng)統(tǒng)忽略。不過，這些標(biāo)記中的聲明不一定會(huì)被忽略，因?yàn)閷?duì)瀏覽器而言，它們看上去就像是正常的文本。所以，樣式聲明會(huì)出現(xiàn)在頁面的最上面?。ó?dāng)然，瀏覽器應(yīng)當(dāng)忽略這些文本，因?yàn)檫@不是body元素的一部分，但是事實(shí)總是相反。）

為了解決這個(gè)問題，建議將聲明包含在一個(gè)注釋標(biāo)記中。在此給出的示例中，注釋標(biāo)記的開始標(biāo)記（<!——）緊接著出現(xiàn)在style開始標(biāo)記之后，注釋結(jié)束標(biāo)記（——>）出現(xiàn)在style結(jié)束標(biāo)記之前：

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

@import url(sheet2.css);

h1 {color:maroon;}

body (background:yellow;}

--></style>

這樣一來，較老的瀏覽器不僅會(huì)將style標(biāo)記完全忽略，還會(huì)忽略聲明，因?yàn)镠TML注釋不會(huì)顯示出來。與此同時(shí)，能理解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.*/

要記住重要的一點(diǎn)，CSS注釋不能嵌套。所以，舉例來說，以下注釋是不正確的：

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

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

不過，一般不太需要嵌套注釋，所以這個(gè)限制不算什么問題。

警告：可能偶爾會(huì)創(chuàng)建這種“嵌套”注釋，比如說暫時(shí)將已經(jīng)包含注釋的一個(gè)樣式表塊注釋掉。由于css不允許嵌套的注釋，“外部”注釋會(huì)在“內(nèi)部”注釋結(jié)束處結(jié)束。

如果希望將注釋放在標(biāo)記的同一行上，要謹(jǐn)慎處理注釋的放置。例如，以下是正確的做法：

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.*/

對(duì)于這個(gè)例子，如果沒有對(duì)每一行分別增加注釋符號(hào)，那么樣式表中的大部分都會(huì)成為注釋，以至于無法正常工作：

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.*/

在這個(gè)例子中，只有第一個(gè)規(guī)則（h1 {color:gray;}）會(huì)應(yīng)用到文檔。余下的規(guī)則都會(huì)作為注釋的一部分，將被瀏覽器的表現(xiàn)引擎忽略。

繼續(xù)看這個(gè)例子，會(huì)看到XHTML標(biāo)記中還有更多CSS信息！

內(nèi)聯(lián)樣式

如果你只是想為單個(gè)元素指定一些樣式，而不需要嵌套或外部樣式表，就可以使用HTML的style屬性來設(shè)置一個(gè)內(nèi)聯(lián)樣式（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外部出現(xiàn)的標(biāo)記（例如，head或title），style屬性可以與任何其他HTML標(biāo)記關(guān)聯(lián)。

style屬性的語法很普通。實(shí)際上，看上去它與style容器中的聲明非常相似，只不過這里大括號(hào)要換成雙引號(hào)。所以<p style="color:maroon;background:yellow;">只會(huì)把段落的文本顏色設(shè)置為紫紅色，背景設(shè)置為黃色。文檔的其他部分不受此聲明影響。

注意，一個(gè)內(nèi)聯(lián)style屬性中只能放個(gè)聲明塊，而不能放整個(gè)樣式表。因此，不能在style屬性中放@import，也不能包含完整的規(guī)則。style屬性的值中只能是規(guī)則中出現(xiàn)在大括號(hào)之間的部分。

通常并不推薦使用style屬性。實(shí)際上，XHTML 1.1已經(jīng)將其標(biāo)注為不建議使用，而且除了XHTML外，XML語言中不太可能出現(xiàn)這個(gè)屬性。如果把樣式放在style屬性中，會(huì)抵消CSS的一些重要優(yōu)點(diǎn)，如原本CSS可以組織管理能控制整個(gè)文檔外觀（或者一個(gè)網(wǎng)站服務(wù)器上所有文檔的外觀）的集中式樣式，而內(nèi)聯(lián)樣式會(huì)削弱這個(gè)功能。從很多方面來講，內(nèi)聯(lián)樣式并不比font標(biāo)記強(qiáng)多少，不過內(nèi)聯(lián)樣式確實(shí)提供了更大的靈活性。