控制網(wǎng)頁(yè)文件大小通過(guò)精簡(jiǎn)CSS實(shí)現(xiàn)_Web標(biāo)準(zhǔ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)速慢的用戶猶為明顯。試想一下,你會(huì)是希望打開一個(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ū)分開來(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)。而且這樣寫的結(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);}
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- web2.0網(wǎng)站常用可用性功能塊分析
- 符合WEB標(biāo)準(zhǔn)的表單效果
- 典型的三行二列居中高度自適應(yīng)布局
- 學(xué)習(xí)CSS的10大理由
- 一些關(guān)于web標(biāo)準(zhǔn)的思考
- 為什么要拋棄HTML
- 《CSS實(shí)戰(zhàn)手冊(cè)》Div CSS布局學(xué)習(xí)書籍!
- CSS網(wǎng)友:關(guān)于WEB標(biāo)準(zhǔn)化過(guò)程中的語(yǔ)義化描述!
- PDF、ZIP、DOC鏈接的標(biāo)注(CSS技巧)
- 什么人需要學(xué)習(xí)、適合學(xué)習(xí)WEB標(biāo)準(zhǔn)?
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索控制網(wǎng)頁(yè)文件大小通過(guò)精簡(jiǎn)CSS實(shí)現(xiàn)
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-控制網(wǎng)頁(yè)文件大小通過(guò)精簡(jiǎn)CSS實(shí)現(xiàn)。