htmlcss文档

Html+Css规范文档

一、基本概要

总体要求

网页制作最基本要求：页面效果，既与psd设计稿效果达到统一。

注：如果在psd设计稿效果无法实现，或者效果很难实现的情况下，可以修改psd设计稿。

2． 代码尽量简洁，符合W3C标准；达到符合多个主流浏览器标准效果； 注：此文档实例都是在W3C标准下实现效果，如果不在W3C标准下，某些效果可能会有差别。

多个浏览器标准

网页效果是基于浏览器来实现的，所以在不同的浏览器中，达到统一的页面效果是非常重要的。

不同开发商的浏览器，或者同一开发商推出的不同版本浏览器之间，存在着对html+css的解释差别，也就是不同浏览器之间的兼容问题，所以在制作+测试的时候，要统一不同浏览器之间的效果。

当前主流浏览器，有 "IE6.0"、"IE7.0"、"Firefox (火狐) "、"遨游 (Maxthon) "、"Opra"...基于浏览器内核，测试页面至少要达到 "IE6.0"、"IE7.0"、"Firefox (火狐)"效果相同。

目前浏览器使用状况大致如下:

一般来说，版本越高的浏览器，对代码的解释及兼容越好，测试时检查出错误的机会也就越小。

在代码没有要求的情况下，可以针对浏览器，单独写一些css具体属性，以达到浏览器效果统一，比如 "!important"、"*+"、"+"、"_"不过建议尽量不用这种hack技术；

HTML+CSS 编辑工具以及代码格式

html+css编辑器，一般的文本编辑器即可对html+css进行编辑。

dreamweaver版本，制作与维护人员最好使用相同的版本，不同的版本之间的兼容性会有差别，版本越高兼容性越好，但是当其他人员使用低版本的dreamweaver时，就是出现一些问题，比如：编码规则，解释属性。

html+css代码书写时，要结构清晰，能够手动书写，尽量少用"套用源格式" (dreamweaver中优化格式)

如：在html代码中，父级标签跟子级标签，最好换行之后空出"2个空格" (套用源格式的本质)

在css代码中，第一种书写方法，可以用空格划分各属性。

body {background:#fff;　font-size:12px;　color:#000;　margin:0px;　padding:0px;}

第二种方法，相同类型的属性可以放在同一行中，分别几行表示属性。

body {background:#fff;

font-size:12px;　color:#000;

margin:0px;　padding:0px;}

一般这种情况，代码量的多少，决定文件的大小，同时也决定书写格式。

编码规则"gb2312"、“gbk"、 "utf-8"在不做特殊要求的情况下，默认的编码使用"utf-8"。

代码注释

良好的html、css注释，不仅可以使得代码的结构、层次更加清晰，同样会为日后维护，修改带来很大的方便。

注：注释的内容，可以使用具有一定意义的"英文" 、"中文拼音" 、"汉字"。使用前提，如果编码规则统一，编辑器版本统一的情况下，可以使用"汉字"进行注释，其他情况下，推荐使用"英文"、"中文拼音"注释，这样可以避免页面出现乱码，以至于页面样式错乱。

文件存放位置

总体来说每个栏目有单独文件夹，这样方便管理；公用的图片和css放在根目录里，每个栏目单独的文件放在单独的栏目文件夹里；

以栏目为例，在每个栏目的根目录下，有以下文件。

静态页面

images(图片文件夹)

css(css样式表文件夹)

js(页面调用的js方法文件夹)

注：文件存放方式，决定栏目统一调试，维护。

制作思路

制作页面的基本是效果，思路则是拆分。

如何拆分页面结构：

a) 以内容、功能、样式为模块逐步划分，将页面按所需结构用不同的层(div、table...)封装。

b) 页面内的所有元素都可以用css样式表控制。

布局结构完成后，在来更改css样式表，设置页面样式。

利用iedom、firebug等插件，进行页面调试。

浏览器插件测试，以ie dom explorer为例。

左侧区域：页面结构

中间区域：页面html代码

右侧区域：所有样式属性(html样式属性+css样式属性)

注：在测试页面效果时

首先检查页面的结构，当前浏览页面是否与自己所写结构相同，从而判断html代码是否出现标签层级关系选择错误，或标签结束位置是否正确。

其次检查页面样式属性(右侧区域)，当前浏览样式属性，是否与设置属性相同，设置样式属性与当前浏览样式不同，可能原因如下：

一.修改样式表内属性位置是否正确。

二.添加的属性书写是否正