作用與意義:
1、減少占用網(wǎng)頁字節(jié)。在同等條件下縮短瀏覽器下載css代碼時間,等同于加快了網(wǎng)頁打開的速度
2、便于后期改版維護。簡化和標準化css代碼讓css代碼減少,便于日后維護
3、讓自己寫的css代碼更加專業(yè)標準化。
優(yōu)化方法:
1、縮寫css代碼。
2、排列css代碼。
3、同屬性提取共用css選擇器。
4、分離網(wǎng)頁顏色和背景設(shè)置樣式(較大站點需要注意)。
5、條理化css代碼。
6、寫清楚注釋。
簡單講幾個優(yōu)化方面例子:
縮寫css代碼
background-color:#FFF;對應(yīng)屬性為背景顏色為白色
background-image:url(divcss.gif);對應(yīng)屬性是設(shè)置divcss5.gif圖片為背景
background-position:bottom;背景圖片是居底部
background-repeat:repeat-x;背景按X坐標(橫坐標)重復(fù)延伸
以上CSS代碼可以簡寫為
background:#FFF url(divcss.gif) repeat-x bottom;
排列css代碼
yangshi{
font-size:12px;
border:1px solid #000000;
padding:5px;
}
建議寫成=》
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}
同屬性提取共用css選擇器
.css1{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.css2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}
建議寫成=>
.css{ font-size:12px;border:1px solid #000000;padding:5px;}
.css1{ width:25px;}
.css2{ width:50px;}
優(yōu)化書寫的方法有多種,這里啟邁網(wǎng)絡(luò)點到為止,主要根據(jù)個人習(xí)慣去書寫。可以多參考一下大型網(wǎng)站的css排版。。。
[ 上一篇 ] 使用CSS代碼實現(xiàn)英文及連續(xù)數(shù)字的自動換行
[ 下一篇 ] css屬性中class與id的區(qū)別
相關(guān)新聞
日期:19 瀏覽:20991
日期:19 瀏覽:20954
日期:19 瀏覽:18529
版權(quán)所有:啟邁科技-合肥網(wǎng)站建設(shè) 皖I(lǐng)CP備19009304號-1 皖公網(wǎng)安備 34010402702162號
網(wǎng)站建設(shè),網(wǎng)站設(shè)計公司啟邁科技,為眾多企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站制作,響應(yīng)式網(wǎng)站設(shè)計,手機網(wǎng)站建設(shè),微網(wǎng)站,模板建站,企業(yè)郵箱等一站式互聯(lián)網(wǎng)解決方案和建站服務(wù)10年。