CSS 縮寫技巧

日期：2013-12-16  來源：攀枝花惠康網絡公司

Web網站可用性的關頭指標是速度，更切當地說，是頁面能以多快的速度呈此刻訪謁者的瀏覽器窗口里。影響速度的身分有良多種，搜羅Web處事器的速度、訪謁者的Internet毗連情形，以及瀏覽器必需下載的文件巨細。盡管你無法節制處事器和毗連的速度，可是你可以節制組成網站Web頁面的文件巨細。

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

.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
list-style（列表樣式）：列表樣式圖像、列表樣式位置、列表樣式類型
padding-left: 8px;

要注重，縮寫性質還有多個屬性，每一個（屬性）都對應一個被組合進入縮寫性質的常規性質。屬性由空白離隔。

border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}

.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000000;
padding（間隙）：頂部間隙、右側間隙、底部間隙、左側間隙
}

為了讓網站能夠更快，Web的培植者城市按常規地壓縮和優化網站上的每一個圖像文件，這經常使得為了將文件的巨細削減幾個百分點而犧牲了圖像的質量。因為CSS樣式表是純文本文件，和圖像對比相對較小，所以Web培植者很少考慮采納法子削減其CSS樣式表文件的巨細?？墒牵浻蛇^程使用CSS縮寫以及其他的一些簡單技巧，你可以在很年夜水平上削減樣式表的巨細。在我對自己樣式表的一次非正式的出格測試中，我把文件的巨細降低了年夜約25－50％。

將它用一些縮寫性質來替代就能夠把代碼削減為下面這樣，兩者的現實效不美觀是完全一樣的：

當屬性是近似的值的時辰，例如用于邊框空白性質（margin property）的線性測量的時辰，接在縮寫性質之后的屬性的挨次很主要。屬性的順序是年夜頂部（頂部的邊框空白）起頭，然后環繞格子（box）按順時針順序繼續。

如不美觀縮寫性質的所有屬性都是不異的，那么你可以簡單地列出單個屬性，然后在前面將它復制四遍。是以，下面的兩個性質是相等的：

margin: 5px 5px 5px 5px;

margin: 5px;

CSS的縮寫性質（shorthand property）是一些專用的性質名，用來庖代多個相關性質的集結。例如，間隙性質（padding property）是頂部間隙（padding-top）、右側間隙（padding-right）、底部間隙（padding-bottom）和左側間隙（padding-left）的縮寫。

近似的，你可以使用接在邊框空白或者距離性質之后的兩個屬性來代表頂部／底部和右側／左側屬性對。

屬性的挨次在它們是不相似的值的時辰是不主要的。是以，邊框顏色、邊框氣概和邊框寬度等屬性可以以任何挨次接在綱要性質（outline property）之后。忽略某個屬性等同于年夜樣式軌則里忽略失蹤對應的常規性質。

下面是CSS縮寫性質的列表以及它們所暗示的常規性質。

Background（布景）：布景附件、布景顏色、布景圖像、布景位置、布景一再
Border（邊框）：邊框顏色、邊框氣概、邊框寬度
border-bottom（底部邊框）：底部邊框顏色、底部邊框樣式、底部邊框寬度
border-left（左側邊框）：左側邊框顏色、左側邊框樣式、左側邊框寬度
border-right（右側邊框）：右側邊框顏色、右側邊框樣式、右側邊框寬度

使用CSS的縮寫性質
border-top（頂部邊框）：頂部邊框顏色、頂部邊框樣式、頂部邊框寬度

margin: 5px 10px 5px 10px;

cue（聲音提醒）：前提醒、后提醒
font（字體）：字體、字號、字體樣式、字體粗細、字體變體、線高度、字體巨細調整、字體拉伸
margin（空白）：頂部空白、右側空白、底部空白、左側空白
outline（綱要）：綱要顏色、綱要樣式、綱要寬度
pause（暫停）：后暫停、前暫停
font-weight: bold;
削減空白

削減CSS樣式表巨細的另一種體例是年夜文檔里刪失蹤年夜年夜都無用的空白。換句話說，將每條軌則打破放進一行代碼里，即把原本插入到代碼里用來把每個性質／屬性朋分到分歧行的換行符和縮進符刪失蹤。

例如，下面的代碼示例在內容上不異，可是第二個要精辟得多：

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

刪失蹤注釋

將注釋年夜你的CSS代碼里刪失蹤是削減文件巨細的另一種體例。盡管注釋對于代碼的閱讀很有用，可是它無助于瀏覽器生成你的Web頁面。良多Web培植者都習慣給每一行代碼都加上注釋，或者至少給每一條軌則聲明都加上。這樣的激動慷慨年夜方注釋在CSS樣式內外是少少需要的，因為年夜年夜都CSS性質和屬性都很輕易閱讀和理解。如不美觀你對類、ID，以及其他的選擇器都使用有意義的名稱，你就可以省失蹤年夜年夜都的注釋，同時仍然能夠連結代碼的可讀性和可維護性。

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

h1 { /* Heading 1 style*/

margin: 5px 10px;

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

使用速寫性質、刪除無用的空白、省略注釋都能夠在很年夜水平上削減你CSS樣式表文件的巨細。這反過來會對加速你Web網站速度的總體方針作出小的、可是可能會是顯而易見的進獻。