常用CSS精簡縮寫方法歸納
熟練的運用CSS縮寫，精簡CSS代碼，可以極大提高你的CSS代碼的可讀性，這里和大家分享一下幾種常用CSS精簡縮寫方法，通過CSS縮寫可以讓你的CSS文件更小，更易讀，相信本文介紹一定會讓你有所收獲。
常用CSS精簡縮寫方法歸納
CSS高手們經常追求CSS代碼的精煉，結構清晰，其中一個方向就是采用CSS縮寫。通過CSS縮寫可以讓你的CSS文件更小，更易讀。今天我們就歸納幾個經常使用的CSS精簡寫法。
盒子大小
這里主要用于兩個屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個方向，每個方向都有個外邊距：
示例代碼
- margin-top:1px;
- margin-right:1px;
- margin-botton:1px;
- margin-left:1px;
這四個值進行CSS縮寫的方式是：
示例代碼
- margin:1px1px1px1px;
備注：縮寫的順序是上->右->下->左。順時針的方向。
如果四個空白數值相同還可以進一步縮寫：
示例代碼
- margin:1px;//四個方向的邊距相同
更多的CSS縮寫方式：
示例代碼
- margin:1px2px;//上下邊距都為1px，左右邊距均為2px，等同于margin:1px2px1px2px
- margin:1px2px3px;//右邊距和左邊距相同，等同于margin:1px2px3px2px;
- margin:1px2px1px3px;//注意，這里雖然上下邊距都為1px，但是這里不能縮寫。
#p#邊框(border)
先介紹一下border的基本屬性：
border-width:數字+單位;
border-style:none||hidden||dashed||dotted||double||groove||inset||outset||ridge||solid;
border-color:顏色;
border可以按照width、style和color的順序簡寫：
示例代碼
- border:5pxsolid#369;
備注：border默認的寬度是3px，默認的色彩是black——黑色。border的縮寫中border-style是必須的。
我們還可以針對邊的每個屬性進行精簡CSS縮寫,CSS縮寫規則類似盒子大小的縮寫,如下：
示例代碼
- border-width：1px2px3px;
- border-style：soliddasheddottedgroove;
- border-color:redbluewhiteblack;
背景(background)
還是照例先介紹一下background的基本語法
- background-color:color||#hex||RGB(%||0-255)||RGBa;
- background-image:url();
- background-repeat:repeat||repeat-x||repeat-y||no-repeat;
- background-position:XY||(top||bottom||center)(left||right||center);
- background-attachment:scroll||fixed;
background的簡寫可以大大的提高CSS的效率：
示例代碼
- background:#fffurl(img.png)no-repeat00;
備注：background的簡寫也有些默認值：background:#fffurl(img.png)no-repeat00;background屬性的值不會繼承，你可以只聲明其中的一個，其它的值會被應用默認的。
本文來自CSS在線：http://www.CSSCSS.org/CSSarticle/201042831.shtml
【編輯推薦】
