CSS縮寫的樣式

熟悉和了解CSS的朋友都知道，CSS樣式表有很多縮寫方式。比如，定義字體、定義背景等，都可以把CSS代碼縮寫到一行。為了能更好的搞清楚CSS縮寫方法，我收集整理了一些有關CSS簡寫的參考資料，也是對自己過去學習CSS的一個總結。
1、字體：font

簡寫：

font:normal small-caps bold 14px/1.5em '宋體',arial,verdana;

等價於：

font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:'宋體',arial,verdana;

順序：

font-style | font-variant | font-weight | font-size | line-height | font-family

注：簡寫時，font-size和line-height只能通過斜杠/組成一個值，不能分開寫。
2、背景：background

簡寫：

background:#F00 url(header_bg.gif) no-repeat fixed left top;

等效於：

background-color:#F00;
background-image:url(header_bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;

順序：

background-color | background-image | background-repeat | background-attachment | background-position
3、外邊距和內邊距：margin&padding

簡寫：

margin:4px 0 1.5em -12px;

等效於：

margin-top:4px;
margin-right:0;
margin-bottom:1.5em;
margin-left:-12px;

順序：

margin-top | margin-right | margin-bottom | margin-left

注：padding屬於的簡寫和margin完全一樣。關於四條邊的問題，會在下面詳細講述。
4、邊框：border

簡寫：

border:1px solid #CCC;

等效於：

border-width:1px;
border-style:solid;
border-color:#CCC;

順序：

border-width | border-style | border-color
5、列表樣式：list-style

簡寫：

list-style:square outside url(bullet.gif);

等效於：

list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);

順序：

list-style-type | list-style-position | list-style-image
6、關於四個邊的特別說明

關於四邊，有很多樣式都涉及到了四邊（上下左右）的問題，我這里統一說明一下。

以padding屬於為例，四邊的簡寫如下：

padding:4px 6px 3px 4px;

它等效於：

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

其順序為：

top | right | bottom | left

不論是邊框寬度，還是邊框顏色、邊距等，只要css樣式涉及四邊，順序通通都是“上右下左”（順時針方向）。

如果四邊的值省略一個，只寫三個，即：

padding:1px 2px 3px;

則它等效於：

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;

即省略的“左”值等於“右”。

如果四邊的值省略兩個：

padding:5px 10px;

它等效於：

padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:5px;

也就是說，當只有2個值的時候，上下2邊等於第一個值，左右2邊等於第二個值，即省略的“下”值等於“上”。

如果只有一個值：

padding:3px;

它等效於：

padding-top:3px;
padding-right:3px;
padding-bottom:3px;
padding-left:3px;