CSS代碼縮寫(xiě)技巧

2024-04-12    分類: 網(wǎng)站建設(shè)

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;

}

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

當(dāng)前名稱:CSS代碼縮寫(xiě)技巧
轉(zhuǎn)載來(lái)于:http://www.bm7419.com/news35/323385.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、小程序開(kāi)發(fā)、微信小程序、外貿(mào)建站

廣告

聲明:本網(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)

商城網(wǎng)站建設(shè)