最新最全的css规范指南

来源： http://jingyan.baidu.com/article/0f5fb099c204436d8234ea4b.html

结构目录:

1. 重定义浏览器默认样式

2. 全局常用 CSS 样式

3. 表单及表单元素

4. 页面布局以及通用的区块样式

5. 列表样式vwmy

6. 其他特定功能块

----------------------------------

CSS 样式模块的格式示例:

Name:模块名称

Level:级别(Global, Channel, Function)

Dependent:依赖关系,该模块必须依赖于何种模块

Sample:用法示例,或指出改模块所作用的直接页面

Explain:附加说明

Author:创建者 日期(两位数年月日时)

Last Modify:最终修改者 日期(两位数年月日时)

----------------------------------

CSS 写作注意事项:

1. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; }

2. 属性的书写顺序:

2.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:

位置:position,left,right,float

盒模型属性:display,margin,padding,width,height

边框与背景:border,background

段落与文本:line-height,text-indent,font,color,text-decoration,...

其他属性:overflow,cursor,visibility,...

2.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

3. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式

4. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix

5. 避免使用各种 CSS Hack,如需对 IE 进行特殊定义,请参阅下节“关于 CSS Hack 的说明”

6. 勿使用冗余低效的 CSS 写法,例如:

ul li a span { ... }

7. 慎用 !important

8. 建议使用在 class/id 名称中的词语

6.1. 表示状态:a->active

6.2. 表示结构:h->header,c->content,f->footer

6.3. 表示区域:mn->main,sd->side,nv-navigation,mu->menu

6.4. 表示样式:l-list,tab,p_pop

9. 开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理

----------------------------------

关于 CSS Hack 的说明:

所有 IE浏览器适用:.ie_all .foo { ... }

IE6 专用:.ie6 .foo { ... }

IE7 专用:.ie7 .foo { ... }

IE8 专用:.ie8 .foo { ... }

---------------------------------- */

/* = 关于团队合作的css命名规范 = */

常用的css命名规则

头:header                                   内容:content/container

尾:footer                                   导航:nav

侧栏:sidebar                                栏目:column

页面外围控制整体布局宽度:wrapper            左右中:left right center

登录条:loginbar

标志:logo                                    广告:banner

页面主体:main                                热点:hot

新闻:news                                    下载:download

子导航:subnav                                菜单:menu

子菜单:submenu                               搜索:search

友情链接:friendlink                          页脚:footer

版权:copyright                               滚动:scroll

内容:content                                 标签页:tab

文章列表:list                                提示信息:msg

小技巧:tips                                  栏目标题:title

加入:joinus                                  指南:guild

服务:service                                 注册:regsiter

状态:status                                  投票:vote

合作伙伴:partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)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

功能区:shop       标题:title          加入:joinus

状态:status       按钮:btn            滚动:scroll

标签页:tab        文章列表:list       提示信息:msg

当前的: current   小技巧:tips         图标: icon

注释:note         指南:guild          服务:service

热点:hot          新闻:news           下载:download

投票:vote         合作伙伴:partner    友情链接:link

版权:copyright

(四)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.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局,版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search

/*----------------------------------Author:camnpr-----------------------------*/

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img{padding:0;margin:0 auto;border:0;}

html,body{width:100%;height:100%;font-size:12px;font-family:"宋体";color:#333;background-color:#fff;}

ol,ul,li{list-style-type: none;}

table {border-collapse: collapse;border-spacing: 0;}

fieldset,img {border: 0;}

img{list-style:none;list-style-type:none;}

address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}

caption,th {text-align: left;}

h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}

h2{font-size:14px;font-weight:bold;}

q:before,q:after {content:”;}

abbr,acronym { border: 0;}

.clearbh:after{height:0;visibility:hidden;display:block;clear:both;content:" ";}

.clearbh{ clear:both;font-size:0; height:0; overflow:hidden;display:inline-block;}

/* fix IE hack \*/

*html .clearbh{height:1%;}

.left{float:left;}

.right{float:right;}

a.t_link1,a.t_link1:hover,a.t_link1:active{color:/*[text_color]*/#7f1400/*[/text_color]*/;}

/*--------------------------------------全局样式结束------------------------*/