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
第四章 项目制作完成... 15
一、 代码的优化（制作部分）... 15
二、 夸浏览器兼容性... 16
1、 测试代码在各主流浏览器兼容性：... 16
三、 项目的上传... 16
第五章 页面制作中的SEO规范... 17
一、 页面制作中的SEO规范... 17
附录：设计规范... 18
一、 页面设计尺寸... 18
二、 字体规定... 18
三、 字号规定... 18
四、 行高规定... 18
五、 图片尺寸规范... 19
六、 文本颜色... 20
七、 切图规则... 20
过渡型DTD（XHTML 1.0 Transitional）是比较理想的选择。因为这种DTD允许使用描述性的元素和属性，也比较容易通过W3C的代码校验。
定义文档类型：过渡型（Transitional） |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
xmlns是XHTML NameSpace的缩写，中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD，如果不指明各自的命名空间，机会出现语义混淆现象。
声明命名空间 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
编码类型：GB2312
语法规范 |
1、 XHTML对大小写敏感，所有的元素和属性都必须小写。 2、 所有的属性必须用引号””括起来。 3、 XHTML要求有严谨的结构，因此所有的标签都必须合理嵌套 4、 所有的属性必须被赋值 5、 所有的特殊符号都用编码表示，例如小于号必须被编码为“<” 6、 不要在注释内容中使用“--”， “--”只能出现在XHTML注释的开头和结结。 7、 XHTML规范废除了name属性，而使用id属性作为统一的名称。 |
代码的注释规范举例 |
<!-- Header start --> <div id="header"> 内容 </div> <!-- Header end --> |
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 | 列表 |
|
学习交流
热门图片
猜你喜欢的新闻
新闻热点  2024-04-27 13:35:46
 2024-04-27 13:33:47
 2024-04-24 22:53:44
 2024-04-23 19:32:50
 2024-04-23 19:25:50
 2024-04-23 19:13:19
疑难解答 | |||
