常用CSS缩写语法总结

我们在设计CSS时可以使用css缩写,这样可以减少你CSS文件的大小，而且更加容易阅读和查找。

css缩写的主要规则如下：

margin/padding

通常写法,会遇到以下三种情况

margin-top:1px;
margin-right:10px;
margin-bottom:5px;
margin-left:20px;

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

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

那么我们进行CSS缩写后会让你目惊口呆的效果.如下

margin:1px 10px 5px 20px;

margin:5px;

margin:0 10px 0 5px;

书写顺序是 margin:上 右 下 左 ,

在CSS中.值为0的时候可以将单位省略不写就像第三种写法一样.

其中padding和margin基本是一样的写法

怎么样.是不是大吃一惊.是的.CSS缩写就是这样做到的.

border

通常写法:

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

缩写后:

border:1px solid #000;

书写顺序:border:宽度 边框线种类 颜色;

Background

通常写法:

background-image:url(bg.png);
background-color:#00f;
background-repeat:no-repeat;
background-position:0 0;

缩写后:

background:url(bg.png) #00f no-repeat 0 0;

书写顺序:background:背景图片 颜色 重复类型  定位;
         background:image   color  repeat   position;

Font

通常写法:

font-family:"宋体";
font-size:2em;
line-height:180%;
font-weight:800;


缩写后：

font:800 2em/180% "宋体";

书写顺序:font:加粗 字体大小/行高 字体;

在使用Font缩写时至少要有 字体大小和字体这两项

font:字体大小 字体;

Color

通常写法:

color:#000000;
color:#001188;

缩写后:

color:#000;
color:#018;

16进制的色彩值时，如果每两位的值相同，可以缩写一个