新聞資(zī)訊

讓CSS樣式表優化更整潔

   CSS簡寫就是指将多行的CSS屬性聲明化成一(yī)行,又(yòu)稱爲CSS代碼優化。CSS簡寫的最大(dà)好處就是能夠顯著減少CSS文件的大(dà)小(xiǎo),其實還有很多其他益處。臃腫而雜(zá)亂的CSS樣式表會使你遇到問題是難以調試。

   整理了一(yī)些CSS簡寫技巧,它們其實是CSS最常用的寫法,但是太多的人使用Dreamweaver這種所見即所得軟件來編寫CSS,使得代碼過于臃腫。不過沒關系,看過本文之後,你一(yī)能能掌握CSS代碼優化的技巧,今後讓你的每一(yī)個CSS樣式表都看起來整潔而簡短吧。合肥網絡建站公司

   屬性值爲0

   書(shū)寫原則是如果CSS屬性值爲0,那麽你不必爲其添加單位(如:px/em),你可能會這樣寫:
  padding: 10px 5px 0px 0px;
   試一(yī)試這樣吧:

   padding: 10px 5px 0 0;
   移除選擇器
   選擇器是你在爲一(yī)些元素應用CSS樣式時的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.類名)或ID(#id名),那麽就不用再在聲明CSS時包含選擇器了。
   div#logowrap
   嘗試扔掉多餘的選擇器吧:
   #logowrap  
   在這個例子中(zhōng)所謂的那個選擇器就是div
   *總愛和你開(kāi)玩笑
   要明智的使用*而避免它在整個CSS樣式表中(zhōng)亂開(kāi)玩笑,*是個通配符,你可以使用它來爲你的設計部分(fēn)或全部進行一(yī)系列CSS聲明。例如:
   * { margin: 0; }
    這個聲明會将所有元素的margin值設置爲0,同樣的,爲了嚴謹起見,你可以嘗試這樣設置:
    #menu * { margin: 0; }
    這樣的聲明是指将#menu下(xià)的所有元素的margin設爲0。
    背景
      背景(background)屬性可能會包含設置背景色、背景圖、背景圖的位置和背景圖重複方式的參數,你可能會寫成:
       background-image: url(”logo.png”);
       background-position: top center;
       background-repeat: no-repeat;
      其實可以寫成:
      background: url(logo.png) no-repeat top center;
    顔色
    顔色(color)屬性在CSS通常指定爲一(yī)個十六進制的值,一(yī)個#加6位數,他的簡寫方式是如果顔色值由成對兒出現的三對而數字組成,你可以省略掉沒對中(zhōng)的一(yī)個數字。
      #000000 可以寫成 #000, #336699 可以寫成 #369 合肥網絡建站公司
      這種簡寫技巧隻适用于成對出現的顔色值,其它顔色值不适用這種技巧,比如:
      #010101, #223345, #FFF000
      Margin(外(wài)邊距/空白(bái)邊)
      聲明CSS magin值得時候通常會寫成這樣:
       margin-top:0px;
       margin-right:10px;
       margin-bottom:0px;

       margin-left:10px;
       讓我(wǒ)(wǒ)們試試把值爲0的單位去(qù)掉,并把4條聲明合并成一(yī)條聲明:
       margin:0 10px 0 10px;
   當使用聯合定義時,我(wǒ)(wǒ)通常将每個選擇器單獨寫一(yī)行,這樣方便在CSS文件中(zhōng)找到它們。在最後一(yī)個選擇器和大(dà)括号{之間加一(yī)個空格,每個定義也單獨寫一(yī)行,分(fēn)号直接在屬性值後,不要加空格