CSS縮寫優化CSS檔案的體積

2022-09-29 18:12:08 字數 2381 閱讀 6554

web**可用性的關鍵指標是速度,更確切地說,是頁面能以多快的速度出現在訪問者的瀏覽器視窗裡。影響速度的因素有很多種,包括web伺服器的速度、訪問者的internet連線情況,以及瀏覽器必須**的檔案大小。儘管你無法控**務器和連線的速度,但是你可以控制構成**web頁面的檔案大小。

為了讓**能夠更快,web的建設者都會按常規地壓縮和pqawcywjv優化**上的每乙個影象檔案,這常常使得為了將檔案的大小減少幾個百分點而犧牲了影象的質量。由於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

將它用一些縮寫性質來替代就能夠把**減少為下面這樣,兩者的實際效果是完全一樣的:

.sample1

要注意,縮寫性質還有多個屬性,每乙個(屬性)都對應乙個被組合進入縮寫性質的常規性質。屬性由空白隔開。

當屬性是類似的值的時候,例如用於邊框空www.cppcns.com白性質(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 h1

刪掉注釋

將注釋從你的css**裡刪掉是減少檔案大小的另一種方式。儘管注釋對於**的閱讀很有用,但是它無助於瀏覽器生成你的web頁面。很多web建設者都習慣給每一行**都加上注釋,或者至少給每一條規則宣告都加上。這樣的慷慨注釋在css樣式表裡是極少需要的,因為大多數css性質和屬性都很容易閱讀和理解。如果你對類、id,以及其他的選擇器都使用有意義的名稱,你就可以省掉大多數的注釋,同時仍然能夠保持**的可讀性和可維護性。

h1

www.cppcns.com

使用速寫性質、刪除無用的空白、省略注釋都能夠在很大程度上減少你css樣式表檔案的大小。這反過來會對加速你web**速度的總體目標作出小的、但是可能會是顯而易見的貢獻。

本文標題: css縮寫優化css檔案的體積

本文位址:

CSS語法縮寫規則,減少CSS檔案的大小

使用縮寫可以幫助減少你css檔案的大小,更加容易閱讀。css縮寫的主要規則如下 顏色 16進製制的色彩值,如果每兩位的值相同,可以縮寫一半,例如 000000可以縮寫為 000 336699可以縮寫為 369 盒尺寸通常有下面四種書寫方法 方便的記憶方法是順時針,上右下左。具體應用在margin和p...

CSS縮寫技巧

css縮寫的主要規則如下 顏色16進製制的色彩值,如果每兩位的值相同,可以縮寫一半,例如 000000可以縮寫為 000 336699可以縮寫為 369 盒尺寸通常有下面四種書寫方法 方便的記憶方法是順時針,上右下左。具體應用在margin和padding的例子如下 margin 1em 0 2em...

使用CSS縮寫

css縮寫 零 background縮寫 1 background屬性的值的書寫順序官方沒有強制標準。2 為了可讀性,一下順序是符合css書寫規範的 background background color background image background repeat background a...