link標(biāo)記

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

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

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

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

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

h1 {color: red;}

h2 {color: maroon; background: white;

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

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

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

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

屬性

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

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

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

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

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

這將會讓瀏覽器加載這兩個樣式表，合并它們的規(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確實是link的一個屬性。這個屬性不經(jīng)常使用，但將來可能會很重要，而且如果使用不當(dāng)，可能會有意想不到的后果。

style元素

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

<style type="text/css">

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

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

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

@import 指令

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

@import url(sheet2.css);

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

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

h1 {color:gray;}

</style>

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

@import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

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

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

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

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

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

如果有一個外部樣式表，它需要使用其他外部樣式表中的樣式，此時@import就非常有用。由于外部樣式表不能包含任何文檔標(biāo)記，所以不能使用link元素，但能用。@import。因此，可以有一個包含以下內(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;}

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

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

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

具體的樣式規(guī)則

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

h1 {color:maroon;}

body {background:yellow;}

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

向后可訪問性

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

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

為了解決這個問題，建議將聲明包含在一個注釋標(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>

這樣一來，較老的瀏覽器不僅會將style標(biāo)記完全忽略，還會忽略聲明，因為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 */

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

警告：可能偶爾會創(chuàng)建這種“嵌套”注釋，比如說暫時將已經(jīng)包含注釋的一個樣式表塊注釋掉。由于css不允許嵌套的注釋，“外部”注釋會在“內(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.*/

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

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

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

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

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

如果你只是想為單個元素指定一些樣式，而不需要嵌套或外部樣式表，就可以使用HTML的style屬性來設(shè)置一個內(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屬性的語法很普通。實際上，看上去它與style容器中的聲明非常相似，只不過這里大括號要換成雙引號。所以<p style="color:maroon;background:yellow;">只會把段落的文本顏色設(shè)置為紫紅色，背景設(shè)置為黃色。文檔的其他部分不受此聲明影響。

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

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