css规范大全

一、文件规范

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、文件顶部注释（推荐使用）

1. /*
2. * @description: 中文说明
3. * @author: name
4. * @update: name (2013-04-13 18:32)
5. */

2、模块注释 
模块注释必须单独写在一行

1. /* module: module1 by 张三 */
2. …
3. /* module: module2 by 张三 */

3、单行注释与多行注释 
单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。

1. /* this is a short comment */

多行注释必须写在单独行内

1. /*
2. * this is comment line 1.
3. * this is comment line 2.
4. */

4、特殊注释 
用于标注修改、待办等信息

1. /* TODO: xxxx by name 2013-04-13 18:32 */
2. /* BUGFIX: xxxx by name 2012-04-13 18:32 */

5、区块注释 
对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。

1. /* Header */
2. /* Footer */
3. /* 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{width:100%; border-collapse:collapse;}

.div td{ height:20px;  text-align:center;  border:solid #000000 1px;}

11、空格

a)  不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码）。

b)  转意符号&nbsp，也要尽量少使用，火狐和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级－可忽略设计上的细节，但不防碍使用