上海网基网站优化技术有限公司
首页 | 联系方式 | 加入收藏 | 设为首页

服务项目

联系方式

联系人:刘小姐
电话:400-807-6757
手机:18042313315
邮箱:service@zylmagic.com

当前位置:首页 >> 网站设计 >> 正文

如何才能精简CSS代码

编辑:上海网基网站优化技术有限公司   时间:2013/03/29   字号:
摘要:如何才能精简CSS代码
我们在建设网站的时候,尽量在不影响网站功能和架构的情况下,网页的文件越简单越小越好,这样浏览用户就可以不用等待网页缓慢呈现了,对于那些网速比较慢的浏览用户作用极为突出。
虽然现在的DIV+CSS的布局要比最早的Table布局时代码要简单很多,但是网页文件缩减还是大家要考虑的事情之一。下面我们就一起来看一段代码:
#header {   margin-top:10px;   margin-right:15px;   margin-bottom:10px;   margin-left:15px;   background-color:#333333;   background-images:url(Images/header.jpg);
这一段CSS代码,看上去结构和调理都很清晰明朗,而且也有可读性。可是这样的一段代码却没有做精简,也就是说它是最原始的CSS代码。
下面看精简后的代码:
#header {   margin:10px 15px;
background:#333 url(Images/header.jpg);
}
在CSS中有复合属性这一说法,也就是说可以将很多属性参数整合在一起的,就拿上面的“margin-top; margin-right; margin-bottom; margin-left;”可以整合成一个“margin”属性。
通过这一点,我们就可以再进一步简化代码。而且这样写的读性也很强,结构也同样合理。但是从简洁的角度来说,这还远远不够。为了让这段CSS代码的结构更加明了,我们用上了空格换行等占用空间的东西,如果将这些占用空间的去掉呢?
#header{margin:10px 15px;background:#333 url(Images/header.jpg);}
只这一句就替代了上面的一段代码,这样已经精简到了最大化,当然,不是任何时候都适合这样来写,这样写的CSS代码在可读性上要远远差于段落式的写法,除非你对自己写的代码的技术有足够信心。
在同一个站点的CSS文件中,不可避免的会出现不同的Class或ID却有一部分相同的属性,如果将这些Class或ID逐个分开来写的话,在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也是一样的。这样去做我们就成功的将重复代码“消灭”掉了
上一条:如何解决SESSION过期 下一条:XHTML在网站布局中有哪些优势