摘 要: 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.