css规范文档

CSS编码规范CSS编码规范1 前⾔本⽂档的⽬标是使CSS代码风格保持⼀致，容易被理解和被维护。

虽然本⽂档是针对CSS设计的，但是在使⽤各种CSS的预编译器(如less、sass、stylus等)时，适⽤的部分也应尽量遵循本⽂档的约定。

2 代码风格2.1 ⽂件[建议] CSS⽂件使⽤⽆BOM的UTF-8编码。

解释：UTF-8 编码具有更⼴泛的适应性。

BOM 在使⽤程序或⼯具处理⽂件时可能造成不必要的⼲扰。

2.2 缩进[强制] 使⽤4个空格做为⼀个缩进层级，不允许使⽤2个空格。

⽰例：.selector {margin: 0;padding: 0;}2.3 空格[强制] 选择器与{之间必须包含空格。

⽰例：.selector {}[强制] 属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格。

⽰例：margin: 0;[强制] 列表型属性值书写在单⾏时，,后必须跟⼀个空格。

⽰例：font-family: Arial, sans-serif;2.4 ⾏长度[强制] 每⾏不得超过120个字符，除⾮单⾏不可分割。

解释：常见不可分割的场景为URL超长。

[建议] 对于超长的样式，在样式值的空格处或,后换⾏，建议按逻辑分组。

⽰例：/* 不同属性值按逻辑分组 */background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat 0 0;/* 可重复多次的属性，每次重复⼀⾏ */background-image:url(aVeryVeryVeryLongUrlIsPlacedHere)url(anotherVeryVeryVeryLongUrlIsPlacedHere);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88,94,124)),color-stop(0.52, rgb(115,123,162)));2.5 选择器[强制] 当⼀个 rule 包含多个 selector 时，每个选择器声明必须独占⼀⾏。

由于项目中‎编写文档结‎构、编写CSS‎的人员较多‎，并与程序员‎协同工作，所以就需要‎统一开发规‎范，根据XHT‎M l和CS‎S编织的规‎范和大多人‎的习惯，整理了以下‎针对本项目‎的一个简单‎的开发规范‎：一、CSS文件‎及样式命名‎1、CSS文件‎命名规范全局样式：globa‎l.css；框架布局：layou‎t.css；字体样式：font.css；链接样式：link.css；打印样式：print‎.css；2、CSS样式‎命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母‎开头，不能为纯数‎字。

为了开发后‎样式名管理‎方便，大家请用有‎意义的单词‎或缩写组合‎来命名，让同事一看‎就明白这样‎式大概是哪‎一块的，这样就节省‎了查找样式‎的时间，例如：头部样式用‎h eade‎r，头部左边，可以用he‎a der_‎l eft或‎h eade‎r_l,还有如果是‎列结构的可‎以这样——box _1of3‎(三列中的第‎一列)，box_2‎o f3 (三列中的第‎二列)、box _3of3‎(三列中的第‎三列)，其它的我就‎不一一举例‎了，大家按以上‎规律去命名‎就好。

下面列出一‎些常用的命‎名单词方便‎大家使用：（以后大家工‎作过程中慢‎慢把自己积‎累的单词都‎共享出来，那大家的命‎就会更加统‎一了，就不会有一‎义多词的情‎况了。

）容器：conta‎i ner/box头部：heade‎r主导航：m ainN‎a v子导航：subNa‎v顶导航：topNa‎v网站标志：logo大广告：banne‎r页面中部：m ainB‎o dy底部：foote‎r菜单：menu菜单内容：m enuC‎o nten‎t子菜单：subMe‎n u子菜单内容‎：subMe‎n uCon‎t ent搜索：searc‎h搜索关键字‎：keywo‎r d搜索范围：range‎标签文字：tagTi‎t le标签内容：tagCo‎n tent‎当前标签：tagCu‎r rent‎/curre‎n tTag‎标题：title‎内容：conte‎n t列表：list当前位置：curre‎n tPat‎h侧边栏：sideb‎a r图标：icon注释：note登录：login‎注册：regis‎t er列定义：colum‎n_1of‎3(三列中的第‎一列)colum‎n_2of‎3(三列中的第‎二列)colum‎n_3of‎3(三列中的第‎三列)二、id和cl‎a ss的使‎用及区别我们知道在‎样式表定义‎一个样式的‎时候，可以定义i‎d也可以定‎义clas‎s，例如：ID方法：#test{color‎:#33333‎3}，在页面中调‎用<div id="test">内容<div>CLASS‎方法：.test{color‎:#33333‎3}，在页面中调‎用<div class‎="test">内容<div>id一个页‎面只可以使‎用一次，class‎可以多次引‎用。

Css规范：1.Css文件可按模块或核心功能来划分，核心模块里面是一些常用css（公共部分应该提取出来）2.作为javascript钩子的样式使用js_作前缀如：<button class="js_add_to_cart add-item">Add to Cart</button>3.作为javascript向页面添加和删除的样式使用is_作为前缀如：<ul><li class=”is_active”></li><li></li></ul>4.css文件的命名规范，如首页front_page.css，统一以下划线分割，避免大写（文件必须使用UTF-8）5.导入css统一使用link标签，页内样式使用style，link 和style标签都应当放在head中6.应当尽量避免行内样式7.层级样式尽量保证最多不超过4层级8.Html代码也要注意缩进注释规范:1.每个css文件头部需要包含3.单行注释和多行注释4.区块注释(可选)Css命名规范：1.css 样式命名统一以下滑线分割如用户信息user_info 和bootstrap的（-）横杆区分开来2.使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名如：/* 不推荐: 无意义*/ #yee-1901 {}/* 不推荐: 与样式相关*/ .button_green {}.clear {}/* 推荐: 特殊性*/ #gallery {}#login {}.video {}/* 推荐: 通用性*/ .aux {}.alt {}3.ID和class命名越简短越好，只要足够表达涵义。

这样既有助于理解，也能提高代码效率。

如：/* 不推荐*/ #navigation {}.atr {}/* 推荐*/ #nav {}.author {}4.类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标 题：title
内 容：content
id一个页面只可以使用一次，class可以多次引用。
我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？
页面存在多个相同的ID影响就是不能通过W3的校验。
在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
2、CSS样式命名规范
本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

经营频道CSS规范前言本规范主要描述：css文件命名规则、css类命名规则、通用的css头和html 布局命名规则。

本规范适用范围：河北新闻网经营频道技术的频道和专题的制作。

本规范适用时间：2012年度书写人：李琳时间：2012-2-15css文件命名为了便于网页的管理，我们建议将页面的css文件统一命名为：style****.css，其中的****为日期编号（如：2月14号出的css文件命名为：style0214.css）。

没有加上年份是因为我认为对于我们现有的频道1年内肯定会进行大规模的改版，没有必要加上年份标记。

此css文件放在到网页模板文件相关文件夹的根目录中便于以后的查找。

html布局命名规则分析现有的频道和专题我们可以看出常用的布局有：头尾中（左右）布局、头尾中（左中右）布局、左右（上中下）布局、上中下布局。

头尾中（左右）布局头尾中（左中右）布局左右（上中下）布局上中下布局我们定义div名称为：头：header尾：footer中：center左中右等级均分（左：area-rank、中：area-main、右：area-sub）中右等级高左等级低（中右：area-main（中左：main-col-l、中右：main-col-r）、左：area-sub）左等级高右等级低（左：area-main、右：area-sub）css类命名规则css类的命名最好是描述性单词或者单词前缀，如果相同命名的可以在后面加上数字编号如（main-col-1，main-col-2）来区分。

如果一个div上需要class 和id分别描述的话，class的命名是以结构布局为主，id的命名是以功能说明为主（如：<div id="sports" class="mod wgt-tab">）。

对于网页中的各类型新闻块在拆分的时候需要单独处理，保证div一个分区中的新闻内容相对统一。

网站制作规范(css篇相关)前言⌝本规范针对网页开发人员编写，在阅读前请先了解一些XHTML、CSS的基本知识，以方便理解编写的内容。

本规范的目的是为了方便大家在开发过程中，通用的、易于维护、高效率的制作WEB界面。

由于本规范编写者个人水平的局限，可能会出现错误与个人习惯差异的地方，敬请个人读者多提宝贵见意来完善本规范的内容。

一命名规则：01. 目录：⌝除非有特殊情况外，目录应使用小写字母(包含数字下划线) 的组合，并且以字母开头其中不得包含汉字、空格与特殊字符，否则在网页读取过程中可能会出现错误；目录命名请尽量以英文⌝为指导，不到万不得已不要以拼音作为目录名称，经验证明用拼音命名的目录往往连一个月后的自己都看不懂；⌝以下为一些常用目录的推荐英文名称：images 放网站不同栏目的页面都要用到的公共图片medias 放flash、avi、quick time 等多媒体文件commons 放js、include 等公共文件styles 放css 样式文件temps 放一些策划与设计中使用的原始资料与备份文件⌝在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和medias 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。

⌝temps目录中的文件与网上无关，请杜绝非内容的上传。

02. 文件：除非有特殊情况外，文件命名应使用小写字母(包含数字⌝下划线) 的组合，并且以字母开头其中不得包含汉字、空格与特殊字符；文件命名请尽量以英文⌝为指导，不到万不得已不要以拼音作为目录名称；内容不同但属于同类的，且需定期更新的页面文件或文本采用，请使用⌝名称缩写＋(年份)＋月份＋日期＋序号，如：detail_news060101.html⌝以下为一些常用文件命名的格式推荐：首页类文件index(_xxxxxx).后缀名[index_wealth.html]列表类文件list(_xxxxxx).后缀名[list.jsp]内容类文件detail(_xxxxxx).后缀名[detail.jsp]表单类文件post(_xxxxxx).后缀名[post.jsp]表单反馈类文件result(_xxxxxx).后缀名[result.jsp]图片类文件文件类型_xxxxx(图片序号)(背景).后缀名(详见以下)广告图片动画类文件xxxxxx_widthxheight.后缀名(详见以下)03. 图片文件：⌝透明的1x1像素图片名称为：c.gif图片的分类及命名规则：⌝广告类banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf标志类logo logo.gif | logo_newyear2007.gif按钮类button button_01.gif | button_01bg.gif菜单类menu menu_aboutus.gif | menu_job.gif装饰类pic pic_01.gif | pic_02.gif栏目类title title_top01.gif | title_top02bg.gif二设计规范：01. 整体规范：⌝主体框架页面、内容页尽量采用方型结构。

CSS规范1.0版2009-10-10一、总则 (2)1.1目的及效力 (2)1.2 CSS书写原则 (2)二、样式重置 (2)2.1重置代码 (2)2.2注意事项 (3)三、CSS书写顺序 (3)3.1样式 (3)3.2注意事项 (3)四、CSS Hack (4)4.1样式 (4)4.2书写顺序 (4)4.3注意事项 (4)按住CTRL并单击目录可直接定位一、总则1.1目的及效力1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人阅读、修改，使之开发效率提高。

2.页面制作人员必须严格遵守此规范。

3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。

4.本规范随时根据需要修订，请注意版本号的变化。

当前为1.0版。

1.2 CSS样式书写总规范1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据实际情况进行命名、细分。

2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。

3.书写样式时必须先进行样式重置。

4.书写样式时必须按照规定的顺序。

5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不同浏览器去写不同的CSS。

6.书写样式时可以缩写的样式推荐使用缩写。

二、样式重置2.1重置代码/* 样式重置*/body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; }form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }img { border:0; vertical-align:absbottom; }ul,li { list-style-type:none; }input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/.clear { height:0px; font-size:0px; line-height:0px; overflow:hidden; clear:both; } .overflow { overflow:auto; }.nobg { background:none!important; }/* 默认文字链接样式*/a { color:#333; text-decoration:none; }a:hover { color:#285898; text-decoration:underline; }2.2注意事项1.尽量不要采用* { margin:0; padding:0; }2.样式重置代码中已经包含常见情况，后期如有添加请按照CSS书写顺序添加。

最近开始着手网站的改版，因为是团队协作，所有需要注意很多地方，也为了让我们的代码更加规范特收集了一些Web前端开发规范规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名. html书写规范1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk" />, 书写时利用IDE实现层次分明的缩进;2. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script>4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;7. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;8. 尽可能减少div嵌套, 如<div class="box"& gt;<div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;9. 书写链接地址时, 必须避免重定向，例如：href="/", 即须在URL 地址后面加上“/”；10. 在页面中尽量避免使用style属性,即style="…";11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p> 姓名: <input type="text" id="name" name="name" /></p>须写成:<p&gt;<label for="name">姓名: </label><input type="text" id="name" /></p>12. 能以背景形式呈现的图片, 尽量写入css样式中;13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & »(») 等等;16. 书写页面过程中, 请考虑向后扩展性;17. class & id 参见 css书写规范.css书写规范1. 编码统一为utf-8;2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i 书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):a, 通过从属写法规避, 示例见d;b, 取父级元素id/class命名部分命名, 示例见d;c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id="mainnav"></div>中加入新的div元素,按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,样式写法: #mainnav .firstnav{.......}按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,样式写法: .main_firstnav{.......}7. css属性书写顺序, 建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应的 top,right,bottom,left）＆ float & clear ＆ visibility ＆ overflow；自身属性主要包括:width & height & margin & padding & border & background;文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content;我所列出的这些属性只是最常用到的, 并不代表全部;8. 书写代码前, 考虑并提高样式重复使用率;9. 充分利用html自身属性及样式继承原理减少代码量, 比如:<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可实现日期居右显示10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite 按模块制作;12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , b ase.css文件中我会初始化表格样式)13. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" />兼容ie8;14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;16. 减少使用影响性能的属性, 比如position:absolute || float ;17. 必须为大区块样式添加注释, 小区块适量注释;18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;JavaScript书写规范1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;另, 要求变量集中声明, 避免全局变量.4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();6. 命名语义化, 尽可能利用英文单词或其缩写;7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;9. 代码结构明了, 加适量注释. 提高函数重用率;10. 注重与html分离, 减小reflow, 注重性能.图片规范1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;2. 图片格式仅限于gif || png || jpg;3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.注释规范1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;2. css注释: 注释格式 /*这儿是注释*/;3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;开发及测试工具约定建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:1. 不可利用IDE的视图模式'画'代码;2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;3. 编码必须格式化, 比如缩进;测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;建议测试顺序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 建议安装firebug及IE Tab Plus插件.其他规范1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想...。

CSS编写和命名规范在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。

由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。

特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。

第一节CSS样式文件的命名建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：第二节CSS选择符的命名所有选择符必须有小写英文字母或“_”下划线组成；样式名必须是表示该样式的大概含义；参考后面的“样式命名参考”。

当定义的样式名比较复杂时用下划线把层次分开；比如：dcrm_logo{ …} dcrm_logo_ico{…}第三节图片的命名与书写图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。

第四节CSS注释书写规范4.1 提示和标签信息注释这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。

这种应用简洁性最为重要。

注意：注释内容和前面样式语句间有3个空格，后面1个空格4.2 修改样式注释（时间和相关人员）4.3 文档结构注意：相对独立的2段内容之间空1行5.1 建立样式表索引第五节 CSS布局编码标准和建议样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS 注释文本写在 main.css 中。

给出该CSS 文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）5.2 命名锚点的使用命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS 文件获得良好的组织。

命名锚点一般也是书写在样式表头部的索引注释中。

CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。

在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。

css 命名规范CSS命名规范是一种约定俗成的标准，用于统一命名CSS类、ID、选择器等，以确保代码的一致性和可维护性。

以下是一个约1000字的CSS命名规范的例子：一、命名规则：1. 采用英文小写字母、数字或连字符（-），不使用大写字母、下划线（_）或其他特殊字符。

2. 以字母开头，不以数字开头。

3. 使用有意义的名称，避免使用缩写或简写。

命名应反映元素的功能或用途。

4. 使用短小、精准的名称，不使用冗长或复杂的名称。

二、选择器命名：1. 使用有意义的名称来定义选择器。

例如，使用类名来表示元素的特征或功能。

（例如：.header，.sidebar）2. 避免使用无意义或单一的选择器名称。

可以使用多个类名来表示一个元素的多个特征或功能。

（例如：.primary-button.button）3. 不要使用ID选择器来定义样式，ID选择器具有较高的优先级，会导致样式难以重用和维护。

三、类名命名：1. 使用小写字母或连字符来分隔单词。

例如：.nav-bar，.info-box。

2. 使用有意义的名称来描述元素的功能或用途。

例如：.card，.container。

3. 使用简洁明了的名称，不要出现冗长或复杂的类名。

4. 避免使用HTML标签名称作为类名，以免混淆和难以维护。

四、ID命名：1. 使用小写字母或连字符来分隔单词。

例如：#home-page，#top-header。

2. ID命名应尽量避免使用，因为ID具有较高的优先级且唯一性，会导致样式难以重用和维护。

五、样式规则：1. 使用短小、精确的样式规则名称，可以简洁明了地反映样式的用途或作用。

（例如：.bold，.highlight）2. 选择器和样式命名应保持一致性，以提高代码的可读性和维护性。

3. 避免使用内联样式，尽量使用外部CSS样式文件来管理样式规则，以便代码的复用和维护。

六、注释规范：1. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。

css编写规范⼀、注释规范1、⽂件顶部注释（推荐使⽤）Css代码1. /*2. * @description: 中⽂说明3. * @author: name4. * @update: name (2013-04-13 18:32)5. */2、模块注释模块注释必须单独写在⼀⾏Css代码1. /* module: module1 by 张三 */2. …3. /* module: module2 by 张三 */3、单⾏注释与多⾏注释单⾏注释可以写在单独⼀⾏，也可以写在⾏尾，注释中的每⼀⾏长度不超过40个汉字，或者80个英⽂字符。

Css代码1. /* this is a short comment */多⾏注释必须写在单独⾏内Css代码1. /*2. * this is comment line 1.3. * this is comment line 2.4. */4、特殊注释⽤于标注修改、待办等信息Css代码1. /* TODO: xxxx by name 2013-04-13 18:32 */2. /* BUGFIX: xxxx by name 2012-04-13 18:32 */5、区块注释对⼀个代码区块注释（可选），将样式语句分区块并在新⾏中对其注释。

Css代码1. /* Header */2. /* Footer */3. /* Gallery */⼆、编码规范1. tab键⽤（必须）四个空格代替2. 每个样式属性后（必须）加 ";"⽅便压缩⼯具"断句"。

3. Class命名中（禁⽌）出现⼤写字母，（必须）采⽤” - “对class中的字母分隔，如：/* 正确的写法 */.hotel-title {font-weight: bold;}/* 不推荐的写法 */.hotelTitle {font-weight: bold;}⽤"-"隔开⽐使⽤驼峰是更加清晰。

CSS规范文稿2009.1.51W3C规范 (3)2编码 (3)3标题 (3)4文件格式 (4)5路径 (4)6标签 (4)7CSS文件定义 (4)7.1全局样式：（请大家讨论最终结果） (5)7.2功能样式：（此部分样式是否含入全局样式） (6)7.3栏目样式： (7)8CSS样式定义 (7)8.1面向对象定义CSS (7)8.2CSS样式排序 (8)9CSS样式命名 (9)10CSS语法 (9)10.1设置字体 (9)10.2加粗 (10)10.3空格 (10)10.4缩进 (10)10.5行距 (11)10.6表格 (11)10.7按钮 (12)10.8链接 (12)10.9中英排版 (13)11代码优化 (13)12代码检查 (13)13解决浏览器兼容问题的Hack方法 (13)14附件 (14)14.1各浏览器对CSS的解析认识差异（附件一） (14)14.2证券常用中英文对照表（附件二）..................................... 错误！未定义书签。

14.3网页常用中英文对照表（附件三） (18)CSS规范文稿为提高页面代码质量，提高工作效率和网站后期的可维护性，以及改善用户体验，充分发挥团队协作的潜能，而补充的以下网页制作规范，希望能通过规范的制作，使网站前端工作从效果图设计到静态页制作逐步走向产品化、模块化的专业制作体系，也使网站更好的发挥兼容性，以增强各种浏览器的用户体验，提高页面代码的可读性，为更好的配合程序开发，从而节约一定的网站开发时间。

具体规范事项如下：请大家指正和补充。

1W3C规范网页开头必须调用w3c规范：DTD文档类型定义：(Document Type Definition)DTD 是一套关于标记符的语法规则。

它是XML1.0版规格得一部分,是XML文件的验证机制,属于XML文件组成的一部分。

DTD是一种保证XML文档格式正确的有效方法，可以通过比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。

HTML／CSS代码开发规范文档一、引言为保证团队内部的代码质量和项目的可维护性，制定本规范文档，以规范HTML/CSS代码的书写和组织结构。

二、命名规范1.使用有意义的命名：变量、类名、ID等命名应具有描述性，能够清晰表达其用途或含义。

2.使用小写字母：统一使用小写字母命名。

3.使用连字符或下划线：命名时使用连字符（-）或下划线（_）作为单词之间的分隔符。

4.避免名称冲突：确保命名的唯一性，避免重复使用相同的名称。

三、HTML规范2.缩进与格式化：使用2个空格缩进，并保持代码整洁格式化，方便阅读和维护。

5.注释：在代码中添加注释，清晰描述代码的作用和用途。

8.避免使用行内样式：尽量避免使用行内样式，将样式集中在外部样式表中。

四、CSS规范1. 样式文件命名：样式文件统一使用小写字母，并以"-"分隔单词，如"style.css"。

2.缩进与格式化：样式文件使用2个空格缩进，并保持代码整洁格式化。

3. 使用简写属性：尽量使用简写属性来减少代码量，例如：margin、padding、font等。

4. 属性书写顺序：按照以下顺序书写CSS属性：定位（position）、盒模型（margin、padding、border）、文本（font、text）、背景（background）、浮动（float）、尺寸（width、height）等。

5.分号与括号：每个属性声明末尾都加上分号，并使用大括号包裹属性块。

6. 前缀属性：为增加浏览器兼容性，使用浏览器前缀属性，例如：-webkit、-moz、-o、-ms等。

7. class和ID选择器：尽量使用class选择器，避免使用ID选择器，以提高样式的通用性和复用性。

8.媒体查询：根据页面布局和各个设备的分辨率，使用媒体查询来优化页面的响应式效果。

五、版本控制与文档维护1. 版本控制：使用Git等版本控制工具来管理代码，并在每次修改后提交到版本库。

CSS规范∙∙附件:1∙添加者：周艳艳, 最后更新者：周艳艳于八月16, 2012 (查看变更) CSS命名规范一．文件命名规范全局样式：public.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：message……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框"则应命名为“searchInput"、“搜索图标"命名这“searchIcon"、“搜索按钮"命名为“searchBtnCSS书写规范及方法一. 常规书写规范及方法1. 选择HTML5中的文档声明：<!DOCTYPE HTML>2. 指定语言及字符集：为文档指定语言：<html xmlns="/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"。

CSS规范css 指层叠样式表 (Cascading Style Sheets)，定义如何显⽰ html 元素，但由于 css 天⽣全局性，随着项⽬复杂度增加，极易出现样式覆盖以及其它的问题。

1. 通⽤规范⽂件编码为了避免内容乱码，统⼀使⽤ UTF-8 编码保存。

样式⽂件第⼀⾏设置字符集为 UTF-8@charset 'UTF-8'; /* 注意字符集说明应在第⼀⾏ */缩进规范统⼀使⽤两个空格缩进2. 初始化规范各浏览器⼚商的初始样式都不⼀样，为了消除不同浏览器对 html ⽂本呈现的差异，我们常引⼊⼀些初始化样式，如 normalize.css、reset.css 等，当对于这些样式的引⼊我们需要注意下⾯⼏种情况：不使⽤ UI 框架，由零开始搭建从零开始搭建的情况下，进⾏样式初始化，在项⽬最开始的时候就引⼊，不要在开发中途引⼊，避免不可预知的样式冲突。

不使⽤ UI 框架，但使⽤了部分插件插件往往都带有⾃⼰特有的样式，如富⽂本插件，在开发中途使⽤初始化样式有可能导致样式错乱，所以不建议⼤范围的初始化，只需简单进⾏初始化即可。

* {padding: 0;margin: 0;}已使⽤ UI 框架在明确知道需要使⽤ UI 框架的时候，不使⽤第三⽅初始化样式，不管是在项⽬开始前还是进⾏中，因为 UI 框架⼀般都⾃带初始化，额外引⼊了反⽽会影响原有效果。

3. 代码规范命名规范class 应以功能或内容命名，不以表现形式命名 class 与 id 单词字母⼩写，多个单词组成时，采⽤中划线-分隔使⽤唯⼀的 id 作为 JavaScript hook, 同时避免创建⽆样式信息的 class代码风格统⼀使⽤展开格式，不推荐紧凑格式/* 展开格式 */.test {color: red;font-size: 12px;}/* 紧凑格式 */.test {color: red;font-size: 12px;}统⼀两个空格缩进属性声明结尾加分号选择器与左括号之间⼀个空格，属性冒号后⼀个空格/* 推荐 */.test {color: red;font-size: 12px;}/* 不推荐 */.test {color: red;font-size: 12px;}不要为 0 指明单位颜⾊值和属性值⼗六进制数值能⽤简写的尽量⽤简写/* 推荐 */.test {color: #fff;}/* 不推荐 */.test {color: #ffffff;}引号使⽤url() 、属性选择符、属性值使⽤单引号。

css规范⽂档CSS书写顺序*{/*显⽰属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*⽂字*/colorfontcontent/*边框背景为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来⽅便，哈哈。

*/ borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-position colorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：⼀．⽂件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；　链接样式：link.css；　打印样式：print.css；主要的 master.css专栏 columns.css主题 themes.css主要的 master.css模块 module.css基本共⽤ base.css表单 forms.css补丁 mend.css　⼆．页⾯结构容器: container页头：header内容：content页⾯主体：main页尾：footer栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center　三．导航导航：nav主导航：mainbav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu摘要: summary四．功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标签页：tab⽂章列表：list提⽰信息：msg当前的: current⼩技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightContainer div #container 容器Layout #layout 布局Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav ⼆级导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏Main div #main 页⾯主体Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输⼊框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap ⽹站地图List #list 列表Home page #homepage ⾸页Sub page subpage ⼆级页⾯⼦页⾯Toolbar #tool, #toolbar ⼯具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态Container div #container 容器Header or banner div #header 页头部分Main or global navigation div #mainNav 主导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏Main div #main 页⾯主体Content div #content 内容部分The main content area #contentMain 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Sub-navigation list #subNav ⼆级导航Search input #searchInput 搜索输⼊框Search output #searchOutput 搜索输出和搜索结果相似Search #search 搜索Search results #searchResults 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #brandingLogo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Status #status 状态Products .products 产品Products prices .productsPrices 产品价格Products description .productsDescription 产品描述Products review .productsReview 产品评论Editor's review .editorReview 编辑评论New release .newsRelease 最新产品Publisher .publisher ⽣产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛五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 { }/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、⿏标⼿势：在XHTML标准中，hand只被IE识别，当需要将⿏标⼿势转换为“⼿形”时，则将“hand”换为“pointer”，即“cursor:pointer;”10．注释书写规范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;}/*=====搜索条结束=====*/3．协助注释⾮作者维护时所加⼊的表⽰修改时间、修改⼈等标识信息。

矿产资源开发利用方案编写内容要求及审查大纲
矿产资源开发利用方案编写内容要求及《矿产资源开发利用方案》审查大纲一、概述
㈠矿区位置、隶属关系和企业性质。

如为改扩建矿山, 应说明矿山现状、
特点及存在的主要问题。

㈡编制依据
(1简述项目前期工作进展情况及与有关方面对项目的意向性协议情况。

(2 列出开发利用方案编制所依据的主要基础性资料的名称。

如经储量管理部门认定的矿区地质勘探报告、选矿试验报告、加工利用试验报告、工程地质初评资料、矿区水文资料和供水资料等。

对改、扩建矿山应有生产实际资料, 如矿山总平面现状图、矿床开拓系统图、采场现状图和主要采选设备清单等。

二、矿产品需求现状和预测
㈠该矿产在国内需求情况和市场供应情况
1、矿产品现状及加工利用趋向。

2、国内近、远期的需求量及主要销向预测。

㈡产品价格分析
1、国内矿产品价格现状。

2、矿产品价格稳定性及变化趋势。

三、矿产资源概况
㈠矿区总体概况
1、矿区总体规划情况。

2、矿区矿产资源概况。

3、该设计与矿区总体开发的关系。

㈡该设计项目的资源概况
1、矿床地质及构造特征。

2、矿床开采技术条件及水文地质条件。