本篇文章給大家分享的是有關(guān)DIV+CSS代碼優(yōu)化方案是怎么樣的，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、濮陽縣網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、濮陽縣網(wǎng)絡(luò)營銷、濮陽縣企業(yè)策劃、濮陽縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供濮陽縣建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：chinadenli.net

你對DIV+CSS代碼優(yōu)化的概念是否了解，這里和大家分享一下，首先讓我們看一下CSS代碼優(yōu)化作用與意義。

DIV+CSS代碼優(yōu)化方案

CSS代碼優(yōu)化作用與意義

1、減少占用網(wǎng)頁字節(jié)。在同等條件下縮短瀏覽器下載CSS代碼時間，相當(dāng)于加快網(wǎng)頁打開速度

2、便于維護(hù)。簡化和標(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è)置樣式（較大站點需要注意）。

5、條理化CSS代碼。

實例講解以上幾點DIV+CSS優(yōu)化方法

1、縮寫CSS代碼

常用需要縮寫CSS屬性代碼如下：

background(背景屬性-CSS手冊詳細(xì)了解background手冊)

未優(yōu)化前

background-color:#FFF;對應(yīng)屬性為背景顏色為白色  background-image:url(DIVCSS5.gif);對應(yīng)屬性是設(shè)置DIVCSS5.gif圖片為背景  background-position:bottom;背景圖片是居底部  background-repeat:repeat-x;背景按X坐標(biāo)（橫坐標(biāo)）重復(fù)延伸

以上CSS代碼可以簡寫為

background:#FFFurl(DIVCSS5.gif)repeat-xbottom;

解釋：背景顏色為白色，并以X坐標(biāo)重復(fù)DIVCSS5.gif圖片，并且圖標(biāo)居下。未優(yōu)化CSSbackground屬性相同

margin(外補(bǔ)白屬性-CSS手冊詳細(xì)了解margin手冊)

未優(yōu)化前

margin-left:5px;意思為靠左5px  margin-right:6px;靠右6px  margin-bottom:7px;底部延伸7px  margin-top:8px;頂部延伸8px

優(yōu)化簡寫為

margin:8px6px7px5px;

意思和屬性效果同上，可詳細(xì)了解CSSmargin介紹

padding(內(nèi)補(bǔ)白屬性-CSS手冊詳細(xì)了解padding手冊)

未優(yōu)化前

padding-left:5px;意思為左補(bǔ)白5px  padding-right:6px;右補(bǔ)白6px  padding-bottom:7px;底（下）補(bǔ)白7px  padding-top:8px;頂（上）補(bǔ)白8px

優(yōu)化簡寫為

padding:8px6px7px5px;

意思和屬性效果同上，可詳細(xì)了解CSSpadding介紹

border(邊框?qū)傩?CSS手冊詳細(xì)了解border手冊)

未優(yōu)化前

border-color:#000000;邊框顏色為黑色  border-style:solid;邊框樣式為實線  border-width:1px;邊框?qū)挾葹?px

可以簡寫為

border:1pxsolid#000000;

意思同上未優(yōu)化前
如果是只設(shè)置左邊邊框為1px，顏色為黑色的實線CSS代碼如下

border-left:1pxsolid#000000;

font(字體屬性-CSS手冊詳細(xì)了解fonts手冊)

字體的屬性如下：

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兩個值了解CSSfont技巧。

2、排列CSS代碼。

通常我們代碼如下排列

這樣將占CSS文件很多的空格和回車位空間，這里還占用了12行CSS文件空間
建議你改寫為

/*CSSwww.DIVCSS5.com實例演示圖*/-這里是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選擇器。

這個要了解的是如果有兩個部分的CSS屬性如寬度高度字體顏色都相同，而有很小一點不同，這個時候我們就需要提取大家相同的CSS樣式出來，單獨命名一個CSS屬性選擇器，從而節(jié)約CSS代碼。
如：

/*CSSwww.DIVCSS5.comDIV+CSS實例演示圖*/  .yangshi{font-size:12px;border:1pxsolid#000000;padding:5px;width:25px;}  .yangshi2{font-size:12px;border:1pxsolid#000000;padding:5px;width:50px;}

這里的yangshi和yanshi2兩個樣式有相同的字體大小為12px，邊框相同,內(nèi)補(bǔ)白相同，只有寬度不同，這個時候我們就可以提取他們相同部分并重新新建個CSS選擇器和重用

新建CSS屬性選擇器演示如下

.gongyong{font-size:12px;border:1pxsolid#000000;padding:5px;}  .yangshi{width:25px;}  .yangshi2{width:50px;}   這樣在調(diào)用CSS時候-了解CSS引入  <DIVclassDIVclass="gongyongyangshi">DIVCSS樣式</DIV> <DIVclassDIVclass="gongyongyangshi2">DIVCSS樣式2</DIV>

這樣就可以讓通過調(diào)用相同CSS樣式，再分別調(diào)用不同CSS屬性類即可，以上實例還不能展示他的優(yōu)點，但是如果代碼多而且有很多地方如以上特點，這樣將顯示其功能特點。

4、分離網(wǎng)頁顏色和背景設(shè)置樣式（較大站點需要注意）。

這點有以上第三點同屬性提取共用CSS選擇器特點，但是區(qū)別地方，如果站比較大，需要改一個地方即可改變整個站點網(wǎng)頁的字體顏色樣式，背景圖案顏色，邊框顏色樣式。

這個時候我們將需要在DIV+CSS開發(fā)的時候特別將的基本字體樣式、背景圖案顏色、邊框等顏色提取到一起或放到一個CSS文件里，這樣一來便于我們維護(hù)管理整個站點基本樣式。

5、條理化CSS代碼。

條理化CSS代碼意思是將CSS代碼整理歸類，如控制頭部、局部、底部的CSS代碼選擇器樣式區(qū)別開來分別放到一起并與其他地方CSS代碼互相隔開。
如頭部的CSS代碼與內(nèi)容區(qū)CSS代碼回車各行隔開
如以上“toubu”與“dibu”以行隔開得以區(qū)分，好處是以后維護(hù)方便，便于辨認(rèn)更改維護(hù)。

以上就是DIV+CSS代碼優(yōu)化方案是怎么樣的，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：DIV+CSS代碼優(yōu)化方案是怎么樣的
分享網(wǎng)址：http://chinadenli.net/article32/jhjopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、、品牌網(wǎng)站建設(shè)、定制開發(fā)、域名注冊、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)