软件开发标准技术文档
(CSS)
编
码
规
范
SeanOuyang软件技术文档
2012年修改记录
序号 版本号 拟制人/修改人 拟制/修改日期 更改备注 1 1.0 seanouyang 2012-07-10 初稿(来源于网络) 2 1.1 seanouyang 2012-07-12 修改
目录
一、前言 4
二、命名规范 5
2.1 文件命名规范 5
2.2常用类/ID命名规范 5
三、常规书写规范 7
3.1选择DOCTYPE 7
3.2指定语言及字符集 7
3.3调用样式表 8
3.4选用恰当的元素 8
3.5派生选择器 8
3.6辅助图片用背影图处理 8
3.7结构与样式分离 9
3.8文档的结构化书写 9
3.9鼠标手势 9
3.10书写格式及顺序 9
3.11区分大小写 10
3.12默认值 10
3.14不需要重复定义可继承的值 10
3.15多重class定义 10
3.16组选择器(Groupselectors) 10
3.17用正确的顺序指定链接的样式 10
四、注释 11
4.1行间注释 11
4.2整段注释 11
五、样式属性代码缩写 12
5.1颜色 12
5.2盒尺寸 12
5.3边框(border) 13
5.4背景(Backgrounds) 13
5.5字体(fonts) 13
5.6列表(lists) 14
5.7不同类有相同属性及属性值 14
5.7同一属性的缩写 15
六、hack书写规范 16
6.1IE6、IE7、Firefox之间的兼容写法 16
6.2清除浮动 17
一、前言
软件的长期价值直接源于其编码质量。在它的整个生命周期里，一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征，那就能减少在以后对其进行修改时出错的可能性。所有的代码都是暴露给公众的所以我们更应该保证其质量。二、命名规范
所有编码均遵循xhtml标准,?标签?&?属性?&?属性命名必须由小写字母及下划线数字组成,?且所有标签必须闭合,?包括br,?hr等属性值必须用双引号
常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”
关于命名的更多知识，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E5%91%BD%E5%90%8D&searchType=title
命名规范
三、常规书写规范
3.1选择DOCTYPE
XHTML1.0提供了三种DTD声明可供选择：
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。完整代码如下：
框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
关于DTD您可以参考：
http://www.52css.com/search.asp?SearchContent=%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B&searchType=title
3.2指定语言及字符集
为文档指定语言
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：
常用的语言定义
标准的XML文档语言定义
针对老版本的浏览器的语言定义
为提高字符集，建议采用“utf-8”
3.3调用样式表
外部样式表调用：
页面内嵌法：就是将样式表直接写在页面代码的head区。如：
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
3.4选用恰当的元素
根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div或者是span；
避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；
尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；
3.5派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：
.mainMenuulli{background:url(images/bg.gif;)}
关于选择器，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E9%80%89%E6%8B%A9%E5%99%A8&searchType=title
3.6辅助图片用背影图处理
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：
#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}
3.7结构与样式分离
在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。
3.8文档的结构化书写
页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
/=====主导航=====/
#mainMenu{
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg)repeat-x;
}
#mainMenuulli{
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/=====主导航结束=====/
3.9鼠标手势
在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”
3.10书写格式及顺序
Css属性书写顺序，建议遵循定位属性->自身属性->文本属性->其他属性，此条可根据自身习惯书写，但尽量保证同类属性写在一起。
定位属性（比如：display,position,float,clear,visibility等）
自身属性（比如：width,height,margin,padding,border等）
文本属性（比如：font,line-height,text-align,text-indent,vertical-align等）
其他属性（比如：color,background,opacity,cursor,list-style等）
3.11区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，建议所有的定义名称都采用小写。
3.12默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0。
3.14不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖定义。
3.15多重class定义
一个标签可以同时定义多个class。例如：
.one{width:200px;}
.two{border:10pxsolid;}
在页面代码中，我们可以这样调用:
3.16组选择器(Groupselectors)
当一些元素类型、class或者id都有共同的一些属性，可以使用组选择器来避免多次的重复定义，这可以节省不少字节。
如果在使用时，有个别元素需要定义独立样式，可以再重新定义。
3.17用正确的顺序指定链接的样式
当用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link:visited:hover:active。
四、注释
4.1行间注释
直接写于属性值后面，如：
.search{
border:1pxsolid#fff;/定义搜索输入框边框/
background:url(../images/icon.gif)no-report#333;/定义搜索框的背景/
}
4.2整段注释
分别在开始及结束地方加入注释，如：
/=====搜索条=====/
.search{
border:1pxsolid#fff;
background:url(../images/icon.gif)no-repeat#333;
}
/=====搜索条结束=====/
关于注释，您可以参考：
http://www.52css.com/search.asp?SearchContent=%E6%B3%A8%E9%87%8A&searchType=title
五、样式属性代码缩写
5.1颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;
5.2盒尺寸
property:value1;表示所有边都是一个值value1
property:value1value2;表示top和bottom的值是value1,right和left的值是value2
property:value1value2value3;表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1value2value3value4;四个值依次表示top,right,bottom,left
在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;}
5.3边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1pxsolid#000;
5.4背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:00;
可以缩写为一句：background:#f00url(background.gif)no-repeatfixed00;
语法是background:colorimagerepeatattachmentposition;
可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color:transparent
image:none
repeat:repeat
attachment:scroll
position:0%0%
5.5字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"LucidaGrande",sans-serif;
可以缩写为一句：font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
5.6列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:squareinsideurl(image.gif);
5.7不同类有相同属性及属性值
对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：
#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;
}
两个不同类的属性值有重复之处，刚可以缩写为：
#mainMenu,#subMenu{
background:url(../images/bg.gif);
border:1pxsolid#333;
width:100%;
overflow:hidden;
}
#mainMenu{height:30px;}
#subMenu{height:20px;}
5.7同一属性的缩写
同一属性根据它的属性值也可以进行简写，如：
.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%;
}
六、hack书写规范
因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。
6.1IE6、IE7、Firefox之间的兼容写法
写法一：
IE都能识别;标准浏览器(如FF)不能识别；
IE6能识别，但不能识别!important,
IE7能识别，也能识别!important;
FF不能识别，但能识别!important;
根据上述表达，同一类/ID下的CSShack可写为：
.searchInput{
background-color:#333;/三者皆可/
background-color:#666!important;/仅IE7/
background-color:#999;/仅IE6及IE6以下/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
.searchInput{
background-color:#333;/通用/
_background-color:#666;/仅IE6可识别/
}
写法三：
+html与html是IE特有的标签,Firefox暂不支持。
.searchInput{background-color:#333;}
html.searchInput{background-color:#666;}/仅IE6/
+html.searchInput{background-color:#555;}/仅IE7/
屏蔽IE浏览器：
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
:lang(zh)select{font:12px!important;}/FF的专用/
select:empty{font:12px!important;}/safari可见/
IE6可识别：
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
select{display/IE6不识别/:none;}
IE的if条件hack写法：
所有的IE可识别：
OnlyIE
只有IE5.0可以识别:
OnlyIE5.0
IE5.0包换IE5.5都可以识别:
OnlyIE5.0+
仅IE6可识别:
OnlyIE6-
IE6以及IE6以下的IE5.x都可识别:
OnlyIE6/+
仅IE7可识别:
OnlyIE7/-
关于CSSHACK和BUG您可以参考：
http://www.52css.com/search.asp?SearchContent=HACK&searchType=title
http://www.52css.com/search.asp?SearchContent=BUG&searchType=title
6.2清除浮动
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
select:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear:both。
|
|
