Rumah >hujung hadapan web >html tutorial >XHTML&CSS 标准化文档_html/css_WEB-ITnose
XHTML&CSS标准化文档
20100329更新
目 录
第一章 XHTML标准... 2
一、 XHTML文档结构... 2
1、 定义文档类型:... 2
2、 声明命名空间:... 2
3、 编码类型:... 2
二、 XHTML书写规范... 3
1、 语法规范:... 3
2、 注释规范:... 3
第二章 CSS标准化及CSS框架... 4
一、 CSS文档统筹与编码规范... 4
1、 CSS文档统筹:... 4
2、 CSS书写的规范:... 5
3、 属性的组织:... 6
4、 A属性排列顺序:... 6
5、 CSS命名规则:... 7
6、 CSS命名方法:... 7
二、 Reset CSS. 10
三、 清除浮动方法... 11
第三章 通用规范... 12
一、 文档结构和命名规范... 12
1、 Style文件命名规范:... 13
2、 Images规范:... 13
3、 Javascript规范:... 14
第四章 项目制作完成... 15
一、 代码的优化(制作部分)... 15
二、 夸浏览器兼容性... 16
1、 测试代码在各主流浏览器兼容性:... 16
三、 项目的上传... 16
第五章 页面制作中的SEO规范... 17
一、 页面制作中的SEO规范... 17
附录:设计规范... 18
一、 页面设计尺寸... 18
二、 字体规定... 18
三、 字号规定... 18
四、 行高规定... 18
五、 图片尺寸规范... 19
六、 文本颜色... 20
七、 切图规则... 20
第一章 XHTML标准
过渡型DTD(XHTML 1.0 Transitional)是比较理想的选择。因为这种DTD允许使用描述性的元素和属性,也比较容易通过W3C的代码校验。
定义文档类型:过渡型(Transitional) |
|
xmlns是XHTML NameSpace的缩写,中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD,如果不指明各自的命名空间,机会出现语义混淆现象。
声明命名空间 |
编码类型:GB2312
语法规范 |
1、 XHTML对大小写敏感,所有的元素和属性都必须小写。 2、 所有的属性必须用引号””括起来。 3、 XHTML要求有严谨的结构,因此所有的标签都必须合理嵌套 4、 所有的属性必须被赋值 5、 所有的特殊符号都用编码表示,例如小于号必须被编码为“<” 6、 不要在注释内容中使用“--”, “--”只能出现在XHTML注释的开头和结结。 7、 XHTML规范废除了name属性,而使用id属性作为统一的名称。 |
代码的注释规范举例 |
内容 |
第二章 CSS标准化及CSS框架
CSS文档统筹(产品类) |
1、 Reset样式表:重设浏览器的样式 2、 Base样式表:页面公共的布局样式 3、 Module样式表:小模块、小版块样式表的制定。 |
CSS文档统筹(发布页面类) |
1、 重设浏览器的样式、页面公共的布局样式、小模块、小版块样式表,全部写入style.css一个文件中。 |
每个版块用注释加以说明,对日后维护提供很大的方便。
代码的注释规范 |
/*d1注释说明*/ #id1{ } #id1 .class{ } /* id2注释说明*/ #id2{ } #id2 .class{ } |
根据属性在布局中的重要性,建议先声明布局属性,然后定义盒模型属性,最后定义排版属性。
按主次关系组织 |
第一步:如果需要的话,先声明布局属性(确定元素的显示),例如这些属性: float display position … 第二步:如果需要的话再声明盒模型属性(确定元素的形状),例如这些属性: width height margin padding border background… 第三步:如果需要的话最后声明版式属性(确定元素的内容显示),例如这些属性: color font font-size font-weight text-align… |
A的属性按照:
a{}
a:link{}
a:visited{}
a:hover{}
a:active{}
这种排列顺序
CSS命名规则应该遵循一定规则,简单的说就是要求直观、简洁、一目了然,方便后期维护和交流。
CSS命名规则 |
1、 要区分大小写:在命名CLASS和ID时全部使用小写字母 2、 要注意合法性:CSS命名以字母开头,可以连接数字、字母、下划线、连接符。 3、 语义定义明确易懂:CSS命名要词必达意,名称要反映用途和相关信息,同时要简短,不要附带任何冗余信息。 |
下表为常用命名举例:
布局常用名称: | |||
名称 | 说明 | 名称 | 说明 |
wrap | 外套 | container | 容器 |
site | 站点 | content | 内容块 |
nav | 导航 | column | 栏 |
main | 主体 | left | 左 |
layout | 布局 | center | 中 |
sidebar | 侧栏 | right | 右 |
模块常用名称: | |||
名称 | 说明 | 名称 | 说明 |
logo | 标志 | banner | 广告条 |
login | 登录 | loginbar | 登录条 |
regsiter | 注册 | search | 搜索 |
shop | 购物车 | list | 列表 |
tool/toolbar | 工具条 | service | 服务 |
tab | 标签页 | hot | 热点 |
source | 资源 | news | 新闻 |
site_map | 网站地图 | download | 下载 |
about_us | 关于我们 | copyright | 版权 |
partner | 合作伙伴 | friendlink | 友情链接 |
guide | 指南 | vote | 投票 |
joinus | 加入 | header | 页眉 |
footer | 页脚 | homepage | 首页 |
类常用名称: | |||
名称 | 说明 | 名称 | 说明 |
title | 标题 | current | 当前 |
label | 标签 | spec | 特别 |
note | 注释 | red | 红色 |
summary | 摘要 | submit | 提交 |
msg | 提示信息 | textbox | 文本框 |
status | 状态 | drop | 下拉 |
tips | 小技巧 | btn | 按钮 |
scroll | 滚动 | form | 表单 |
icon | 图标 | count | 统计 |
arr/arrow | 箭头 | crumb | 导航 |
cor/corner | 转角/圆角 | breadcrumb | 导航提示 |
导航常用名称: | |||
名称 | 说明 | 名称 | 说明 |
nav | 导航 | menu | 菜单 |
mainnav/globalnav | 主导航 | topnav | 顶导航 |
subnav | 子导航 | sidebar | 边导航 |
leftsidebar | 左导航 | rightsidebar | 右导航 |
submenu | 子菜单 | dropmenu | 下来菜单 |
sidebaricon | 边导航图标 | menucontainer | 菜单容器 |
文件常用名称: | |||
名称 | 说明 | 名称 | 说明 |
master.css | 主要文件 | themes.css | 主体文件 |
layout.css | 布局、版面文件 | base.css | 基本公共文件 |
columns.css | 专栏文件 | module.css | 模块文件 |
font.css | 文字样式文件 | forms.css | 表单文件 |
print.css | 打印样式文件 | mend.css | 补丁文件 |
CSS Reset是指重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。
CSS Reset的代码。
CSS Reset |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } a img, iframe { border: none; } ol, ul { list-style: none; } input, textarea, select, button { font-size: 100%; font-family: inherit; } select { margin: inherit; } /* Fixes incorrect placement of numbers in ol’s in IE6/7 */ ol { margin-left:2em; } |
建议将Reset CSS代码保持为reset.css上传服务器。所有设计制作人员统一引用这个文件。管理员在需要的时候可以维护更新此文件。(发布类页面,将CSS Reset代码写在style.css中。)
使用代码中的ClearFix的方法清除浮动,不会像传统方法清楚浮动时,在页面中增加无用的空div,破坏文档的结构。
ClearFix的使用方法,在需要清除浮动的父级菜单,添加class属性clearfix
ClearFix的CSS代码 |
/* == clearfix == */ .clearfix:after { /*/*/ content: "."; /* IE8 hack */ display: block; height: 0; clear: both; visibility: hidden; } /* IE7 hack */ .clearfix { display: inline-block; } /* IE-mac, IE5, IE6 */ * html .clearfix { height: 1%; } .clearfix { display: block; } |
ClearFix的用法 |
class="clearfix">
|
第三章 通用规范
文档结构规范 |
Style文件命名规范详见第二章
Images命名规范 |
1、CSS切图文件按照下列命名规范:(XXX为自定义名称) l b01.png l b02.png l … l bN.png 2、页面中的其他照片类图片引用绝对地址的图片,不做切图处理。 |
Images切图规范 |
1、 采用jpg、gif、png作为切图输出格式。 2、 切图图片大小根据具体项目制定,要求尽量优化图片。 3、 CSS背景图片输出为PNG 8。PNG 8除了不支持动画外,PNG8有GIF所有的特点,但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以,大多数情况下,都应该用 PNG8不是GIF(除了非常小的图片GIF会有更好的压缩外)。 4、 同类型的图片进行CSS Sprites优化。减少http请求。 |
Javascript规范 |
1、 统一采用jquery框架,建立常用JavaScript库和使用文档 2、 Js命名规范:jquery-XXXX.pack.js(XXXX为自定义功能模块名称) |
第四章 项目制作完成
1、 CSS代码进行整理,优化文档结构:
l 选择符顶行书写,所有属性都在一行内;
l 使用外部样式表,尽量不使用
l 修改页面样式时,检查样式表的有效性。减少冗余样式代码。
2、 JS代码进行整理,优化文档结构:
l 去除多余的缩进;
l 将多个js代码整理成一个js代码。
3、 HTML代码进行整理,优化文档结构:
l 避免使用iframe和style标签,以减少页面渲染时间;
l 删除不必要的属性标签,例如table标签中的border="0" cellspacing="0" cellpadding="0"等,可以在CSS中定义;
l 删除空标签和无用的标签,清除浮动使用.clearfix类以减少空标签的使用;
l 减少层级嵌套,减低页面大小。
使用浏览器测试代码在各个浏览器中的兼容性:
制作的页面满足IE6+,FF3.5+,Chrome,Safai,Opera的兼容性。
项目页面制作完成后,压缩成rar文件包上传到mantis中。
Rar文件格式如下:XXXX -html-YYYYMMDD.rar
说明:
XXXX??项目名称,例如:家居产品库项目
YYYYMMDD??年月日,例如:20100315
第五章 页面制作中的SEO规范1、 CSS命名避免使用focus作为名称。
2、 页面中不要出现过多strong标签。
3、 页面中h1只能唯一,并且指定为页面重要的标题(与项目管理人员确认)。
4、 页面中,h2~h6标题要按照等级顺序书写。
5、 Img标签中不能缺少alt属性
6、 图片标题使用图片作为背景,缩进隐藏文字,使搜索引擎可以抓取关键词。
7、 文字使用CSS进行文字截取以符合搜索引擎对文字的抓取(与页面发布工程师确认)。
8、在不影响用户体验的情况下给链接加title属性
9、在不影响用户体验的情况下给图片加title属性
10、对于产品页,每个细栏目名称必须是文字,建议是
11、对于产品页,图片下方必须有文字区域
12、通过外部调用的方式使用JS,如果JS必须放到页面中,建议放到主内容以下的位置
13、对每个详情页正文上方增加面包屑
14、代码符合xhtml标准
附录:设计规范1、 大网页面标准尺寸:950px。
2、 其他产品或项目尺寸不限制,具体尺寸将用工具量取设计稿中的尺寸。
1、 页面文本默认字体:宋体。
2、 页面标题默认字体:黑体。
3、 图片内的字体不限制,将切图处理。
1、 默认中文字体最小字号:12px(中文小于12px将变模糊)
2、 默认中文正文标题字号:18px。
1、 默认正文行高:23px。
2、 其他行高不限制,将用工具量取设计稿中文字的行高。
1、 图片尺寸遵循比例标准:
1比1比例标准,尺寸取偶数。例如:
4比3比例标准,尺寸取偶数。例如:
非标比例。例如:
2、 图片留白和边框:
默认图片留白2px(padding:2px)
默认图片边框 1px(border:1px)
1、 文本颜色和链接颜色:
UI中用色块规定设计中的文字颜色 |
2、 其他无标识文本样色,将吸取设计稿中的颜色数值。
1、 符合下列条件默认输出为图片
文字带边框、阴影、投影、颜色渐变、特殊字体等效果一律切成图片,文字内容不可手动编辑。如果需要活字手动编辑,则文字没有以上特殊效果 。
例如:
2、 渐变阴影切图规范:
png24渐变图片不支持IE6,在IE6中使用滤镜效果会大大增加页面载入的时间,并会造成浏览器崩溃。故不输出为png24图片,一般输出png8图片。Png8无渐变效果。
例如下图白色阴影部分,此类设计可能会造成切图尺寸过大,或者无渐变效果。