CSS简写样式可以提高加载网页速度

1、CSS字体属性的简写优化：例如：CSS字体属性：

#div {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
line-height:180%;
font-variant:small-caps;
font-style:italic;
}

可以简写为一行：

#div {font: bold italic small-caps 12px/180% Verdana, Geneva, sans-serif;}

同时将字体的六个属性简写为一行，这样便节省下了五行代码；

2、magin/padding属性优化：例如我们定义一个div，设置它的class为：content

.content {
margin-top:20px;
margin-bottom:30px;
margin-left:10px;
margin-right:15px;
}

代码可以简写为：

 .content {margin:20px 15px 30px 10px;} 

magin/padding属性优化规则是：

四个值：将 边距的上、右、下、左值依次写出来， 具体的可再参考一下上面的代码，

三个值：假设是只有box{ margin:20px 15px 10px;} 代码的缩写规则是 上、左右、下；即左右的边距是15px；

两个值：例如box{ margin:20px 15px;}，代码的缩写规则是 上下、左右，即上下的边距是 20px，左右是15px;

在padding属性中同理；

3、border属性的缺省优化：

通常可将border的属性

#css {
border-width:3px;
border-style:solid;
border-color:#f90;
}

简写为：

#css{ border:3px solid #f90;}

什么是缺省优化呢？还是拿上面的例子出发：以上代码实现的是边框3像素、样式为solid、颜色为#f90；而实际中我们只需要设置其颜色就可以 了，因为 border-style的缺省值即为：style，所以solid;可以省去不写，而border-width的缺省值为：medium，差不多为 3-4px,所以3px这个属性值可以省去不写，这样这行代码其实我们就可以简写为 boder-color:#f90;就可以了。

2、background属性优化

可将background相关属性

.content{
background-color:#00FF00;
background-image:url(bgimage.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top left;
}

简写为：

.content{ background: #00FF00 url(bgimage.gif) no-repeat fixed top left;}