CSS 簡寫

CSS 簡(縮)寫也稱作 CSS 代碼優化，將本來多行的 CSS 碼縮短，
可以節省 CSS 文件大小，優化整體網站。

以下整理了幾個常見 CSS 簡 ( 縮 ) 寫法：

一. 框模型的 外邊距 margin 和 內邊距 padding 

語法 margin : top right bottom left ;
( 記法： 上 右 下 左 )

1. 當四邊邊距都一樣時

margin : 10px 10px 10px 10px

簡(縮)寫為 
margin : 10px;

2. 上下邊距為 10px，左右為 5px 時

margin : 10px 5px 10px 5px;

簡(縮)寫為 
margin:10px 5px;
( 記法：上下 左右 )

3. 上下邊距一樣 10px 左邊距 5px 右邊距 3px

margin : 10px 3px 10px 5px

( 雖上下邊距一樣，但左右不一樣，所以不能縮寫 )

二. 字體 font

語法 font : style variant weight size family

字體屬性如下

font-style : italic;
font-variant : small-caps;  (此屬性介紹連至w3school )
font-weight : bold;
font-size : 15px;

簡(縮)寫為
font : italic small-caps bold 15px/1.8 "Helvetica",sans-serif;

三. 邊框 border

語法 border : style width color;

邊框屬性如下
border-style : solid;
border-width: 1px;
border-color : red;

簡(縮)寫為
border : solid 1px red;

四. 背景 background

語法 background : color image repeat attachment position;

背景的屬性如下
background-color : #f90;
background-image : url(background.png);
background-repeat : no-repeat;
background-attachment : fixed;  ( 此屬性介紹連至w3school )
background-position: 0 0;   ( 此屬性介紹連至w3school )
簡(縮)寫為
background : #f90 url(background.png) no-repeat fixed 0 0;

可以省略一個或多個屬性，省略的屬性樣式則為默認。

五. 圓角半徑 border-radius ( CSS3 新加屬性)

語法 border-radius : topleft topright bottomright bottomleft

( 左上 右上 右下 左下 )

-moz-border-radius-bottomleft:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

簡(縮)寫為 

-moz-border-radius : 0 5px 5px;-webkit-border-radius : 0 5px 5px;
border-radius : 0 5px 5px;

六. 列表 lists

語法 list-style : type position image

列表的屬性如下
list-style-type : circle;
list-style-position : outside;
list-style-image : url(image.png);
list-style : circle outside url(image.png);

簡(縮)寫為
list-style : circle outside url(image.gif);

取消默認寫法為 list-style : none;