中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

英文原文：http://www.smashingmagazine.com/2008/08/18/
譯文原文：http://blog.bingo929.com/7-principles-optimized-css.html

作為網(wǎng)頁(yè)設(shè)計(jì)師(前端工程師)，你可能還記得曾經(jīng)的那個(gè)網(wǎng)頁(yè)大小建議:一個(gè)網(wǎng)頁(yè)（包括HTML、CSS、Javacript、Flash和圖片）盡量不要超過(guò)30KB的大小，隨著互聯(lián)網(wǎng)的日益龐大，網(wǎng)絡(luò)帶寬也在飛速發(fā)展，很多設(shè)計(jì)師已經(jīng)不再考慮這條30KB的理想準(zhǔn)則。隨著越來(lái)越受歡迎的CSS布局和Javascript對(duì)網(wǎng)站用戶體驗(yàn)的強(qiáng)化，使得這種現(xiàn)象越來(lái)越普遍，尤其是對(duì)于大型網(wǎng)站來(lái)說(shuō)，僅僅一個(gè)CSS文件就已經(jīng)超過(guò)了30KB的上限。

但是即便如此，現(xiàn)在也有很多準(zhǔn)則來(lái)幫助你在完成CSS布局后進(jìn)行CSS代碼的壓縮和優(yōu)化。CSS代碼優(yōu)化的目的并不僅僅是減少CSS文件的大小，它還能讓你的CSS代碼更有條理、更高效。在彬Go，你將會(huì)學(xué)到更多關(guān)于CSS代碼優(yōu)化的知識(shí)，這能幫你更熟悉CSS代碼的規(guī)范性。熟悉這些概念還能讓你成為更全面的網(wǎng)頁(yè)設(shè)計(jì)師，從而寫(xiě)出更優(yōu)化的CSS代碼。

您還可以參閱暴風(fēng)彬彬曾經(jīng)講解過(guò)的《10個(gè)CSS簡(jiǎn)寫(xiě)技巧讓你永遠(yuǎn)受用》。

1.使用簡(jiǎn)寫(xiě)

如果你現(xiàn)在還對(duì)簡(jiǎn)寫(xiě)一點(diǎn)都不了解，那你就又寫(xiě)落伍了，不過(guò)幸好，學(xué)起來(lái)并不是很難。使用簡(jiǎn)寫(xiě)是一種讓代碼減少的最簡(jiǎn)單方法。沒(méi)有比現(xiàn)在更適合實(shí)踐代碼簡(jiǎn)寫(xiě)的時(shí)候了，還等什么，一起來(lái)看看吧。

Margin、border、padding、background、font、list-style和outline 都是可以進(jìn)行簡(jiǎn)寫(xiě)的屬性。CSS簡(jiǎn)寫(xiě)就是不再使用不同的相類(lèi)似屬性的聲明…

p { margin-top: 10px; 
     margin-right: 20px; 
     margin-bottom: 30px; 
     margin-left: 40px; }

你可以把它們簡(jiǎn)寫(xiě)成這樣:

p { margin: 10px 20px 30px 40px; }

瀏覽器可以通過(guò)不同數(shù)量的屬性值來(lái)解釋你定義的CSS代碼，請(qǐng)看圖解:

上面的簡(jiǎn)寫(xiě)圖解說(shuō)明的是依據(jù)不同的屬性值可以進(jìn)行不同的縮寫(xiě)，這種方法同樣適用于padding和Border-width屬性。

Font的簡(jiǎn)寫(xiě)對(duì)于縮小代碼量很有幫助，而且能讓你少打很多字母; )

Font簡(jiǎn)寫(xiě)的例子。注:如果沒(méi)有定義某個(gè)屬性值的話，將繼承副級(jí)元素的定義或使用默認(rèn)值。

如果你對(duì)以上簡(jiǎn)寫(xiě)方法已經(jīng)了如指掌，你還可以看看以下兩個(gè)簡(jiǎn)寫(xiě)教程(英文)，也許會(huì)對(duì)你有所幫助:

1. CSS Shorthand Guide(CSS簡(jiǎn)寫(xiě)指導(dǎo))
2. Efficient CSS with shorthand properties(高效CSS屬性的簡(jiǎn)寫(xiě))