一.區分大小寫
當在XHTML中使用CSS,CSS裡定義的元素名稱是區分大小寫的。為了避免這種錯誤,我建議所有的定義名稱都採用小寫。
二.不需要給背景圖片路徑加引號
為了節省字節,我建議不要給背景圖片路徑加引號,因為引號不是必須的。例如:
background:url("images/***.gif") #333;
可以寫為
background:url(images/***. gif) #333;
如果你加了引號,反而會造成一些瀏覽器的錯誤。
三.用正確的順序指定連結的樣式
當你用CSS來定義連結的多個狀態樣式時,要注意它們書寫的順序,正確的順序是::link :visited :hover :active。抽取第一個字母是"LVHA",你可以記憶成"LoVe HAte"(喜歡討厭)。
四.清除浮動
一個非常常見的CSS問題,定位使用浮動的時候,下面的層被浮動的層所覆蓋,或者層裡嵌套的子層超出了外層的範圍。
通常的解決方法是在浮動層後面新增一個額外元素,例如一個div或一個br,並且定義它的樣式為clear: both。這個方法有一點牽強,幸運的是還有一個好方法可以解決,請參考這篇文章《How To Clear Floats Without Structural Markup》(註:本站將盡快翻譯此文)。
上面2種方法可以很好解決浮動超出的問題,但是如果當你真的需要對層或層裡的物件進行clear的時候怎麼辦?一個簡單的方法就是用overflow屬性,這個方法最初的發表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被廣泛討論。
上面那一種clear方法比較適合你,要看具體的情況,這裡不再展開論述。另外關於float的應用,一些優秀的文章已經說得很清楚,推薦你閱讀:《Floatutorial》、《Containing Floats》和《Float Layouts》
五.橫向居中(centering) 這是一個簡單的技巧,但是值得再說一遍,因為我看見太多的新手問題都是問這個:CSS如何橫向居中?你需要定義元素的寬,並且定義橫向的margin,如果你的佈局包含在一個層(容器)中,就像這樣:
body {
text-align:center;
}
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
text-align:left;
}
text-align:left;
}
六.調試技巧:層有多大?
當調試CSS發生錯誤,你就要像排版工人,逐行分析CSS程式碼。我通常會在出問題的圖層上定義一個背景顏色,這樣我就能很明顯地看到層佔據多大空間。有些人建議用border,一般情況也是可以的,但問題是,有時候border 會增加元素的尺寸,border-top和boeder-bottom會破壞縱向margin的值,所以使用background更安全些。