掌握CSS的规范,编写的代码须符合CSS规范要求,在减小CSS文件大小的同时,使其更有条理,浏览器解析更有效率。
CSS代码优化方法:
- 格式化CSS代码,使其层级清晰。
<div id="header"> <h1 id="logo">任鸟飞网页设计</h1> <ul id="menu"> <li><a href="">首页</a></li> </ul> </header>
- 添加注释
// Start Header <div id="header"> <h1 id="logo">任鸟飞网页设计</h1> <ul id="menu"> <li><a href="">首页</a></li> </ul> </header> // end header
在样式定后可添加<!– /样式名–>,使代码注释更清晰。
例如在header 样式定义结尾处添加<!–/header–>结尾。 - 代码缩写
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; }
- 代码合并
在对同一元素进行样式定义时,同一元素的样式尽量合并在一起。
例如// 初始代码 p { border:dotted; } p { color:red; } // 代码优化后 p { border:dotted; color:red; }
- 减少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>
标签:CSS