一、文件规范
1、文件均归档至约定的目录中
所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：
- 基本样式库 /css/core
- 通用UI元素样式库 /css/lib
- JS组件相关样式库 /css/ul
- 业务类的CSS是指和具体产品相关的文件，放在如下目录中：
- 读书 /css/book/
- 电影 /css/movie/
- 音乐 /css/music/
- 社区 /css/sns/
- 小站 /css/site/
- 同城 /css/location/
- 电台 /css/radio/
外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如：
- util-01 reset /css/core/reset.css
- util-02 通用模块容器 /css/core/mod.css
- ui-01. 喜欢按钮 /css/core/fav_btn.css
- ui-02. 视频/相册列表项 /css/core/media_item.css
- ui-03. 评星 /css/core/rating.css
- ui-04. 通用按钮 /css/core/common_button.css
- ui-05. 分页 /css/core/pagination.css
- ui-06. 推荐按钮 /css/core/rec_btn.css
- ui-07. 老版对话框 /css/core/old_dialog.css
- ui-08. 老版Tab /css/core/old_tab.css
- ui-09. 老版成员列表 /css/core/old_userlist.css
- ui-10. 老版信息区 /css/core/notify.css
- ui-11. 社区用户导航 /css/core/profile_nav.css
- ui-12. 当前大社区导航 /css/core/site_nav.css
- ui-13. 加载中 /css/lib/loading.css
2、文件引入可通过外联或内联方式引入
link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。
- 外联方式：<link rel=”stylesheet” href=”…” />（类型声明type=”text/css”可以省略）
- 内联方式：<style>…</style> （类型声明type=”text/css”可以省略）
3、文件名、文件编码及文件大小
- 文件名必须由小写字母、数字、中划线组成
- 文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。
- 单个CSS文件避免过大（建议少于300行）
二、注释规范
1、文件顶部注释（推荐使用）
- /*
- * @description: 中文说明
- * @author: name
- * @update: name (2013-04-13 18:32)
- */
2、模块注释
模块注释必须单独写在一行
- /* module: module1 by 张三 */
- …
- /* module: module2 by 张三 */
3、单行注释与多行注释
单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。
- /* this is a short comment */
多行注释必须写在单独行内
- /*
- * this is comment line 1.
- * this is comment line 2.
- */
4、特殊注释
用于标注修改、待办等信息
- /* TODO: xxxx by name 2013-04-13 18:32 */
- /* BUGFIX: xxxx by name 2012-04-13 18:32 */
5、区块注释
对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。
- /* Header */
- /* Footer */
- /* Gallery */
三、命名规范
使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。
- /* 不推荐: 无意义 */ #yee-1901 {}
- /* 不推荐: 与样式相关 */ .button-green {}.clear {}
- /* 推荐: 特殊性 */ #gallery {}#login {}.video {}
- /* 推荐: 通用性 */ .aux {}.alt {}
常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。
ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。
- /* 不推荐 */ #navigation {}.atr {}
- /* 推荐 */ #nav {}.author {}
类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。
- /* 不推荐 */ul#example {}div.error {}
- /* 推荐 */#example {}.error {}
使用类选择器，放弃ID选择器
ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。
NEC特殊字符："-"连字符
"-"在本规范中并不表示连字符的含义。
她只表示两种含义：分类前缀分隔符、扩展分隔符，详见以下具体规则。
分类的命名方法：使用单个字母+"-"为前缀
布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。
对以上的解释详情参见：分类方法中的“CSS内部的分类及其顺序”。
注：在你样式中的选择器总是要以上面前五类开头，然后在里面使用后代选择器。
如果这五类不能满足你的需求，你可以另外定义一个或多个大类，但必须符合单个字母+"-"为前缀的命名规则，即 .x- 的格式。
特殊：.j-将被专用于JS获取节点，请勿使用.j-定义样式。
后代选择器命名
- 约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器，如：.item为m-list模块里的每一个项，.text为m-list模块里的文本部分：.m-list .item{}.m-list .text{}。
- 一个语义化的标签也可以是后代选择器，比如：.m-list li{}。
- 不允许单个字母的类选择器出现，原因详见下面的“模块和元件的后代选择器的扩展类”。
通过使用后代选择器的方法，你不需要考虑他的命名是否已被使用，因为他只在当前模块或元件中生效，同样的样式名可以在不同的模块或元件中重复使用，互不干扰；在多人协作或者分模块协作的时候效果尤为明显！
后代选择器不需要完整表现结构树层级，尽量能短则短。
注：后代选择器不要在页面布局中使用，因为污染的可能性较大；
|
1
2
3
4
5
6
7
8
|
/* 这里的.itm和.cnt只在.m-list中有效 */.m-list{margin:0;padding:0;}.m-list .itm{margin:1px;padding:1px;}.m-list .cnt{margin-left:100px;}/* 这里的.cnt和.num只在.m-page中有效 */.m-page{height:20px;}.m-page .cnt{text-align:center;}.m-page .num{border:1px solid #ddd;} |
命名应简约而不失语义
|
1
2
3
4
5
6
|
/* 反对：表现化的或没有语义的命名 */.m-abc .green2{}.g-left2{}/* 推荐：使用有语义的简短的命名 */.m-list .wrap2{}.g-side2{} |
相同语义的不同类命名
方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。
其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
模块和元件的扩展类的命名方法
当A、B、C、...它们类型相同且外形相似区别不大，那么就以它们中出现率最高的做成基类，其他做成基类的扩展。
方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。
补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。
如果你的扩展类是表示不同状态，那么你可以这样命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，然后像这样使用：class="u-btn u-btn-dis"。
如果你的网站可以不兼容IE6等浏览器，那么你标识状态的方法也可以采取独立状态分类（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然后像这样使用：class="u-btn z-dis"。
模块和元件的后代选择器的扩展类
有时候模块内会有些类似的东西，如果你没有把它们做成元件和扩展，那么也可以使用后代选择器和扩展。
后代选择器：.m-login .btn{}。
后代选择器扩展：.m-login .btn-1{}，.m-login .btn-dis{}。
同样也可以采取独立状态分类（.z-）方法：.m-login .btn.z-dis{}，然后像这样使用：class="btn z-dis"。
注：此方法用于类选择器，直接使用标签做为选择器的则不需要使用此命名方法。
注：为防止后代选择器的扩展类和大类命名规范冲突，后代选择器不允许使用单个字母。
比如：.m-list .a{}是不允许的，因为当这个.a需要扩展的时候就会变成.a-bb，这样就和大类的命名规范冲突。
分组选择器有时可以代替扩展方法
有时候虽然两个同类型的模块很相似，但是你希望他们之间不要有依赖关系，也就是说你不希望使用扩展的方法，那么你可以通过合并选择器来设置共性的样式。
使用本方法的前提是：相同类型、功能和外观都相似，写在同一片代码区域方便维护。
|
1
2
3
4
5
6
7
8
9
10
|
/* 两个元件共性的样式 */.u-tip1,.u-tip2{}.u-tip1 .itm,.u-tip2 .itm{}/* 在分别是两个元件各自的样式 *//* tip1 */.u-tip1{}.u-tip1 .itm{}/* tip2 */.u-tip2{}.u-tip2 .itm{} |
防止污染和被污染
当模块或元件之间互相嵌套，且使用了相同的标签选择器或其他后代选择器，那么里面的选择器就会被外面相同的选择器所影响。
所以，如果你的模块或元件可能嵌套或被嵌套于其他模块或元件，那么要慎用标签选择器，必要时采用类选择器，并注意命名方式，可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性。
命名时需要注意的点：
- 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
- 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
- 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
- 不允许通过1、2、3等序号进行命名
- 避免class与id重名
- id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
- class用于标识某一个类型的对象，命名必须言简意赅。
- 尽可能提高代码模块的复用，样式尽量用组合的方式
- 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
- 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
- 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
- 空元素要有结束的tag或于开始的tag后加上"/"
- 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
- <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
- 给每一个表格和表单加上一个唯一的、结构标记id
- 给图片加上alt标签
- 尽量使用英文命名原则
- 尽量不缩写，除非一看就明白的单词
1．文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
主要的 master.css
模块 module.css
基本共用 base.css
主题 themes.css
专栏 columns.css
表单 forms.css
补丁 mend.css
2．常用类/ID命名规范
(1) 页面结构
- 容器: container
- 页头：header
- 内容：content/container
- 页面主体：main
- 页尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
(2) 导航
- 导航：nav
- 主导航：mainbav
- 子导航：subnav
- 顶导航：topnav
- 边导航：sidebar
- 左导航：leftsidebar
- 右导航：rightsidebar
- 菜单：menu
- 子菜单：submenu
- 标题: title
- 摘要: summary
(3) 功能
- 标志：logo
- 广告：banner
- 登陆：login
- 登录条：loginbar
- 注册：regsiter
- 搜索：search
- 搜索输入框：searchInput
- 搜索输出和搜索结果相似:search_output
- 搜索条:searchBar
- 搜索结果:search_results
- 功能区：shop
- 标题：title
- 加入：joinus
- 合作伙伴：partner
- 状态：status
- 按钮：btn
- 滚动：scroll
- 标签页：tab
- 文章列表：list
- 提示信息：msg
- 当前的: current
- 小技巧：tips
- 图标: icon
- 箭头:arr/arrow
- 注释：note
- 指南：guild
- 服务：service
- 热点：hot
- 新闻：news
- 商标:branding
- 下载：download
- 投票：vote
- 合作伙伴：partner
- 友情链接：link
- 版权：copyright
- 信誉：siteinfoCredits
- 法律声明：siteinfoLegal
- 网站信息：siteinfo
- 首页:homepage
- 二级页面子页面:subpage
- 工具条:#tool, #toolbar
- 下拉:drop
- 下拉菜单:dorpmenu
- 产品:products
- 产品价格: products_prices
- 产品描述: products_description
- 产品评论：products_review
- 编辑评论：editor_review
- 最新产品: news_release
- 生产商:publisher
- 缩略图:screenshot
- 常见问题:faqs
- 关键词:keyword
- 博客:blog
- 论坛:.forum
3、常用class的命名：
(1) 颜色:使用颜色的名称或者16进制代码，如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
(2) 字体大小,直接使用”font+字体大小”作为名称，如
- .font12px { font-size: 12px; }
- .font9pt {font-size: 9pt; }
(3) 对齐样式,使用对齐目标的英文名称，如
- .left { float:left; }
- .bottom { float:bottom; }
(4) 标题栏样式,使用”类别+功能”的方式命名，如
- .barnews { }
- .barproduct { }
四、书写规范
1、排版规范
(1) 使用4个空格，而不使用tab或者混用空格+tab作为缩进；
(2) 规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；
单行形式书写风格的排版约束：
- 如果是在html中写内联的css，则必须写成单行；
- 每一条规则的大括号 { 前后加空格 ；
- 每一条规则结束的大括号 } 前加空格；
- 属性名冒号之前不加空格，冒号之后加空格；
- 每一个属性值后必须添加分号; 并且分号后空格；
- 多个selector共用一个样式集，则多个selector必须写成多行形式 ；
多行形式书写风格的排版约束：
- 每一条规则的大括号 { 前添加空格；
- 多个selector共用一个样式集，则多个selector必须写成多行形式；
- 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐；
- 属性名冒号之前不加空格，冒号之后加空格；
- 属性值之后添加分号；
2、属性编写顺序
- 显示属性：display/list-style/position/float/clear …
- 自身属性（盒模型）：width/height/margin/padding/border
- 背景：background
- 行高：line-height
- 文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
- 其他：cursor/z-index/zoom/overflow
- CSS3属性：transform/transition/animation/box-shadow/border-radius
- 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
- 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active
3、规则书写规范
- 使用单引号，不允许使用双引号;
- 每个声明结束都应该带一个分号，不管是不是最后一个声明;
- 除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写;
- 除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置;
- 每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性;
4、代码性能优化
- 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
- 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
- 注意选择器的性能，不要使用低性能的选择器。
- 禁止在css中使用*选择符。
- 除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。
- 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
- 如果是16进制表示颜色，则颜色取值应该大写。
- 如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。
- 如果没有边框时，不要写成border:0，应该写成border:none 。
- 尽量避免使用AlphaImageLoader 。
- 在保持代码解耦的前提下，尽量合并重复的样式。
- background、font等可以缩写的属性，尽量使用缩写形式 。
5、CSS Hack的使用
请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！
推荐使用下面的：
因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很
多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的
情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。
1、 IE6、IE7、Firefox之间的兼容写法：
写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS hack可写为：
.searchInput {
/*三者皆可*/
*background-color:#666 !important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
.searchInput {
/*通用*/
_background-color:#666;/*仅IE6可识别*/
}
写法三：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {}
*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可识别：
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以识别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都可以识别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
2、清除浮动：
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除
浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
6、字体规则
- 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)
- 字体粗细采用具体数值，粗体bold写为700，正常normal写为400
- font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置），不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值
- 为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置
-
为保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义。
（注：中文宋体的9pt和11pt和中文宋体12px 和14.7px 这是经过优化的字号建议考虑，另外黑体字或
者宋体字加粗时，建议选用11pt和14.7px 的字号比较合适。）
- 禁止在页面中出现 <font size=?> 标记，需要对字体设计时可使用标签的style属性或直接在样式表中实现。
7、选择DOCTYPE
XHTML 1.0 提供了三种DTD声明可供选择：
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写
法)。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种
DTD。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML
1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现
层的标识、元素和属性，也比较容易通过W3C的代码校验。
网页必须调用w3c规范
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
(解释: DTD是词汇表, CSS是数据的表现形式)
8、 指定语言及字符集
为文档指定语言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；
如：
常用的语言定义：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.0″ encoding=” utf-8″?>
针对老版本的浏览器的语言定义：
<meta http-equiv=”Content-Language” content=” utf-8″ />
为提高字符集，建议采用“utf-8”。
(解释: 如果网页格式是utf-8 ,最简单的方法就是在写样式表之前将这个css文件用记事本打开,然后另存为utf-8格式。
9、调用方法
方法1: <link rel="stylesheet" rev="stylesheet" href="css/52css_page.css" type="text/css" media="all" />
每个页面调用全局css和这个页面用单独用到的css
说明：（1）rel="stylesheet"和 rev="stylesheet" 为设置或获取对象和链接目的的关系。用来告诉浏览器
你link进来的是个样式表文件，（只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属
性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的
语义性更为完善。）
（2）media="all" 所有媒体类型的样式;media="screen"设置显示器的样式;media=" print"设置打印的样式。
方法2: <link rel="stylesheet" rev="stylesheet" href="css/common.css" type="text/css" media="all" />
将整个项目的css 都先用common.css引用,这样每个页面只需调用common.css即可
(解释: common.css 写法 : @import url("style.css"); @import url("header.css"); 依次排列。
注:@import引用的CSS会等到页面全部被下载完再被加载,速度相对会较慢。)
10、表格
建议：用百分比控制表格，并利用css的从属关系控制表格
解释：这里定义一个样式为div ，控制这个区域的表格为
.div table{100%; border-collapse:collapse;}
.div td{ height:20px; text-align:center; border:solid #000000 1px;}
11、空格
a) 不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码）。
b) 转意符号 ，也要尽量少使用，火狐和IE效果不一样
（解决：空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。）
12、缩进
排版中遇到需要进行首行缩进的时候，处理做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记。注意，不要省略 </p> 结束标记 。
13、行距
行距建议用百分比来定义，通常为120%或150%
14、 浏览器兼容
制作的代码应对以下浏览器兼容：
1.IE6
2.IE7
3.firefox2.0
在不同的浏览器中界面显示一致，不能出现错位及效果不一的结果。
15、目录命名
在网站根目录中开设images、common 、temp 三个子目录，根据需要再开设media 子目录。
1. images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等，可以根据需要开设子目录；
2. common 子目录中放css、js,、include 等公共文件；
3. temp 子目录放演示内容和样例，比如车型演示图片等等；(因temp文件过多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。)
4. media 子目录中放flash, avi, quick time 等多媒体文件。
建议: “media”子目录放在“images” 子目录方便CDN加速。
16、鼠标手势
在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，
即“cursor:pointer;”
17、基本全局样式
style.css 中的内容
*{ margin:0; padding:0;}
body{ font-family:"宋体",arial; font-size:12px; background:#fff; color:#000; }
img,a img{ border:0px;}
a img{ vertical-align:middle;}
div,form,img,ul,li,dl,dt,dd{padding:0px; margin:0px; }
td,p,div,li,select,input,textarea{font-family:"宋体";font-size:12px;}
td,p,div,li,input,textarea {word-break:break-all;}
select,input{vertical-align:middle;}
table,tr,td,th{ font-size:12px;}
ol,li{list-style-type:none;}
ul,li{list-style-type:none;}
h1,h2,h3,h4,h5,h6{ padding:0px; margin:0px;}
.css2007 { color: #333; }
* html .css2007 { color: #00ffff; }
*+html .css2007 { color: #999; }
a:link{ color:#000000; text-decoration: none;}
a:visited{color:#000000; text-decoration: none;}
a:hover{color:#ff0000; text-decoration: underline;}
a:active{ color:#999999; text-decoration: none;}
.clear { clear:both;}
.hidden { display: none;}
.nobreak {white-space:nowrap;}
.alpha {filter:alpha(opacity=30); -moz-opacity:0.3;}
.bgalpha {background:transparent;}
五、测试规范
1、了解浏览器特效支持
为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示（Y为支持，N为不支持）：
2、 设定浏览器支持标准
- A级－交互和视觉完全符全设计的要求
- B级－视觉上允许有所差异，但不破坏页面的整体效果
- C级－可忽略设计上的细节，但不防碍使用