css在網(wǎng)頁(yè)設(shè)計(jì)中的分組功能

CSS的主要優(yōu)點(diǎn)之一(特別是對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)),就是它能很容易地向所有同類型的元素應(yīng)用一組樣式。是不是聽上去還不夠震撼?那么請(qǐng)這樣想想看:只需編輯一行CSS,就能改變所有標(biāo)題的顏色!是不是不喜歡現(xiàn)在用的藍(lán)色?那就改變那行代碼,標(biāo)題將會(huì)全部變成紫色、黃色、紫紅色,或者是你想要的任何其他顏色。這就能讓作為網(wǎng)頁(yè)設(shè)計(jì)師的你更多地關(guān)注設(shè)計(jì)而不是那些瑣事。下一次開會(huì)討論時(shí),如果有人希望標(biāo)題還要有綠色陰影,只需編輯樣式,再單擊Reload按鈕就行了。很酷吧?只需區(qū)區(qū)幾秒就大功告成。

當(dāng)然,CSS并不能解決你的所有問(wèn)題,比如說(shuō)你不能用它來(lái)改變GIF的顏色,但是利用CSS確實(shí)能更容易地完成一些全局性的修改。所以下面先來(lái)介紹選擇器和結(jié)構(gòu)。

基本規(guī)則

前面已經(jīng)提到,CSS的一個(gè)核心特性就是能向文檔中的一組元素類型應(yīng)用某些規(guī)則。例如,假設(shè)你想讓所有h2元素的文本都顯示為灰色。如果使用傳統(tǒng)的HTML,就必須在所有h2 元素中插入<FONT COLOR="gray">...</FONT>標(biāo)記:

<h2><font color="gray">This is h2 text</font></h2>

顯然,如果你的文檔中包含了大量h2元素,這將是一個(gè)很繁瑣的過(guò)程。更槽糕的是,如果你后來(lái)又決定要讓所有h2元素都是綠色而不是灰色,就必須再重來(lái)一次,手動(dòng)地為所有h2元素設(shè)置相應(yīng)的標(biāo)記。

利用CSS,可以創(chuàng)建易于修改和編輯的規(guī)則,并且能很容易地將其應(yīng)用到你定義的所有文本元素(下一節(jié)將解釋這些規(guī)則如何工作)。例如,只需將以下規(guī)則寫一次,就能讓所有h2元素變成灰色:

h2 {color:gray;}

如果希望將所有h2文本都改為其他顏色,如銀色,只需把這個(gè)規(guī)則修改如下:

h2 {color:silver;}

規(guī)則結(jié)構(gòu)

為了更詳細(xì)地說(shuō)明規(guī)則的概念,下面將規(guī)則的結(jié)構(gòu)分解開逐一介紹。

每個(gè)規(guī)則都有兩個(gè)基本部分:選擇器(selector)和聲明塊(declaration block)。聲明塊由一個(gè)或多個(gè)聲明(declaration)組成,每個(gè)聲明則是一個(gè)屬性-值對(duì)(property-value)。每個(gè)樣式表由一系列規(guī)則組成。

一旦直接向元素全局地應(yīng)用樣式,可以將這些樣式從一個(gè)元素切換應(yīng)用到另一個(gè)元素。假設(shè)你決定將網(wǎng)頁(yè)中的主體字體設(shè)置為灰色。沒(méi)問(wèn)題。只需把h1選擇器改為P:

html {color: black;}

p {color: gray;}

h2 {color: silver;}

聲明和關(guān)鍵字

聲明塊包含一個(gè)或多個(gè)聲明。聲明總有如下格式:一個(gè)屬性后面跟一個(gè)冒號(hào),再后面是一個(gè)值,然后是一個(gè)分號(hào)。冒號(hào)和分號(hào)后面可以有0個(gè)或多個(gè)空格。幾乎在所有情況下,值要么是一個(gè)關(guān)鍵字,要么是該屬性可取關(guān)鍵字的一個(gè)列表(包含一個(gè)或多個(gè)關(guān)鍵字),關(guān)鍵字之間用空格分隔。如果聲明中使用了不正確的屬性或者不正確的值,整個(gè)聲明都會(huì)被忽略。因此,下面這兩個(gè)聲明將會(huì)失敗:

brain-size:2cm;/* unknown property */

color:ultraviolet;/* unknown value */

如果一個(gè)屬性的值可以取多個(gè)關(guān)鍵字,在這種情況下,關(guān)鍵字通常由空格分隔。并不是所有屬性都能接受多個(gè)關(guān)鍵字,不過(guò)確實(shí)有許多屬性是這樣,例如font屬性。假設(shè)你想為段落文本定義中等大小的Helvetica字體。

注意medium和Helvetica之間的空格,medium和Helvetica都是關(guān)鍵字(前一個(gè)指定了字體的大小,后一個(gè)是具體的字體名)。兩個(gè)關(guān)鍵字之間的空格使用戶代理能夠區(qū)分這兩個(gè)關(guān)鍵字,并適當(dāng)?shù)貞?yīng)用。后面的分號(hào)指示聲明結(jié)束。

用空格分隔的這些詞稱為關(guān)鍵字,這是因?yàn)?,它們加在一起?gòu)成了當(dāng)前屬性的值。例如,考慮以下假想規(guī)則:

rainbow: red orange yellow green blue indigo violet;

當(dāng)然并沒(méi)有rainbow這樣的屬性,另外這里使用的顏色也不合法,不過(guò)可以用這個(gè)例子來(lái)說(shuō)明有關(guān)的概念。rainbow 的值是red orange yellow green blue indigo violet,這7個(gè)關(guān)鍵字加在一起構(gòu)成了一個(gè)唯一的值。可以把rainbow的值重新定義如下:

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

現(xiàn)在rainbow就有了一個(gè)新值,由9個(gè)而不是7個(gè)關(guān)鍵字組成。盡管這兩個(gè)值的名字是相同的,但是它們就像0和1一樣黑白分明,完全不同。

注意:可以看到,CSS關(guān)鍵字往往由空格分隔。只有一種情況例外。在CSS的font屬性中。只有一種情況下可以使用斜線(/)來(lái)分隔兩個(gè)特定關(guān)鍵字。下面是一個(gè)例子:

h2 {font: large/150% sans-serif;}

斜線分隔了用來(lái)設(shè)置元素的字體大小和行高的兩個(gè)關(guān)鍵字。只有在這里才允許font聲明中出現(xiàn)斜線。font允許的所有其他關(guān)鍵字都用空格分隔。

以上介紹了簡(jiǎn)單聲明的基礎(chǔ)知識(shí),不過(guò)聲明可以比這復(fù)雜得多。接下來(lái)將帶你了解CSS的功能有多強(qiáng)大。

分組

到目前為止,我們已經(jīng)學(xué)習(xí)了如何向一個(gè)選擇器應(yīng)用一個(gè)樣式,這個(gè)技術(shù)相當(dāng)簡(jiǎn)單。但是如果想為多個(gè)元素應(yīng)用同一個(gè)樣式該怎么做呢?倘若如此,可能要使用多個(gè)選擇器,或者向一個(gè)元素或一組元素應(yīng)用多個(gè)樣式。

選擇器分組

假設(shè)希望h2元素和段落都有灰色文本。為達(dá)到這個(gè)目的,最容易的做法是使用以下聲明:

h2,p {color:gray;}

將h2和p選擇器放在規(guī)則的左邊,并用一個(gè)逗號(hào)來(lái)分隔,這樣就定義了一個(gè)規(guī)則,其右邊的樣式(color: gray;)將應(yīng)用到這兩個(gè)選擇器所引用的元素。逗號(hào)告訴瀏覽器,規(guī)則中包含兩個(gè)不同的選擇器。如果沒(méi)有這個(gè)逗號(hào),那么規(guī)則的含義則完全不同,有關(guān)內(nèi)容將在“后代選擇器”一節(jié)中詳細(xì)介紹。

可以將任意多個(gè)選擇器分組在一起,對(duì)此沒(méi)有任何限制。例如,如果你想把很多元素顯示為灰色,可以使用類似如下的規(guī)則:

body,table,th,td,h1,h2,h3,h4,p,pre,strong,em,b,i{color:gray;}

通過(guò)分組,網(wǎng)頁(yè)設(shè)計(jì)師可以將某些類型的樣式“壓縮”在一起,這就能得到一個(gè)更簡(jiǎn)短的樣式表。以下的兩組規(guī)則能得到同樣的結(jié)果,不過(guò)可以很清楚地看出哪一個(gè)寫起來(lái)更容易:

h1 {color:purple;}

h2 {color:purple;}

h3 {color:purple;}

h4 {color:purple;}

h5 {color:purple;}

h6 {color:purple;}

h1,h2,h3,h4,h5,h6{color: purple;}

分組提供了一些有意思的選擇。例如,下例中的所有規(guī)則分組都是等價(jià)的,每個(gè)組只是展示了對(duì)選擇器和聲明分組的不同方法:

/* group 1 */

h1 {color:silver;background:white;}

h2 {color:silver;background:gray;}

h3 {color:white;background:gray;}

h4 {color:silver;background:white;}

h5 {color:gray;background:white;}

/* group 2*/

h1,h2,h4 {color:silver;}

h2,h3 {background:gray;}

h1,h4,b {background:white;}

h3 {color: white;}

b {color: gray;}

/*group3*/

h1,h4 {color: silver; background: white;}

h2 {color: silver;}

h3 {color: white;}

h2,h3 {background: gray;}

b {color: gray; background: white;}

通配選擇器

CSS2引入了一種新的簡(jiǎn)單選擇器,稱為通配選擇器(universal selector),顯示為一個(gè)星號(hào)(*)。這個(gè)選擇器可以與任何元素匹配,就像是一個(gè)通配符。例如,要讓一個(gè)文檔中的每一個(gè)元素都為紅色,可以寫為以下規(guī)則:

*{color: red;}

這個(gè)聲明等價(jià)于列出了網(wǎng)頁(yè)文檔中所有元素的一個(gè)分組選擇器。利用通配選擇器,只需敲一次鍵(僅一個(gè)星號(hào))就能把文檔中所有元素的color值都指定為red。不過(guò)要當(dāng)心,盡管通配選擇器很方便,但它也有一些意想不到的后果。

聲明分組

既然可以將選擇器分組到一個(gè)規(guī)則中,當(dāng)然也可以對(duì)聲明分組。假設(shè)你希望所有h1元素都有淺綠色背景,并使用18像素高的Helvetica字體顯示為

紫色文本(你并不關(guān)心讀者能不能看清楚)。可以寫以下樣式:

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

但是這種方法效率不高,想想看,如果為一個(gè)有10個(gè)或15個(gè)樣式的元素創(chuàng)建這樣一個(gè)列表會(huì)多麻煩!相反,可以將聲明分組在一起:

h1 {font: 18px Helvetica; color: purple; background: aqua;}

這與前面的3行樣式表的效果完全一樣。

注意,對(duì)聲明分組時(shí),一定要在各個(gè)聲明的最后使用分號(hào),這很重要。瀏覽器會(huì)忽略樣式表中的空白符,而且用戶代理必須依賴正確的語(yǔ)法才能解析樣式表。只要加了分號(hào),就可以毫無(wú)顧忌地采用以下格式建立樣式:

h1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

不過(guò),如果忽略了第二個(gè)分號(hào),用戶代理就會(huì)把這個(gè)樣式表解釋如下:

h1 {

font: 18px Helvetica;

color: purple background: agua;

}

因?yàn)閎ackground:對(duì)于color來(lái)說(shuō)不是一個(gè)合法值,而且由于只能為color指定一個(gè)關(guān)鍵字,所以用戶代理會(huì)完全忽略這個(gè)color聲明(包括background: aqua部分。這樣h1標(biāo)題只會(huì)顯示為紫色文本,而沒(méi)有淡綠色背景,不過(guò)更有可能根本得不到紫色的h1。相反,這些標(biāo)題只會(huì)顯示為默認(rèn)顏色(通常是黑色),而且根本沒(méi)有背景色(font:18px Helvetica聲明仍能正常起作用,因?yàn)樗_實(shí)正確地以一個(gè)分號(hào)結(jié)尾)。

注意:盡管從技術(shù)上講沒(méi)有必要讓規(guī)則的最后一個(gè)聲明也以分號(hào)結(jié)尾,不過(guò)這通常是一個(gè)好的實(shí)踐做法。首先,這會(huì)讓你養(yǎng)成在聲明后加上分號(hào)的好習(xí)慣。聲明的最后缺少分號(hào),是導(dǎo)致表現(xiàn)出錯(cuò)的最常見的原因之一。其次,如果你決定向規(guī)則增加另一個(gè)聲明,就不必?fù)?dān)心忘記再插入一個(gè)分號(hào)。最后一點(diǎn),如果規(guī)則中的最后一個(gè)聲明少了分號(hào),一些較老的瀏覽器(如Internet Explorer 3.X)很可能會(huì)不知所措。一定要避免所有這些問(wèn)題。所以只要出現(xiàn)規(guī)則,就要在聲明的后面加一個(gè)分號(hào)。

與選擇器分組一樣,聲明分組也是一種便利的方法,可以縮短樣式表,使之表述更為清晰,而且易于維護(hù)。

結(jié)合選擇器和聲明的分組

現(xiàn)在應(yīng)該了解到,可以對(duì)選擇器分組,還可以對(duì)聲明分組。如果在一個(gè)規(guī)則中結(jié)合這兩種分組,就可以使用很少的一些語(yǔ)句定義相當(dāng)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)的樣式。現(xiàn)在,如果你想為文檔中的所有標(biāo)題指定某種復(fù)雜的樣式,而且希望向所有這些標(biāo)題應(yīng)用同樣的樣式,該怎么辦呢?可以這么做:

h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

以上對(duì)選擇器進(jìn)行了分組,所以規(guī)則右邊的樣式會(huì)應(yīng)用到所列的所有標(biāo)題上,而且對(duì)聲明分組意味著所列的所有樣式都會(huì)應(yīng)用到規(guī)則左邊的選擇器。

這種方法對(duì)比較長(zhǎng)的樣式很適用,該樣式可能如下:

h1 {color: gray;}

h2 {color: gray;}

h3 {color: gray;}

h4 {color: gray;}

h5 {color: gray;}

h6 {color: gray;}

h1 {background: white;}

h2 {background: white;}

h3 {background: white;}

而且后面還有很多行。用這種方式寫出長(zhǎng)長(zhǎng)的樣式也是可以的,不過(guò)我不推薦這樣的方法,編輯這樣一個(gè)冗長(zhǎng)的樣式就像到處使用font標(biāo)記一樣麻煩!

還可以向選擇器增加更多的表達(dá)式,并按信息的類型以“快捷”方式選擇元素來(lái)應(yīng)用樣式。當(dāng)然,要想得到如此強(qiáng)大的功能,還需要先做一點(diǎn)準(zhǔn)備工作,但這是很值得的。