八大技巧輕松書(shū)寫(xiě)CSS
本文向大家描述一下書(shū)寫(xiě)CSS簡(jiǎn)單實(shí)用的8個(gè)技巧，主要包括結(jié)構(gòu)，整合，注釋和驗(yàn)證等內(nèi)容，希望對(duì)你的學(xué)習(xí)有所幫助。
書(shū)寫(xiě)CSS簡(jiǎn)單實(shí)用的8個(gè)技巧
這篇文章主要幫助剛接觸CSS的朋友，通過(guò)該文章，可以幫助大家更好的理解CSS。
1.結(jié)構(gòu)
保持CSS結(jié)構(gòu)清晰，不僅有助于保持CSS文件的簡(jiǎn)單，也利于日后的檢查、更改。
這種不推薦：
BODY
- {margin-top:5px;
- font-family:Arial,Helvetica,
- sans-serif;font-size:14px;color:#3b5f83;}
推薦這種寫(xiě)法：
BODY
- {
- margin-top:5px;
- font-family:Arial,Helvetica,sans-serif;
- font-size:14px;
- color:#3b5f83;
- }
2.保持簡(jiǎn)潔
保持代碼簡(jiǎn)潔，可以大幅減小CSS文件的大小。
不推薦：
- padding-top:10px;
- padding-right:5px;
可以簡(jiǎn)寫(xiě)：
- padding:10px5px00;
3.Paddingvs.Margin
對(duì)于瀏覽器來(lái)說(shuō)，Margin是兼容性最差的一個(gè)屬性。因此，只要條件允許，應(yīng)該盡可能的使用Padding屬性。#p#
4.整合
在下面的例子中定義了一個(gè)公共的Class，來(lái)代替不同的地方都要用到的相同的代碼：color:grey。
- .header-content{
- font-size;12px;
- color:grey;
- }
- .body_content{
- font-size:12px;
- color:grey;
- }
- .footer_content{
- font-size:11px;
- color:grey;
- }
其實(shí)可以這樣：
- *{color:grey;}
- .body_content{font-size:12px;}
- .footer_content{font-size:11px;}
5.注釋
在適當(dāng)?shù)奈恢眉尤胍粭l簡(jiǎn)單的注釋?zhuān)粌H有助于你了解代碼，其他人也可以很好的理解你的代碼。
/*這里開(kāi)始定義網(wǎng)址www.zdbase.com*/
6.驗(yàn)證
***對(duì)已經(jīng)創(chuàng)建好的CSS文件進(jìn)行驗(yàn)證，這樣可以幫助你找到文件中存在的錯(cuò)誤。
7.避免在XHTML中使用樣式
不要在Xhtml代碼中使用樣式，這樣不僅會(huì)增加網(wǎng)頁(yè)文件的大小，而且也會(huì)使代碼混亂，變復(fù)雜。例如下面這種不推薦：
- <divstyledivstyle="color:redpadding:20px">
- <h2>這種用樣式的方法不好h2>
- div>
8.命名
使用標(biāo)準(zhǔn)的可以從字面上正確理解的ID和Class名稱(chēng)，而不僅僅是代號(hào)。
下面這種不推薦：
- .a1{color:grey;}
- .b1{font-size:11px;}
推薦這種寫(xiě)法：
- .body_content{color:grey;}
- .foot_content{font-size:11px;}
【編輯推薦】
- 探究IE7beta2的CSS兼容性
- IE6、IE7、Firefox中margin問(wèn)題解決辦法
- DIV布局規(guī)范中CSS類(lèi)及id命名方式
- CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
- 將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧
