CSS语义化标准.pdf

CSS标准化命名规则 一、文件命名规范 基本样式：base.css 全局样式：global.css 框架布局：layout.css 字体样式：font.css 链接样式：link.css 打印样式：print.css 二、常用类/ID命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage …… 常用类的命名应尽量以常见英文单词为准，做到通俗易懂， 并在适当的地方加以注释。对于二级类/ID 命名，则采用组 合书写的模式，后一个单词的首字母应大写：诸如“搜索框” 则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、 “搜索按钮”命名为“searchBtn XHTML-CSS写作建议 1、所有的xhtml 代码小写； 2、属性的值一定要用双引号()括起来，且一定要有值； 3、每个标签都要有开始和结束，且要有正确的层次； 4、空元素要有结束的tag 或于开始的tag 后加上/； 5、表现与结构完全分离，代码中不涉及任何的表现元素， 如style、font、bgColor、border 等； 6、h1到h5的定义，应遵循从大到小的原则，体现文档 的结构，并有利于搜索引擎的查询； 7、给每一个表格和表单加上一个唯一的、结构标记id； 8、给重要的区块加上注释； 9、给图片加上alt 属性； 10、所有的标签必须进行合理的嵌套； 11、根元素前必须有元素，宣告使用那一种DTD； 12 、 根 元 素 必 须 有 xmlns 属 性 来 指 定 使 用 /1999/xhtml 的namespace。 三、常规书写规范及方法 1、选择DOCTYPE XHTML 1.0 提供了三种DTD 声明可供选择： 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续 使用HTML4.01 的标识(但是要符合xhtml 的写法)。完整代 码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的 标识和属性，例如br。完整代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd 框架的(Frameset)：专门针对框架页面设计使用的DTD，如 果你的页面中包含有框架，需要采用这种DTD。完整代码如 下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN /TR/xhtml1/DTD/xhtml1-frameset.dtd 理想情况当然是严格的DTD，但对于我们大多数刚接触web 标准的设计师来说，过渡的DTD(XHTML 1.0Transitional)是 目前理想选择(包括本站，使用的也是过渡型DTD)。因为这 种DTD 还允许我们使用表现层的标识、元素和属性，也比 较容易通 过W3C 的代码校验。 2、指定语言及字符集 为 文 档 指 定 语 言 ： html xmlns /1999/xhtmllang en 为了被浏览器正确解释和通过W3C 代码校验，所有的 XHTML 文档都必须声明它们所使用的编码语言，如： 常 用 的 语 言 定 义 ： meta http-equiv Content-Type content text/html;charset utf-8/ 标 准 的 XML 文 档 语 言 定 义 ：?xml version 1.0 encoding utf-8? 针 对 老 版 本 的 浏 览 器 的 语 言 定 义 ： meta http-equiv Content-Languagecontent utf-8/ 为提高字符集，建议采用“utf-8”。 3、样式表调用 1、页面内嵌法：就是将样式表直接写在页面代码的head 区。 如： sty