摘 要：在網站的前臺界面設計中，頁面的布局起著至關重要的作用，而對于DIV+CSS網頁布局技術，主要是應用CSS樣式來實現頁面的布局效果控制。本文從CSS樣式應用類型和優先關系兩個方面對CSS樣式的應用進行了分析。

關鍵詞：CSS樣式表；CSS選擇器；優先級

中圖分類號：G642 文獻標識碼：A

在網頁設計中，我們通常利用CSS來定義頁面中各元素的樣式，使之呈現出我們所需要的效果。而在WEB標準中，有一點很重要的就是要實現內容與格式的分離，通常將內容用HTML標記來定義，內容的顯示形式則利用CSS樣式來實現。在網頁中使用到的CSS樣式有著不同的類型和運用方式。

1 CSS樣式表的類型及優先級

1.1 瀏覽器默認的CSS樣式表

當我們在設計網頁時，如果沒有對網頁中的相關元素設置CSS樣式，那么，在瀏覽器中瀏覽網頁時，將根據瀏覽器缺省的樣式來顯示網頁內容。

1.2 外部樣式表文件

外部樣式表就是將所定義的CSS樣式單獨存儲在一個擴展名為.css的文件中，當網頁中需要應用指定的.css文件時，就通過標記來引用。

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

1.3 內部樣式表

內部樣式表指的是將CSS樣式的定義放置在網頁文件的標記之間，如：

1.4 內聯樣式表

內聯樣式表是將CSS樣式的定義直接放置在HTML標記的屬性STYLE之中，如：

標題內容

1.5 CSS樣式表的優先級

以下四種CSS樣式表如果應用在同一個網頁中，它們的優先級別是不一樣的。

一般情況下，它們的優先級別由低到高依次是：瀏覽器默認的樣式表、外部樣式表、內部樣式表、內聯樣式表[2]。

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

2 不同CSS選擇器的優先級

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

我們先來看如下的代碼：

網頁設計

在以上代碼中我們可以發現，作用于

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

當這幾種不同的選擇器同時作用于網頁中的同一個元素時，它們所定義的樣式之間有可能會存在沖突。當樣式之間產生沖突后，就要通過它們的優先級來決定到底由哪些樣式會產生作用，這一點同樣取決于它們的優先級。

CSS選擇器的優先級一般按以下方法判斷：

2.1 比較CSS選擇器的權重值，權重越大，優先級越高

幾種基本CSS選擇器的權重值如圖1所示。

圖1 不同CSS選擇器的權重值

那么，組合選擇器的權重又是多少呢？

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

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

2.2 權重值相等時，位置越靠后，優先級越高

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

如：

網頁設計與制作

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

2.3 通過！important可以改變選擇器的優先級

在定義CSS規則時，如果在屬性值后面加上！important，那么它的優先級將是最大的[2]。如：

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

網頁設計與制作

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

3 結語

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

參考文獻

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

[2] Jeff Croft，李方進.CSS實戰精粹[M].北京：電子工業出版

社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領域：計算機網絡.