课程免费试听
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
网络营销,淘宝培训课程优惠
如何精简CSS代码以控制网页文件大小

来源:新川教育 阅读数:2687
添加时间:2012-10-31   类别:网页设计教程

 番禺网页设计培训系列教程:

 在不影响整个网页构架与功能的情况下,网页文件越小越好,访客就不用等待网页缓慢呈现了,这一点对于那些带宽少网速慢的用户犹为明显。
    即使DIV+CSS的布局方式将以前Table布局时代码的臃肿降到了最低,但网页文件精简到最小还是网页设计师们所应该考虑的问题之一  

 
   在不影响整个网页构架与功能的情况下,网页文件越小越好,访客就不用等待网页缓慢呈现了,这一点对于那些带宽少网速慢的用户犹为明显。

    即使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代码的基本上将代码进一步的精简。而且这样写的结构也合理,可读性也同样强。可是对于要精简到彻底来说,这还不够。为了让这段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也是一样的。这样写我们就成功的将重复代码“消灭”掉了。

      友情链接

  1. 办公文秘
  2. 美术培训
  3. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 学校图片
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
咨询微信:18926224142   微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6