CSS代碼怎么優(yōu)化

最近看過許多網(wǎng)友制作的SKIN的CSS文件，發(fā)現(xiàn)其中有著許多冗余的代碼。下面我來(lái)跟大家介紹一下，如何清除這些冗余的代碼，讓你的CSS文件更加簡(jiǎn)潔。

一、margin、padding屬性

參照相關(guān)資料我們可以知道，margin和padding代表的意思分別是外部邊距和內(nèi)部填充距離，在許多網(wǎng)友的CSS中，關(guān)于這兩個(gè)屬性的冗余代碼是出現(xiàn)得最多的。比如：margin:0px，大家可以查看一下自己的CSS文件中，是否許多的margin:0px，其中有的是不需要的，你可以嘗試刪除它，當(dāng)然也并不是所有的margin:0px都沒有用，相同，padding:0px也一樣。

另外，margin和padding中各項(xiàng)屬性的順序是：上右下左，你只要記住是順時(shí)針方向就好了。我們?cè)倏纯催@兩段代碼：

Example Source Code [例如源代碼]

margin:0px 0px 0px 10px；

margin-left:10px；

其實(shí)他們的作用是一樣的，下面的則是一種縮寫，使用縮寫我們可以減少CSS代碼，并使閱讀起來(lái)更為方便。(padding也相同。)

二、!important;屬性

!important是CSS1就定義的語(yǔ)法，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。IE是不支持這個(gè)語(yǔ)法的，而其他的瀏覽器都支持，通過這一點(diǎn)，我們可以得知，設(shè)置了優(yōu)先權(quán)的代碼是不會(huì)被IE執(zhí)行的。所以我們可以important的后面添加CSS樣式，使其可以區(qū)別于IE和FireFox等瀏覽器。

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

Example Source Code [例如源代碼]

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

這里就是多余的了，我們可以這樣寫：height:50px就夠了，這個(gè)錯(cuò)誤在我剛開始制作CSS時(shí)也曾出現(xiàn)過。

三、text-align、font樣式

這兩個(gè)樣式的作用我就不說(shuō)了，但是這兩個(gè)樣式在許多網(wǎng)友的CSS中也存在許多冗余。下面我來(lái)舉例說(shuō)明一下，層的定義如下：

Example Source Code [例如源代碼]

CSS文件如下(錯(cuò)誤示例)：

Example Source Code [例如源代碼]

#main{width:500px;text-algin:left;font-size:12px;color:#000000;}

#body1{width:500px;text-algin:center;font-size:12px;color:#FF0000;}

#spacePage #content{background-color:transparent;background:transparent;text-algin:left;font-size:12px;color:#000000;}

#body2{text-algin:left;font-size:12px;color:#000000;}

大家可以從上面的代碼中輕易地看出，有許多的冗余代碼，現(xiàn)在我們來(lái)書寫正確的代碼：

Example Source Code [例如源代碼]

#main{width:500px;text-algin:left;font-size:12px;color:#000000;}

#body1{text-algin:center;color:#FF0000;}

#spacePage #content{background-color:transparent;background:transparent;width:300px;text-algin:left;color:#000000;}

#body2{}

以上就是正確的代碼，由于大家在制作SKIN時(shí)，對(duì)PJBLOG的DIV結(jié)構(gòu)沒搞清楚，才會(huì)出現(xiàn)這種錯(cuò)誤。

四、display:none的使用

display:none的作用就是使被定義的層不顯示。我們?cè)賮?lái)看看這段代碼：

Example Source Code [例如源代碼]

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

大家有沒有覺得這有些多余呢，是的，既然設(shè)置了不顯示，為何還要保留那些不必要的樣式呢？出現(xiàn)這種情況我就知道，這個(gè)SKIN是改自某人的。

五、還是margin和padding

我還是通過例子來(lái)給大家說(shuō)明，層的定義同上，以下是CSS的定義(錯(cuò)誤示例)：

Example Source Code [例如源代碼]

#main{margin:5px 0px 5px 0px;}

#body1{margin:12px 0px 10px 0px;}

#spacePage #content{background-color:transparent;background:transparent;margin:8px 0px 2px 0px;}

#body2{margin:10px 0px 15px 0px;}

現(xiàn)在我們?cè)賮?lái)書寫正確的樣式：

Example Source Code [例如源代碼]

#main{}

#body1{margin-top:17px ;}

#spacePage #content{background-color:transparent;background:transparent;margin:8px 0px 2px 0px;}

#body2{margin:20px 0px ;}

這里需要大家制作一下示例才能了解，首先#main{margin:5px 0px 5px 0px;}是沒有必要的，他無(wú)非定義的就是整個(gè)頁(yè)面的上、下外邊距。(在一定場(chǎng)合下卻需要這樣書寫)我們同樣可以通過定義#body1的上邊距和#body2的下邊距來(lái)設(shè)置，所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}(這里定義的是#body2的上下邊距為20px，左右邊距為0px，也是縮寫的一種方式。)

同樣的道理，于是我們可以省略了#body1的下邊距，在#spacePage #content層在定義上邊距，另外大家還需要先弄清楚層的嵌套關(guān)系，否則就會(huì)出錯(cuò)。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的css代码优化思路,CSS代码优化方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。