CSS的屬性縮寫

CSS字體屬性：

.mydiv {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
line-height:180%;
font-variant:small-caps;
font-style:italic;
}

可以優化簡寫爲一行：

.mydiv {
font: bold italic small-caps 12px/180% Verdana, Geneva, sans-serif;
}

----------------------------------------------------------------------------------------------------------------------------------------------------------

magin/padding屬性優化：例如class爲：box

.box {
margin-top:20px;
margin-bottom:30px;
margin-left:10px;
margin-right:15px;
}

這樣代碼我們可以簡寫爲：

.box {
margin:20px 15px 30px 10px;
}

magin/padding屬性優化規則是：四個值：將 邊距的上、右、下、左值依次寫出來， 具體的可再參考一下上面的代碼。
三個值：假設是隻有box{ margin:20px 15px 10px;} 代碼的縮寫規則是 上、左右、下；即左右的邊距是15px；兩個值。
box{ margin:20px 15px;}，代碼的縮寫規則是 上下、左右，即上線的邊距是 20px，左右是15px;
在padding屬性中同理；


-----------------------------------------------------------------------------------------------------------------------------------------------------------


border屬性的缺省優化：通常可將border的屬性

css {
border-width:3px;
border-style:solid;
border-color:#f90;
}

優化簡寫爲：

css{ border:3px solid #f90;}

什麼是缺省優化呢？還是拿上面的例子出發：以上代碼實現的是邊框3像素、樣式爲solid、顏色爲#f90；而實際中我們只需要設置其顏色就可以 了，因爲 border-style的缺省值即爲：style，所以solid;可以省去不寫，而border-width的缺省值爲：medium，差不多爲 3-4px,所以3px這個屬性值可以省去不寫，這樣這行代碼其實我們就可以簡寫爲 boder-color:#f90;就可以了。

同理其他的一些css屬性值也是如此，在屬性值和缺省值相等或相同的情況下可以省去不寫。


-----------------------------------------------------------------------------------------------------------------------------------------------------------

background 的優化：

  background-color:#00FF00;
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:10px 20px;

background: #00FF00 url('/i/eg_bg_03.gif') no-repeat fixed top;