本文向大家描述一下CSS樣式屬性代碼縮寫的用法，CSS樣式中不同類有相同屬性及屬性值的縮寫，對于兩個不同的類，特別是當(dāng)有多個不同的類而有相同的屬性及屬性值時，合并縮寫可以減少代碼量并易于控制。

CSS樣式屬性代碼縮寫

1、CSS樣式中不同類有相同屬性及屬性值的縮寫：

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

#mainMenu{  
background:url(../images/bg.gif);  
border:1pxsolid#333;  
width:100%;  
height:30px;  
overflow:hidden;  
}  
#subMenu{  
background:url(../images/bg.gif);  
border:1pxsolid#333;  
width:100%;  
height:20px;  
overflow:hidden;  
}  
 

CSS樣式中兩個不同類的屬性值有重復(fù)之處，剛可以縮寫為：

#mainMenu,#subMenu{  
background:url(../images/bg.gif);  
border:1pxsolid#333;  
width:100%;  
overflow:hidden;  
}  
#mainMenu{height:30px;}  
#subMenu{height:20px;}  
 

 2、CSS樣式中同一屬性的縮寫：

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

.search{  
background-color:#333;  
background-image:url(../images/icon.gif);  
background-repeat:no-repeat;  
background-position:50%50%;  
}  
.search{  
background:#333url(../images/icon.gif)no-repeat50%50%;  
}  
 

 #p#3、CSS樣式中內(nèi)外側(cè)邊框的縮寫：

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

.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:10px8px12px5px;  
Padding:10px8px12px5px;  
}  
 

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

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

縮寫為：

.btn{margin:10px5px;}  
 

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

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

縮寫為：

.btn{margin:10px;}  
 

4、CSS樣式中顏色值的縮寫：

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

menu{color:#ff3333;}  
 

可縮寫為:

.menu{color:#f33;}  
 

【編輯推薦】

1. CSS樣式實時切換技巧剖析
2. 創(chuàng)建和插入CSS樣式表秘笈
3. 專家推薦三大“頂級”CSS技巧！
4. 探究網(wǎng)頁布局中CSS無效的十個常見原因
5. DIV CSS初學(xué)者必須掌握的10個問題與技巧