CSS书写规范.doc-道客多多_道客多多docduoduo.com

资源描述

1、前端 CSS 和 XHTMLCSS 命名规则页面制作最重要的就是 CSS，定义合理的 CSS 命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于 CSS 的命名我们采用骆驼式命名法。骆驼式命名法：正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如：mianNav footNav1.通用命名规则：1) 所有 ID 或者 class 字母和数字之间用“_”连接，如: #col_1、#col_22) 所有 ID 或者 class 两个单词之间的链接采用骆驼式命名法，如:

2、mianNav、footNav3) 页面主体框架布局命名：Lay_1、Lay_2 、Lay_34) 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N5) 栏目标题块命名一律采用 title。元素标签采用: 如：标题6) 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N7) 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N8) 页面上按钮采用：btn_1、btn_2、btn_3、btn_N9) 广告区域：ad_1,ad_2,ad_3,ad_N2.主框架命名规则：1) #header (页面头部)2) #mai

3、n (页面主体)3) #footer (页面尾部)3.通用命名规则：主体：main外层：wrap功能条：funcBar主导航：mainNav前端 CSS 和 XHTML子导航：subNav友情链接：friendLink版权：copyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：sub

4、nav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）前端 CSS 和 XHTML状态：status按钮：btn投票：vote4.常用简写命名规则：bd：Body hd：Header fnt：字体 nav：导航 tb：表格 lnk：链接 ml/mr：margin-left/margin-right lst：列表 pl / pr / pd：

5、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 和 XHTML网站布局和样式文件命名1. 网站样式文件命名和样式从属关系1) 全局 CSS 文件：global.css ，其中 global.css 包括 cssreset（用来清除默认值

6、）、全局性的一些属性值的定义2) 全局布局共用 CSS 文件：layout （网站布局容器的共用的 CSS 部分：页眉、页脚、搜索共用 CSS）3) 频道私有 CSS 文件：home.css （当前频道或者页面的 CSS 独有属性值以及为了兼容不同的浏览器的所采用的 hack）2. 网站布局：网站采用目前最流行的 960 宽度布局；布局类型分为 3 栏和 2 栏两种方式。两栏布局：主容器宽度为 700px 副容器宽度为 240px三栏布局：依次为 190px、510px、240px；3. 网站栏目：web 页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以 c

7、ommon 样式文件中按照如下规则定义：1) 全局框架通用样式2) 页眉3) 导航4) 搜索5) 页脚6) 内容列表通用样式7) 图片通用样式8) 表单通用样式4. 频道私有 CSS 文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。前端 CSS 和 XHTMLXHTML 文档结构1.Xhtml 基本框架结构图书门户2.Xhtml 标准的 Doctype 声明。图书门户采用 XHTML1.0 Transitional 标准前端 CSS 和 XHTML3. 编码声明。默认使用 UTF-8 编码。4. meta，title 等处填写相应的关键词

8、和描述。标题5.基本结构:#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前端 CSS 和 XHTMLWeb 页面切图和 CSS 注意事项1. Web 页面切图1) Web 页面的切图类型可以归纳为背景（bg）、列表项目的符号（li）、内容中插入的图片（pic）、按钮（btn）、图标等几种形式（ico）。2) 建议把用

9、CSS 背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。3) 除页面头部大图保存格式为 JPG 外，其他图片一律采用 gif 格式2. CSS 相关事项：1) 所有的 xhtml 代码小写 2) 每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上“/“。如：、3) 所有的属性必须用引号“括起来4) 文档类型必须声明，禁止文档类型乱用5) 所有到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。采用继承方式，否则个性定义就会失效。10) Font 的缩写为：样式粗细大小行高字体（font:italic bold 1

10、2px/30px “simsun”）11) class 和 id 选择器，id 只能在同一页面中不能重复适用12) 给页面的布局和重要的区块加上注释,如： 13) 给图片加上 alt 标签，利于搜索引擎的查询。 14) 所有的标签必须进行合理的嵌套。前端 CSS 和 XHTML15) 页面的实现过程中出现的问题是有规律的几种：3 个像素的 bug、双倍浮动空白边距、文字溢出 bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css 的 hack 应该尽量避免采用。16) 尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少 css 的代码的重复定义。17)

11、网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行，把版式破坏，这样我们就要参考以下样式：word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值。18) 文字过长要出现省略号样式如下：white-space: nowrap; text-overflow:ellipsis; overflow:hidden;19) 一个完整的表单应该包括：20) 页面上的列表元素除了 ul ol 外，我们还可以采用 dl dt dd 组合。21) 合理采用多重样式定义可以有效的增加样式的重用性。22) 我们要清楚那些标签是块状元素和内联元素。一般我们可以把

展开阅读全文