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

為了讓網(wǎng)站能夠更快，Web的建設(shè)者都會(huì)按常規(guī)地壓縮和優(yōu)化網(wǎng)站上的每一個(gè)圖像文件，這常常使得為了將文件的大小減少幾個(gè)百分點(diǎn)而犧牲了圖像的質(zhì)量。由于CSS樣式表是純文本文件，和圖像相比相對(duì)較小，所以Web建設(shè)者很少考慮采取措施減少其CSS樣式表文件的大小。但是，通過(guò)使用CSS縮寫(xiě)以及其他的一些簡(jiǎn)單技巧，你可以在很大程度上減少樣式表的大小。在我對(duì)自己樣式表的一次非正式的特別測(cè)試中，我把文件的大小降低了大約25－50％。

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

使用速寫(xiě)性質(zhì)讓你能夠把多個(gè)性質(zhì)／屬性對(duì)（property/attribute pair）壓縮進(jìn)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; }

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

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

要注意，縮寫(xiě)性質(zhì)還有多個(gè)屬性，每一個(gè)（屬性）都對(duì)應(yīng)一個(gè)被組合進(jìn)入縮寫(xiě)性質(zhì)的常規(guī)性質(zhì)。屬性由空白隔開(kāi)。

當(dāng)屬性是類(lèi)似的值的時(shí)候，例如用于邊框空白性質(zhì)（margin property）的線性測(cè)量的時(shí)候，接在縮寫(xiě)性質(zhì)之后的屬性的順序很重要。屬性的次序是從頂部（頂部的邊框空白）開(kāi)始，然后圍繞格子（box）按順時(shí)針次序繼續(xù)。

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

margin: 5px 5px 5px 5px;

margin: 5px;

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

margin: 5px 10px 5px 10px;

margin: 5px 10px;

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

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

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

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

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

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

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

刪掉注釋

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

h1 { /* Heading 1 style*/ font-size: x-large; /* x-large size */ font-weight: bold; /* Bold */ color: #FF0000; /* Red */ }

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

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

標(biāo)題名稱：CSS縮寫(xiě)技巧
網(wǎng)頁(yè)地址：http://jinyejixie.com/news45/322045.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站營(yíng)銷(xiāo)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)