注釋書(shū)寫(xiě)規(guī)范
2012/11/5 15:46:18 閱讀：3967
發(fā)布者：3967
1、行間注釋?zhuān)?/STRONG>
直接寫(xiě)于屬性值后面，如：
.search{
border:1px solid #fff;/*定義搜索輸入框邊框*/
background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
}
2、整段注釋?zhuān)?/STRONG>
分別在開(kāi)始及結(jié)束地方加入注釋?zhuān)纾?BR>
/*=====搜索條=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索條結(jié)束=====*/
三．樣式屬性代碼縮寫(xiě)
1、不同類(lèi)有相同屬性及屬性值的縮寫(xiě)：
對(duì)于兩個(gè)不同的類(lèi)，但是其中有部分相同甚至是全部相同的屬性及屬性值時(shí)，應(yīng)對(duì)其加以合并縮寫(xiě)，特別是當(dāng)有多個(gè)不同的類(lèi)而有相同的屬性及屬性值時(shí)，合并縮寫(xiě)可以減少代碼量并易于控制。如：
#main-menu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#sub-menu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
兩個(gè)不同類(lèi)的屬性值有重復(fù)之處，剛可以縮寫(xiě)為：
#main-menu,#sub-menu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#main-menu {height:30px;}
#sub-menu {height:20px;}
2、同一屬性的縮寫(xiě)：
同一屬性根據(jù)它的屬性值也可以進(jìn)行簡(jiǎn)寫(xiě)，如：
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、內(nèi)外側(cè)邊框的縮寫(xiě)：
在 CSS 中關(guān)于內(nèi)外側(cè)邊框的距離是按照上、右、下、左的順序來(lái)排列的，當(dāng)這四個(gè)屬性值不同時(shí)也可直接縮寫(xiě)，如：
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
則可縮寫(xiě)為：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
而如果當(dāng)上邊與下邊、左邊與右邊的邊框?qū)傩灾迪嗤瑫r(shí)，則屬性值可以直接縮寫(xiě)為兩個(gè)，如：
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
縮寫(xiě)為：
.btn {margin:10px 5px;}
而當(dāng)上下左右四個(gè)邊框的屬性值都相同時(shí)，則可以直接縮寫(xiě)成一個(gè)，如：
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
縮寫(xiě)為：
.btn{margin:10px;}
4、顏色值的縮寫(xiě)：
當(dāng)RGB三個(gè)顏色值數(shù)值相同時(shí)，可縮寫(xiě)顏色值代碼。如：
.menu { color:#ff3333;}
可縮寫(xiě)為:
.menu {color:#f33;}
