本文向大家描述一下書寫CSS簡單實用的8個技巧，主要包括結(jié)構(gòu)，整合，注釋和驗證等內(nèi)容，希望對你的學(xué)習(xí)有所幫助。

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

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

1.結(jié)構(gòu)

保持CSS結(jié)構(gòu)清晰，不僅有助于保持CSS文件的簡單，也利于日后的檢查、更改。

這種不推薦：

BODY 

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

推薦這種寫法：

BODY 

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

2.保持簡潔

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

不推薦：

padding-top:10px;  
 
padding-right:5px;  
 

可以簡寫：

padding:10px5px00;  
 

3.Paddingvs.Margin

對于瀏覽器來說，Margin是兼容性最差的一個屬性。因此，只要條件允許，應(yīng)該盡可能的使用Padding屬性。#p#

4.整合

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

.header-content{  
 
font-size;12px;  
 
color:grey;  
 
}  
 
.body_content{  
 
font-size:12px;  
 
color:grey;  
 
}  
 
.footer_content{  
 
font-size:11px;  
 
color:grey;  
 
}  
 

 其實可以這樣：

*{color:grey;}  
 
.body_content{font-size:12px;}  
 
.footer_content{font-size:11px;}  

5.注釋

在適當(dāng)?shù)奈恢眉尤胍粭l簡單的注釋，不僅有助于你了解代碼，其他人也可以很好的理解你的代碼。

/*這里開始定義網(wǎng)址www.zdbase.com*/

6.驗證

***對已經(jīng)創(chuàng)建好的CSS文件進(jìn)行驗證，這樣可以幫助你找到文件中存在的錯誤。

7.避免在XHTML中使用樣式

不要在Xhtml代碼中使用樣式，這樣不僅會增加網(wǎng)頁文件的大小，而且也會使代碼混亂，變復(fù)雜。例如下面這種不推薦：

<divstyledivstyle="color:redpadding:20px"> 
 
<h2>這種用樣式的方法不好h2> 
 
div> 
 

 8.命名

使用標(biāo)準(zhǔn)的可以從字面上正確理解的ID和Class名稱，而不僅僅是代號。

下面這種不推薦：

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

推薦這種寫法：

.body_content{color:grey;}  
 
.foot_content{font-size:11px;}  

【編輯推薦】

1. 探究IE7beta2的CSS兼容性
2. IE6、IE7、Firefox中margin問題解決辦法
3. DIV布局規(guī)范中CSS類及id命名方式
4. CSS兼容：解決IE6、IE7和IE8的兼容問題妙招
5. 將XHTML+CSS頁面轉(zhuǎn)換為打印機頁面技巧