DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 淺談css代碼的簡化縮寫
淺談css代碼的簡化縮寫
編輯:CSS詳解     
現在很多人所用的CSS代碼都很冗贅,其實很多都可以簡化縮寫的。
這次就根據自己所知道的來跟大家談談有關CSS代碼的簡化縮寫問題。

1、所有CSS代碼只要用一個style標記就可以了,沒必要每段都加一個,簡直是多余。例如:
body{background:url("") repeat fixed!important;}

.bodybg{background:url("") no repeat no scroll!important;}

可以簡化合並為:

body{background:url("") repeat fixed!important;}
.bodybg{background:url("") no repeat no scroll!important;}

像更改博客各部分背景,更改博客各部分字體顏色,更改模版寬度,鼠標,滾動條等CSS代碼都可以合並到一個style標記裡。
2、顏色:16進制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:

黑色#000000可以縮寫為#000;
白色#ffffff可以縮寫為#fff;
紅色#ff0000可以縮寫為#f00;
藍色#0000ff可以縮寫為#00f;
#336699可以縮寫為#369。

一些常見常用的顏色比如黑色,白色,紅色,藍色,綠色,黃色等如果大家記不住其代碼的話可以用相應的英語black,white,red,blue,green,yellow等來表示。
3、對同一個標識進行多屬性控制的時候可以把幾個屬性放在一個大括號裡,不同屬性中間用分號隔開。例如大背景和滾動條:

body {background:url("") repeat fixed!important;}
body {SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}

可以簡化合並為:

body {background:url("") repeat fixed!important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000;
SCROLLBAR-ARROW-COLOR: #000;
SCROLLBAR-TRACK-COLOR: #EDF6F5;
SCROLLBAR-DARKSHADOW-COLOR: #000;}
4、對多標識進行相同屬性控制的時候也可以合並在一起,各標識間用逗號隔開。例如:
.bodytop{background:#transparent;}
.bodybg{background:#transparent;}

可以簡化合並為:

.bodytop,.bodybg{background:#transparent;}
.bodytop{display:none;}
.bodyBottom{display:none;}

可以簡化合並為:

.bodytop,.bodyBottom{display:none;}
.feeds .text a{color:#000;}
.feeds .function a{color:#000;}
可以簡化合並為: .feeds .text a,.feeds .function a{color:#000} 舉這麼多例子只是為了讓大家更清楚明了一點,具體大家得根據自己的情況來簡化縮寫代碼。 像現在很多人博客上發的首頁透明模版的代碼: .logo{background:#transparent}.banner{background:#transparent}.menu{background:#transparent}.bodyBg{background:#transparent}.bodyBottom{background:#transparent}.feeds .up{background:#transparent}.feeds .down{background:#transparent}.feeds .function{background:#transparent}.feeds .page{background:#transparent}.links .up{background:#transparent}.links .down{background:#transparent}.links .mid{background:#transparent}.photo .mid{background:#transparent}.label .mid{background:#transparent}. 本文鏈接http://www.cxybl.com/html/wyzz/CSS/20130904/40043.Html
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved