• <nav id="4k88q"></nav>
  • <menu id="4k88q"><tt id="4k88q"></tt></menu>
  •  
    用CSS縮寫給你的網站加速
    發布時間:2005-01-26   瀏覽次數:237054
    為了讓網站能夠更快,Web的建設者都會按常規地壓縮和優化網站上的每一個圖像文件,這常常使得為了將文件的大小減少幾個百分點而犧牲了圖像的質量。由于CSS樣式表是純文本文件,和圖像相比相對較小,所以Web建設者很少考慮采取措施減少其CSS樣式表文件的大小。但是,通過使用CSS縮寫以及其他的一些簡單技巧,你可以在很大程度上減少樣式表的大小。在我對自己樣式表的一次非正式的特別測試中,我把文件的大小降低了大約25-50%。使用CSS的縮寫性質CSS的縮寫性質(shorthandproperty)是一些專用的性質名,用來代替多個相關性質的集合。例如,間隙性質(paddingproperty)是頂部間隙(padding-top)、右側間隙(padding-right)、底部間隙(padding-bottom)和左側間隙(padding-left)的縮寫。使用速寫性質讓你能夠把多個性質/屬性對(property/attributepair)壓縮進CSS樣式表的一行代碼里。例如,想一想下面的代碼:.sample1{margin-top:15px;margin-right:px;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:15pxpx12px24px;padding:5px10px4px8px;border-top:thinsolid#000000;}要注意,縮寫性質還有多個屬性,每一個(屬性)都對應一個被組合進入縮寫性質的常規性質。屬性由空白隔開。當屬性是類似的值的時候,例如用于邊框空白性質(marginproperty)的線性測量的時候,接在縮寫性質之后的屬性的順序很重要。屬性的次序是從頂部(頂部的邊框空白)開始,然后圍繞格子(box)按順時針次序繼續。如果縮寫性質的所有屬性都是相同的,那么你可以簡單地列出單個屬性,然后在前面將它復制四遍。因此,下面的兩個性質是相等的:margin:5px5px5px5px;margin:5px;類似的,你可以使用接在邊框空白或者間隔性質之后的兩個屬性來代表頂部/底部和右側/左側屬性對。margin:5px10px5px10px;margin:5px10px;屬性的順序在它們是不相似的值的時候是不重要的。因此,邊框顏色、邊框風格和邊框寬度等屬性可以以任何順序接在大綱性質(outlineproperty)之后。忽略某個屬性等同于從樣式規則里忽略掉對應的常規性質。CSS縮寫性質列表下面是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{/*Heading1style*/font-size:x-large;/*x-largesize*/font-weight:bold;/*Bold*/color:#FF0000;/*Red*/}使用速寫性質、刪除無用的空白、省略注釋都能夠在很大程度上減少你CSS樣式表文件的大小。這反過來會對加速你Web網站速度的總體目標作出小的、但是可能會是顯而易見的貢獻。
    立即預約
    中文精品久久久久国产_av无码电影一区二区三区_制服肉丝袜亚洲中文字幕_伊人久久大香线蕉亚洲