对于想学习好CSS的话,缩写的顺序必须是正确的(虽然有些不正确的浏览器能自动修正),既能看懂别人的缩写,也能省点敲键盘的时间~~
边距(margin与padding)
margin和padding的缩写方法相同
/*按“上右下左”顺时针的方向填写*/
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与outline)
/*宽度 样式 样色*/
border:5px solid #369;
/*border的缩写中border-style是必须的。*/
背景(background)
background是最常用的简写之一,它包含以下属性:
background-color: color || #hex || RGB(% || 0-255) || RGBa;
background-image:url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: X Y || (top||bottom||center) (left||right||center);
/*按照上面的顺序写即可,各个属性都可以省略*/
background:#ccc url("xxx.png") repeat scroll top left ;
/*默认值是*/
background:transparent none repeat scroll top left ;
字体(font)
很多人并不赞成使用font缩写
包含的属性有
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";
## 列表样式list-style:disc outside none
/*如果list-tyle中定义了图片,那么图片的优先级要比list-style-type高*/
list-style:circle inside url(../img.gif)
圆角(border-radius)
/*按 左上 右上 右下 左下 顺时针方向*/
border-radius:10px 20px 30px 40px;
/*大致与边距的缩写相同,也可以省略某个值*/
文章来自CSS简写指南,部分有删改,更多内容可以看原文