浅谈如何用精简CSS实现控制网页文件大小

您现在的位置：万象互联帮助中心>> 最新资讯>>详细内容

<<返回上一页

浅谈如何用精简CSS实现控制网页文件大小: 大中小文章来源：万象互联更新时间：2012-9-4

分享到：

 网页文件的大小会影响网站的访问速度，这一点对于大型网站来说效果比较明显。在Table布局的时代，代码无数次的随着表格在页面里重复，致使整个网页文件变得臃肿无比，代码的可读性也降到最低，浏览器的解释时间自然也增加了不少。而自从DIV+CSS的布局替代Table布局之后，这一切都得到了极大的改善，让Table回归到它原本用于显示数据的位置上去，而布局就交给DIV+CSS来做，这样代码的可读性与复用性都得到了提高，而DIV+CSS更为重要的一点就是将网页文件的表现与结构区分开来，再也不用为了表现而去改动整个网页文件的结构了。即使DIV+CSS的布局方式将以前Table布局时代码的臃肿降到了最低，但对于网页设计师来说，如何将网页文件的大小控制到最小是永远值得探索和追求的一个问题。 看如下一段代码： #header {margin-top:10px;margin-right:15px;margin-bottom:10px;margin-left:15px;backgroung-color:#333333;background-images:url(Images/header.jpg);} 这样的一段CSS代码，在条理上很清晰，结构也很明了，可读性很强，可是这样的一段代码却没有做精简，也就是说它是最原始的CSS代码，下面看精简后的代码： #header {margin:10px 15px;backgroung:#333 url(Images/header.jpg);} 在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);}　　 .content{padding:10px;background:#999;}　　 .copyright{border:1px solid #f00;} 不过需要注意的一点就是，这种写法对于ID是无效的，不管其中是存在一个ID或者全部都是ID，都将造成这段代码的无效。 文章来源：<a href="http://www.xxx.com/" target="_blank">http://www.163ns.com</a>，转载请注明！

分享到：复制地址新浪微博腾讯微博 QQ空间开心网人人网百度空间百度贴吧网易微博搜狐微博

上一篇：基于代理备份 VS 基于主机备份

下一篇：基于CSS代码写出不同形状图形的方法汇总

广告联盟中的CPA、CPS、CPC、CPM分别是什么意思