css写规范.docVIP

此文档来自网络，不保证没有错误。 Form W3cT  CSS命名规则 页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。 骆驼式命名法： 正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如：mianNav footNav 1.通用命名规则： 所有ID或者class字母和数字之间用“_”连接，如: #col_1、#col_2 所有ID或者class两个单词之间的链接采用骆驼式命名法，如: mianNav、footNav 页面主体框架布局命名：Lay_1、Lay_2 、Lay_3 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N 栏目标题块命名一律采用title。元素标签采用:h4 如： div class=tith4标题/h4/div 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N 页面上按钮采用：btn_1、btn_2、btn_3、btn_N 广告区域：ad_1,ad_2,ad_3,ad_N 2.主框架命名规则： #header (页面头部) #main (页面主体) #footer (页面尾部) 3.通用命名规则： 主 体：main外　层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink版 权：copyright页　眉：header页　脚：footer标　题：title主导航：mainNav子菜单：subMenu注 释：note面包屑：breadcrumb 容 器：container内 容：content搜 索：search登 陆：Login当前状态：current 页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list 信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote 4.常用简写命名规则： bd：Body hd：Header fnt：字体 nav：导航 tb：表格 lnk：链接 ml/mr：margin-left/margin-right lst：列表 pl / pr / pd：padding-left/-right/padding col：栏目 frm：表单 con：内容 inf：信息 lg：Logo inp：Input ft：Footer btn：Button more：更多 fl /fr float:left/float:right tit 标题栏 spr 空行 t / d / mid / l / r：上 / 下 / 中 / 左 / 右 bdr：边 w：宽 h：高 网站布局和样式文件命名 网站样式文件命名和样式从属关系 全局CSS文件：global.css ，其中global.css包括cssreset（用来清除默认值）、全局性的一些属性值的定义 全局布局共用CSS文件：layout （网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS） 频道私有CSS文件：home.css （当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack） 网站布局： 网站采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。 两栏布局：主容器宽度为700px 副容器宽度为240px 三栏布局：依次为190px、510px、240px； 网站栏目： web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义： 全局框架通用样式 页眉 导航 搜索 页脚 内容列表通用样式 图片通用样式 表单通用样式 频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。 XHTML文档结构 1.Xhtml基本框架结构!DOCTYPE html PUBLIC -//W3C//DTD XHTML