作用与意义:
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,等同于加快了网页打开的速度
2、便于后期改版维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业标准化。
优化方法:
1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。
6、写清楚注释。
简单讲几个优化方面例子:
缩写css代码
background-color:#FFF;对应属性为背景颜色为白色
background-image:url(divcss.gif);对应属性是设置divcss5.gif图片为背景
background-position:bottom;背景图片是居底部
background-repeat:repeat-x;背景按X坐标(横坐标)重复延伸
以上CSS代码可以简写为
background:#FFF url(divcss.gif) repeat-x bottom;
排列css代码
yangshi{
font-size:12px;
border:1px solid #000000;
padding:5px;
}
建议写成=》
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}
同属性提取共用css选择器
.css1{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.css2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}
建议写成=>
.css{ font-size:12px;border:1px solid #000000;padding:5px;}
.css1{ width:25px;}
.css2{ width:50px;}
优化书写的方法有多种,这里启凡网络点到为止,主要根据个人习惯去书写。