随着CSS网页布局的应用越来越广泛，但是如何才能写出高效规范的CSS代码呢，这里向大家描述一下编写CSS时注意的七个方面，主要包括使用外联样式替代行间样式或者内嵌样式，建议使用 link 引入外部样式表等内容。

编写CSS时注意的七个方面

随着CSS网页布局的应用越来越广泛，更多的CSSer开始书写CSS，如何才能写出高效规范的CSS代码呢，今天向大家介绍，必须要注意的七个方面：

一、使用外联样式替代行间样式或者内嵌样式

◆不推荐使用行间样式

XML/HTML代码 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
     
     
 charset=utf-8" />     
     
       
     
 ... 
       
       
   
 

 ◆不推荐使用内嵌样式

XML/HTML代码 

"http://www.w3.org/TR/html4/strict.dtd">        
     
charset=utf-8" />     
       
     
p { color: red; }       
       
       
...        
     
 

 ◆推荐使用外联样式

XML/HTML代码 

"http://www.w3.org/TR/html4/strict.dtd">     
     
       
       
 type="text/css" media="screen" />       
< /head>       
 ...        
     
 

 #p#二、建议使用 link 引入外部样式表

为了兼容老版本的浏览器，建议使用 link 引入外部样式表的方来代替 @import导入样式的方式.

译者注： @import是CSS2.1提出的所以老的浏览器不支持。

@import和link在使用上会有一些区别， 利用二者之间的差异，可以在实际运用中进行权衡。

关于@import和link方式的比较在52CSS.com上有几篇文章可以拓展阅读。

◆不推荐@import导入方式

XML/HTML代码 

 
 "http://www.w3.org/TR/html4/strict.dtd">       
     
       
       
       
@import url("styles.css");      
     
     
 ...      
     
 

 ◆推荐引入外部样式表方式

XML/HTML代码 

"http://www.w3.org/TR/html4/strict.dtd">  
     
     
media="screen" />     
       
 ...        
     
 

 三、使用继承

低效率的

CSS代码 

p{ font-family: arial, helvetica, sans-serif; }      
#container { font-family: arial, helvetica, sans-serif; }      
#navigation { font-family: arial, helvetica, sans-serif; }      
#content { font-family: arial, helvetica, sans-serif; }      
#sidebar { font-family: arial, helvetica, sans-serif; }      
h1 { font-family: georgia, times, serif; }      
 

高效的

CSS代码 

body { font-family: arial, helvetica, sans-serif; }       
body { font-family: arial, helvetica, sans-serif; }      
h1 { font-family: georgia, times, serif; }   
 

 #p#四、使用多重选择器

低效率的

CSS代码 

h1 { color: #236799; }       
h2 { color: #236799; }      
h3 { color: #236799; }      
h4 { color: #236799; }    
 

高效的

CSS代码 

h1, h2, h3, h4 { color: #236799; }    
 

五、使用多重声明

低效率的

CSS代码 

p { margin: 0 0 1em; }      
p { background: #ddd; }      
p { color: #666; }     
 

译者注： 对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.

高效的

CSS代码 

p { margin: 0 0 1em; background: #ddd; color: #666; }  
 
   

#p#六、使用简记属性

低效率的

CSS代码 

body { font-size: 85%; font-family: arial, helvetica, sans-serif;   
background-image: url(image.gif); background-repeat: no-repeat;   
background-position: 0 100%; margin-top: 1em; margin-right: 1em;   
margin-bottom: 0; margin-left: 1em; padding-top: 10px;   
padding-right: 10px; padding-bottom: 10px; padding-left: 10px;  
 border-style: solid; border-width: 1px;   
border-color: red; color: #222222;     
 

 高效的

CSS代码 

body { font: 85% arial, helvetica, sans-serif;   
background: url(image.gif) no-repeat 0 100%;   
margin: 1em 1em 0; padding: 10px;   
border: 1px solid red; color: #222; }    
 

七、避免使用 !important

慎用写法

CSS代码 

#news { background: #ddd !important; }     
 

特定情况下可以使用以下方式提高权重级别

CSS代码 

#container #news { background: #ddd; }      
body #container #news { background: #ddd; }    
 

【编辑推荐】

1. clear属性在CSS中的妙用
2. JavaScript动态创建div属性和样式
3. 14大CSS工具提高网页设计效率
4. 五大CSS3新技术用法指导
5. 解读DIV CSS网页布局中CSS无效十个原因