CSS缩写
作者：xinsea 发布时间：April 17, 2012 分类：前端开发
0长度
如果属性的值为：0单位（px、em等），可直接缩写为0。例如：0px直接缩写为0
Color（颜色）缩写
在色彩值用16进制的时候，如果每种颜色的值是相同的，就可以写成一个：color:#000000;
color:#113366;
可以简写成：color:#000;
color:#136;
所有用到16进制色彩值的地方都可以缩写，如：background-color、border-color等。
盒子大小
主要用于两个属性：margin和padding。通常有下面四种书写方法:property:value1; 表示所有边都是一个值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; 四个值依次表示top,right,bottom,left
我们以margin为例:margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;
四个值可以缩写为：margin:1px 1px 1px 1px;
缩写的顺序是上->右->下->左。顺时针的方向。如果相对的边的值是相同的，则可以省掉：margin:1px; /* 上例： 四个方向的边距相同，等同于margin:1px 1px 1px 1px; */
margin:1px 2px; /* 上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px; */
margin:1px 2px 3px; /* 右边距和左边距相同，等同于margin:1px 2px 3px 2px; */
margin:1px 2px 1px 3px; /* 注意，这里虽然上下边距都为1px，但是这里不能缩写。*/
Border缩写
border有三个子属性：border-width:数字+单位;
border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;
border-color: 颜色;
可以缩写为一句，语法是：border:width style color。border:5px solid #369;
也可以对每个属性采用缩写：border-width：1px 2px 3px; /* 最多可用四个值，缩写规则和盒子大小的缩写类似，下同 */
border-style：solid dashed dotted groove;
border-color:red blue white black;
border默认的宽度是3px，默认的颜色是该规则中的color属性的值，而color默认是黑色的，border的缩写中border-style是必须的。
outline
outline类似border，不同的是border会影响盒模型，而outline不会。outline-width:数字+单位;
outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ;
outline-color: 颜色 ;
缩写为：outline:1px solid red;
Background缩写
背景的属性如下：background-color: color || #hex || RGB(% || 0-255) || RGBa;
background-image:url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
background的简写可以大大的提高css的效率，缩写语法是background:color image repeat attachment position;background:#fff url(img.png) no-repeat 0 0;
可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
font简写也是使用最多的一个，它也是书写高效的CSS的方法之一。
属性如下：font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";
可以缩写为一句，语法是：font:font-style font-variant font-weight font-size/line-height font-family;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值，可参考下图手册：
font的各个属性也都有默认值:font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
列表(lists)
清除所有默认的列表样式，比如数字或者圆点：list-style:none;
list-style也有三个属性：list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman
list-style-position: inside || outside || inherit
list-style-image: (url) || none || inherit
list-style的默认属性如下：list-style:disc outside none
如果list-tyle中定义了图片，那么图片的优先级要比list-style-type高：list-style:circle inside url(../img.gif)
例子中，如果img.gif存在，则不会显示前面设置的circle符号。
border-radius(圆角半径)
border-radius是css3中新加入的属性，用来实现圆角边框。Gecko(firefox)和webkit(safari/chrome)需分别使用私有前缀-moz-和-webkit-。-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;
参考：
前端观察：http://www.qianduan.net/css-font-shorthand-attribute-handbook.html
w3cn.org：http://www.w3cn.org/article/tips/2005/103.html
