专家提醒编写CSS时注意的七个方面

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

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、网站建设、泽普网络推广、小程序定制开发、泽普网络营销、泽普企业策划、泽普品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供泽普建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

编写CSS时注意的七个方面

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

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

◆不推荐使用行间样式

XML/HTML代码 

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4.      
    5. 
  
  
  
  5. 
  
  
  
  6.  charset=utf-8" />     
    7. 
  
  
  
  7. Page title - book.chinaz.com     
    8. 
  
  
  
  8.        
    9. 
  
  
  
  9.      
    10. 
  
  
  
  10.  ... 
           
    11. 
  
  
  
  11.        
    12. 
  
  
  
  12.    
    13. 
  
  
  
  13.  
    14.

 ◆不推荐使用内嵌样式

XML/HTML代码 

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/html4/strict.dtd">        
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4. 
  
  
  
  5. charset=utf-8" />     
    6. 
  
  
  
  6. Page title - book.chinaz.com       
    7. 
  
  
  
  7.      
    8. 
  
  
  
  8. p { color: red; }       
    9. 
  
  
  
  9.        
    10. 
  
  
  
  10.        
    11. 
  
  
  
  11. ...        
    12. 
  
  
  
  12.      
    13. 
  
  
  
  13.  
    14.

 ◆推荐使用外联样式

XML/HTML代码 

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/html4/strict.dtd">     
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4.        
    5. 
  
  
  
  5. 
  
  
  
  6. Page title - book.chinaz.com       
    7. 
  
  
  
  7. 
  
  
  
  8.  type="text/css" media="screen" />       
    9. 
  
  
  
  9. < /head>       
    10. 
  
  
  
  10.  ...        
    11. 
  
  
  
  11.      
    12. 
  
  
  
  12.  
    13.

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

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

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

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

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

◆不推荐@import导入方式

XML/HTML代码 

 
 
 
    
  
  
  
  1. 
  
  
  
  2.  
    3. 
  
  
  
  3.  "http://www.w3.org/TR/html4/strict.dtd">       
    4. 
  
  
  
  4.      
    5. 
  
  
  
  5.        
    6. 
  
  
  
  6. 
  
  
  
  7. Page title - 52css.com       
    8. 
  
  
  
  8.        
    9. 
  
  
  
  9. @import url("styles.css");      
    10. 
  
  
  
  10.      
    11. 
  
  
  
  11.      
    12. 
  
  
  
  12.  ...      
    13. 
  
  
  
  13.      
    14. 
  
  
  
  14.  
    15.

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

XML/HTML代码 

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/html4/strict.dtd">  
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4. 
  
  
  
  5. Page title - blog.huangchao.org     
    6. 
  
  
  
  6. 
  
  
  
  7. media="screen" />     
    8. 
  
  
  
  8.        
    9. 
  
  
  
  9.  ...        
    10. 
  
  
  
  10.      
    11. 
  
  
  
  11.  
    12.

 三、使用继承

低效率的

CSS代码 

 
 
 
    
  
  
  
  1. p{ font-family: arial, helvetica, sans-serif; }      
    2. 
  
  
  
  2. #container { font-family: arial, helvetica, sans-serif; }      
    3. 
  
  
  
  3. #navigation { font-family: arial, helvetica, sans-serif; }      
    4. 
  
  
  
  4. #content { font-family: arial, helvetica, sans-serif; }      
    5. 
  
  
  
  5. #sidebar { font-family: arial, helvetica, sans-serif; }      
    6. 
  
  
  
  6. h1 { font-family: georgia, times, serif; }      
    7. 
  
  
  
  7.  
    8.

高效的

CSS代码 

 
 
 
    
  
  
  
  1. body { font-family: arial, helvetica, sans-serif; }       
    2. 
  
  
  
  2. body { font-family: arial, helvetica, sans-serif; }      
    3. 
  
  
  
  3. h1 { font-family: georgia, times, serif; }   
    4. 
  
  
  
  4.  
    5.

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

低效率的

CSS代码 

 
 
 
    
  
  
  
  1. h1 { color: #236799; }       
    2. 
  
  
  
  2. h2 { color: #236799; }      
    3. 
  
  
  
  3. h3 { color: #236799; }      
    4. 
  
  
  
  4. h4 { color: #236799; }    
    5. 
  
  
  
  5.  
    6.

高效的

CSS代码 

 
 
 
    
  
  
  
  1. h1, h2, h3, h4 { color: #236799; }    
    2. 
  
  
  
  2.  
    3.

五、使用多重声明

低效率的

CSS代码 

 
 
 
    
  
  
  
  1. p { margin: 0 0 1em; }      
    2. 
  
  
  
  2. p { background: #ddd; }      
    3. 
  
  
  
  3. p { color: #666; }     
    4. 
  
  
  
  4.  
    5.

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

高效的

CSS代码 

 
 
 
    
  
  
  
  1. p { margin: 0 0 1em; background: #ddd; color: #666; }  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.    
    4.

#p#六、使用简记属性

低效率的

CSS代码 

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

 高效的

CSS代码 

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

七、避免使用 !important

慎用写法

CSS代码 

 
 
 
    
  
  
  
  1. #news { background: #ddd !important; }     
    2. 
  
  
  
  2.  
    3.

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

CSS代码 

 
 
 
    
  
  
  
  1. #container #news { background: #ddd; }      
    2. 
  
  
  
  2. body #container #news { background: #ddd; }    
    3. 
  
  
  
  3.  
    4.

【编辑推荐】

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

文章题目：专家提醒编写CSS时注意的七个方面
网页路径：http://www.mswzjz.cn/qtweb/news43/99293.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

微信小程序知识

各行业网站

卡多尼人工智　　 　专业网站建设　　 　成都全网营销　　 　广安网站制作公司　　 　圣月冷冻库　　 　钢筋机械设备　　 　四川和正源　　 　注册域名　　 　贵阳托管服务器　　 　成都免费网站建设　　 　南宁旺客科技　　 　迷你发光字　　 　抖音代运营　　 　成都发电机维修　　 　成都网站改版公司　　 　成都托管服务器　　 　等级保护测评　　 　网站空间　　 　微信公众号开发　　 　四川搅拌罐车