1、行間注釋：

直接寫于屬性值后面，如：

.search{
    border:1px solid #fff;/*定義搜索輸入框邊框*/
    background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
}

2、整段注釋：

分別在開始及結(jié)束地方加入注釋，如：

/*=====搜索條=====*/
.search {
    border:1px solid #fff;
    background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索條結(jié)束=====*/

三．樣式屬性代碼縮寫

1、不同類有相同屬性及屬性值的縮寫：

對(duì)于兩個(gè)不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時(shí)，應(yīng)對(duì)其加以合并縮寫，特別是當(dāng)有多個(gè)不同的類而有相同的屬性及屬性值時(shí)，合并縮寫可以減少代碼量并易于控制。如：

#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è)不同類的屬性值有重復(fù)之處，剛可以縮寫為：

#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、同一屬性的縮寫：

同一屬性根據(jù)它的屬性值也可以進(jìn)行簡(jiǎn)寫，如：

.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è)邊框的縮寫：

在 CSS 中關(guān)于內(nèi)外側(cè)邊框的距離是按照上、右、下、左的順序來(lái)排列的，當(dāng)這四個(gè)屬性值不同時(shí)也可直接縮寫，如：

.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;
}

則可縮寫為：

.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

而如果當(dāng)上邊與下邊、左邊與右邊的邊框?qū)傩灾迪嗤瑫r(shí)，則屬性值可以直接縮寫為兩個(gè)，如：

.btn {
    margin-top:10px;
    margin-right:5px;
    margin-bottom:10px;
    margin-left:5px;
}

縮寫為：

.btn {margin:10px 5px;}

而當(dāng)上下左右四個(gè)邊框的屬性值都相同時(shí)，則可以直接縮寫成一個(gè)，如：

.btn {
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
}

縮寫為：

.btn{margin:10px;}

4、顏色值的縮寫：

當(dāng)RGB三個(gè)顏色值數(shù)值相同時(shí)，可縮寫顏色值代碼。如：

.menu { color:#ff3333;}

可縮寫為:

.menu {color:#f33;}