2014-05-13 11:20:47 如何知道css代码是否压缩优化,在布局中如何知道CSS代码有无被压缩优化教程篇
如何知道自己的CSS代码是否被压缩?
CSS代码是否压缩有两个指标:
1、属性代码是否缩写优化
2、空格、换行、样式最后一个分号等是否删除
一、CSS属性样式优化让CSS代码轻便
在布局中很多新手比较喜欢使用DW右侧自带样式编辑器,这样会导致输入有些CSS代码样式不够简便优化。
利用DW软件CSS代码输入截图
比如:
1、背景颜色缩写
- background-color: #999
可以缩写为
- background: #999
2、边框缩写
- border-bottom:1px solid #000;border-top:1px solid #000;border-right:1px solid #000;border-left:1px solid #000
可以缩写为:
- border:1px solid #000
还有很多CSS样式代码可优化缩写,从而减少CSS代码量从而达到CSS压缩。
扩展阅读:
1)、CSS缩写教程
2)、CSS边框合并缩写
3)、CSS代码优化方案
二、删除多余空格、空行、符号
1、删除CSS代码中多余空格
- .abc{ background: #999; border:1px solid #000; }
删除CSS代码间多余空格后
- .abc{background:#999;border:1px solid #000;}
CSS优化空格截图
2、删除多余空行
可以删除空行CSS代码如下:
- .abc{
- background:#999;
- border:1px solid #000;
- }
- .HTML8{width:100px;height:100px;}
未压缩代码截图
删除空行优化压缩
- .abc{background:#999;border:1px solid #000;}
- .HTML8{width:100px;height:100px;}
删除多余空行压缩代码后截图
3、删除CSS中最后一个样式分号
未删除前CSS代码:
- .abc{background:#999;border:1px solid #000;}.HTML8{width:100px;height:100px;}
未删除多余分号前截图
删除可省略分号代码:
- .abc{background:#999;border:1px solid #000}.HTML8{width:100px;height:100px}
删除最后一个分号后截图
说明:在CSS选择器中最后一个CSS样式的“分号”,可以省略删除,不影响代码完整性,也不影响CSS功能正确性。