link標記

首先考慮link標記的使用：

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

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

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

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

h1 {color: red;}

h2 {color: maroon; background: white;

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

僅此而已——完全沒(méi)有HTML標記或注釋?zhuān)挥泻?jiǎn)單的無(wú)格式樣式聲明。這些會(huì )保存到一個(gè)純文本文件中，通常有.css擴展名，如sheet1.css。

警告：外部樣式表不能包含任何文檔標記，只能有CSS規則和CSS注釋?zhuān)菊潞竺鎸⒔忉孋SS規則和CSS注釋。如果一個(gè)外部樣式表中出現了標記，會(huì )導致其中一部分或全部被忽略。

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

屬性

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

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

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

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

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

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

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

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

style元素

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

<style type="text/css">

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

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

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

@import 指令

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

@import url(sheet2.css);

與link類(lèi)似，@import用于指示網(wǎng)頁(yè)瀏覽器加載個(gè)外部樣式表，并在表現HTML 文檔時(shí)使用其樣式。唯一的區別在于命令的具體語(yǔ)法和位置?？梢钥吹?，@import:出現在style容器中。它必須放在這里，也就是要放在其他CSS規則之前，否則將根本不起作用?？紤]下面的例子：

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

h1 {color:gray;}

</style>

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

@import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

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

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

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

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

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

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

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

@import url(basic-text.css);

@import url(printer.css) print;

body {color:red;}

h1 {color:blue;}

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

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

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

具體的樣式規則

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

h1 {color:maroon;}

body {background:yellow;}

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

向后可訪(fǎng)問(wèn)性

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

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

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

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

@import url(sheet2.css);

h1 {color:maroon;}

body (background:yellow;}

--></style>

這樣一來(lái)，較老的瀏覽器不僅會(huì )將style標記完全忽略，還會(huì )忽略聲明，因為HTML注釋不會(huì )顯示出來(lái)。與此同時(shí)，能理解CSS的瀏覽器仍能正常地讀取樣式表。

CSS注釋

CSS還支持注釋。與C/C++注釋非常相似，CSS注釋也用/*和*/包圍：

/* This is a CSS1 cornment */

類(lèi)似于C++，注釋可以跨多行：

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

lines long without any problem whatsoever.*/

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

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

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

不過(guò)，一般不太需要嵌套注釋?zhuān)赃@個(gè)限制不算什么問(wèn)題。

警告：可能偶爾會(huì )創(chuàng )建這種“嵌套”注釋?zhuān)热缯f(shuō)暫時(shí)將已經(jīng)包含注釋的一個(gè)樣式表塊注釋掉。由于css不允許嵌套的注釋?zhuān)巴獠俊弊⑨寱?huì )在“內部”注釋結束處結束。

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

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

對于這個(gè)例子，如果沒(méi)有對每一行分別增加注釋符號，那么樣式表中的大部分都會(huì )成為注釋?zhuān)灾劣跓o(wú)法正常工作：

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è)規則（h1 {color:gray;}）會(huì )應用到文檔。余下的規則都會(huì )作為注釋的一部分，將被瀏覽器的表現引擎忽略。

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

內聯(lián)樣式

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

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

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

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