日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
專(zhuān)家提醒編寫(xiě)CSS時(shí)注意的七個(gè)方面

隨著CSS網(wǎng)頁(yè)布局的應(yīng)用越來(lái)越廣泛，但是如何才能寫(xiě)出高效規(guī)范的CSS代碼呢，這里向大家描述一下編寫(xiě)CSS時(shí)注意的七個(gè)方面，主要包括使用外聯(lián)樣式替代行間樣式或者內(nèi)嵌樣式，建議使用 link 引入外部樣式表等內(nèi)容。

創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、澤普網(wǎng)絡(luò)推廣、小程序定制開(kāi)發(fā)、澤普網(wǎng)絡(luò)營(yíng)銷(xiāo)、澤普企業(yè)策劃、澤普品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供澤普建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

編寫(xiě)CSS時(shí)注意的七個(gè)方面

隨著CSS網(wǎng)頁(yè)布局的應(yīng)用越來(lái)越廣泛，更多的CSSer開(kāi)始書(shū)寫(xiě)CSS，如何才能寫(xiě)出高效規(guī)范的CSS代碼呢，今天向大家介紹，必須要注意的七個(gè)方面：

一、使用外聯(lián)樣式替代行間樣式或者內(nèi)嵌樣式

◆不推薦使用行間樣式

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.

 ◆不推薦使用內(nèi)嵌樣式

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.

 ◆推薦使用外聯(lián)樣式

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 引入外部樣式表的方來(lái)代替 @import導(dǎo)入樣式的方式.

譯者注： @import是CSS2.1提出的所以老的瀏覽器不支持。

@import和link在使用上會(huì)有一些區(qū)別， 利用二者之間的差異，可以在實(shí)際運(yùn)用中進(jìn)行權(quán)衡。

關(guān)于@import和link方式的比較在52CSS.com上有幾篇文章可以拓展閱讀。

◆不推薦@import導(dǎo)入方式

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.

譯者注： 對(duì)于十六進(jìn)制顏色值，個(gè)人偏向于色值不縮寫(xiě)且英文字母要大寫(xiě)的方式.

高效的

CSS代碼 

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

#p#六、使用簡(jiǎn)記屬性

低效率的

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

慎用寫(xiě)法

CSS代碼 

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

特定情況下可以使用以下方式提高權(quán)重級(jí)別

CSS代碼 

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

【編輯推薦】

  1. clear屬性在CSS中的妙用
  2. JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式
  3. 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
  4. 五大CSS3新技術(shù)用法指導(dǎo)
  5. 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因

網(wǎng)站欄目：專(zhuān)家提醒編寫(xiě)CSS時(shí)注意的七個(gè)方面
文章鏈接：http://www.dlmjj.cn/article/dpdgdcj.html