不可不知的各種CSS縮寫方式

使用CSS縮寫的好處

1. 當然就是CSS原始碼可變得更精簡，檔案也就更小。
2. 單一項目僅需一列即可清楚呈現，維護上與查找上也比較方便。
3. 看起來比較舒服啦~

舉例來說~
外框的設定如果像是下面的就很囉唆：
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:#666;
border-right-color:#666;
border-bottom-color:#666;
border-left-color:#666;
以上這一大串的東西~我只要寫一行縮寫就可以搞定了，如下:
border:1px solid #666;
※設定每個屬性時，記得要加入空白隔開，否則會出錯!
就是這麼簡單，可以感受到使用縮寫的好處了吧!
CSS的縮寫方式~
邊界：
margin: 值(上右下左);
margin: 值(上) 值(右) 值(下) 值(左);
margin: 值(上下) 值(左右);
margin: 值(上) 值(左右) 值(下);
欄位間隔：
padding: 值(上右下左);
padding: 值(上) 值(右) 值(下) 值(左);
padding: 值(上下) 值(左右);
padding: 值(上) 值(左右) 值(下);
文字：
font: bold(寬度) italic(樣式) 12pt(大小)/1.5em(行高) "新細明體","華康娃娃體",arial,sans-serif(字體); 說明：大小與行高之間一定要加"/"斜線，當文字有設定行高時，必須要設定字體，FireFox才會認得，否則在FireFox中將沒有效用。
文字簡單寫法：
font: 12pt(大小)/2em(行高) "新細明體",Arial(字體); 此寫法若是沒有寫字型進去的話，FireFox會沒有作用。

邊框(僅適用於四邊的屬性都一樣時)：
border: 1px(邊框寬度) solid(邊框樣式) #FFF(邊框色彩);
同時設定邊框粗細的四種方式：
border-width: 值(上下左右) ;
border-width: 值(上) 值(右) 值(下) 值(左) ;
border-width: 值(上下) 值(左右) ;
border-width: 值(上) 值(右左) 值(下) ;
同時設定邊框樣式的四種方式：
border-style: 值(上下左右) ;
border-style: 值(上) 值(右) 值(下) 值(左) ;
border-style: 值(上下) 值(左右) ;
border-style: 值(上) 值(右左) 值(下) ;
同時設定邊框色彩的四種方式：
border-color: 值(上下左右) ;
border-color: 值(上) 值(右) 值(下) 值(左) ;
border-color: 值(上下) 值(左右) ;
border-color: 值(上) 值(右左) 值(下) ;
背景：
background: #FFF(色彩) url(image/test.gif)(圖片URL) no-repeat(重複方向) 0px(左/右位置) 0px(上/下位置);
色彩：
#FFFFFF; 可寫成 #FFF;
#666666; 可寫成 #666;
#0066FF; 可寫成 #06F;
#FF00FF; 可寫成 #F0F;說明：色碼值兩個為一組，代表顏色的數值，也就是說RGB三色，R(兩碼)G(兩碼)B(兩碼)，合起來就組成了6碼，如果代表每個色碼的兩個直是一樣的話，就可以只寫一碼。但是要注意!! #FF0003不可寫成#F003。

清單：
list-style-type: circle;
list-style-position: outside;
list-style-image: url(dot.gif);縮寫：
list-style : circle(項目符號) outside(凸排) url(dot.gif)(圖片URL);