CSS的主要優(yōu)點之一(特別是對于網頁設計師來說),就是它能很容易地向所有同類型的元素應用一組樣式。是不是聽上去還不夠震撼?那么請這樣想想看:只需編輯一行CSS,就能改變所有標題的顏色!是不是不喜歡現(xiàn)在用的藍色?那就改變那行代碼,標題將會全部變成紫色、黃色、紫紅色,或者是你想要的任何其他顏色。這就能讓作為網頁設計師的你更多地關注設計而不是那些瑣事。下一次開會討論時,如果有人希望標題還要有綠色陰影,只需編輯樣式,再單擊Reload按鈕就行了。很酷吧?只需區(qū)區(qū)幾秒就大功告成。
當然,CSS并不能解決你的所有問題,比如說你不能用它來改變GIF的顏色,但是利用CSS確實能更容易地完成一些全局性的修改。所以下面先來介紹選擇器和結構。
前面已經提到,CSS的一個核心特性就是能向文檔中的一組元素類型應用某些規(guī)則。例如,假設你想讓所有h2元素的文本都顯示為灰色。如果使用傳統(tǒng)的HTML,就必須在所有h2 元素中插入<FONT COLOR="gray">...</FONT>標記:
<h2><font color="gray">This is h2 text</font></h2>
顯然,如果你的文檔中包含了大量h2元素,這將是一個很繁瑣的過程。更槽糕的是,如果你后來又決定要讓所有h2元素都是綠色而不是灰色,就必須再重來一次,手動地為所有h2元素設置相應的標記。
利用CSS,可以創(chuàng)建易于修改和編輯的規(guī)則,并且能很容易地將其應用到你定義的所有文本元素(下一節(jié)將解釋這些規(guī)則如何工作)。例如,只需將以下規(guī)則寫一次,就能讓所有h2元素變成灰色:
h2 {color:gray;}
如果希望將所有h2文本都改為其他顏色,如銀色,只需把這個規(guī)則修改如下:
h2 {color:silver;}
規(guī)則結構
為了更詳細地說明規(guī)則的概念,下面將規(guī)則的結構分解開逐一介紹。
每個規(guī)則都有兩個基本部分:選擇器(selector)和聲明塊(declaration block)。聲明塊由一個或多個聲明(declaration)組成,每個聲明則是一個屬性-值對(property-value)。每個樣式表由一系列規(guī)則組成。
一旦直接向元素全局地應用樣式,可以將這些樣式從一個元素切換應用到另一個元素。假設你決定將網頁中的主體字體設置為灰色。沒問題。只需把h1選擇器改為P:
html {color: black;}
p {color: gray;}
h2 {color: silver;}
聲明塊包含一個或多個聲明。聲明總有如下格式:一個屬性后面跟一個冒號,再后面是一個值,然后是一個分號。冒號和分號后面可以有0個或多個空格。幾乎在所有情況下,值要么是一個關鍵字,要么是該屬性可取關鍵字的一個列表(包含一個或多個關鍵字),關鍵字之間用空格分隔。如果聲明中使用了不正確的屬性或者不正確的值,整個聲明都會被忽略。因此,下面這兩個聲明將會失敗:
brain-size:2cm;/* unknown property */
color:ultraviolet;/* unknown value */
如果一個屬性的值可以取多個關鍵字,在這種情況下,關鍵字通常由空格分隔。并不是所有屬性都能接受多個關鍵字,不過確實有許多屬性是這樣,例如font屬性。假設你想為段落文本定義中等大小的Helvetica字體。
注意medium和Helvetica之間的空格,medium和Helvetica都是關鍵字(前一個指定了字體的大小,后一個是具體的字體名)。兩個關鍵字之間的空格使用戶代理能夠區(qū)分這兩個關鍵字,并適當?shù)貞?。后面的分號指示聲明結束。
用空格分隔的這些詞稱為關鍵字,這是因為,它們加在一起構成了當前屬性的值。例如,考慮以下假想規(guī)則:
rainbow: red orange yellow green blue indigo violet;
當然并沒有rainbow這樣的屬性,另外這里使用的顏色也不合法,不過可以用這個例子來說明有關的概念。rainbow 的值是red orange yellow green blue indigo violet,這7個關鍵字加在一起構成了一個唯一的值??梢园裷ainbow的值重新定義如下:
rainbow: infrared red orange yellow green blue indigo violet ultraviolet;
現(xiàn)在rainbow就有了一個新值,由9個而不是7個關鍵字組成。盡管這兩個值的名字是相同的,但是它們就像0和1一樣黑白分明,完全不同。
注意:可以看到,CSS關鍵字往往由空格分隔。只有一種情況例外。在CSS的font屬性中。只有一種情況下可以使用斜線(/)來分隔兩個特定關鍵字。下面是一個例子:
h2 {font: large/150% sans-serif;}
斜線分隔了用來設置元素的字體大小和行高的兩個關鍵字。只有在這里才允許font聲明中出現(xiàn)斜線。font允許的所有其他關鍵字都用空格分隔。
以上介紹了簡單聲明的基礎知識,不過聲明可以比這復雜得多。接下來將帶你了解CSS的功能有多強大。
到目前為止,我們已經學習了如何向一個選擇器應用一個樣式,這個技術相當簡單。但是如果想為多個元素應用同一個樣式該怎么做呢?倘若如此,可能要使用多個選擇器,或者向一個元素或一組元素應用多個樣式。
選擇器分組
假設希望h2元素和段落都有灰色文本。為達到這個目的,最容易的做法是使用以下聲明:
h2,p {color:gray;}
將h2和p選擇器放在規(guī)則的左邊,并用一個逗號來分隔,這樣就定義了一個規(guī)則,其右邊的樣式(color: gray;)將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器,規(guī)則中包含兩個不同的選擇器。如果沒有這個逗號,那么規(guī)則的含義則完全不同,有關內容將在“后代選擇器”一節(jié)中詳細介紹。
可以將任意多個選擇器分組在一起,對此沒有任何限制。例如,如果你想把很多元素顯示為灰色,可以使用類似如下的規(guī)則:
body,table,th,td,h1,h2,h3,h4,p,pre,strong,em,b,i{color:gray;}
通過分組,網頁設計師可以將某些類型的樣式“壓縮”在一起,這就能得到一個更簡短的樣式表。以下的兩組規(guī)則能得到同樣的結果,不過可以很清楚地看出哪一個寫起來更容易:
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ī)則分組都是等價的,每個組只是展示了對選擇器和聲明分組的不同方法:
/* 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引入了一種新的簡單選擇器,稱為通配選擇器(universal selector),顯示為一個星號(*)。這個選擇器可以與任何元素匹配,就像是一個通配符。例如,要讓一個文檔中的每一個元素都為紅色,可以寫為以下規(guī)則:
*{color: red;}
這個聲明等價于列出了網頁文檔中所有元素的一個分組選擇器。利用通配選擇器,只需敲一次鍵(僅一個星號)就能把文檔中所有元素的color值都指定為red。不過要當心,盡管通配選擇器很方便,但它也有一些意想不到的后果。
聲明分組
既然可以將選擇器分組到一個規(guī)則中,當然也可以對聲明分組。假設你希望所有h1元素都有淺綠色背景,并使用18像素高的Helvetica字體顯示為
紫色文本(你并不關心讀者能不能看清楚)??梢詫懸韵聵邮剑?/p>
h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}
但是這種方法效率不高,想想看,如果為一個有10個或15個樣式的元素創(chuàng)建這樣一個列表會多麻煩!相反,可以將聲明分組在一起:
h1 {font: 18px Helvetica; color: purple; background: aqua;}
這與前面的3行樣式表的效果完全一樣。
注意,對聲明分組時,一定要在各個聲明的最后使用分號,這很重要。瀏覽器會忽略樣式表中的空白符,而且用戶代理必須依賴正確的語法才能解析樣式表。只要加了分號,就可以毫無顧忌地采用以下格式建立樣式:
h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}
不過,如果忽略了第二個分號,用戶代理就會把這個樣式表解釋如下:
h1 {
font: 18px Helvetica;
color: purple background: agua;
}
因為background:對于color來說不是一個合法值,而且由于只能為color指定一個關鍵字,所以用戶代理會完全忽略這個color聲明(包括background: aqua部分。這樣h1標題只會顯示為紫色文本,而沒有淡綠色背景,不過更有可能根本得不到紫色的h1。相反,這些標題只會顯示為默認顏色(通常是黑色),而且根本沒有背景色(font:18px Helvetica聲明仍能正常起作用,因為它確實正確地以一個分號結尾)。
注意:盡管從技術上講沒有必要讓規(guī)則的最后一個聲明也以分號結尾,不過這通常是一個好的實踐做法。首先,這會讓你養(yǎng)成在聲明后加上分號的好習慣。聲明的最后缺少分號,是導致表現(xiàn)出錯的最常見的原因之一。其次,如果你決定向規(guī)則增加另一個聲明,就不必擔心忘記再插入一個分號。最后一點,如果規(guī)則中的最后一個聲明少了分號,一些較老的瀏覽器(如Internet Explorer 3.X)很可能會不知所措。一定要避免所有這些問題。所以只要出現(xiàn)規(guī)則,就要在聲明的后面加一個分號。
與選擇器分組一樣,聲明分組也是一種便利的方法,可以縮短樣式表,使之表述更為清晰,而且易于維護。
現(xiàn)在應該了解到,可以對選擇器分組,還可以對聲明分組。如果在一個規(guī)則中結合這兩種分組,就可以使用很少的一些語句定義相當復雜的網頁設計的樣式。現(xiàn)在,如果你想為文檔中的所有標題指定某種復雜的樣式,而且希望向所有這些標題應用同樣的樣式,該怎么辦呢?可以這么做:
h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}
以上對選擇器進行了分組,所以規(guī)則右邊的樣式會應用到所列的所有標題上,而且對聲明分組意味著所列的所有樣式都會應用到規(guī)則左邊的選擇器。
這種方法對比較長的樣式很適用,該樣式可能如下:
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;}
而且后面還有很多行。用這種方式寫出長長的樣式也是可以的,不過我不推薦這樣的方法,編輯這樣一個冗長的樣式就像到處使用font標記一樣麻煩!
還可以向選擇器增加更多的表達式,并按信息的類型以“快捷”方式選擇元素來應用樣式。當然,要想得到如此強大的功能,還需要先做一點準備工作,但這是很值得的。
當前文章標題:css在網頁設計中的分組功能
當前URL:http://m.supportcoffeeroasters.com/news/wzzz/css-webdesign-group.html
上一篇:css在網頁設計中的引入
下一篇:網頁css的類選擇器和id選擇器