CSS代码编写的过程中，代码数量非常庞大，许多属性会被反复使用，这样来来回回地敲打同样的属性名称会占用不少的时间。作为一名优秀的web前端人员，应当了解记忆各种属性的简写方式，用以提高自身的工作效率，缩减代码数量，增强可读性。作为一名刚接触不久的初学者，在网上搜集资料，整理了常用属性的简写模式，供大家参考。
1、颜色color简写
在颜色值采用16进制，且每两位的值相同，可以简写一半。
| 1 | color : #113366 ; |
简写为
| 1 | color : #136 ; |
2、边距margin和padding简写
外边距margin和内边距padding在CSS中使用率是很高，margin和padding都有四个方向的边距
| 1 2 3 4 | padding-top : 2px ; padding-right : 2px ; padding-bottom : 2px ; padding-left : 2px ; |
有四种简写方式，都很好记
| 1 2 3 4 | padding : 1px ;//四个方向的边距相同 padding : 1px 2px ;//第一个值表示上下边距，第二个值表示左右边距 padding : 1px 2px 3px ;//第一个值表示上边距，中间值表示左右边距，第三个值表示下边距 padding : 1px 2px 3px 4px ;//边距值以顺时针方向显示，上、右、下、左 |
3、边框border简写
边框有三个属性
| 1 2 3 4 5 | border-width： 1px 2px 3px 4px ; //上下左右，类似边距的简写 border-style： solid dashed dotted groove ; border-color : red #ffffff ; 1 按照width、style和color的顺序简写 1 border: 1px solid #ffffff ;//个人喜欢总结为三字口诀“粗型色” |
4、背景background简写
一共五个属性，background采用简写将大大提供效率
| 1 2 3 4 5 | background-color : #ffffff || transparent ; background-image : url () || none ; background-repeat : repeat || repeat-x || repeat-y || no-repeat ; background-position : X Y || ( top || bottom || center ) ( left || right || center ); background-attachment : scroll || fixed ; |
background简写按顺序如下
| 1 | background : #fff url (img.gif) no-repeat 0 0 ;//个人总结五字口诀“色图重定位” |
background的属性有默认值，且不会继承，你可以只声明其中的一个，其它的值会被应用默认值。
| 1 | background : transparent none repeat scroll top left ; |
5、字体font简写
font有六个属性，采用简写的话比如简化代码提供效率，不过简写规则要求比较高，要注意
| 1 2 3 4 5 6 | font-style : normal || italic || oblique ; font-variant : normal || small-caps ; font-weight : normal || bold || bolder || || lighter || ( 100 -900 ); font-size : 16px || 1em ; line-height : normal || 16px ; font-family : arial , sans-serif ; |
上图可以看出font简写规则中font-size和font-famil是必写的，其他的四个属性可选，四个属性默认值都为normal，未声明属性则应用默认值。
| 1 | font : italic normal bold 12px / 20px arial , sans-serif ;//个人惯用口绝“型转粗，大高体” |
6、列表list-style简写
估计大家用得最多的一个列表属性是list-style:none;其实list-style也有三个属性
| 1 2 3 | 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-image则
list-style-type无效。
| 1 | list-style : disc outside none ; |
常用的CSS简写规则总结完毕，CSS3样式属性简写待总结中。