HTML+CSS編碼的一些經驗

1.為body標籤賦予id：

　　同一個網站的不同頁面，雖然HTML代碼相同，但是可以通過CSS來取得不同的表現效果。如果這些頁面用的是同一個CSS檔案，怎樣精確的定義相同內容的不同表現呢？通過給body標籤賦予id以區別不同的頁面，然後使用CSS後代選取器可以精確的選擇目標。例如：首頁的body賦予id="home", 內頁的body賦予id="inner",如果選取首頁文章標題的話，可以用：“#home #main h1”,而要選取內頁中的標題的話就可以用：“#inner #main h1”。這樣的話，同一個網站中不容的頁面，HTML代碼相同的也可以有同的表現效果了。

2.相對長度em與段落首行縮排兩個漢字的空格：

　　相對長度單位em根據元素的不同而不同，相對，顧名思義，是根據其他事物的關係來度量。如果一個div中文字的大小為12px, 再設定其外邊距為3em, 則這個外邊距的值就是12*3=36px,如果將文字大小改為15px, 那麼這個外邊距的值就成了15*3=45px 了。

　　漢字書寫都有首行空兩格的習慣，相當於插入了兩個漢字寬度的空格，如果用  顯然無法達到令人滿意的效果。這時候我們就可以用CSS來實現兩個漢字的縮排，如果文字的大小為12px; 那我們縮排24px就可以了，但是在同一個頁面不可能所有的文字大小都是12px, 這裡我們就可以通過相對長度單位em來設定文本縮排2em，這樣的話，不管文字多大，始終都會保持兩個漢字寬度的隨進。

3.id與class命名需要注意技巧：

　　在HTML編碼中，對id與class的命名需要注意技巧，儘可能以地區所在的含義命名，如header、footer等，不要以表現或所在的位置命名，如width500、left、right。左邊的側邊欄可以用side，如果你用left命名的話，後面的內容如果重構，這個側邊欄放到了右邊，那麼顯然此時的left不適合了。

4.關於通配選取器“*”(Universal Selector)：

　　通配選取器可以對一些CSS屬性進行全域設定，也就是全域預設樣式的定義。這樣做可以提高CSS編碼效率，縮減代碼，這樣聲明了，就不必在後面編碼中再進行單獨的定義。例如全域定義文字大小為12px, 而導覽列、側邊欄、內容地區中的文字正好也是12px, 有了這全域定義，那這3塊兒地區就不用再單獨設定了。

　　如果出現與全域定義衝突的定義，在後面的編碼中直接再定義新的樣式，CSS的繼承和層疊經以新的樣式作用於選擇的對象。例如，外邊距*{margin:0;}， 這裡把外邊距都設定為0，在後面的編碼中單獨定義某一元素的外邊距為auto，如h3{margin:auto;}即可實現水平置中對齊。

5.關於position定位:

　　top、righ、bottom和left這4個CSS屬性，都是配合position屬性使用的，表示的是塊的各邊界離頁面邊框（當position為absolute時）的距離，或各個邊界離原來位置（position為relative時）的距離。也就是說只有當position屬性的值設定為absolute或relative時才有效，如果position屬性設定為static，則子塊不會有任何變化。

6.選擇合適的標籤：

　　什麼是時候用<div>，什麼時候用<span>呢，這樣根據實際情況來定，通常情況下，對於頁面中大的區塊兒使用<div>標籤， 而<span>標籤僅僅用於需要單獨設定樣式風格的小元素，比如說一個單詞，一個圖片或是一個超連結等等。

7.關於盒子模型：

　　一個盒子的實際寬度（高度）是由 content + padding + border + margin組成的。在瀏覽器中（無論是IE還是FireFox），width和height的值都指的是width + padding和heigh + padding的值，在實際製作網頁的時候需要特別注意。 

8.關於表單的id與name：

　　表單中id與name都是為了標記對象名稱。id是後來引入的，在這之前Netscape用name屬性來實現這樣的功能。目前還有很多網站背景程式都是用name屬性來擷取表單元素的值，所以有必要同時為元素設定id與name屬性，這樣不但可以通過id選取器為元素定義CSS樣式，還可以兼顧到表單接受頁面能正確擷取表單元素的值（通過name屬性擷取表單資料）。

9.維護CSS樣式表時需要注意的事項：

　　在進行重構的編碼修改時要注意合理的調整。有些不再使用的代碼要堅決的刪掉；對於新增加的代碼根據CSS規則進行添加。在調整前要對將要修改的代碼進行詳細的閱讀，避免重複定義。在調整的時候注意儲存備份代碼，當調整出問題的時候，可以查看原來的代碼進行對比。

10.將多個圖片組合至一個圖片檔案：

　　目前大型網站基本都是採取這樣的做法：一些尺寸相同但內容不同的圖片，這些圖片可能是頁面上的表徵圖、欄目標題或是導覽列的背景圖片。這樣的圖片尺寸往往不大但是數目眾多，這時候我們就可以把這些圖片組合至一個圖片檔案，比如說一個網頁有六個表徵圖，但我們開啟網站的時候需要載入6個圖片才能將網頁顯示出來，而組合至一個圖片後，只需要載入一個圖片就可以了。而且組合以後的圖片檔案體積與未組合之前的圖片體積相當，甚至還會變小而不增加位元組數，最經典的應用是連結背景圖片互動效果製作，也可以將網站所有的icon表徵圖集中在一個圖片上。當然，這種方法不能濫用。