MUKI space*

縮寫css語法不但可以減少css檔案的大小，讓讀取速度加快，同時也更方便閱讀。會想寫這篇文章是基於前篇介紹CSS整形與優化工具的關係，怕大家優化後也不清楚到底有什麼更動？或者是怕css出問題而不敢優化，所以在這邊我整理了幾個基本的css縮寫給大家，希望以後大家在寫css時能更瞭解他的原理。

CSS語法縮寫 - 顏色

使用16進制的色碼，假設這6個數字裡頭每2個數字相同，就可以進行縮寫。舉例如下：
#000000 → #000
#880000 → #800
#aabbcc → #abc

CSS語法縮寫 - 區塊邊界

這邊我們最常應用的就是margin以及padding兩個屬性。根據自定邊界位置的不同，由簡入繁總共有四種寫法：
margin: 1px; (所有邊界都是1px)
margin: 3px 4px; (上&下邊界是3px，左&右邊界是4px)
margin: 3px 1px 4px; (上邊界是3px，左&右邊界是1px，下邊界是4px)
margin: 3px 4px 1px 2px; (上邊界3px，右邊界4px，下邊界1px，左邊界2px)
透過這個原理我們可以發現到，「上下」為一組，「左右」為一組。所以如果邊界剛好是同樣的單位可以將他們合併起來，但要特別注意的是，如果你的上&下邊界相同，左&右不相同，還是請乖乖寫四次吧！至於這四次的位置擺放要如何快速記憶呢？請大家把它想成一個順時針的循環，剛好就是上右下左。

CSS語法縮寫 - 0

正統的css語法裡頭，所有的單位都不能省略，因為css裡不只一個單位，有px、pt、em、%...等等。但是0這個數字非常的奇妙，只有0後面可以不用加任何單位，因為寫不寫都沒影響。

只是有時候因為習慣問題，有的人還是會順手在0後面加單位，如果次數一多，也會佔幾kb，既然我們目的就是要縮減css語法，所以還是建議大家不加單位。

CSS語法縮寫 - 同屬性

只要是同個屬性都可以加他們的語法合併在一起，像是border(邊框)、background(背景)、list(項目)

1.border的合併：
border-width: 1px;
border-style: solid;
border-color: #000;
合併後： border: 1px solid #000;

2.background的合併：
background-image: url("images/muki.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
backgruond-color: #fff;
合併後： background: #fff  url("images/muki.gif") no-repeat fixed top left;
因為background的屬性很多，所以我強烈推薦要將他們做合併，否則你要設定多個背景會拖得很長。而合併後有的屬性也可以省略不打，省略的屬性會採系統默認值。

background默認值為：
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
color: transparent

3.list的合併：
list-style-type: square;
list-style-position: inside;
list-style-image: url("images/muki.gif");
合併後：list-style: square inside url("images/muki.gif");

這邊列舉三個同屬性的合併，假設下次你碰到有類似的同屬性狀況，就可以嘗試將他們做合併喔^^

小結

以上都是基本的css縮寫，我想大家最常用到的也是這幾個語法，所以應該是夠大家使用了!!其實把握一個重點，就是「同屬性的幾乎都可以進行縮寫」，多加嘗試就會找到更多的縮寫樂趣唷~