css样式缩写

CSS样式缩写

css样式分开写太过繁琐，故经查找资料后总结如下：

1、background缩写方式

 background：background-color | background-image | background-repeat | background-attachment | background-position.

background: #aaaaaa url(../image/logo..jpg) no-repeat -50px 50px;

等价形式为：

background-color:#aaaaaa;
background-image:url(../image/logo.jpg);
background-repeat:no-repeat;
background-position:-50px 50px;

2、font缩写方式

font : font-style | font-variant | font-weight | font-size/line-height |font-family

font:italic small-caps bold 20px/40px Arial;

等价形式为：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:20px;
line-height:40px;
font-family:Arial;

3、border缩写方式

border : border-width | border-color | border-style.（谁在前，谁在后都一样）

border: 1px #ffaadd solid;

等价形式为：

border-width:1px;
border-color:#ffaadd;
border-style:solid;

4、margin&padding缩写形式

margin: top | right | bottom | left.

margin:10px 10px 10px 10px;

等价形式为：

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

margin:top(bottom) | right(left).  (第一个值代表上下，第二个值代表左右)

margin:10px 10px;

margin:top(right/bottom/left);  (四个属性值相同)

margin:10px;

padding的简写和margin一样。