CSS代碼如何優(yōu)化

小編給大家分享一下CSS代碼如何優(yōu)化，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是專業(yè)的監(jiān)利網(wǎng)站建設(shè)公司，監(jiān)利接單;提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行監(jiān)利網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

div+css代碼優(yōu)化方案介紹-css代碼優(yōu)化篇

css代碼優(yōu)化作用與意義
1、減少占用網(wǎng)頁(yè)字節(jié)。在同等條件下縮短瀏覽器下載css代碼時(shí)間，相當(dāng)于加快網(wǎng)頁(yè)打開(kāi)速度
2、便于維護(hù)。簡(jiǎn)化和標(biāo)準(zhǔn)化css代碼讓css代碼減少，便于日后維護(hù)
3、讓自己寫(xiě)的css代碼更加專業(yè)。

css優(yōu)化方法-需要優(yōu)化css代碼地方
1、縮寫(xiě)css代碼。
2、排列css代碼。
3、同屬性提取共用css選擇器。
4、分離網(wǎng)頁(yè)顏色和背景設(shè)置樣式（較大站點(diǎn)需要注意）。
5、條理化css代碼。

實(shí)例講解以上幾點(diǎn)div css優(yōu)化方法
1、縮寫(xiě)css代碼
常用需要縮寫(xiě)css屬性代碼如下：
background(背景屬性-CSS手冊(cè)詳細(xì)了解background手冊(cè))
未優(yōu)化前
background-color:#FFF;對(duì)應(yīng)屬性為背景顏色為白色
background-image:url(創(chuàng)新互聯(lián).gif);對(duì)應(yīng)屬性是設(shè)置創(chuàng)新互聯(lián).gif圖片為背景
background-position:bottom;背景圖片是居底部
background-repeat:repeat-x;背景按X坐標(biāo)（橫坐標(biāo)）重復(fù)延伸
以上CSS代碼可以簡(jiǎn)寫(xiě)為
background:#FFF url(創(chuàng)新互聯(lián).gif) repeat-x bottom;
解釋：背景顏色為白色，并以X坐標(biāo)重復(fù)創(chuàng)新互聯(lián).gif圖片，并且圖標(biāo)居下。未優(yōu)化css background屬性相同

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)寫(xiě)為
margin:8px 6px 7px 5px; 意思和屬性效果同上，可詳細(xì)了解css margin介紹

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)寫(xiě)為
padding:8px 6px 7px 5px; 意思和屬性效果同上，可詳細(xì)了解css padding介紹

border(邊框?qū)傩?CSS手冊(cè)詳細(xì)了解border手冊(cè))
未優(yōu)化前
border-color:#000000;邊框顏色為黑色
border-style:solid;邊框樣式為實(shí)線
border-width:1px;邊框?qū)挾葹?px

可以簡(jiǎn)寫(xiě)為
border:1px solid #000000;意思同上未優(yōu)化前
如果是只設(shè)置左邊邊框?yàn)?px，顏色為黑色的實(shí)線css代碼如下
border-left:1px solid #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:"黑體" 字體為黑體字
可以縮寫(xiě)為一句：font:italic small-caps bold 12px/22px "黑體";

注意，如果你縮寫(xiě)字體定義，至少要定義font-size和font-family兩個(gè)值了解css font技巧。
了解px是什么

2、排列css代碼。
通常我們代碼如下排列

這樣將占css文件很多的空格和回車位空間，這里還占用了12行css文件空間
www.創(chuàng)新互聯(lián).com建議你改寫(xiě)為

/* CSS www.創(chuàng)新互聯(lián).com實(shí)例演示圖 */-這里是css 注釋 .yangshi{ font-size:12px;border:1px solid #000000;padding:5px;} .yangshi2{ font-size:12px;border:1px solid #000000;padding:5px;}

這樣將節(jié)約空格和回車位，及css文件行數(shù)，從而節(jié)約代碼文件字節(jié)。

3、同屬性提取共用css選擇器。
這個(gè)要了解的是如果有兩個(gè)部分的css屬性如寬度高度字體顏色都相同，而有很小一點(diǎn)不同，這個(gè)時(shí)候我們就需要提取大家相同的css樣式出來(lái)，單獨(dú)命名一個(gè)css屬性選擇器，從而節(jié)約css代碼。
如：

/* CSS www.創(chuàng)新互聯(lián).com div+css實(shí)例演示圖 */ .yangshi{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;} .yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}

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

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

.gongyong{font-size:12px;border:1px solid #000000;padding:5px;} .yangshi{ width:25px;} .yangshi2{width:50px;}

這樣在調(diào)用css時(shí)候-了解css 引入

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

4、分離網(wǎng)頁(yè)顏色和背景設(shè)置樣式（較大站點(diǎn)需要注意）。
這點(diǎn)有以上第三點(diǎn)同屬性提取共用css選擇器特點(diǎn)，但是區(qū)別地方，如果站比較大，需要改一個(gè)地方即可改變整個(gè)站點(diǎn)網(wǎng)頁(yè)的字體顏色樣式，背景圖案顏色，邊框顏色樣式。
這個(gè)時(shí)候我們將需要在div+css開(kāi)發(fā)的時(shí)候特別將的基本字體樣式、背景圖案顏色、邊框等顏色提取到一起或放到一個(gè)css文件里，這樣一來(lái)便于我們維護(hù)管理整個(gè)站點(diǎn)基本樣式。

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

以上是“CSS代碼如何優(yōu)化”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：CSS代碼如何優(yōu)化
文章路徑：http://m.jiaotiyi.com/article/gssipo.html