div+css站点书写规范.pdf

div+css 站点书写标准 -- HTML CSS 本标准分为四部分：严格遵循并符合 W3C 标准、HTML 应用代码规范、CSS 样式文 件要求、六大原则；第一部分从理念思维方向确定代码书写规范，第二、三，HTML、CSS 部分为标准具体代码应用标准，第四，为综合性应用的六个原则。简洁有效为主导。 一、严格遵循并符合 W3C 标准 结构化标准语言 ：XHTML 和 XML;表现标准语言 ：CSS;行为标准 ：W3C DOM 、 ECMAScript 的集合。 1.“网页结构、表现、行为分离，互不干涉抢功是 W3C 标准的理念。 HTML 、CSS、JS 的分离可以提高网页响应速度（CSS、JS 可被缓存）, 页面 的文档结构必须清晰。 2. 修饰性图片文本替换，JS、FLASH 文字图片还原。 将修饰性无意义图片变成背景图显示，用有意义的文字进行替换，这样便于搜索 引擎的忽视，更好地做到精简。常用于 logo，按钮，菜单 3. 必须添加链接标签的 title、图片标签的 alt 属性（W3C 本意是：提高亲和力）。 4. 合理安排使用 h1-h6、文本加粗、斜体、下划线。 5. 网页板块布局随意性更强（重要的内容调前，之后使用 CSS 重新定位）。 6. 语义标签的合理运用。 其他的字体（FONT）和格式化标签也尽量少用，建议采用CSS 定义 7. 代码精简，嵌套层关系少于三层。 8. ID 与 CLASS 使用严谨（ID 用在唯一结构性布局，Class 反之） 9.CSS 书写精简： a. 颜色（color:#000; ） b. 盒尺寸（margin:1em 0 2em 0.5em;） c. 边框 (border:width style color;) d. 背景 (background:#f00 url(background.gif) no-repeat fixed 0 0;) e. 字体 (font:italic small-caps bold 1em/140% Lucida Grande,sans-serif;) f. 列表 (ist-style:square inside url(image.gif);) g. 取消 class 和 id 前的元素限定(div#id1{}可以写成#id1{}) h. CSS 的优先级 行内样式 ID 选择符 样式,伪类和属性选择符 类别,伪对象 i. 不需要重复定义可继承的值(父子级关系) j. 多重 CSS 样式定义，属性追加重复最后优先原则 k. 使用子选择器(descendant selectors) l. 不需要给背景图片路径加引号; m. 使用条件注释运用 css hack; 10. 命名规范,直意表达（英文）。 Class 文件命名: 模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css 补丁：mend.css 打印：print.css Div 命名: 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面整体布局宽度 wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main