作用與意義:
1、減少占用網頁字節。在同等條件下縮短瀏覽器下載css代碼時間,等同于加快了網頁打開的速度
2、便于后期改版維護。簡化和標準化css代碼讓css代碼減少,便于日后維護
3、讓自己寫的css代碼更加專業標準化。
優化方法:
1、縮寫css代碼。
2、排列css代碼。
3、同屬性提取共用css選擇器。
4、分離網頁顏色和背景設置樣式(較大站點需要注意)。
5、條理化css代碼。
6、寫清楚注釋。
簡單講幾個優化方面例子:
縮寫css代碼
background-color:#FFF;對應屬性為背景顏色為白色
background-image:url(divcss.gif);對應屬性是設置divcss5.gif圖片為背景
background-position:bottom;背景圖片是居底部
background-repeat:repeat-x;背景按X坐標(橫坐標)重復延伸
以上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;}
優化書寫的方法有多種,這里啟邁網絡點到為止,主要根據個人習慣去書寫。可以多參考一下大型網站的css排版。。。
[ 上一篇 ] 使用CSS代碼實現英文及連續數字的自動換行
[ 下一篇 ] css屬性中class與id的區別
相關新聞
日期:19 瀏覽:21014
日期:19 瀏覽:20955
日期:19 瀏覽:18540
日期:19 瀏覽:16586
版權所有:啟邁科技-合肥網站建設 皖ICP備19009304號-1 皖公網安備 34010402702162號
網站建設,網站設計公司啟邁科技,為眾多企業提供網站建設,網站制作,響應式網站設計,手機網站建設,微網站,模板建站,企業郵箱等一站式互聯網解決方案和建站服務10年。