本節(jié)和大家重點討論一下CSS代碼縮寫技巧，使用CSS縮寫性質(zhì)讓你能夠把多個性質(zhì)／屬性對（property/attributepair）壓縮進CSS樣式表的一行代碼里，相信本文介紹一定會讓你有所收獲的。

CSS代碼縮寫技巧

Web網(wǎng)站可用性的關(guān)鍵指標是速度，更確切地說，是頁面能以多快的速度出現(xiàn)在訪問者的瀏覽器窗口里。影響速度的因素有很多種，包括Web服務器的速度、訪問者的Internet連接情況，以及瀏覽器必須下載的文件大小。盡管你無法控制服務器和連接的速度，但是你可以控制構(gòu)成網(wǎng)站W(wǎng)eb頁面的文件大小。

為了讓網(wǎng)站能夠更快，Web的建設(shè)者都會按常規(guī)地壓縮和優(yōu)化網(wǎng)站上的每一個圖像文件，這常常使得為了將文件的大小減少幾個百分點而犧牲了圖像的質(zhì)量。

由于CSS樣式表是純文本文件，和圖像相比相對較小，所以Web建設(shè)者很少考慮采取措施減少其CSS樣式表文件的大小。但是，通過使用CSS縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小。在我對自己樣式表的一次非正式的特別測試中，我把文件的大小降低了大約25－50％。

使用CSS縮寫性質(zhì)

CSS縮寫性質(zhì)（shorthandproperty）是一些專用的性質(zhì)名，用來代替多個相關(guān)性質(zhì)的集合。例如，間隙性質(zhì)（paddingproperty）是頂部間隙（padding-top）、右側(cè)間隙（padding-right）、底部間隙（padding-bottom）和左側(cè)間隙（padding-left）的縮寫。

使用CSS縮寫性質(zhì)讓你能夠把多個性質(zhì)／屬性對（property/attributepair）壓縮進CSS樣式表的一行代碼里。例如，想一想下面的代碼：

.sample1{  
margin-top:15px;  
margin-right:20px;  
margin-bottom:12px;  
margin-left:24px;  
padding-top:5px;  
padding-right:10px;  
padding-bottom:4px;  
padding-left:8px;  
border-top-width:thin;  
border-top-style:solid;  
border-top-color:#000000;  
}  
 

 將它用一些CSS縮寫性質(zhì)來替代就能夠把代碼減少為下面這樣，兩者的實際效果是完全一樣的：

.sample1{  
margin:15px20px12px24px;  
padding:5px10px4px8px;  
border-top:thinsolid#000000;  
}  
 

要注意，CSS縮寫性質(zhì)還有多個屬性，每一個（屬性）都對應一個被組合進入CSS縮寫性質(zhì)的常規(guī)性質(zhì)。屬性由空白隔開。

◆當屬性是類似的值的時候，例如用于邊框空白性質(zhì)（marginproperty）的線性測量的時候，接在縮寫性質(zhì)之后的屬性的順序很重要。屬性的次序是從頂部（頂部的邊框空白）開始，然后圍繞格子（box）按順時針次序繼續(xù)。

如果縮寫性質(zhì)的所有屬性都是相同的，那么你可以簡單地列出單個屬性，然后在前面將它復制四遍。因此，下面的兩個性質(zhì)是相等的：

margin:5px5px5px5px;  
 
margin:5px;  
 

類似的，你可以使用接在邊框空白或者間隔性質(zhì)之后的兩個屬性來代表頂部／底部和右側(cè)／左側(cè)屬性對。

margin:5px10px5px10px;  
 
margin:5px10px;  
 

屬性的順序在它們是不相似的值的時候是不重要的。因此，邊框顏色、邊框風格和邊框?qū)挾鹊葘傩钥梢砸匀魏雾樞蚪釉诖缶V性質(zhì)（outlineproperty）之后。忽略某個屬性等同于從樣式規(guī)則里忽略掉對應的常規(guī)性質(zhì)。#p#

◆下面是CSS縮寫性質(zhì)的列表以及它們所表示的常規(guī)性質(zhì)。

Background（背景）：背景附件、背景顏色、背景圖像、背景位置、背景重復
Border（邊框）：邊框顏色、邊框風格、邊框?qū)挾?br /> border-bottom（底部邊框）：底部邊框顏色、底部邊框樣式、底部邊框?qū)挾?br /> border-left（左側(cè)邊框）：左側(cè)邊框顏色、左側(cè)邊框樣式、左側(cè)邊框?qū)挾?br /> border-right（右側(cè)邊框）：右側(cè)邊框顏色、右側(cè)邊框樣式、右側(cè)邊框?qū)挾?br /> border-top（頂部邊框）：頂部邊框顏色、頂部邊框樣式、頂部邊框?qū)挾?br /> cue（聲音提示）：前提示、后提示
font（字體）：字體、字號、字體樣式、字體粗細、字體變體、線高度、字體大小調(diào)整、字體拉伸
list-style（列表樣式）：列表樣式圖像、列表樣式位置、列表樣式類型
margin（空白）：頂部空白、右側(cè)空白、底部空白、左側(cè)空白
outline（大綱）：大綱顏色、大綱樣式、大綱寬度
padding（間隙）：頂部間隙、右側(cè)間隙、底部間隙、左側(cè)間隙
pause（暫停）：后暫停、前暫停

減少空白

減少CSS樣式表大小的另一種方法是從文檔里刪掉大多數(shù)無用的空白。換句話說，將每條規(guī)則打破放進一行代碼里，即把原來插入到代碼里用來把每個CSS縮寫性質(zhì)／屬性分割到不同行的換行符和縮進符刪掉。

例如，下面的代碼示例在內(nèi)容上相同，但是第二個要精煉得多：

h1{  
font-size:x-large;  
font-weight:bold;  
color:#FF0000;  
}  
 
h1{font-size:x-large;font-weight:bold;color:#FF0000}  
 

刪掉注釋

將注釋從你的CSS代碼里刪掉是減少文件大小的另一種方式。盡管注釋對于代碼的閱讀很有用，但是它無助于瀏覽器生成你的Web頁面。很多Web建設(shè)者都習慣給每一行代碼都加上注釋，或者至少給每一條規(guī)則聲明都加上。這樣的慷慨注釋在CSS樣式表里是極少需要的，因為大多數(shù)CSS性質(zhì)和屬性都很容易閱讀和理解。如果你對類、ID，以及其他的選擇器都使用有意義的名稱，你就可以省掉大多數(shù)的注釋，同時仍然能夠保持代碼的可讀性和可維護性。

h1{/*Heading1style*/  
font-size:x-large;/*x-largesize*/  
font-weight:bold;/*Bold*/  
color:#FF0000;/*Red*/  
}  
 

使用CSS縮寫性質(zhì)、刪除無用的空白、省略注釋都能夠在很大程度上減少你CSS樣式表文件的大小。這反過來會對加速你Web網(wǎng)站速度的總體目標作出小的、但是可能會是顯而易見的貢獻。
 

【編輯推薦】

1. 學習筆記 剖析CSS縮寫六大規(guī)則
2. 常用CSS縮寫語法總結(jié)
3. CSS中border和clear兩大屬性用法揭秘
4. 實例解析CSS DIV絕對定位與固定定位用法
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因