大象蕉视频在线观看75

八大技巧輕松書寫CSS |
  • 八大技巧輕松書寫CSS
    发布时间: 2011/1/10 10:45:42   查看次数: 10388 

    本文向大家描述一下書寫CSS簡單實用的8個技巧,主要包括結構,整合,注釋和驗證等內容,希望對你的學習有所幫助。

    書寫CSS簡單實用的8個技巧

    這篇文章主要幫助剛接觸CSS的朋友,通過該文章,可以幫助大家更好的理解CSS。

    1.結構

    保持CSS結構清晰,不僅有助于保持CSS文件的簡單,也利于日後的檢查、更改。

    這種不推薦:

    BODY 

    1. {margin-top:5px;  
    2. font-family:Arial,Helvetica,  
    3. sans-serif;font-size:14px;color:#3b5f83;}  

    推薦這種寫法:

    BODY 

    1. {  
    2. margin-top:5px;  
    3. font-family:Arial,Helvetica,sans-serif;  
    4. font-size:14px;  
    5. color:#3b5f83;  
    6. }  
    7.  

    2.保持簡潔

    保持代碼簡潔,可以大幅減小CSS文件的大小。

    不推薦:

    1. padding-top:10px;  
    2.  
    3. padding-right:5px;  
    4.  

    可以簡寫:

    1. padding:10px5px00;  
    2.  

    3.Paddingvs.Margin

    對于浏覽器來說,Margin是兼容性最差的一個屬性。因此,只要條件允許,應該盡可能的使用Padding屬性。

    4.整合

    在下面的例子中定義了一個公共的Class,來代替不同的地方都要用到的相同的代碼:color:grey。

    1. .header-content{  
    2.  
    3. font-size;12px;  
    4.  
    5. color:grey;  
    6.  
    7. }  
    8.  
    9. .body_content{  
    10.  
    11. font-size:12px;  
    12.  
    13. color:grey;  
    14.  
    15. }  
    16.  
    17. .footer_content{  
    18.  
    19. font-size:11px;  
    20.  
    21. color:grey;  
    22.  
    23. }  
    24.  

    其實可以這樣:

    1. *{color:grey;}  
    2.  
    3. .body_content{font-size:12px;}  
    4.  
    5. .footer_content{font-size:11px;}  

    5.注釋

    在適當的位置加入一條簡單的注釋,不僅有助于你了解代碼,其他人也可以很好的理解你的代碼。

    /*這裏開始定義網址www.zdbase.com*/

    6.驗證

    最好對已經創建好的CSS文件進行驗證,這樣可以幫助你找到文件中存在的錯誤。

    7.避免在XHTML中使用樣式

    不要在Xhtml代码中使用样式,这样不仅会增加网页文件的大小,而且也会使代码混乱,变复杂。例如下面這種不推薦:

    1. <divstyledivstyle="color:redpadding:20px"> 
    2.  
    3. <h2>這種用樣式的方法不好h2> 
    4.  
    5. div> 
    6.  

    8.命名

    使用標准的可以從字面上正確理解的ID和Class名稱,而不僅僅是代號。

    下面這種不推薦:

    1. .a1{color:grey;}  
    2.  
    3. .b1{font-size:11px;}  

    推薦這種寫法:

    1. .body_content{color:grey;}  
    2.  
    3. .foot_content{font-size:11px;}  
    ,
    相關內容
    上一條:互联网新冤家 Google与Oracle开启产权战争
    下一條:IE6、IE7、Firefox中margin問題解決辦法
    推薦文章
    本月熱點文章