一些很不錯的css技巧,但也常為人們所忽略_經驗交流

一.區分大小寫
當在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;
}


六.調試技巧：層有多大？
當調試CSS發生錯誤，你就要象排版工人，逐行分析CSS代碼。我通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用border，一般情況也是可以的，但問題是，有時候border 會增加元素的尺寸，border-top和boeder-bottom會破壞縱向margin的值，所以使用background更加安全些。

