书通网

当前位置:首页 > 油泼鸡 >

控制网页文件大小通过精简CSS实现_计算机软件水平考试

时间:2018-05-31来源:读档人生网

 尽管对于现如今的带宽来说,网页文件那仅以K来算的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。

  众所周之,在不影响整个网页构架与功能的情况下,网页文件越小越好,因为更小的网页文件有利于浏览器对网页的解释时间缩到更短,自然访客也就不用面临等待网页缓慢呈现的烦躁了,这一点对于那些带宽少网速慢的用户犹为明显。试想一下,你会是希望打开一个网站的时候整个站点马上呈现在你面前呢?还是喜欢花上十几秒甚至是几分钏来看整个站点一点一点的被浏览器解释出来呢?

  在Table布局的时代,代码无数次的随着表格在页面里重复,致使整个网页文件变得臃肿无比,代码的可读性也降到,浏览器的解释时间自然也增加了不少。而自从DIV+CSS的布局替代Table布局之后,这一切都得到了极大的改善,让Table回归到它原本用于显示数据的位置上去,而布局就交给D原发性癫痫是怎样引起的IV+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;b癫痫患者可不可以使用开浦兰药物进行治疗?ackground:#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:10p

上一篇:中国工商银行总行招聘启事 8月10日至8月28日报名_银行招聘

下一篇:2016年11月吉林单证员成绩查询时间:12月26日起_单证员考试

人气排行
推荐内容
友情链接(友情链接交换QQ:421374788)

声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们, 我们会及时删除。

好词好句网www.kj-cy.com为广大网友提供: 优美的诗句伤感的句子好词好句唯美的句子思念的诗句经典语句等学习生活资源。