CSS命名规范_电脑基础知识_IT计算机_专业资料.doc

css命名规范
一、引言 (2)
1.1目的 (2)
1.2 CSS编写注意事项 (2)
二、CSS命名规范 (2)
2.1文件命名规范 (2)
2.2公用样式申明： (2)
2.3框架架样式类名命名规范 (3)
2.4样式类别命名规范 (4)
2.5模块或文档命名规则 (4)
2.6色彩、字体、字号等命名规则 (5)
三、代码规范 (5)
3.1 HTML 代码 (5)
3.2 CSS ............................................................................................. 错误！未定义书签。

按住CTRL并单击目录可直接定位
引言
1.1目的
1. 制订本规范的目的是使CSS规范化、统一化。

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

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

当前为1.0版°
1.2 CSS编写注意事项
1. 在编写html的时候同时带上class屈性；
2. 无css样式时，可让css保留空白；当样式完成后，能直接看到效果，基本不用修改
htmlo
二、CSS命名规范
2.1文件命名规范
1. 当公用样式、框架样式内容不是很多时，整站全局样式、公共样式写在同一个css±, 命
名为global.css （常用，一般都写一个上就ok）；
2. 当公用样式、框架样式内容很多时，可以分为两个css文件，一个文档类的公用样式可
以命名为doc.css；一个为框架样式为global.css;
2.2公用样式申明：
1. 公用样式需保留部分，当然可以进行适当修改使用（比如字体、文字大小、颜色等）:
body{ margin :0px; padding :0px; borderzOpx; font-size :12px;
font-family:”宋体”；background
body, div, dl, dt, dd, ul, li, hi, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,
button, textarea, blockquote,p{ margin: 0; padding: 0; line-height:24px;）
img（ borderzOpx;}
a{ text-decoration:none; color:#333;}
a:hover{ text-decorationzunderline; color:#fOO;}
ul,dl{ list-style:none;}
table { border-collapse: collapse; border-spacing: 0; border-collapsezcollapse;
empty-cell:show;）
备注：这里清楚一些本身所带的样式结构、统一样式；
1）比如清除掉H标签的字体大小；
2）a标签只在鼠标经过的时候才有下划线；
3）图片边框为0
4）Table、p、button 标签没边距
5）统一行高、字体大小、字体
2.3框架架样式类名命名规范
global.CSS公用样式，以下是线框结构颜色（红框为class为wrap）
top
header
nav
left middle right main mainLt right
left mainRt footer
1. top：顶部模块（顶部横条用于补充、快捷导航或说明文字，可有可无）
2. header：头部模块（用于头部放logo等）
3. nav:主导航
4. wrap：主要内容容器
5. left：主要内容左边模块
6. middle：主要内容中间模块
7. right：主要内容右侧模块
8. main：主干模块
9. mainleft：靠左主干模块
10. mainright：靠右主干模块
11. footer：底部模块
2.4样式类别命名规范
1. logo：网站logo
2. nav：导航（只有一级菜单可用，有一级以上用下面规则）
3. menu：菜单
4. hidden：默认隐藏
5. menu-con:菜单内容
6. login：登录
7. register：注册
8. search:搜索
9. keyword：搜索关键字
10. range：搜索范围
11. tag-title：标签标题
12. tag-con：标签内容
13. title：标题
14. content：内容
15. list：列表
16. current：当前位置
17. icon：图标
18. comment：评论
19. more：更多
2.5模块或文档命名规则
规则：［页面・］模块-具体内容，中间用短横线区分
如1： college.css （未缩写）命名规则：
1）college-lt （专家答疑左侧）
2）college-md （专家答疑中问）
3）college-rt （专家答疑右侧）
如2： info.css （缩写）命名规则：info-left > info-left-list I A info-title
如3： info-left-list 1 （资讯页面的左侧的第一个列表）
2.6色彩、字体、字号等命名规则
1. red、bull……用颜色名称直接定义
2. cn、en 一般就区别中英文字体（一般也不怎么用到，按规定好的字体就可以了）
3. fl4px、fl6px、fl8px ........... 字体为14px、16px、18px （一般默认字体12px 可在规
定所有样式里面定义）
4. fontbold：字体加粗
5. fontitalic：斜体
•2.7部分内容英文单词
1. form表单（例：内容表单具体项content-form-address）
2. contact联系人
3. address 地址
4. price 价格
5. deta i I 明细
6. i nformat i on 消息
7. link链接
8. dash横线
9. remarks 备注
10. browse 浏览
11. source 来源
12. check 查看
三、代码规范
3.1 HTML 代码
1. 对页面添加class属性，样式都写在class属性上，id属性留个js 如：vdiv
class=”content”>v/div>
2. 如果有需要同时定义两个样式，中间用空格隔开
如：<div class=,,content buir,x/div>。