轻松玩转CSS样式属性代码缩写-css translate属性

本文向大家描述一下CSS样式属性代码缩写的用法，CSS样式中不同类有相同属性及属性值的缩写，对于两个不同的类，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

CSS样式属性代码缩写

1、CSS样式中不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：

#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样式中两个不同类的属性值有重复之处，刚可以缩写为：

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

2、CSS样式中同一属性的缩写：

同一属性根据它的属性值也可以进行简写，如：

.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样式中内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：

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

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：

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

缩写为：

.btn{margin:10px5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

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

缩写为：

.btn{margin:10px;}

4、CSS样式中颜色值的缩写：

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：.

menu{color:#ff3333;}

可缩写为:

.menu{color:#f33;}

【编辑推荐】