注释书写规范

1、行间注释：

直接写于属性值后面，如：

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

2、整段注释：

分别在开始及结束地方加入注释，如：

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

三．样式属性代码缩写

1、不同类有相同属性及属性值的缩写：

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

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

两个不同类的属性值有重复之处，刚可以缩写为：

#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、同一属性的缩写：

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

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

在 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:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

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

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

缩写为：

.btn {margin:10px 5px;}

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

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

缩写为：

.btn{margin:10px;}

4、颜色值的缩写：

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

.menu { color:#ff3333;}

可缩写为:

.menu {color:#f33;}