CSS中的部分缩写

对于想学习好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简写指南,部分有删改,更多内容可以看原文

updatedupdated2024-08-302024-08-30