通過精簡CSS實現控制網頁文件大小

2024-07-11 08:48:30

字體：大中小

來源：轉載

供稿：網友

眾所周之，在不影響整個網頁構架與功能的情況下，網頁文件越小越好，因為更小的網頁文件有利于瀏覽器對網頁的解釋時間縮到更短，自然訪客也就不用面臨等待網頁緩慢呈現的煩躁了，這一點對于那些帶寬少網速慢的用戶猶為明顯。試想一下，你會是希望打開一個網站的時候整個站點馬上呈現在你面前呢？還是喜歡花上十幾秒甚至是幾分釧來看整個站點一點一點的被瀏覽器解釋出來呢？

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

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

看如下一段代碼：

#header {margin-top:10px;margin-right:15px;margin-bottom:10px;margin-left:15px;backgroung-color:#333333;background-images:url(Images/header.jpg);}

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

#header {margin:10px 15px;backgroung:#333 url(Images/header.jpg);}

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

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

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}

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

在同一個站點的CSS文件中，不可避免的會出現不同的ID或Class卻有一部分相同的屬性，如果將這些ID或Class逐個分開來寫的話，在CSS文件里無疑會生成重復代碼，而我們要盡量的精簡CSS文件的大小，那么“消滅”這部分重復的代碼就變得勢在必行。　　

看下面一段CSS代碼：

復制代碼

上一篇：CSS加載失敗原因的總結與分析

下一篇：css的語法介紹 css基礎