學習CSS：最佳化我們的CSS樣式表代碼

css|樣式表|最佳化

　　最近看過許多網友製作的SKIN的CSS檔案，發現其中有著許多冗餘的代碼。下面我來跟大家介紹一下，如何清除這些冗餘的代碼，讓你的CSS檔案更加簡潔。

　　一、margin、padding屬性

　　參照相關資料我們可以知道，margin和padding代表的意思分別是外部邊距和內部填充距離，在許多網友的CSS中，關於這兩個屬性的冗餘代碼是出現得最多的。比如：margin:0px，大家可以查看一下自己的CSS檔案中，是否許多的margin:0px，其中有的是不需要的，你可以嘗試刪除它，當然也並不是所有的margin:0px都沒有用，相同，padding:0px也一樣。

　　另外，margin和padding中各項屬性的順序是：上右下左，你只要記住是順時針方向就好了。我們再看看這兩段代碼：

margin:0px 0px 0px 10px；
margin-left:10px；

　　其實他們的作用是一樣的，下面的則是一種縮寫，使用縮寫我們可以減少CSS代碼，並使閱讀起來更為方便。（padding也相同。）

　　二、!important;屬性

　　!important是CSS1就定義的文法，作用是提高指定樣式規則的應用優先權。IE是不支援這個文法的，而其他的瀏覽器都支援，通過這一點，我們可以得知，設定了優先權的代碼是不會被IE執行的。所以我們可以important的後面添加CSS樣式，使其可以區別於IE和FireFox等瀏覽器。

　　上次在看Miles的CSS代碼時，我看到了這樣一句：

height:50px !important;height:50px;

　　這裡就是多餘的了，我們可以這樣寫：height:50px就夠了，這個錯誤在我剛開始製作CSS時也曾出現過。

　　三、text-align、font樣式

　　這兩個樣式的作用我就不說了，但是這兩個樣式在許多網友的CSS中也存在許多冗餘。下面我來舉例說明一下，層的定義如下：

<div id="main">
<div id="body1">
<div id="content1">
</div>
</div>
<div id="body2">
</div>
<div>

　　CSS檔案如下（錯誤樣本）：

#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{width:500px;text-algin:center;font-size:12px;color:#FF0000;}
#content{text-algin:left;font-size:12px;color:#000000;}
#body2{text-algin:left;font-size:12px;color:#000000;}

　　大家可以從上面的代碼中輕易地看出，有許多的冗餘代碼，現在我們來書寫正確的代碼：

#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{text-algin:center;color:#FF0000;}
#content{width:300px;text-algin:left;color:#000000;}
#body2{}

　　以上就是正確的代碼，由於大家在製作SKIN時，對PJBLOG的DIV結構沒搞清楚，才會出現這種錯誤。

　　四、display:none的使用

　　display:none的作用就是使被定義的層不顯示。我們再來看看這段代碼：

#blogTitle{font-size:0px;margin:10px 3px 3px 40px;height:20px;color:#FFC1E6;display:none}

　　大家有沒有覺得這有些多餘呢，是的，既然設定了不顯示，為何還要保留那些不必要的樣式呢？出現這種情況我就知道，這個SKIN是改自某人的。

　　五、還是margin和padding

　　我還是通過例子來給大家說明，層的定義同上，以下是CSS的定義（錯誤樣本）：

#main{margin:5px 0px 5px 0px;}
#body1{margin:12px 0px 10px 0px;}
#content{margin:8px 0px 2px 0px;}
#body2{margin:10px 0px 15px 0px;}

　　現在我們再來書寫正確的樣式：

#main{}
#body1{margin-top:17px ;}
#content{margin:8px 0px 2px 0px;}
#body2{margin:20px 0px ;}

　　這裡需要大家製作一下樣本才能瞭解，首先#main{margin:5px 0px 5px 0px;}是沒有必要的，他無非定義的就是整個頁面的上、下外邊距。（在一定場合下卻需要這樣書寫）我們同樣可以通過定義#body1的上邊距和#body2的下邊距來設定，所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}（這裡定義的是#body2的上下邊距為20px，左右邊距為0px，也是縮寫的一種方式。）

　　同樣的道理，於是我們可以省略了#body1的下邊距，在#content層在定義上邊距，另外大家還需要先弄清楚層的嵌套關係，否則就會出錯。