本文摘選自《Dreamweaver MX 2004 從基礎(chǔ)到實(shí)踐》
Cascading Style Sheets（簡(jiǎn)稱(chēng)CSS），翻譯為“層疊樣式單”或“級(jí)聯(lián)樣式單”，又簡(jiǎn)稱(chēng)“樣式表”。
CSS的引入是用來(lái)擴(kuò)展HTML的，而不是用來(lái)替代HTML的。也就是說(shuō)CSS離不開(kāi)HTML，它只是一項(xiàng)輔助工具，是對(duì)HTML功能的一種補(bǔ)充。
CSS的優(yōu)勢(shì)
在CSS標(biāo)準(zhǔn)里，不僅重新定義了HTML原有的樣式，如文字的大小、顏色等；更加入了重疊文字、區(qū)塊變化及任意位置放置等多項(xiàng)新屬性。通過(guò)CSS可以使用更豐富、更靈活的樣式，更簡(jiǎn)單地設(shè)計(jì)出更美觀的網(wǎng)頁(yè)。同時(shí)，也讓網(wǎng)頁(yè)的設(shè)計(jì)與維護(hù)更有效率。
減少圖像文件的使用：很多網(wǎng)頁(yè)為求設(shè)計(jì)效果，而大量使用圖像，以致網(wǎng)頁(yè)的下載速度變慢。CSS提供了很多文字樣式的設(shè)定，且再加上IE內(nèi)建的濾鏡特效，因此可輕松取代原來(lái)圖像才能表現(xiàn)的視覺(jué)效果。這樣的設(shè)計(jì)方式讓修改網(wǎng)頁(yè)內(nèi)容變得更方便，也大大提高了下載速度；
集中管理樣式信息：CSS的基本概念在于可將網(wǎng)頁(yè)要展示的內(nèi)容與其表現(xiàn)的樣式設(shè)定分開(kāi)，也就是將網(wǎng)頁(yè)的外觀設(shè)定信息從網(wǎng)頁(yè)的內(nèi)容中獨(dú)立出來(lái)，并集中管理。這樣，當(dāng)要改變網(wǎng)頁(yè)外觀時(shí)，只需更改樣式設(shè)定的部分，HTML文件本身并不需要任何的更改；
共享樣式設(shè)定：網(wǎng)頁(yè)的樣式設(shè)定和內(nèi)容分離的好處，除了可集中管理外，如果進(jìn)一步將CSS樣式的信息存儲(chǔ)成獨(dú)立的文件，還可讓多個(gè)網(wǎng)頁(yè)文件共同使用它。這樣，可省卻在每一個(gè)網(wǎng)頁(yè)文件中都要重復(fù)設(shè)定樣式的麻煩；
將樣式分類(lèi)使用：相對(duì)于多份HTML文件可套用同一個(gè)CSS樣式文件，也可以在一份HTML網(wǎng)頁(yè)文件上套用多個(gè)CSS樣式文件。
CSS的規(guī)則
CSS的樣式規(guī)則由兩部分組成：選擇器和聲明。
選擇器就是樣式的名稱(chēng)，包括自定義的類(lèi)，HTML標(biāo)簽和CSS選擇器樣式。比如“.mycss”為自定義的類(lèi)，“td”為標(biāo)準(zhǔn)HTML標(biāo)簽，而“a:link”則是CSS選擇器樣式；
聲明則是用于定義樣式元素的。聲明由分兩部分：屬性（如font-size）和值（如12px）。對(duì)于一個(gè)選擇器而言，可以有多個(gè)聲明。比如一個(gè)聲明是表示顏色，一個(gè)聲明是表示大小等。
以下為CSS樣式的代碼片段：
td { font-size: 12px; color: #666666; } .cnbruce { background-color: #000033; } |
其中“td”和“.cnbruce”都屬于選擇器，“font-size”、“color”以及“background-color”都屬于聲明中的屬性，而“12px”、“#666666”及“#000033”即為屬性對(duì)應(yīng)的值。每個(gè)選擇器的聲明都采用{…}包含。
CSS的形式
從CSS代碼的標(biāo)簽形式來(lái)看，分如下3種CSS樣式：
1，自定義CSS樣式，又稱(chēng)類(lèi)樣式。可應(yīng)用于任何標(biāo)簽，名稱(chēng)必須帶有句點(diǎn)“.”，比如“.cnbruce”；
2，HTML標(biāo)簽樣式。雖說(shuō)自定義CSS樣式可應(yīng)用任何標(biāo)簽，但對(duì)于HTML固有的標(biāo)簽，每次都要選用自定義的樣式就顯得比較麻煩。所以HTML標(biāo)簽樣式的出現(xiàn)就是為了擴(kuò)展HTML標(biāo)簽的；
3，CSS選擇器樣式。此為高級(jí)選項(xiàng)，可用來(lái)定義標(biāo)簽的組合，比如“a”表示對(duì)超級(jí)鏈接樣式的選擇，“td”表示對(duì)單元格樣式的選擇，而如果對(duì)單元格中超級(jí)鏈接樣式的選擇則使用“td a”。
| a { color: #3366CC; } td a{ color: #FF0000; } |
如上代碼的定義，對(duì)于普通插入的超級(jí)鏈接的顏色，和在單元格中使用的超級(jí)鏈接的顏色，將進(jìn)行不同的顯示。
CSS的應(yīng)用范圍
CSS無(wú)處不在，它可以分為以下兩種。
外部CSS樣式表：以擴(kuò)展名為.css的文件而存在，文件中內(nèi)容即是所有樣式的選擇和聲明。該文件可做為共享文件，讓多個(gè)文檔共同引用并應(yīng)用，達(dá)到站點(diǎn)文件樣式的一致性。同時(shí)，如果修改該樣式表文件，所有引用的文檔都將改變其樣式，達(dá)到網(wǎng)站迅速改版的目的。
內(nèi)部CSS樣式表：只存在于當(dāng)前文檔中，并只針對(duì)當(dāng)前頁(yè)進(jìn)行樣式應(yīng)用的方法。一般存在于文檔head部分的style標(biāo)簽內(nèi)。
外部CSS樣式表和內(nèi)部CSS樣式表可同時(shí)作用于一個(gè)頁(yè)面，但當(dāng)兩種樣式表出現(xiàn)對(duì)同一選擇對(duì)象進(jìn)行樣式修飾時(shí)，瀏覽器將按照如下規(guī)則來(lái)應(yīng)用樣式效果：
若兩者所聲明的屬性不相沖突，則顯示為該兩種樣式的全部屬性；
若兩者所聲明的屬性直接相沖突，則采用內(nèi)部樣式表的樣式。
所謂“求同存異，內(nèi)部?jī)?yōu)先”。
