控制網(wǎng)頁(yè)文件大小通過(guò)精簡(jiǎn)CSS實(shí)現(xiàn)

盡管對(duì)于現(xiàn)如今的帶寬來(lái)說(shuō)，網(wǎng)頁(yè)文件那僅以K來(lái)算的大小實(shí)在是微不足道，但如何將這以K來(lái)計(jì)算的網(wǎng)頁(yè)文件精簡(jiǎn)到最小還是網(wǎng)頁(yè)設(shè)計(jì)師們所應(yīng)該考慮的問(wèn)題之一。

眾所周之，在不影響整個(gè)網(wǎng)頁(yè)構(gòu)架與功能的情況下，網(wǎng)頁(yè)文件越小越好，因?yàn)楦〉木W(wǎng)頁(yè)文件有利于瀏覽器對(duì)網(wǎng)頁(yè)的解釋時(shí)間縮到更短，自然訪客也就不用面臨等待網(wǎng)頁(yè)緩慢呈現(xiàn)的煩躁了，這一點(diǎn)對(duì)于那些帶寬少網(wǎng)速慢的用戶(hù)猶為明顯。試想一下，你會(huì)是希望打開(kāi)一個(gè)網(wǎng)站的時(shí)候整個(gè)站點(diǎn)馬上呈現(xiàn)在你面前呢？還是喜歡花上十幾秒甚至是幾分釧來(lái)看整個(gè)站點(diǎn)一點(diǎn)一點(diǎn)的被瀏覽器解釋出來(lái)呢？

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

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

看如下一段代碼：

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

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

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

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

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

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

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

在同一個(gè)站點(diǎn)的CSS文件中，不可避免的會(huì)出現(xiàn)不同的ID或Class卻有一部分相同的屬性，如果將這些ID或Class逐個(gè)分開(kāi)來(lái)寫(xiě)的話(huà)，在CSS文件里無(wú)疑會(huì)生成重復(fù)代碼，而我們要盡量的精簡(jiǎn)CSS文件的大小，那么“消滅”這部分重復(fù)的代碼就變得勢(shì)在必行。 　　

看下面一段CSS代碼：

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}　　#content{margin:10px 15px;padding:10px;background:#999;}　　#copyright{margin:10px 15px;border:1px solid #f00;}

在上面的三個(gè)ID中都有一個(gè)相同的屬性“margin:10px 15px;”，如果就這樣分開(kāi)來(lái)寫(xiě)的話(huà)，這三個(gè)ID之間將保持各自獨(dú)立的關(guān)系，但卻生成了重復(fù)的代碼，而我們可以將其寫(xiě)成如下格式：

#header,#content,#copyright{margin:10px 15px;}　　#header{background:#333 url(Images/header.jpg);}　　#content{padding:10px;background:#999;}　　#copyright{border:1px solid #f00;}

將上面的ID換成Class也是一樣的。這樣寫(xiě)我們就成功的將重復(fù)代碼“消滅”掉了。但是如果這里具有相同的屬性的ID或Class過(guò)多的話(huà)，難免會(huì)造成代碼可讀性降到很低很低，所以除此之外當(dāng)具有相同屬性的都是Class時(shí)還有另外的一種寫(xiě)法：

.main{margin:10px 15px;}　　.header{background:#333 url(Images/header.jpg);}　　.content{padding:10px;background:#999;}　　.copyright{border:1px solid #f00;}

當(dāng)然這種寫(xiě)法時(shí)，調(diào)用時(shí)的寫(xiě)法也與平常不一樣。

這樣的寫(xiě)法同樣可以達(dá)到效果，并且也不會(huì)再怕具有相同屬性的Class多而造成代碼可讀性差的問(wèn)題，但值得注意的一點(diǎn)就是，這種寫(xiě)法對(duì)于ID是無(wú)效的，不管其中是存在一個(gè)ID或者全部都是ID，都將造成這段代碼的無(wú)效。

分享文章：控制網(wǎng)頁(yè)文件大小通過(guò)精簡(jiǎn)CSS實(shí)現(xiàn)
標(biāo)題鏈接：http://m.kartarina.com/news32/309132.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)