衆所周之，在不影(yǐng)響整個(gè)網頁構架與功能的情況下，網頁文件越小(xiǎo)越好，因為(wèi)更小(xiǎo)的網頁文件有(yǒu)利于浏覽器(qì)對網頁的解釋時(shí)間(jiān)縮到更短(duǎn)，自然訪客也就不用面臨等待網頁緩慢呈現的煩躁了，這一點對于那(nà)些(xiē)帶寬少(shǎo)網速慢的用戶猶為(wèi)明(míng)顯。盡管對于現如今的帶寬來(lái)說，網頁文件那(nà)僅以K來(lái)算(suàn)的大(dà)小(xiǎo)實在是微不足道(dào)，但(dàn)如何将這以K來(lái)計(jì)算(suàn)的網頁文件精簡到最小(xiǎo)還(hái)是網頁設計(jì)師(shī)們所應該考慮的問題之一。試想一下，你(nǐ)會(huì)是希望打開(kāi)一個(gè)網站(zhàn)的時(shí)候整個(gè)站(zhàn)點馬上(shàng)呈現在你(nǐ)面前呢？還(hái)是喜歡花(huā)上(shàng)十幾秒(miǎo)甚至是幾分钏來(lái)看整個(gè)站(zhàn)點一點一點的被浏覽器(qì)解釋出來(lái)呢？ 　　

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

即使DIV+CSS的布局方式将以前Table布局時(shí)代碼的臃腫降到了最低(dī)，但(dàn)對于網頁設計(jì)師(shī)來(lái)說，如何将網頁文件的大(dà)小(xiǎo)控制(zhì)到最小(xiǎo)是永遠值得(de)探索和(hé)追求的一個(gè)問題。

看如下一段代碼：

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

這樣的一段CSS代碼，在條理(lǐ)上(shàng)很(hěn)清晰，結構也很(hěn)明(míng)了，可(kě)讀性很(hěn)強，可(kě)是這樣的一段代碼卻沒有(yǒu)做(zuò)精簡，也就是說它是最原始的CSS代碼，下面看精簡後的代碼：

#header {   
margin:10px 15px;   
backgroung:#333 url(http://www.52css.com/Images/header.jpg);   
}

在CSS中有(yǒu)複合屬性這一說法，也就是說可(kě)以将很(hěn)多(duō)屬性參數(shù)整合在一起的，比如說上(shàng)面的“margin-top; margin-right; margin-bottom; margin-left;”可(kě)以整合成一個(gè)“margin”屬性，然後為(wèi)其配上(shàng)參數(shù)。

通(tōng)過這一點，我們就可(kě)以在原始CSS代碼的基本上(shàng)将代碼進一步的精簡。而且這樣寫的結構也合理(lǐ)，可(kě)讀性也同樣強。可(kě)是對于要精簡到徹底來(lái)說，這還(hái)不夠。為(wèi)了讓這段CSS代碼的結構明(míng)了，我們用上(shàng)了空(kōng)格換行(xíng)等占用空(kōng)間(jiān)的東西，如果将這些(xiē)占用空(kōng)間(jiān)的去掉呢？

#header{margin:10px 15px;background:#333 url(http://www.52css.com/Images/header.jpg);}

隻這一句就替代了上(shàng)面的一段代碼，這樣代碼就已經精簡到了最大(dà)化，當然，并不推薦所有(yǒu)人(rén)都這樣寫，這樣寫的CSS代碼在可(kě)讀性上(shàng)要遠遠差于段落式的寫法，除非你(nǐ)對自己寫的代碼有(yǒu)完全掌握的信心。

在同一個(gè)站(zhàn)點的CSS文件中，不可(kě)避免的會(huì)出現不同的ID或Class卻有(yǒu)一部分相同的屬性，如果将這些(xiē)ID或Class逐個(gè)分開(kāi)來(lái)寫的話(huà)，在CSS文件裏無疑會(huì)生(shēng)成重複代碼，而我們要盡量的精簡CSS文件的大(dà)小(xiǎo)，那(nà)麽“消滅”這部分重複的代碼就變得(de)勢在必行(xíng)。

看下面一段CSS代碼：

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

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

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

将上(shàng)面的ID換成Class也是一樣的。這樣寫我們就成功的将重複代碼“消滅”掉了。但(dàn)是如果這裏具有(yǒu)相同的屬性的ID或Class過多(duō)的話(huà)，難免會(huì)造成代碼可(kě)讀性降到很(hěn)低(dī)很(hěn)低(dī)，所以除此之外當具有(yǒu)相同屬性的都是Class時(shí)還(hái)有(yǒu)另外的一種寫法：

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

當然這種寫法時(shí)，調用時(shí)的寫法也與平常不一樣。

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