实战网络营销、淘宝电商、设计培训教程中心
课程试听
新川教育-专业的网络营销培训机构
热烈庆祝新川教育成立12周年!学费大优惠.
三种教学方式任选:面授+远程教育+购买视频.

国内首创网络营销 4 步为赢法

系统学习:营销型网页设计、代码级SEO优化、全网综合推广、整合营销策划的全面网络营销课程
网络营销四步为赢法
  • 师资力量

    营销型网页设计:

    在用户的审美越来越挑剔的今天,网站的美工是决定成交量的重要因素,为此本校专门开设网页美工及设计课程,深入学习营销型网页设计、网站建设。

  • 实战教学

    代码级SEO优化:

    营销型网站或者网页的搜索引擎排名无疑是极度重要的!你的网页如果被你的潜在客户搜索不到,你的网页等于白做了,我校是国内著名的SEO培训机构。

  • 学习时间

    全网综合推广:

    全面通过微信、微博、博客、论坛、搜索引擎、分类信息网、NS媒体、自媒体、视频等各种专业网络推广技术去让更多的人知道我们的企业品牌和产品。

  • 售后服务

    整合营销策划:

    系统学习网络营销策划、以及各种整合营销技术如:SEM营销、病毒式营销、口碑营销、邮件营销、事件营销、微信营销、自媒体营销等网络整合营销技术。

如何精简CSS代码以控制网页文件大小

来源:新川教育 阅读数:2594
添加时间: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也是一样的。这样写我们就成功的将重复代码“消灭”掉了。

培训教程公众号 
扫描左图添加公众号,海量视频教程免费学.
三种教学任选:面授;远程教学;购买视频;
6月27号网络营销远程班准时开班,提交电话,免费试听.

      友情链接

  1. 关于我们
  2. 教学优势
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 学校图片
  7. 师资介绍
  8. 工作推荐
  1. 跨境电商
  2. UI设计
  3. 微信营销
  4. 办公文秘
  5. 美术培训
  6. 平面设计
  7. 联系方式
  8. site map

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