css在網(wǎng)頁設(shè)計中的引入

link標記

首先考慮link標記的使用:

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

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

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

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

h1 {color: red;}

h2 {color: maroon; background: white;

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

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

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

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

屬性

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

接下來可以看到href屬性。這個屬性的值是樣式表的URL。可以是絕對URL,也可以是相對URL,具體取決于要做的工作。當然,在我們的例子中,該URL是相對URL。

一個文檔可能關(guān)聯(lián)有多個鏈接樣式表。如果是這樣,文檔最初顯示時只會使用rel為stylesheet的link標記。因此,如果希望鏈接名為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>

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

style元素

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

<style type="text/css">

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

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

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

@import 指令

下面我們來討論style標記中的內(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無法指定候選樣式表。因此,給定以下標記:

@import url(sheet2.css);

@import url(blueworld.css);

@import url(zany.css);

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

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

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

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

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

如果有一個外部樣式表,它需要使用其他外部樣式表中的樣式,此時@import就非常有用。由于外部樣式表不能包含任何文檔標記,所以不能使用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)頁瀏覽器確實會忽略放置不當?shù)腀import指令,所以很容易錯誤地將@import指令放在不合適的位置,以至于改變了其他瀏覽器中的顯示。

具體的樣式規(guī)則

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

h1 {color:maroon;}

body {background:yellow;}

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

向后可訪問性

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

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

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

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

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

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

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

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標記中還有更多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)的標記(例如,head或title),style屬性可以與任何其他HTML標記關(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)將其標注為不建議使用,而且除了XHTML外,XML語言中不太可能出現(xiàn)這個屬性。如果把樣式放在style屬性中,會抵消CSS的一些重要優(yōu)點,如原本CSS可以組織管理能控制整個文檔外觀(或者一個網(wǎng)站服務(wù)器上所有文檔的外觀)的集中式樣式,而內(nèi)聯(lián)樣式會削弱這個功能。從很多方面來講,內(nèi)聯(lián)樣式并不比font標記強多少,不過內(nèi)聯(lián)樣式確實提供了更大的靈活性。