CSS设计网页时的一些常用规范

一．注释书写规范

　　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、不同类有相同属性及属性值的缩写：

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

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

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

　　#mainMenu,#subMenu {
　　background:url(../images/bg.gif);
　　border:1px solid #333;
　　width:100%;
　　overflow:hidden;
　　}
　　#mainMenu {height:30px;}
　　#subMenu {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;}