广东 广州     专业、实战网络营销培训、淘宝电商培训、电脑设计培训教程中心
2018年新春学费优惠及放假通知!
新川教育-专业的网络营销培训机构
网络营销培训咨询提示
面授+在线教育+视频课程销售一体化.
网络营销选择培训班
如何精简CSS代码以控制网页文件大小

来源:新川教育 阅读数:2300
添加时间: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. 资料下载
  1. 工作推荐
  2. CAD培训
  3. 平面设计
  4. 室内设计
  5. 办公文秘
  6. 文秘教程
  7. 美术培训
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息
(4,5,6B,8,10,12,13,160,147路公共汽车在番禺中医院站或百德商业中心站下车即到)
(3,11,18,22,22B,51B,92,96,97,99,100,102,105,141,148,149,150,150B,303,309,310路公共汽车在交通大厦站下车,向番禺中医院方向走大约200米即到。)
1,20,20B,9路公共汽车到市桥大桥北站下车,向番禺中医院方向走100米左右即到。)
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6