您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS代碼的縮寫技巧”,在日常操作中,相信很多人在CSS代碼的縮寫技巧問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”CSS代碼的縮寫技巧”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
CSS代碼縮寫技巧
Web網(wǎng)站可用性的關(guān)鍵指標(biāo)是速度,更確切地說,是頁面能以多快的速度出現(xiàn)在訪問者的瀏覽器窗口里。影響速度的因素有很多種,包括Web服務(wù)器的速度、訪問者的Internet連接情況,以及瀏覽器必須下載的文件大小。盡管你無法控制服務(wù)器和連接的速度,但是你可以控制構(gòu)成網(wǎng)站W(wǎng)eb頁面的文件大小。
為了讓網(wǎng)站能夠更快,Web的建設(shè)者都會(huì)按常規(guī)地壓縮和優(yōu)化網(wǎng)站上的每一個(gè)圖像文件,這常常使得為了將文件的大小減少幾個(gè)百分點(diǎn)而犧牲了圖像的質(zhì)量。
由于CSS樣式表是純文本文件,和圖像相比相對(duì)較小,所以Web建設(shè)者很少考慮采取措施減少其CSS樣式表文件的大小。但是,通過使用CSS縮寫以及其他的一些簡(jiǎn)單技巧,你可以在很大程度上減少樣式表的大小。在我對(duì)自己樣式表的一次非正式的特別測(cè)試中,我把文件的大小降低了大約25-50%。
使用CSS縮寫性質(zhì)
CSS縮寫性質(zhì)(shorthandproperty)是一些專用的性質(zhì)名,用來代替多個(gè)相關(guān)性質(zhì)的集合。例如,間隙性質(zhì)(paddingproperty)是頂部間隙(padding-top)、右側(cè)間隙(padding-right)、底部間隙(padding-bottom)和左側(cè)間隙(padding-left)的縮寫。
使用CSS縮寫性質(zhì)讓你能夠把多個(gè)性質(zhì)/屬性對(duì)(property/attributepair)壓縮進(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; }
將它用一些CSS縮寫性質(zhì)來替代就能夠把代碼減少為下面這樣,兩者的實(shí)際效果是完全一樣的:
.sample1{ margin:15px20px12px24px; padding:5px10px4px8px; border-top:thinsolid#000000; }
要注意,CSS縮寫性質(zhì)還有多個(gè)屬性,每一個(gè)(屬性)都對(duì)應(yīng)一個(gè)被組合進(jìn)入CSS縮寫性質(zhì)的常規(guī)性質(zhì)。屬性由空白隔開。
◆當(dāng)屬性是類似的值的時(shí)候,例如用于邊框空白性質(zhì)(marginproperty)的線性測(cè)量的時(shí)候,接在縮寫性質(zhì)之后的屬性的順序很重要。屬性的次序是從頂部(頂部的邊框空白)開始,然后圍繞格子(box)按順時(shí)針次序繼續(xù)。
如果縮寫性質(zhì)的所有屬性都是相同的,那么你可以簡(jiǎn)單地列出單個(gè)屬性,然后在前面將它復(fù)制四遍。因此,下面的兩個(gè)性質(zhì)是相等的:
margin:5px5px5px5px; margin:5px;
類似的,你可以使用接在邊框空白或者間隔性質(zhì)之后的兩個(gè)屬性來代表頂部/底部和右側(cè)/左側(cè)屬性對(duì)。
margin:5px10px5px10px; margin:5px10px;
屬性的順序在它們是不相似的值的時(shí)候是不重要的。因此,邊框顏色、邊框風(fēng)格和邊框?qū)挾鹊葘傩钥梢砸匀魏雾樞蚪釉诖缶V性質(zhì)(outlineproperty)之后。忽略某個(gè)屬性等同于從樣式規(guī)則里忽略掉對(duì)應(yīng)的常規(guī)性質(zhì)。
◆下面是CSS縮寫性質(zhì)的列表以及它們所表示的常規(guī)性質(zhì)。
Background(背景):背景附件、背景顏色、背景圖像、背景位置、背景重復(fù)
Border(邊框):邊框顏色、邊框風(fēng)格、邊框?qū)挾?br/>border-bottom(底部邊框):底部邊框顏色、底部邊框樣式、底部邊框?qū)挾?br/>border-left(左側(cè)邊框):左側(cè)邊框顏色、左側(cè)邊框樣式、左側(cè)邊框?qū)挾?br/>border-right(右側(cè)邊框):右側(cè)邊框顏色、右側(cè)邊框樣式、右側(cè)邊框?qū)挾?br/>border-top(頂部邊框):頂部邊框顏色、頂部邊框樣式、頂部邊框?qū)挾?br/>cue(聲音提示):前提示、后提示
font(字體):字體、字號(hào)、字體樣式、字體粗細(xì)、字體變體、線高度、字體大小調(diào)整、字體拉伸
list-style(列表樣式):列表樣式圖像、列表樣式位置、列表樣式類型
margin(空白):頂部空白、右側(cè)空白、底部空白、左側(cè)空白
outline(大綱):大綱顏色、大綱樣式、大綱寬度
padding(間隙):頂部間隙、右側(cè)間隙、底部間隙、左側(cè)間隙
pause(暫停):后暫停、前暫停
減少空白
減少CSS樣式表大小的另一種方法是從文檔里刪掉大多數(shù)無用的空白。換句話說,將每條規(guī)則打破放進(jìn)一行代碼里,即把原來插入到代碼里用來把每個(gè)CSS縮寫性質(zhì)/屬性分割到不同行的換行符和縮進(jìn)符刪掉。
例如,下面的代碼示例在內(nèi)容上相同,但是第二個(gè)要精煉得多:
h2{ font-size:x-large; font-weight:bold; color:#FF0000; } h2{font-size:x-large;font-weight:bold;color:#FF0000}
刪掉注釋
將注釋從你的CSS代碼里刪掉是減少文件大小的另一種方式。盡管注釋對(duì)于代碼的閱讀很有用,但是它無助于瀏覽器生成你的Web頁面。很多Web建設(shè)者都習(xí)慣給每一行代碼都加上注釋,或者至少給每一條規(guī)則聲明都加上。這樣的慷慨注釋在CSS樣式表里是極少需要的,因?yàn)榇蠖鄶?shù)CSS性質(zhì)和屬性都很容易閱讀和理解。如果你對(duì)類、ID,以及其他的選擇器都使用有意義的名稱,你就可以省掉大多數(shù)的注釋,同時(shí)仍然能夠保持代碼的可讀性和可維護(hù)性。
h2{/*Heading1style*/ font-size:x-large;/*x-largesize*/ font-weight:bold;/*Bold*/ color:#FF0000;/*Red*/ }
到此,關(guān)于“CSS代碼的縮寫技巧”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。