一.區(qū)分大小寫
當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯(cuò)誤，我建議所有的定義名稱都采用小寫。

二.不需要給背景圖片路徑加引號(hào)
為了節(jié)省字節(jié)，我建議不要給背景圖片路徑加引號(hào)，因?yàn)橐?hào)不是必須的。例如：

background:url("images/***.gif") #333; 

可以寫為

background:url(images/***.gif) #333; 

如果你加了引號(hào)，反而會(huì)引起一些瀏覽器的錯(cuò)誤。


三.用正確的順序指定鏈接的樣式
當(dāng)你用CSS來(lái)定義鏈接的多個(gè)狀態(tài)樣式時(shí)，要注意它們書(shū)寫的順序，正確的順序是：:link :visited :hover :active。抽取第一個(gè)字母是"LVHA"，你可以記憶成"LoVe HAte"(喜歡討厭)。


四.清除浮動(dòng)
一個(gè)非常常見(jiàn)的CSS問(wèn)題，定位使用浮動(dòng)的時(shí)候，下面的層被浮動(dòng)的層所覆蓋，或者層里嵌套的子層超出了外層的范圍。

通常的解決辦法是在浮動(dòng)層后面添加一個(gè)額外元素，例如一個(gè)div或者一個(gè)br，并且定義它的樣式為clear: both。這個(gè)辦法有一點(diǎn)牽強(qiáng)，幸運(yùn)的是還有一個(gè)好辦法可以解決，參看這篇文章《How To Clear Floats Without Structural Markup》(注：本站將盡快翻譯此文)。

上面2種方法可以很好解決浮動(dòng)超出的問(wèn)題，但是如果當(dāng)你真的需要對(duì)層或者層里的對(duì)象進(jìn)行clear的時(shí)候怎么辦？一種簡(jiǎn)單的方法就是用overflow屬性，這個(gè)方法最初的發(fā)表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被廣泛討論。

上面那一種clear方法更適合你，要看具體的情況，這里不再展開(kāi)論述。另外關(guān)于float的應(yīng)用，一些優(yōu)秀的文章已經(jīng)說(shuō)得很清楚，推薦你閱讀：《Floatutorial》、《Containing Floats》和《Float Layouts》


五.橫向居中(centering)
這是一個(gè)簡(jiǎn)單的技巧，但是值得再說(shuō)一遍，因?yàn)槲铱匆?jiàn)太多的新手問(wèn)題都是問(wèn)這個(gè)：CSS如何橫向居中？你需要定義元素的寬，并且定義橫向的margin，如果你的布局包含在一個(gè)層(容器)中，就象這樣：
body { 
text-align:center; 
} 
#wrap { 
width:760px; /* 修改為你的層的寬度 */ 
margin:0 auto; 
text-align:left; 
} 


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

最新評(píng)論