CSS代码优化

作者:     目录: PHP+MySQL     发表: 2009年11月23日

掌握CSS的规范,编写的代码须符合CSS规范要求,在减小CSS文件大小的同时,使其更有条理,浏览器解析更有效率。

CSS代码优化方法:

  1. 格式化CSS代码,使其层级清晰。
    
    <div id="header">
     <h1 id="logo">任鸟飞网页设计</h1>
      <ul id="menu">
       <li><a href="">首页</a></li>
      </ul>
    </header>
    
  2. 添加注释 
    
    // Start Header
    <div id="header">
     <h1 id="logo">任鸟飞网页设计</h1>
     <ul id="menu">
      <li><a href="">首页</a></li>
     </ul>
    </header>
    // end header
    

    在样式定后可添加<!– /样式名–>,使代码注释更清晰。
    例如在header 样式定义结尾处添加<!–/header–>结尾。

  3. 代码缩写
    XHTML中元素的属性往往有好几种,在对其元素进行样式定义时,尽量采用缩写的形式,降低冗余程度。
    例如

    
    // 初始代码
    p {
      font-style:normal;
      font-variant:normal;
      font-weight:bold;
      font-size:1em;
      line-height:1.2em;
      font-family:georgia,"times new roman",serif;
    }
    // 代码优化后
    p {
      font:bold 1em/1.2em georgia,"times new roman",serif;
    }
  4. 代码合并
    在对同一元素进行样式定义时,同一元素的样式尽量合并在一起。
    例如

    
    // 初始代码
    p {
      border:dotted;
    }
    p {
      color:red;
    }
    
    // 代码优化后
    p {
      border:dotted;
      color:red;
    }
    
  5. 减少div标签的使用
    div标签就像以前的表格一样,过分使用往往会使代码混乱,可读性降低,浏览器的渲染效率也会降低。应尽量使用能代表其含义的标签,例如段落就使用P标签,列表就使用li标签,标题使用h标签等等。
    例如

    
    // 初始代码
    <div id="header">
     <div id="menu>
      <div id="home">首页
      <div>
     </div>
    </div>
    //优化后代码
    <div id="header">
     <ul id="menu">
      <li>首页</li>
     </ul>
    </div>
    
标签:

发表评论