CSS編碼中的幾個問題

摘 要： CSS應用在網頁設計中，易于精確控制網頁布局、提高代碼重用率、簡化HTML中的各種繁瑣標記、提高網頁傳輸速率、便于對網頁的更新與維護。作者結合實踐經驗，總結出了CSS使用中的一些要點。

關鍵詞： CSS 網頁設計 要點

在網頁的設計制作過程中，CSS起著至關重要的作用，使用CSS實現頁面的內容與表現形式分離，可極大提高工作效率。編寫規范高效的CSS代碼是網站設計人員的追求，我結合實踐經驗，總結出了CSS使用中的一些要點。

一、學會使用縮寫代碼。

使用CSS縮寫可以減少頁面文件大小，提高下載速度，同時使代碼簡潔可讀。如：

div{

border-top:1px solid #cccccc;

border-left:1px solid #cccccc;

border-right:1px soli #cccccc;

border-bottom:1px solid #cccccc;

}

可縮寫為:div{border:1px solid #cccccc}

縮寫格式中需要注意：（1）中括號內是按上、右、下、左的書寫順；（2）數值與單位不能有空格，每個值之間用空格隔開。

二、一個html元素的class屬性可同時設定多個規則（多重class定義）。

一般寫法為：

，實際上我們可以為p元素指定多個規則，如：

CSS代碼：.a{…}

.b{…}

HTML代碼：

該元素同時包括a和b中設定的樣式

在這里需注意：多個規則之間用空格分開。

三、除非值為0，其他情況下應明確所賦值的單位。

CSS初學者普遍存在的問題是忘記定義尺寸，在html代碼中我們可以寫width=\"100\"，但在CSS中應該給出一個準確的單位。如：width:100px;height:50px;font-size:9pt，0值除外，因為對于任何單位，0值的大小都是相等的。在這里需注意：不要在數值和單位之間加空格。

四、有關大小寫問題。

在XHTML中，CSS定義的元素名稱是區分大小寫的，class和id的值在html和xhtml中也是區分大小寫的，所以為了避免錯誤，最好的方法是一律使用小寫。如：#aaa，與#AAA是不同的，在xhtml中，p和P也是不同的，它們之間不會覆蓋。如果在CSS中定義了#aaa，而在html元素中使用AAA來應用樣式，將不能得到#aaa中定義的樣式。如：

CSS:#aaa{border:1px solid #ccc}

HTML:

正確的格式是：

五、CSS的最近優先原則。

如果對一個元素定義了多次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其他的樣式定義。如：

CSS: p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

此處顯示為紅色

此處顯示為藍色

此處顯示為綠色

此處顯示為黃色

在這里需注意：

1.多重樣式的優先順序為：

①在HTML代碼中元素的style屬性中的設定值；

②在HTML代碼中head區中的設定值；

③外部引用的CSS文件中的設定值。

2.優先級不是按訪問順序來設定的，而是按照CSS中的聲明順序來設定的。如上例中

此處顯示為黃色

，可改為：

此處顯示為黃色

在這里也顯示為黃色，是因為在CSS定義中，yellow在blue的后面。

六、不要給背景圖片路徑加引號。

對于部分瀏覽器來說，在定義背景圖像時加引號會引起錯誤，所以最好的做法是一律不加引號。例如：background:url（\"xxx.gif\"）可改為：background:url（xxx.gif）。

七、書寫正確的鏈接樣式。

當用CSS定義鏈接的各種狀態時，一定要注意其書寫順序：:link—:visited—:hover—:active。如：

a:link{…}

a:visited{…}

a:hover{…}

a:activve{…}

如果不按照該順序書寫就可能無法達到自己希望的效果。為了記憶該順序我們抽取每個單詞的首字母：LVHA，可以通過記憶Love，Hate兩個單詞記住順序。

參考文獻：

［1］郝軍啟，劉治國，趙喜來等.Dreamweave CS4網頁設計與網站建設標準教程［M］.北京：清華大學出版社，2010.

［2］金峰.變幻之美:Div+CSS網頁布局揭秘.案例實戰篇［M］.人民郵電出版社，2009.