Notice网站公告
Solution解决方案
DIV CSS技术首页 > 知识中心 > DIV CSS技术 >

CSS代码优化方案

 一.css代码优化作用与意义

  1.减少占用网页的字节数量。缩短浏览器下载css代码的时间,加快打开网页的速度。
  2.方便维护。简化和标准化css代码使得css代码减少,方便后期的维护。
  3.使css代码更为专业。
二.css优化方法,需要优化css代码地方
  1.缩写css代码。
  例如:未优化前
  mmargin-top:4px;
  margin-right:5px; 
  margin-bottom:6px;
  argin-left:7px;
  优化简写为
  margin:4px 5px 6px 7px; 
  意思和属性效果同上。
  2.排列css代码。
  例如:未优化前
  .yangshi{ 
    font-size:14px;
    border:1px solid red;
    padding:6px;
    }
  优化简写为
  .yangshi{ font-size:14px;border:1px solid red;padding:6px;}
  节约空格,回车位和文件行数,从而节约代码文件字节。
  3.同属性提取共用css选择器。
    如果有两个部分的css属性基本都相同,小部分不同,为了节约css代码从而提取相同的css样式出来,单独命名一个css属性选择器。
    例如:未优化前
    .yangshi{ font-size:14px;border:1px solid red;padding:6px; width:30px;}
    .yangshi2{ font-size:14px;border:1px solid red;padding:6px; width:60px;}
    优化简写为
     .gongyong{font-size:14px;border:1px solid red;padding:6px;}
     .yangshi{ width:30px;} 
     .yangshi2{width:60px;} 
    调用css时候
    <div class="gongyong yangshi">div css样式</div>
    <div class="gongyong yangshi2">div css样式2</div> 
    通过调用相同css样式,再分别调用不同css属性类即可。
  4.分离网页颜色和背景设置样式。
    将样式提取到一起或放到一个css文件里,使其改变一个地方就可以改变整个站点网页的样式,便于维护管理。
  5.条理化css代码。
    具体意思就是将css代码归类整理,把各个部分的css代码选择器样式区别开来与其他地方css代码互相隔开。
CSS优化方法
网林时代:北京网站建设专业机构,10年建站经验,服务客户1000多家!
网址:www.awanglin.net www.awanglin.com 点击浏览经典案例