CSS教程:控制网页文件大小通过精简CSS实现

在CSS中有复合属性这一说法，也就是说可以将很多属性参数整合在一起的，比如说上面的“margin-top;  margin-right;  margin-bottom;  margin-left;”可以整合成一个“margin”属性，然后为其配上参数。

通过这一点，我们就可以在原始CSS代码的基本上将代码进一步的精简。而且这样写的结构也合理，可读性也同样强。可是对于要精简到彻底来说，这还不够。为了让这段CSS代码的结构明了，我们用上了空格换行等占用空间的东西，如果将这些占用空间的去掉呢？

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}

只这一句就替代了上面的一段代码，这样代码就已经精简到了最大化，当然，并不推荐所有人都这样写，这样写的CSS代码在可读性上要远远差于段落式的写法，除非你对自己写的代码有完全掌握的信心。

在同一个站点的CSS文件中，不可避免的会出现不同的ID或Class却有一部分相同的属性，如果将这些ID或Class逐个分开来写的话，在CSS文件里无疑会生成重复代码，而我们要尽量的精简CSS文件的大小，那么“消灭”这部分重复的代码就变得势在必行。

看下面一段CSS代码：

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}
#content{margin:10px 15px;padding:10px;background:#999;}
#copyright{margin:10px 15px;border:1px solid #f00;}

在上面的三个ID中都有一个相同的属性“margin:10px 15px;”，如果就这样分开来写的话，这三个ID之间将保持各自独立的关系，但却生成了重复的代码，而我们可以将其写成如下格式：

#header,#content,#copyright{margin:10px 15px;}
#header{background:#333 url(Images/header.jpg);}
#content{padding:10px;background:#999;}
#copyright{border:1px solid #f00;}

将上面的ID换成Class也是一样的。这样写我们就成功的将重复代码“消灭”掉了。但是如果这里具有相同的属性的ID或Class过多的话，难免会造成代码可读性降到很低很低，所以除此之外当具有相同属性的都是Class时还有另外的一种写法：

.main{margin:10px 15px;}
.header{background:#333 url(Images/header.jpg);}
.c

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!