DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS簡單實用的八大技巧(1)
CSS簡單實用的八大技巧(1)
編輯:CSS詳解     

本文和大家重點討論一下書寫CSS簡單實用的8個技巧,主要幫助剛接觸CSS的朋友更好的理解CSS,希望對你的學習有所幫助。

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

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

1.結構

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

這種不推薦:

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

推薦這種寫法:

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

2.保持簡潔

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

不推薦:padding-top:10px;

padding-right:5px;

可以簡寫:padding:10px5px00;

3.Paddingvs.Margin

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

4.整合

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

  1. .header-content{
  2. font-size;12px;
  3. color:grey;
  4. }
  5. .body_content{
  6. font-size:12px;
  7. color:grey;
  8. }
  9. .footer_content{
  10. font-size:11px;
  11. color:grey;
  12. }

其實可以這樣:

  1. *{color:grey;}
  2. .body_content{font-size:12px;}
  3. .footer_content{font-size:11px;}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved