翻譯:阿捷
原文作者:Roger Johansson
作者簡介:住在瑞典哥德堡，1994年開始接觸和參與web設計，456 Berea Street是他的住址，因此采用這個名字作為他的個人主頁域名
原文出處:www.456bereastreet.com
原文發表時間:2005年3月15日
阿捷說明:此文原名"CSS tips and tricks"，有2篇，我將它們合並翻譯在本文中。
最近，經常有朋友問我一些工作中遇到的CSS問題。他們總是不能很好的控制CSS，影響CSS的效率發揮。我來分析總結一下錯誤所在，幫助大家更加容易使用CSS。
本文總結了我開始使用CSS布局方法以來所有的技巧和兼容方案，我願意把這些與你分享，我會重點解釋一些新手容易犯的錯誤(包括我自己也犯過的)，如果你已經是CSS高手，這些經驗技巧可能已經都知道，如果你有更多的，希望可以幫我補充。
一.使用css縮寫
使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫語法總結》，這裡就不展開描述。
二.明確定義單位，除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫width="100"，但是在CSS中，你必須給一個准確的單位，比如:width:100px width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。
三.區分大小寫
當在XHTML中使用CSS，CSS裡定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都采用小寫。
class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML裡的標簽是一致的。
四.取消class和id前的元素限定
當你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面裡是唯一的，而clas s可以在頁面中多次使用。你限定某個元素毫無意義。例如:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以寫成
#content { /* declarations */ }
.details { /* declarations */ }
這樣可以節省一些字節。
五.默認值
通常padding的默認值為0，background-color的默認值是transparent。但是在不同的浏覽器默認值可能不同。如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，象這樣:
* {
margin:0;
padding:0;
}
1 2 3 4 下一頁九.使用子選擇器(descendant selectors) CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼: <div id="subnav">
十二.用正確的順序指定鏈接的樣式 當你用CSS來定義鏈接的多個狀態樣式時，要注意它們書寫的順序，正確的順序是::link :visited :hover :active。抽取第一個字母是"LVHA"，你可以記憶成"LoVe HAte"(喜歡討厭)。為什麼這麼定義，可以參考Eric Meyer的《Link Specificity》。 如果你的用戶需要用鍵盤來控制，需要知道當前鏈接的焦點，你還可以定義:focus屬性。:focus屬性的效果也取決與你書寫的位置，如果你希望聚焦元素顯示:hover效果，你就把:focus寫在:hover前面;如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover後面。 十三.清除浮動 一個非常常見的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) 這是一個簡單的技巧，但是值得再說12下一頁