本文摘選自《Dreamweaver MX 2004 從基礎(chǔ)到實踐

Cascading Style Sheets(簡稱CSS),翻譯為“層疊樣式單”或“級聯(lián)樣式單”,又簡稱“樣式表”。

CSS的引入是用來擴(kuò)展HTML的,而不是用來替代HTML的。也就是說CSS離不開HTML,它只是一項輔助工具,是對HTML功能的一種補(bǔ)充。

CSS的優(yōu)勢

在CSS標(biāo)準(zhǔn)里,不僅重新定義了HTML原有的樣式,如文字的大小、顏色等;更加入了重疊文字、區(qū)塊變化及任意位置放置等多項新屬性。通過CSS可以使用更豐富、更靈活的樣式,更簡單地設(shè)計出更美觀的網(wǎng)頁。同時,也讓網(wǎng)頁的設(shè)計與維護(hù)更有效率。

減少圖像文件的使用:很多網(wǎng)頁為求設(shè)計效果,而大量使用圖像,以致網(wǎng)頁的下載速度變慢。CSS提供了很多文字樣式的設(shè)定,且再加上IE內(nèi)建的濾鏡特效,因此可輕松取代原來圖像才能表現(xiàn)的視覺效果。這樣的設(shè)計方式讓修改網(wǎng)頁內(nèi)容變得更方便,也大大提高了下載速度;

集中管理樣式信息:CSS的基本概念在于可將網(wǎng)頁要展示的內(nèi)容與其表現(xiàn)的樣式設(shè)定分開,也就是將網(wǎng)頁的外觀設(shè)定信息從網(wǎng)頁的內(nèi)容中獨(dú)立出來,并集中管理。這樣,當(dāng)要改變網(wǎng)頁外觀時,只需更改樣式設(shè)定的部分,HTML文件本身并不需要任何的更改;

共享樣式設(shè)定:網(wǎng)頁的樣式設(shè)定和內(nèi)容分離的好處,除了可集中管理外,如果進(jìn)一步將CSS樣式的信息存儲成獨(dú)立的文件,還可讓多個網(wǎng)頁文件共同使用它。這樣,可省卻在每一個網(wǎng)頁文件中都要重復(fù)設(shè)定樣式的麻煩;

將樣式分類使用:相對于多份HTML文件可套用同一個CSS樣式文件,也可以在一份HTML網(wǎng)頁文件上套用多個CSS樣式文件。

CSS的規(guī)則

CSS的樣式規(guī)則由兩部分組成:選擇器和聲明。

選擇器就是樣式的名稱,包括自定義的類,HTML標(biāo)簽和CSS選擇器樣式。比如“.mycss”為自定義的類,“td”為標(biāo)準(zhǔn)HTML標(biāo)簽,而“a:link”則是CSS選擇器樣式;

聲明則是用于定義樣式元素的。聲明由分兩部分:屬性(如font-size)和值(如12px)。對于一個選擇器而言,可以有多個聲明。比如一個聲明是表示顏色,一個聲明是表示大小等。

以下為CSS樣式的代碼片段:


td {
    font-size: 12px;
    color: #666666;
}
.cnbruce {
    background-color: #000033;
}

其中“td”和“.cnbruce”都屬于選擇器,“font-size”、“color”以及“background-color”都屬于聲明中的屬性,而“12px”、“#666666”及“#000033”即為屬性對應(yīng)的值。每個選擇器的聲明都采用{…}包含。

CSS的形式

從CSS代碼的標(biāo)簽形式來看,分如下3種CSS樣式:

1,自定義CSS樣式,又稱類樣式。可應(yīng)用于任何標(biāo)簽,名稱必須帶有句點(diǎn)“.”,比如“.cnbruce”;

2,HTML標(biāo)簽樣式。雖說自定義CSS樣式可應(yīng)用任何標(biāo)簽,但對于HTML固有的標(biāo)簽,每次都要選用自定義的樣式就顯得比較麻煩。所以HTML標(biāo)簽樣式的出現(xiàn)就是為了擴(kuò)展HTML標(biāo)簽的;

3,CSS選擇器樣式。此為高級選項,可用來定義標(biāo)簽的組合,比如“a”表示對超級鏈接樣式的選擇,“td”表示對單元格樣式的選擇,而如果對單元格中超級鏈接樣式的選擇則使用“td a”。

a {
    color: #3366CC;
}
td a{
    color: #FF0000;
}

如上代碼的定義,對于普通插入的超級鏈接的顏色,和在單元格中使用的超級鏈接的顏色,將進(jìn)行不同的顯示。

CSS的應(yīng)用范圍

CSS無處不在,它可以分為以下兩種。

外部CSS樣式表:以擴(kuò)展名為.css的文件而存在,文件中內(nèi)容即是所有樣式的選擇和聲明。該文件可做為共享文件,讓多個文檔共同引用并應(yīng)用,達(dá)到站點(diǎn)文件樣式的一致性。同時,如果修改該樣式表文件,所有引用的文檔都將改變其樣式,達(dá)到網(wǎng)站迅速改版的目的。

內(nèi)部CSS樣式表:只存在于當(dāng)前文檔中,并只針對當(dāng)前頁進(jìn)行樣式應(yīng)用的方法。一般存在于文檔head部分的style標(biāo)簽內(nèi)。

外部CSS樣式表和內(nèi)部CSS樣式表可同時作用于一個頁面,但當(dāng)兩種樣式表出現(xiàn)對同一選擇對象進(jìn)行樣式修飾時,瀏覽器將按照如下規(guī)則來應(yīng)用樣式效果:

若兩者所聲明的屬性不相沖突,則顯示為該兩種樣式的全部屬性;
若兩者所聲明的屬性直接相沖突,則采用內(nèi)部樣式表的樣式。
所謂“求同存異,內(nèi)部優(yōu)先”。

標(biāo)簽:CSS知識

相關(guān)文章

隨機(jī)推薦