CSS属性简写汇总

CSS代码编写的过程当中，代码数量很是庞大，许多属性会被反复使用，这样来来回回地敲打一样的属性名称会占用很多的时间。做为一名优秀的web前端人员，应当了解记忆各类属性的简写方式，用以提升自身的工做效率，缩减代码数量，加强可读性。做为一名刚接触不久的初学者，在网上搜集资料，整理了经常使用属性的简写模式，供你们参考。

一、颜色color简写

在颜色值采用16进制，且每两位的值相同，能够简写一半。

1	color : #113366 ;

简写为

1	color : #136 ;

二、边距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 ;//边距值以顺时针方向显示，上、右、下、左

三、边框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 ;//我的喜欢总结为三字口诀“粗型色”

四、背景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 ;

五、字体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 ;//我的惯用口绝“型转粗，大高体”

六、列表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样式属性简写待总结中。