摘 要：在網(wǎng)站的前臺界面設(shè)計(jì)中，頁面的布局起著至關(guān)重要的作用，而對于DIV+CSS網(wǎng)頁布局技術(shù)，主要是應(yīng)用CSS樣式來實(shí)現(xiàn)頁面的布局效果控制。本文從CSS樣式應(yīng)用類型和優(yōu)先關(guān)系兩個(gè)方面對CSS樣式的應(yīng)用進(jìn)行了分析。

關(guān)鍵詞：CSS樣式表；CSS選擇器；優(yōu)先級

中圖分類號：G642 文獻(xiàn)標(biāo)識碼：A

在網(wǎng)頁設(shè)計(jì)中，我們通常利用CSS來定義頁面中各元素的樣式，使之呈現(xiàn)出我們所需要的效果。而在WEB標(biāo)準(zhǔn)中，有一點(diǎn)很重要的就是要實(shí)現(xiàn)內(nèi)容與格式的分離，通常將內(nèi)容用HTML標(biāo)記來定義，內(nèi)容的顯示形式則利用CSS樣式來實(shí)現(xiàn)。在網(wǎng)頁中使用到的CSS樣式有著不同的類型和運(yùn)用方式。

1 CSS樣式表的類型及優(yōu)先級

1.1 瀏覽器默認(rèn)的CSS樣式表

當(dāng)我們在設(shè)計(jì)網(wǎng)頁時(shí)，如果沒有對網(wǎng)頁中的相關(guān)元素設(shè)置CSS樣式，那么，在瀏覽器中瀏覽網(wǎng)頁時(shí)，將根據(jù)瀏覽器缺省的樣式來顯示網(wǎng)頁內(nèi)容。

1.2 外部樣式表文件

外部樣式表就是將所定義的CSS樣式單獨(dú)存儲在一個(gè)擴(kuò)展名為.css的文件中，當(dāng)網(wǎng)頁中需要應(yīng)用指定的.css文件時(shí)，就通過標(biāo)記來引用。

如果定義了一個(gè)外部樣式表文件11.css，在網(wǎng)頁中引用這個(gè)CSS文件的方法如下所示：

1.3 內(nèi)部樣式表

內(nèi)部樣式表指的是將CSS樣式的定義放置在網(wǎng)頁文件的標(biāo)記之間，如：

1.4 內(nèi)聯(lián)樣式表

內(nèi)聯(lián)樣式表是將CSS樣式的定義直接放置在HTML標(biāo)記的屬性STYLE之中，如：

標(biāo)題內(nèi)容

1.5 CSS樣式表的優(yōu)先級

以下四種CSS樣式表如果應(yīng)用在同一個(gè)網(wǎng)頁中，它們的優(yōu)先級別是不一樣的。

一般情況下，它們的優(yōu)先級別由低到高依次是：瀏覽器默認(rèn)的樣式表、外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式表[2]。

但要注意的是內(nèi)部樣式表和外部樣式表的優(yōu)先關(guān)系并不總是如此，如果外部樣式表的引用放在內(nèi)部樣式表的定義之后，那么，外部樣式表的優(yōu)先級將高于內(nèi)部樣式表[2]。

2 不同CSS選擇器的優(yōu)先級

在頁面元素上應(yīng)用CSS樣式時(shí)，還應(yīng)考慮CSS選擇器的優(yōu)先問題。CSS選擇器一般分為兩大類，一類是基本選擇器，包括標(biāo)簽選擇器、類選擇器、ID選擇器這三種；另一類是組合選擇器，組合選擇器是將三種基本選擇器按一定的方式組合在一起而構(gòu)成的選擇器[1]。

我們先來看如下的代碼：

網(wǎng)頁設(shè)計(jì)

在以上代碼中我們可以發(fā)現(xiàn)，作用于

標(biāo)記的CSS樣式都不止一種，而不同的CSS樣式中文字的顏色都是不一樣的，那么這些段落中的文字究竟應(yīng)該按哪一種格式顯示呢？

當(dāng)這幾種不同的選擇器同時(shí)作用于網(wǎng)頁中的同一個(gè)元素時(shí)，它們所定義的樣式之間有可能會存在沖突。當(dāng)樣式之間產(chǎn)生沖突后，就要通過它們的優(yōu)先級來決定到底由哪些樣式會產(chǎn)生作用，這一點(diǎn)同樣取決于它們的優(yōu)先級。

CSS選擇器的優(yōu)先級一般按以下方法判斷：

2.1 比較CSS選擇器的權(quán)重值，權(quán)重越大，優(yōu)先級越高

幾種基本CSS選擇器的權(quán)重值如圖1所示。

圖1 不同CSS選擇器的權(quán)重值

那么，組合選擇器的權(quán)重又是多少呢？

我們知道，組合選擇器其實(shí)就是由三種基本選擇器按一定的方式組合在一起而形成的，所以組合選擇器的權(quán)重值就是將里面所包含的不同選擇器根據(jù)組合的數(shù)目和各自的權(quán)重值進(jìn)行累加而得到的。

如：#main p.font1{ }就是一個(gè)組合樣式，它的權(quán)重值就是100+1+10=111。

2.2 權(quán)重值相等時(shí)，位置越靠后，優(yōu)先級越高

對于權(quán)重值相等的CSS選擇器，我們可以通過它們在CSS樣式表中定義時(shí)出現(xiàn)的先后位置來判斷。在樣式表文件中出現(xiàn)的位置越靠后，它的優(yōu)先級別就越高[1]。

如：

網(wǎng)頁設(shè)計(jì)與制作

在以上代碼中，段落中同時(shí)使用了兩個(gè)類樣式，這兩個(gè)樣式文字顏色的設(shè)置上存在沖突，而它們的權(quán)重值則是相等的。但我們注意到，在樣式表文件中，.font2定義的位置比.font1靠后，所以它的優(yōu)先級高于.font1，文字顯示為綠色。

2.3 通過！important可以改變選擇器的優(yōu)先級

在定義CSS規(guī)則時(shí)，如果在屬性值后面加上！important，那么它的優(yōu)先級將是最大的[2]。如：

.font1{color：#f00！important； /*紅色*/}

網(wǎng)頁設(shè)計(jì)與制作

這時(shí)，雖然內(nèi)聯(lián)樣式的權(quán)重值為1000，.font1的權(quán)重值為1，但是在.font1樣式中，我們在color屬性中加上了！important，這時(shí)它的優(yōu)先級將超越內(nèi)聯(lián)樣式，所以段落文字顯示為.font1中所設(shè)置的紅色。

3 結(jié)語

在使用DIV+CSS技術(shù)進(jìn)行網(wǎng)頁布局時(shí)，我們一定要熟悉各種CSS樣式表的類型及它們應(yīng)用于同一個(gè)網(wǎng)頁時(shí)的優(yōu)先順序；同時(shí)，對于多種CSS選擇器作用于同一頁面元素時(shí)，如果樣式屬性產(chǎn)生了沖突，一定要考慮清楚它們的優(yōu)先級別，這樣才不會出現(xiàn)設(shè)置的CSS樣式在頁面中無效的情況，所以，只有熟練掌握了CSS樣式在網(wǎng)頁中的應(yīng)用，在進(jìn)行頁面設(shè)計(jì)時(shí)才不會出錯(cuò)，不會走彎路。

參考文獻(xiàn)

[1] 溫謙.CSS徹底研究[M].北京：人民郵電出版社，2008.

[2] Jeff Croft，李方進(jìn).CSS實(shí)戰(zhàn)精粹[M].北京：電子工業(yè)出版

社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領(lǐng)域：計(jì)算機(jī)網(wǎng)絡(luò).