使您的CSS網(wǎng)頁布局代碼更專業(yè) 精簡CSS文件

2024-07-11 08:26:42

字體：大中小

供稿：網(wǎng)友

盡管對于現(xiàn)如今的帶寬來說，網(wǎng)頁文件那僅以K來算的大小實(shí)在是微不足道，但如何將這以K來計(jì)算的網(wǎng)頁文件精簡到最小還是網(wǎng)頁設(shè)計(jì)師們所應(yīng)該考慮的問題之一。試想一下，你會(huì)是希望打開一個(gè)網(wǎng)站的時(shí)候整個(gè)站點(diǎn)馬上呈現(xiàn)在你面前呢？還是喜歡花上十幾秒甚至是幾分釧來看整個(gè)站點(diǎn)一點(diǎn)一點(diǎn)的被瀏覽器解釋出來呢？

　　在Table布局的時(shí)代，代碼無數(shù)次的隨著表格在頁面里重復(fù)，致使整個(gè)網(wǎng)頁文件變得臃腫無比，代碼的可讀性也降到最低，瀏覽器的解釋時(shí)間自然也增加了不少。而自從DIV+CSS的布局替代Table布局之后，這一切都得到了極大的改善，讓Table回歸到它原本用于顯示數(shù)據(jù)的位置上去，而布局就交給DIV+CSS來做，這樣代碼的可讀性與復(fù)用性都得到了提高，而DIV+CSS更為重要的一點(diǎn)就是將網(wǎng)頁文件的表現(xiàn)與結(jié)構(gòu)區(qū)分開來，再也不用為了表現(xiàn)而去改動(dòng)整個(gè)網(wǎng)頁文件的結(jié)構(gòu)了。

　　即使DIV+CSS的布局方式將以前Table布局時(shí)代碼的臃腫降到了最低，但對于網(wǎng)頁設(shè)計(jì)師來說，如何將網(wǎng)頁文件的大小控制到最小是永遠(yuǎn)值得探索和追求的一個(gè)問題。

看如下一段代碼：

復(fù)制代碼

代碼如下:
#header {
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;
backgroung-color:#333333;
background-images:url(http://www.survivalescaperooms.com/Images/logo.gif);
}

這樣的一段CSS代碼，在條理上很清晰，結(jié)構(gòu)也很明了，可讀性很強(qiáng)，可是這樣的一段代碼卻沒有做精簡，也就是說它是最原始的CSS代碼，下面看精簡后的代碼：

復(fù)制代碼

代碼如下:
#header {
margin:10px 15px;
backgroung:#333 url(http://www.survivalescaperooms.com/Images/logo.gif);
}

在CSS中有復(fù)合屬性這一說法，也就是說可以將很多屬性參數(shù)整合在一起的，比如說上面的“margin-top; margin-right; margin-bottom; margin-left;”可以整合成一個(gè)“margin”屬性，然后為其配上參數(shù)。

　　通過這一點(diǎn)，我們就可以在原始CSS代碼的基本上將代碼進(jìn)一步的精簡。而且這樣寫的結(jié)構(gòu)也合理，可讀性也同樣強(qiáng)。可是對于要精簡到徹底來說，這還不夠。為了讓這段CSS代碼的結(jié)構(gòu)明了，我們用上了空格換行等占用空間的東西，如果將這些占用空間的去掉呢？

復(fù)制代碼

代碼如下:
#header{margin:10px 15px;background:#333 url(http://www.survivalescaperooms.com/Images/logo.gif);}

只這一句就替代了上面的一段代碼，這樣代碼就已經(jīng)精簡到了最大化，當(dāng)然，并不推薦所有人都這樣寫，這樣寫的CSS代碼在可讀性上要遠(yuǎn)遠(yuǎn)差于段落式的寫法，除非你對自己寫的代碼有完全掌握的信心。

上一篇：Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）

下一篇：有利于SEO優(yōu)化的DIV+CSS的命名規(guī)則小結(jié)