CSS的十八般技巧

 本文來自論壇中的一個帖子，地址：http://bbs.51cto.com/thread-29210-1.html

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; 
} 

    六.不須要重複定義可繼承的值
   CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中能夠直接繼承，不須要重複定義。可是要注意，瀏覽器可能用一些默認值覆蓋你的定義。

    七.最近優先原則
   若是對同一個元素的定義有多種，以最接近(最小一級)的定義爲最優先，例若有這麼一段代碼
Update: Lorem ipsum dolor set
在CSS文件中，你已經定義了元素p，又定義了一個class"update"
p
{ 
margin:1em 0; 
font-size:1em; 
color:#333; 
} 
.update 
{ 
font-weight:bold; 
color:#600; 
} 

這兩個定義中，class="update"將被使用，由於class比p更近。你能夠查閱W3C的《 Calculating a selector’s specificity》 瞭解更多。

    八.多重class定義
    一個標籤能夠同時定義多個class。例如：咱們先定義兩個樣式，第一個樣式背景爲#666；第二個樣式有10 px的邊框。
.one
{width:200px;background:#666;}
.two
{border:10px solid #F00;} 
在頁面代碼中，咱們能夠這樣調用 （ 貌似這裏缺了代碼）
這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣作是能夠的，你能夠嘗試一下。

    九.使用子選擇器(descendant selectors)
   CSS初學者不知道使用子選擇器是影響他們效率的緣由之一。子選擇器能夠幫助你節約大量的class定義。咱們來看下面這段代碼：  
  Item 1
  Item 1  
  Item 1 
這段代碼的CSS定義是：
div#subnav ul 
{ /* Some styling */ } 
div#subnav ul li.subnavitem 
{ /* Some styling */ } 
div#subnav ul li.subnavitem a.subnavitem 
{ /* Some styling */ } 
div#subnav ul li.subnavitemselected
{ /* Some styling */ } 
div#subnav ul li.subnavitemselected a.subnavitemselected 
{ /* Some styling */ } 
你能夠用下面的方法替代上面的代碼  
樣式定義是：
#subnav { /* Some styling */ } 
#subnav li { /* Some styling */ } 
#subnav a { /* Some styling */ } 
#subnav .sel { /* Some styling */ } 
#subnav .sel a { /* Some styling */ } 
用子選擇器可使你的代碼和CSS更加簡潔、更加容易閱讀。

    十.不須要給背景圖片路徑加引號
   爲了節省字節，我建議不要給背景圖片路徑加引號，由於引號不是必須的。例如：
background:url("p_w_picpaths/***.gif") #333; 
能夠寫爲 background:url(p_w_picpaths/***.gif) #333; 
若是你加了引號，反而會引發一些瀏覽器的錯誤。

    十一.組選擇器(Group selectors)
   當一些元素類型、class或者id都有共同的一些屬性，你就可使用組選擇器來避免屢次的重複定義。這能夠節省很多字節。
例如：定義全部標題的字體、顏色和margin，你能夠這樣寫：
h1,h2,h3,h4,h5,h6 { 
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif; 
color:#333; 
margin:1em 0; 
} 
若是在使用時，有個別元素須要定義獨立樣式，你能夠再加上新的定義，能夠覆蓋老的定義，例如：
h1 { font-size:2em; } 
h2 { font-size:1.6em; } 

    十二.用正確的順序指定連接的樣式

   當你用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)
   這是一個簡單的技巧，可是值得再說一遍，由於我看見太多的新手問題都是問這個：CSS如何橫向居中？你須要定義元素的寬，而且定義橫向的margin，若是你的佈局包含在一個層(容器)中，就象這樣： （像哪樣？貌似這裏也缺了一點代碼）
你能夠這樣定義使它橫向居中：
#wrap 
{ 
width:760px; /* 修改成你的層的寬度 */ 
margin:0 auto; 
} 
可是IE5/Win不能正確顯示這個定義，咱們採用一個很是有用的技巧來解決：用text-align屬性。就象這樣：

body 
{ 
text-align:center; 
} 
#wrap 
{ 
width:760px; /* 修改成你的層的寬度 */ 
margin:0 auto; 
text-align:left; 
} 
第一個body的text-align:center; 規則定義IE5/Win中body的全部元素居中(其餘瀏覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。

    十五.導入(Import)和隱藏CSS
   由於老版本瀏覽器不支持CSS，一個一般的作法是使用@import技巧來把CSS隱藏起來。例如： @import url("main.css"); 
然而，這個方法對IE4不起做用，這讓我非常頭疼了一陣子。後來我用這樣的寫法： @import "main.css"; 
這樣就能夠在IE4中也隱藏CSS了，呵呵，還節省了5個字節呢。想了解@import語法的詳細說明，能夠看這裏《 centricle’s css filter chart》

    十六.針對IE的優化
    有些時候，你須要對IE瀏覽器的bug定義一些特別的規則，這裏有太多的CSS技巧(hacks)，我只使用其中的兩種方法，無論微軟在即將發佈的IE7 beta版裏是否更好的支持CSS，這兩種方法都是最安全的。

1.註釋的方法 
(a)在IE中隱藏一個CSS定義，你可使用子選擇器(child selector):
html>body p
{ 
/* 定義內容 */ 
} 
(b)下面這個寫法只有IE瀏覽器能夠理解(對其餘瀏覽器都隱藏) 
* html p 
{ 
/* declarations */ 
} 
(c)還有些時候，你但願IE/Win有效而IE/Mac隱藏，你可使用"反斜線"技巧：
/* \*/ 
* html p 
{ 
declarations 
} 
/* */ 
2.條件註釋(conditional comments)的方法 
另一種方法，我認爲比CSS　Hacks更加經得起考驗就是採用微軟的私有屬性條件註釋(conditional comments)。用這個方法你能夠給IE單獨定義一些樣式，而不影響主樣式表的定義。就象這樣：  （？？？缺了）

    十七.調試技巧：層有多大？
    當調試CSS發生錯誤，你就要象排版工人，逐行分析CSS代碼。我一般在出問題的層上定義一個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用border，通常狀況也是能夠的，但問題是，有時候border 會增長元素的尺寸，border-top和boeder-bottom會破壞縱向margin的值，因此使用background更加安全些。 
另一個常常出問題的屬性是outline。outline看起來象boeder，但不會影響元素的尺寸或者位置。只有少數瀏覽器支持outline屬性，我所知道的只有Safari、OmniWeb、和Opera。

    十八.CSS代碼書寫樣式
    在寫CSS代碼的時候，對於縮進、斷行、空格，每一個人有每一個人的書寫習慣。在通過不斷實踐後，我決定採用下面這樣的書寫樣式：

selector1,  selector2 {  property:value;  }  當使用聯合定義時，我一般將每一個選擇器單獨寫一行，這樣方便在CSS文件中找到它們。在最後一個選擇器和大括號{之間加一個空格，每一個定義也單獨寫一行，分號直接在屬性值後，不要加空格。 我習慣在每一個屬性值後面都加分號，雖然規則上容許最後一個屬性值後面能夠不寫分號，可是若是你要加新樣式時容易忘記補上分號而產生錯誤，因此仍是都加比較好。最後，關閉的大括號}單獨寫一行。 空格和換行有助與閱讀。