合理精简CSS文件的方法总结

以下是我在制作网页过程中经常用到的一些方法,只是举了一些比较个性的例子:

1、font-weight: bold可以写为font-weight: 700,font-weight: normal可以写为font-weight: 400;

2、yellow可以写成#ff0,节省两个字节,而#f00可以写成red,节省一个字节;

3、#666666可以简写为#666,#ccbbaa可以简写为#cba;

3、margin: 5px 5px 5px 5px这种写法可以简写为margin: 5px;

4、margin: 5px 10px 5px 10px这种写法可以简写为margin: 5px 10px;

5、margin: 5px 10px 8px 10px这种写法可以简写为margin: 5px 10px 8px;

6、定义一个2px宽的红色的实线边框可以这么写:border: 2px solid red;

7、定义一个红色背景,背景图片为test.gif,背景图片位置为横向居左,纵向居中,背景不重复的背景可以这么写:background: red url(test.gif) left center no-repeat;

以上只是从规则角度来精简CSS,还有以下一些方法,是从实际制作中得来的经验(感谢Dennis Lee提供):

1、如果要求不是很精确,那么 10px 的间距可以试试 9px 行不行,省一个字节;

2、因为默认1em=16px,所以如果文字大小为16px时,可以换成1em,省一个字节。

还有就是在制作页面的时候,尽量的优化结构,这样可以有效的避免CSS中样式属性重定义,从而精简CSS文件,不过这个对网页制作者要求较高,需要深刻的理解DIV+CSS这种设计方式,还要精通HTML各个标签含义和CSS各种属性。


2012.02.05 点评:曾经稚嫩的笔记啊