常用CSS优化之网络性能与语法性能心得[多图]

当然除了gzip压缩，缓存也是我们需要注意的，这和CSS优化关系不大了，在说web优化的时候再说

合写CSS

除了压缩的方式，我们还可以通过少写CSS属性来达到减少CSS字节的目的，拿个最常见的例子

.test{background-color:#000;background-image:url(image.jpg);background-position:left top;background-repeat:no-repeat;
}

我们可以改写一下上面的CSS，达到同样的效果

.test{background:#000 url(image.jpg) top left no-repeat;
} 

在CSS中还有很多类似的属性可以合写

font

{font-style:oblique;font-weight:bold;font-size:16px;font-family:Helvetica, Arial, Sans-Serif;}

{font:oblique bold 16px Helvetica, Arial, Sans-Serif;} 

margin/padding

{margin-top:5px;margin-right:10px;margin-bottom:20px;margin-left:15px;}

{margin:5px 10px 20px 15px;} 

{padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;}

{padding:5px 10px}

{padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;}

{padding:5px;}

background

{background-color:#000;background-image:url(image.jpg);background-position:left top;background-repeat:no-repeat;}

{background:#000 url(image.jpg) top left no-repeat;}