CSS代码优化的作用与意义

作用与意义：

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;}

优化书写的方法有多种，这里启迈网络点到为止，主要根据个人习惯去书写。可以多参考一下大型网站的css排版。。。

[ 上一篇 ] 使用CSS代码实现英文及连续数字的自动换行

[ 下一篇 ] css属性中class与id的区别

将文章分享到:

日期：19 浏览：47476

日期：19 浏览：34444

日期：19 浏览：25734

日期：19 浏览：23729