任鸟飞网站设计博客

掌握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>