您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)DIV+CSS代碼優(yōu)化方案是怎么樣的,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
你對(duì)DIV+CSS代碼優(yōu)化的概念是否了解,這里和大家分享一下,首先讓我們看一下CSS代碼優(yōu)化作用與意義。
DIV+CSS代碼優(yōu)化方案
CSS代碼優(yōu)化作用與意義
1、減少占用網(wǎng)頁字節(jié)。在同等條件下縮短瀏覽器下載CSS代碼時(shí)間,相當(dāng)于加快網(wǎng)頁打開速度
2、便于維護(hù)。簡(jiǎn)化和標(biāo)準(zhǔn)化CSS代碼讓CSS代碼減少,便于日后維護(hù)
3、讓自己寫的CSS代碼更加專業(yè)。
CSS優(yōu)化方法-需要優(yōu)化CSS代碼地方
1、縮寫CSS代碼。
2、排列CSS代碼。
3、同屬性提取共用CSS選擇器。
4、分離網(wǎng)頁顏色和背景設(shè)置樣式(較大站點(diǎn)需要注意)。
5、條理化CSS代碼。
實(shí)例講解以上幾點(diǎn)DIV+CSS優(yōu)化方法
1、縮寫CSS代碼
常用需要縮寫CSS屬性代碼如下:
background(背景屬性-CSS手冊(cè)詳細(xì)了解background手冊(cè))
未優(yōu)化前
background-color:#FFF;對(duì)應(yīng)屬性為背景顏色為白色 background-image:url(DIVCSS5.gif);對(duì)應(yīng)屬性是設(shè)置DIVCSS5.gif圖片為背景 background-position:bottom;背景圖片是居底部 background-repeat:repeat-x;背景按X坐標(biāo)(橫坐標(biāo))重復(fù)延伸
以上CSS代碼可以簡(jiǎn)寫為
background:#FFFurl(DIVCSS5.gif)repeat-xbottom;
解釋:背景顏色為白色,并以X坐標(biāo)重復(fù)DIVCSS5.gif圖片,并且圖標(biāo)居下。未優(yōu)化CSSbackground屬性相同
margin(外補(bǔ)白屬性-CSS手冊(cè)詳細(xì)了解margin手冊(cè))
未優(yōu)化前
margin-left:5px;意思為靠左5px margin-right:6px;靠右6px margin-bottom:7px;底部延伸7px margin-top:8px;頂部延伸8px
優(yōu)化簡(jiǎn)寫為
margin:8px6px7px5px;
意思和屬性效果同上,可詳細(xì)了解CSSmargin介紹
padding(內(nèi)補(bǔ)白屬性-CSS手冊(cè)詳細(xì)了解padding手冊(cè))
未優(yōu)化前
padding-left:5px;意思為左補(bǔ)白5px padding-right:6px;右補(bǔ)白6px padding-bottom:7px;底(下)補(bǔ)白7px padding-top:8px;頂(上)補(bǔ)白8px
優(yōu)化簡(jiǎn)寫為
padding:8px6px7px5px;
意思和屬性效果同上,可詳細(xì)了解CSSpadding介紹
border(邊框?qū)傩?CSS手冊(cè)詳細(xì)了解border手冊(cè))
未優(yōu)化前
border-color:#000000;邊框顏色為黑色 border-style:solid;邊框樣式為實(shí)線 border-width:1px;邊框?qū)挾葹?px
可以簡(jiǎn)寫為
border:1pxsolid#000000;
意思同上未優(yōu)化前
如果是只設(shè)置左邊邊框?yàn)?px,顏色為黑色的實(shí)線CSS代碼如下
border-left:1pxsolid#000000;
font(字體屬性-CSS手冊(cè)詳細(xì)了解fonts手冊(cè))
字體的屬性如下:
font-style:italic;字體樣式 font-variant:small-caps;字體異體 font-weight:bold;字體加粗 font-size:12px;字大小為12px line-height:22px;字行高為22px font-family:"黑體"字體為黑體字
可以縮寫為一句:font:italicsmall-capsbold12px/22px"黑體";
注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個(gè)值了解CSSfont技巧。
2、排列CSS代碼。
通常我們代碼如下排列
這樣將占CSS文件很多的空格和回車位空間,這里還占用了12行CSS文件空間
建議你改寫為
/*CSSwww.DIVCSS5.com實(shí)例演示圖*/-這里是CSS注釋 .yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;} .yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;}
這樣將節(jié)約空格和回車位,及CSS文件行數(shù),從而節(jié)約代碼文件字節(jié)。
3、同屬性提取共用CSS選擇器。
這個(gè)要了解的是如果有兩個(gè)部分的CSS屬性如寬度高度字體顏色都相同,而有很小一點(diǎn)不同,這個(gè)時(shí)候我們就需要提取大家相同的CSS樣式出來,單獨(dú)命名一個(gè)CSS屬性選擇器,從而節(jié)約CSS代碼。
如:
/*CSSwww.DIVCSS5.comDIV+CSS實(shí)例演示圖*/ .yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;width:25px;} .yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;width:50px;}
這里的yangshi和yanshi2兩個(gè)樣式有相同的字體大小為12px,邊框相同,內(nèi)補(bǔ)白相同,只有寬度不同,這個(gè)時(shí)候我們就可以提取他們相同部分并重新新建個(gè)CSS選擇器和重用
新建CSS屬性選擇器演示如下
.gongyong{font-size:12px;border:1pxsolid#000000;padding:5px;} .yangshi{width:25px;} .yangshi2{width:50px;} 這樣在調(diào)用CSS時(shí)候-了解CSS引入 <DIVclassDIVclass="gongyongyangshi">DIVCSS樣式</DIV> <DIVclassDIVclass="gongyongyangshi2">DIVCSS樣式2</DIV>
這樣就可以讓通過調(diào)用相同CSS樣式,再分別調(diào)用不同CSS屬性類即可,以上實(shí)例還不能展示他的優(yōu)點(diǎn),但是如果代碼多而且有很多地方如以上特點(diǎn),這樣將顯示其功能特點(diǎn)。
4、分離網(wǎng)頁顏色和背景設(shè)置樣式(較大站點(diǎn)需要注意)。
這點(diǎn)有以上第三點(diǎn)同屬性提取共用CSS選擇器特點(diǎn),但是區(qū)別地方,如果站比較大,需要改一個(gè)地方即可改變整個(gè)站點(diǎn)網(wǎng)頁的字體顏色樣式,背景圖案顏色,邊框顏色樣式。
這個(gè)時(shí)候我們將需要在DIV+CSS開發(fā)的時(shí)候特別將的基本字體樣式、背景圖案顏色、邊框等顏色提取到一起或放到一個(gè)CSS文件里,這樣一來便于我們維護(hù)管理整個(gè)站點(diǎn)基本樣式。
5、條理化CSS代碼。
條理化CSS代碼意思是將CSS代碼整理歸類,如控制頭部、局部、底部的CSS代碼選擇器樣式區(qū)別開來分別放到一起并與其他地方CSS代碼互相隔開。
如頭部的CSS代碼與內(nèi)容區(qū)CSS代碼回車各行隔開
如以上“toubu”與“dibu”以行隔開得以區(qū)分,好處是以后維護(hù)方便,便于辨認(rèn)更改維護(hù)。
以上就是DIV+CSS代碼優(yōu)化方案是怎么樣的,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。