小猿圈web前端開發之CSS縮寫技巧

如今學習web前端的同窗愈來愈多，可是由於找不到學習方向的同窗也不在少數，針對這樣的事情，小猿圈web前端講師天天會總結一個知識點，但願幫助正在學習的前端小夥伴，今天總結的是CSS縮寫技巧。

Web網站可用性的關鍵指標是速度，更確切地說，是頁面能以多快的速度出如今訪問者的瀏覽器窗口裏。影響速度的因素有不少種，包括Web服務器的速度、訪問者的Internet鏈接狀況，以及瀏覽器必須下載的文件大小。儘管你沒法控制服務器和鏈接的速度，可是你能夠控制構成網站Web頁面的文件大小。

爲了讓網站可以更快，Web的建設者都會按常規地壓縮和優化網站上的每個圖像文件，這經常使得爲了將文件的大小減小几個百分點而犧牲了圖像的質量。因爲CSS樣式表是純文本文件，和圖像相比相對較小，因此Web建設者不多考慮採起措施減小其CSS樣式表文件的大小。可是，經過使用CSS縮寫以及其餘的一些簡單技巧，你能夠在很大程度上減小樣式表的大小。在我對本身樣式表的一次非正式的特別測試中，我把文件的大小下降了大約25－50％。

使用CSS的縮寫性質

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

使用速寫性質讓你可以把多個性質／屬性對（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;

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;

}

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

當屬性是相似的值的時候，例如用於邊框空白性質（margin property）的線性測量的時候，接在縮寫性質以後的屬性的順序很重要。屬性的次序是從頂部（頂部的邊框空白）開始，而後圍繞格子（box）按順時針次序繼續。

若是縮寫性質的全部屬性都是相同的，那麼你能夠簡單地列出單個屬性，而後在前面將它複製四遍。所以，下面的兩個性質是相等的：

margin: 5px 5px 5px 5px;

margin: 5px;

相似的，你可使用接在邊框空白或者間隔性質以後的兩個屬性來表明頂部／底部和右側／左側屬性對。

margin: 5px 10px 5px 10px;

margin: 5px 10px;

屬性的順序在它們是不類似的值的時候是不重要的。所以，邊框顏色、邊框風格和邊框寬度等屬性能夠以任何順序接在大綱性質（outline property）以後。忽略某個屬性等同於從樣式規則裏忽略掉對應的常規性質。

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

Background（背景）：背景附件、背景顏色、背景圖像、背景位置、背景重複

Border（邊框）：邊框顏色、邊框風格、邊框寬度

border-bottom（底部邊框）：底部邊框顏色、底部邊框樣式、底部邊框寬度

border-left（左側邊框）：左側邊框顏色、左側邊框樣式、左側邊框寬度

border-right（右側邊框）：右側邊框顏色、右側邊框樣式、右側邊框寬度

border-top（頂部邊框）：頂部邊框顏色、頂部邊框樣式、頂部邊框寬度

cue（聲音提示）：前提示、後提示

font（字體）：字體、字號、字體樣式、字體粗細、字體變體、線高度、字體大小調整、字體拉伸

list-style（列表樣式）：列表樣式圖像、列表樣式位置、列表樣式類型

margin（空白）：頂部空白、右側空白、底部空白、左側空白

outline（大綱）：大綱顏色、大綱樣式、大綱寬度

padding（間隙）：頂部間隙、右側間隙、底部間隙、左側間隙

pause（暫停）：後暫停、前暫停

減小空白

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

例如，下面的代碼示例在內容上相同，可是第二個要精煉得多：

h1 {

font-size: x-large;

font-weight: bold;

color: #FF0000;

}

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

刪掉註釋

將註釋從你的CSS代碼裏刪掉是減小文件大小的另外一種方式。儘管註釋對於代碼的閱讀頗有用，可是它無助於瀏覽器生成你的Web頁面。不少Web建設者都習慣給每一行代碼都加上註釋，或者至少給每一條規則聲明都加上。這樣的慷慨註釋在CSS樣式表裏是極少須要的，由於大多數CSS性質和屬性都很容易閱讀和理解。若是你對類、ID，以及其餘的選擇器都使用有意義的名稱，你就能夠省掉大多數的註釋，同時仍然可以保持代碼的可讀性和可維護性。

h1 { /* Heading 1 style*/

font-size: x-large; /* x-large size */

font-weight: bold; /* Bold */

color: #FF0000; /* Red */

}

使用速寫性質、刪除無用的空白、省略註釋都可以在很大程度上減小你CSS樣式表文件的大小。這反過來會對加速你Web網站速度的整體目標做出小的、可是可能會是顯而易見的貢獻。

以上就是小猿圈web前端講師今天分享CSS縮寫技巧的，想了解更多知識的朋友能夠關注我，天天會不按期更新知識點web前端自學②羣：738735873，也能夠到小猿圈去觀看視頻學習，裏面有最新最全的視頻內容，等你去學習。