使用縮寫可以幫助減少你css文件的大小，更加容易閱讀。css縮寫的主要規(guī)則如下： 

　　顏色 
　　16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤梢钥s寫一半，例如： 

　　#000000可以縮寫為#000;#336699可以縮寫為#369; 

　　盒尺寸 
　　通常有下面四種書寫方法: 

•property:value1; 表示所有邊都是一個(gè)值value1； 
•property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 
•property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 
•property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left 

方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下： 

　　margin:1em 0 2em 0.5em; 

　　邊框(border) 
　　邊框的屬性如下： 

•border-width:1px; 
•border-style:solid; 
•border-color:#000; 
　　可以縮寫為一句：border:1px solid #000; 

　　語法是border:width style color; 

　　背景(Backgrounds) 
　　背景的屬性如下： 

•background-color:#f00; 
•background-image:url(background.gif); 
•background-repeat:no-repeat; 
•background-attachment:fixed; 
•background-position:0 0; 

可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 

語法是background:color image repeat attachment position; 

你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為： 

•color: transparent 
•image: none 
•repeat: repeat 
•attachment: scroll 
•position: 0% 0% 
　　字體(fonts) 
　　字體的屬性如下： 

•font-style:italic; 
•font-variant:small-caps; 
•font-weight:bold; 
•font-size:1em; 
•line-height:140%; 
•font-family:"Lucida Grande",sans-serif; 

可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; 

font的縮寫，如果省略family， 
如這樣子： 
font:700 14px/22px; 
則在Firefox下是不生效的 
完整的寫法是：font:700 14px/22px arial; 
 

注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個(gè)值。 

　　列表(lists) 
　　取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫list-style:none;, 

　　list的屬性如下: 

•list-style-type:square; 
•list-style-position:inside; 
•list-style-image:url(image.gif); 
　　可以縮寫為一句：list-style:square inside url(image.gif); 

outline 

outline類似border，不同的是border會(huì)影響盒模型，而outline不會(huì)。 

outline-width:數(shù)字+單位; 
outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ; 
outline-color: 顏色 ; 

屬性值為0書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會(huì)這樣寫: 

關(guān)于四個(gè)邊的特別說明 
關(guān)于四邊，有很多樣式都涉及到了四邊（上下左右）的問題，我這里統(tǒng)一說明一下。 

以padding屬于為例，四邊的簡(jiǎn)寫如下： 

padding:4px 6px 3px 4px; 

它等效于： 
 

其順序?yàn)椋?nbsp;

top | right | bottom | left 

不論是邊框?qū)挾?，還是邊框顏色、邊距等，只要css樣式涉及四邊，順序通通都是“上右下左”（順時(shí)針方向）。 

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

padding:1px 2px 3px; 

則它等效于： 
 

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

如果四邊的值省略兩個(gè)： 

padding:5px 10px; 

它等效于： 
 

也就是說，當(dāng)只有2個(gè)值的時(shí)候，上下2邊等于第一個(gè)值，左右2邊等于第二個(gè)值，即省略的“下”值等于“上”。 

如果只有一個(gè)值： 

padding:3px; 

它等效于： 
 

這種情況下，上下左右4條邊都等同于同一個(gè)值！ 

Margin(外邊距/空白邊)聲明CSS magin值得時(shí)候通常會(huì)寫成這樣: 
 

讓我們?cè)囋嚢阎禐?的單位去掉，并把4條聲明合并成一條聲明: 

margin:0 10px 0 10px; 

當(dāng)你生命padding、margin、border(還有一些其他屬性)時(shí)，記得要把按照順時(shí)針的方向來聲明屬性值，也就是按照上-右-下-左的方向。關(guān)于這些屬性還有另一個(gè)更加簡(jiǎn)單的寫法，看看屬性中上和下、左和右是否值是相等的，如果是那么就可以進(jìn)一步優(yōu)化了，你可以省略掉后兩個(gè)值，剩下的兩個(gè)值前者指上下，后者指左右: 

margin:0 10px; 

它是指左右的值為10px，上下的值為0； 

移除選擇器　　選擇器是你在為一些元素應(yīng)用CSS樣式時(shí)的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.類名)或ID(#id名),那么就不用再在聲明CSS時(shí)包含選擇器了。 

div#logowrap 

嘗試扔掉多余的選擇器吧: 

#logowrap 

在這個(gè)例子中所謂的那個(gè)選擇器就是div 

*總愛和你開玩笑　　要明智的使用*而避免它在整個(gè)CSS樣式表中亂開玩笑，*是個(gè)通配符，你可以使用它來為你的設(shè)計(jì)部分或全部進(jìn)行一系列CSS聲明。例如: 
 

這個(gè)聲明會(huì)將所有元素的margin值設(shè)置為0，同樣的，為了嚴(yán)謹(jǐn)起見，你可以嘗試這樣設(shè)置: 
 

這樣的聲明是指將#menu下的所有元素的margin設(shè)為0。