ＣＳＳ在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

摘要：無論是門戶網(wǎng)站還是如今流行的B/S結(jié)構(gòu)的企業(yè)MIS，都是靠網(wǎng)頁來展現(xiàn)它的內(nèi)容、與用戶進(jìn)行交流。網(wǎng)頁可以簡單地描述為“內(nèi)容＋表現(xiàn)”，CSS（Cascading Style Sheet，級聯(lián)樣式表）是最好的網(wǎng)頁“表現(xiàn)”技術(shù)，它使用一套完整而且靈活的規(guī)則，將網(wǎng)頁的內(nèi)容和表現(xiàn)方法徹底分離，利用它能設(shè)計(jì)出具有復(fù)雜布局的精美網(wǎng)頁，并且代碼簡潔、干凈、易于調(diào)整和維護(hù)，為網(wǎng)頁設(shè)計(jì)人員和維護(hù)人員節(jié)省大量的時間和精力，提高企業(yè)的經(jīng)濟(jì)效益。

關(guān)鍵詞：CSS；網(wǎng)頁；級聯(lián)樣式表；HTML

中圖分類號：TP311文獻(xiàn)標(biāo)識碼：B文章編號：1009-3044(2008)08-10ppp-0c

1 引言

網(wǎng)頁是用HTML、XHTML、XML等標(biāo)記語言書寫的，由一系列標(biāo)簽組成，這些語言是用來對內(nèi)容進(jìn)行組織，而CSS是負(fù)責(zé)如何對網(wǎng)頁內(nèi)容進(jìn)行表現(xiàn)，更加美觀和人性化地展現(xiàn)給讀者。

1993年前后，HTML是一門內(nèi)容很貧瘠的語言，它只關(guān)注如何描述諸如段落、超鏈接、列表、標(biāo)題等內(nèi)容，而如何將這些內(nèi)容人性化地呈現(xiàn)給讀者它并不關(guān)心。

幾年以后，開始出現(xiàn)HTML 3.2和HTML 4.0，其很大一部分都是實(shí)現(xiàn)如何對網(wǎng)頁表現(xiàn)進(jìn)行控制，諸如font、表格的cellspacing等標(biāo)簽。此時網(wǎng)頁設(shè)計(jì)者可以把自己的設(shè)計(jì)意圖很好地呈現(xiàn)給讀者，但是大量使用table和font等標(biāo)簽堆砌的代碼變得雜亂無章，使網(wǎng)頁難以更改和維護(hù)。

1996年，由W3C(World Wide Web Consortium，萬維網(wǎng)聯(lián)盟)發(fā)布了完整的CSS 1建議草案，這個草案迅速成為一個被廣泛采納的標(biāo)準(zhǔn)，W3C 于1999年對其進(jìn)行了修訂。該草案用以解決早期關(guān)于網(wǎng)頁表現(xiàn)方面的混亂局面。它提供了比早期HTML代碼更豐富的表現(xiàn)控制，比如，設(shè)置任何網(wǎng)頁元素的顏色、邊框、間距以及許多其他效果。

1998年，W3C擴(kuò)展了原有的規(guī)范建立了CSS 2，除了我們熟悉的屏幕瀏覽器之外，還包括諸如手機(jī)、PDA等各種媒介的表現(xiàn)形式標(biāo)準(zhǔn)，還增強(qiáng)了其他許多功能。2006年，W3C對其進(jìn)行修訂，制訂了CSS 2.1草案。目前，W3C仍在進(jìn)行CSS 3草案的研究和制訂之中。

CSS與網(wǎng)頁語言之間無縫集成，能夠更精確、更容易地控制網(wǎng)頁布局，優(yōu)化網(wǎng)頁結(jié)構(gòu)，為顏色、圖像和文本等等提供更多的控制選項(xiàng)，從而設(shè)計(jì)出具有復(fù)雜布局的精美網(wǎng)頁，不再依賴于層層嵌套的表格，而且網(wǎng)頁代碼更加整潔、干凈，易于調(diào)整和維護(hù)。鑒于目前所有瀏覽器，包括Internet Explorer、Netscape Navigator、Mozilla等都沒有完整地支持CSS 2標(biāo)準(zhǔn)的所有功能，本文只介紹一些通用的CSS功能。

2 樣式元素應(yīng)用方法

簡單地說，樣式就是一個規(guī)則，它告訴瀏覽器如何將(X)HTML文檔中的內(nèi)容呈現(xiàn)給讀者（下面簡稱表現(xiàn)），每個(X)HTML標(biāo)簽都有一些特定的樣式屬性，它的值決定了瀏覽器如何顯示這個標(biāo)簽。將樣式和標(biāo)簽結(jié)合起來有三種方式：內(nèi)聯(lián)樣式表、文檔級樣式表和外部樣式表，瀏覽器將所有樣式表中定義的樣式合并在一起，然后以內(nèi)聯(lián)樣式結(jié)束，這種級聯(lián)方式就是“級聯(lián)樣式表”的含義。

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

在標(biāo)簽中加入style屬性，后面跟一些屬性及屬性的值，如＜h1 style=\"margin:5px; width:66px;\"＞test＜/h1＞。由于內(nèi)聯(lián)樣式只影響被定義的標(biāo)簽，具有局部性，在每個需要樣式的標(biāo)簽中都要進(jìn)行定義，大量使用style屬性會顯著增加文檔大小，使代碼變得難以維護(hù)，所以盡量少用。

2.2 文檔級樣式表

將所有樣式定義集中起來放在HTML文檔＜head＞ ＜/head＞之間，使用＜style＞ ＜/style＞將其包含起來。如：＜head＞＜style type=\"text/css\"＞.style1 {font-family: \"黑體\"; font-weight: bold;}＜/style＞＜/head＞。這種樣式表只能在HTML文檔中定義與使用，每個HTML文檔內(nèi)都需要單獨(dú)定義一套樣式規(guī)則，不利于樣式的重用，維護(hù)起來也相對麻煩，不宜大量使用。

2.3 外部樣式表

將所有樣式定義放在一個單獨(dú)的CSS文件中，與HTML文件分開存放。這樣一個樣式表文件可以被多個HTML文檔引用，CSS文件通過網(wǎng)絡(luò)單獨(dú)下載，可以隨時下載，隨時使用，甚至可以使用其他樣式表。要在HTML文檔中使用外部樣式表有兩種方式，都是在head部分加入相應(yīng)代碼：

(1)鏈接。加入＜link href=\"css/css1.css\" rel=\"stylesheet\" type=\"text/css\" /＞代碼來對CSS文件夾下css1.css樣式表的引用。

(2)引入。＜style＞@import url(css/css1.css);＜/style＞。

通過鏈接或引入css1.css外部樣式表，我們就可以在HTML文檔中任意使用css1.css中定義的樣式。這種樣式表維護(hù)起來是最方便的，也顯著減少了HTML文檔大小，使得網(wǎng)頁的下載速度更快。推薦使用這種方式。

3 CSS中的選擇符應(yīng)用方法

樣式語法：選擇符 {屬性：值；屬性：值1值2；...}

3.1 標(biāo)簽選擇符。如p {color::#F2F2E6;}。這種方式可應(yīng)用于大部分HTML標(biāo)簽，如p， h1， a等，甚至html本身。還可以是XML中自定義的標(biāo)簽，如myself。樣式屬性影響文檔中所有該標(biāo)簽。

3.2 組合選擇符。如：body， h1， p {color: gray;}。把不同的標(biāo)簽放在一起，中間使用逗號分隔，表示后面的樣式定義適用于所有列出的選擇符。當(dāng)多個標(biāo)簽需要定義相同屬性時，這種方法很方便。

3.3 通用選擇符。如* {color: red;}。其中的星號匹配了所有標(biāo)簽。

3.4 類選擇符。在標(biāo)簽中加入class屬性，在樣式定義中，類選擇符是在選擇符前加入句點(diǎn)。類選擇符可以應(yīng)用于所有標(biāo)簽，可以重復(fù)使用，即同一個類選擇符可以被多個標(biāo)簽多次使用。分為三種：

(1)一個類影響所有標(biāo)簽。如＜p class=\"warning\"＞Test＜/p＞，此時用.warning {font-weight: bold;}將段落文字Test加粗顯示。

(2)一個類影響特定標(biāo)簽。如span.warning {font-weight: bold;}，此時，只有在出現(xiàn)形如＜span class=”warning”＞＜/span＞的地方才應(yīng)用該定義樣式。

(3)多個類影響一個標(biāo)簽。如＜p class=\"urgent warning\"＞Important Notice！＜/p＞，應(yīng)用.warning.urgent {background: #00ff00;}，段落將受兩個類選擇符urgent和warning共同影響，書寫時urgent和warning的順序無關(guān)緊要。

3.5 ID選擇符

在標(biāo)簽中加入id屬性，在樣式定義中，ID選擇符是在選擇符前加入#。ID選擇符可以應(yīng)用于所有標(biāo)簽，因?yàn)樗鼧?biāo)識的是HTML文檔中惟一的一個元素，所以同一個ID選擇符在同一文檔中只能被使用一次，不能重復(fù)應(yīng)用于其他標(biāo)簽。這就是它和類選擇符的區(qū)別。如＜p id=\"warning\"＞Test＜/p＞，#warning {font-weight: bold;}

3.6 屬性選擇符

(1)簡單屬性選擇符。選擇的依據(jù)是標(biāo)簽包含給定的屬性，而不關(guān)心該屬性的值。如＜h1 class=\"hoopla\"＞text1＜/h1＞ ＜h1 class=\"severe\"＞text2＜/h1＞，應(yīng)用h1[class] {color:silver;}將同時影響text1和text2兩處文本。簡單屬性選擇符也可以選擇多個屬性。如a[href][title] {font-weight:bold;}，將同時包含href和title屬性的鏈接文字加粗顯示。

(2)基于確定值的屬性選擇符。選擇的依據(jù)是標(biāo)簽屬性等于某個值。如a[href=\"http://www.w3c.org\"] {font-weight: bold;}，將鏈接地址文字加粗顯示。

(3)基于部分選擇值的屬性選擇符。選擇的依據(jù)是標(biāo)簽屬性中包含某個值。如img[title~=\"Figure\"] {border: 1px solid;}，將選中title屬性中包含F(xiàn)igure字樣的img標(biāo)簽，對于區(qū)分文檔中圖表和圖片很有用。

(4)特殊屬性選擇符。如img[src|=\"figure\"] {border: 1px solid;}，將選中所有src屬性以figure開頭的img標(biāo)簽，如figure.gif、figure1.gif。

(5)后代選擇符。如＜h1＞I am ＜strong＞a ＜em＞super＜/em＞man!＜/strong＞＜/h1＞，應(yīng)用h1 em {color: gray;}，在HTML文檔結(jié)構(gòu)中em標(biāo)簽在是h1標(biāo)簽的后代，結(jié)果將super文本的顏色顯示為灰色。

(6)父子選擇符。如

＜h1＞This is ＜strong＞very＜/strong＞ important＜/h1＞

＜h1＞This is ＜em＞really ＜strong＞very＜/strong＞＜/em＞ important＜/h1＞

應(yīng)用h1 ＞ strong {color: red;}將選中第一個h1標(biāo)簽，因?yàn)閟trong標(biāo)簽與h1標(biāo)簽是父子關(guān)系。

(7)相鄰兄弟選擇符。如h1 + p {margin: 0;}，將選中緊接h1標(biāo)簽的p標(biāo)簽。

(8)偽類選擇符。如a:link {color: navy;}。當(dāng)前瀏覽器都支持的常用偽類選擇符有：a:link， a:visited， a:hover， a:active， a:focus等。

4 樣式優(yōu)先級規(guī)則

當(dāng)有多個樣式應(yīng)用于同一標(biāo)簽，就可能出現(xiàn)沖突，最終結(jié)果是靠樣式優(yōu)先級決定，優(yōu)先級高的勝出。規(guī)則如下：

4.1 根據(jù)來源排序。內(nèi)聯(lián)樣式優(yōu)先于文檔級樣式、文檔級樣式優(yōu)先于外部樣式。

4.2 根據(jù)類排序。標(biāo)簽的類的屬性優(yōu)先于為標(biāo)簽總體定義的屬性。如p {color: red;}，.iamblue {color: blue;}，對于＜p class=”iamblue”＞test＜/p＞，將應(yīng)用上述第二個樣式。

4.3 根據(jù)特殊性排序。一個具有更特殊的屬性優(yōu)先于一般的屬性。如p#bright {color: silver;}，p {color: black;}，第一個優(yōu)先于第二個。

4.4 根據(jù)順序排序。最后定義的屬性優(yōu)先。如H1 {color: red;}，H1 {color: blue;}，第二個優(yōu)先。

5 需要掌握的CSS重要概念

5.1 元素。元素是CSS顯示的基礎(chǔ)，HTML中的所有標(biāo)簽，都是元素。每個元素都被一個方框包圍。有兩種類型：

(1)可替換元素。其意思是元素本身并不包含實(shí)質(zhì)內(nèi)容，其內(nèi)容在瀏覽器中顯示時被外部內(nèi)容替換。比如＜img src=\"myimage.gif\" /＞，此img標(biāo)簽（元素）只是表明對外部圖像文件myimage.gif的引用，在實(shí)際顯示時，將被一幅圖像替換。還有input標(biāo)簽，也是可替換元素，在實(shí)際顯示時被替換為單選框、檢查框、文本框等。

(2)不可替換元素。HTML標(biāo)簽大多數(shù)是不可替換元素。此類標(biāo)簽本身包含實(shí)質(zhì)內(nèi)容，由瀏覽器直接讀取并顯示。比如p、li、span、table等等。

5.2 元素顯示樣式

在CSS 2.1中，根據(jù)顯示方式不同把元素分為兩種：

(1)塊級元素。在元素所表示的方框的前、后都與其他元素分開。就像加入回車符一樣。塊級元素包含p、h、div、li等。

(2)內(nèi)聯(lián)級元素。在元素所表示的方框前、后與其他元素沒有分開。如a、strong和em標(biāo)簽。

可以在標(biāo)簽內(nèi)加入display屬性改變其顯示方式。如：p {display: inline;}會把p標(biāo)簽當(dāng)作內(nèi)聯(lián)級元素顯示。

5.3 元素框

圖1 元素框模型概覽

圖2 CSS元素框詳細(xì)模型

在圖1中，最中間為塊級元素內(nèi)容，向外依次為填充（padding）、邊框（border）、邊距（margin）。在圖2中，詳細(xì)列出了CSS元素框模型的每個屬性，中間部分的height和width對應(yīng)于標(biāo)簽的height和width屬性。

5.4 關(guān)于簡寫

(1)樣式屬性含有top、right、bottom、left。如.test { margin-top:5px; margin-right:5px; margin-bottom:5px; margin-left:5px;}，可以簡寫為.test {margin:5px;}。若上、下邊距為5px，而左、右邊距為8px; 可以簡寫為.test {margin:5px 8px;}，瀏覽器將5px、8px重復(fù)使用于Top、Right、Bottom和Left，將首字母順序連起來就是TRBL（讀作trouble易于記憶）。

(2)顏色縮寫。完整顏色表示應(yīng)該為6個16進(jìn)制數(shù)，但也可以使用三個16進(jìn)制數(shù)字表示。如：#F0F表示FF00FF

6 浮動與定位應(yīng)用方法

浮動與定位是利用CSS進(jìn)行網(wǎng)頁布局的基礎(chǔ)，功能非常強(qiáng)大，也非常方便，我們只需要利用div、float、position就可以完全替代傳統(tǒng)的表格布局方式并提供更多的控制選項(xiàng)。表格布局有其先天的缺陷，就是瀏覽器必須全部讀出表格內(nèi)容后才能顯示，當(dāng)有多個復(fù)雜的表格進(jìn)行嵌套時，打開網(wǎng)頁的速度將顯著受到影響。再有就是調(diào)整一個表格單元時，經(jīng)常會影響到其他表格單元，當(dāng)一個網(wǎng)頁含有大量表格時，網(wǎng)頁就變得難以調(diào)整和維護(hù)。而利用CSS進(jìn)行布局，就沒有這些煩惱，你可以精確控制每個網(wǎng)頁元素的位置和大小，你只需更改幾個樣式屬性值就會使網(wǎng)頁煥然一新。

6.1 浮動（float）

可以把浮動元素看作處于一個單獨(dú)的層，不屬于正常的文檔流。Float屬性值有：left、 right、none、inherit。可以應(yīng)用于任何標(biāo)簽。如＜img src=\"b4.gif\" style=\"float: left;\"＞會把b4.gif圖像浮動到左邊，其后面的文本將從圖像的右邊和下邊顯示。當(dāng)一個網(wǎng)頁包含多個浮動元素時，可能會造成重疊，這時我們可以使用clear屬性，如h1 {clear: both;}，會阻止任何浮動元素覆蓋h1元素。

6.2 定位（position）

定位的含義很簡單，就是表明元素框的顯示位置在哪里，有四種定位方式。

(1)static，靜態(tài)定位。元素框按正常方式顯示。對于塊級元素，其元素框?qū)儆谡Ｎ臋n流，對于內(nèi)聯(lián)級元素，其元素框顯示在包含它的塊中。

(2)relative，相對定位。元素框被偏移一定的距離，元素保持其原有形狀和所占用的空間。

(3)absolute，絕對定位。元素框不屬于正常文檔流，其定位的基準(zhǔn)是包含它的塊。元素框在正常文檔流中的占用空間被關(guān)閉，好像該元素不存在一樣，無論該元素本身是塊級還是內(nèi)聯(lián)級，都會產(chǎn)生塊級元素框。

(4)fixed，固定定位。除了包含它的元素只能為視口（瀏覽器的窗口）外，其他表現(xiàn)和absolute一樣。利用此屬性可以產(chǎn)生類似frame的效果。

7 結(jié)束語

本文結(jié)合實(shí)例對CSS進(jìn)行了簡明扼要的介紹，展現(xiàn)了CSS在網(wǎng)頁設(shè)計(jì)中靈活、強(qiáng)大的功能，可以看到，在網(wǎng)頁中使用CSS能達(dá)到三個目的：一是優(yōu)化網(wǎng)頁結(jié)構(gòu)，顯著減小網(wǎng)頁文件的大小，使得網(wǎng)頁瀏覽速度更快。二是網(wǎng)頁的布局和樣式的調(diào)整都可以在CSS文件中進(jìn)行，不需要改動每個HTML文件，這對于維護(hù)一個大型網(wǎng)站很重要，能為網(wǎng)站維護(hù)人員節(jié)省大量時間和精力。三是輕松設(shè)計(jì)具有復(fù)雜布局的網(wǎng)頁，使網(wǎng)頁更美觀。

參考文獻(xiàn)：

[1]W3C.Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification[EB/OL] .http://www.w3.org/TR/CSS21/.

[2]Eric Meyer.Cascading Style Sheets[M].2nd Edition.USA:O'Reilly，2004.10-452.

[3]技橋譯.HTML與XHTML權(quán)威指南[M].第5版.北京:清華大學(xué)出版社，2003.33-199.