CSS书写规范_.docVIP

CSS书写规范 一、css命名规则页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。 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。如：div class=tit 页面所有图片区域全部采用：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：高 网站栏目： web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义： 全局框架通用样式 页眉 导航 搜索 页脚 内容列表通用样式 图片通用样式 表单通用样式 2.基本结构: #header #globalNav #logo #loginBar #mainNav #search #main #lay_1: (布局容器1) #col_1 (内容块1) #col_2 (内容块2) #lay_2: (布局容器2) #col_3 (内容块3) #col_4 (内容块4) #footer: #link #copyright Web页面切图和CSS注意事项 Web页面切图 Web页面的切图类型可以归纳为背景（bg）、列表项目的符号（li）、内容中插入的图片（pic）、按钮（btn）、图标等几种形式（ico）。 建议把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。 除页面头部大图保存格式为JPG外，其他图片一律采用gif格式 2、CSS相关事项： Font的缩写为：样式 粗细 大小 行高 字体 （font:italic bold 12px/30px “simsun”） 页面的实现过程中出现的问题是有规律的几种：3个像素的bug、双倍浮动空白边距、文字溢出bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。 尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少css的代码