佳佳的博客

Appearance

精通 CSS - 高级 Web 标准解决方案 1. 基础知识 ​

🏷️ 《精通 CSS - 高级 Web 标准解决方案》

学习 CSS（层叠样式表）最好的一种方式是直接开始使用它。
修改别人的代码是很好的起步方法。

1. 设计代码的结构 ​

  • 使用有意义的标签；

  • 次优方案是使用现有元素，并添加 ID 和类名给它们赋予额外的意义；

    ID 用于标识页面上的特定元素，而且必须是唯一的；
    类名可以应用于页面上任意多个元素；

  • 为元素命名；

    应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名；
    写类名和 ID 名时，需要注意区分大小写；
    使用同一的命名规约；

  • ID 还是类

    类应用于概念上相似的元素；
    ID 应用于不同的唯一的元素；

  • div 和 span

    div 代表 部分（division），可以将文档分割为几个有意义的区域；
    应使用 div 根据条目的意义或功能对相关条目进行分组；
    div 可以对块级元素进行分组；
    span 可以用来对行内元素进行分组或标识；

  • 微格式（microformat）

    • hCalendar 用于日期、日历和时间
    • hCard 用于人和组织
    • XFN 用于人之间的关系
    • hProduct 用于产品说明
    • hRecipe 用于原料和烹饪步骤
    • hReview 用于产品和事件审查
    • hAtom 用于博客帖子等片段式内容
    • 等

  • 不同的 HTML 和 CSS 版本

    • CSS

      CSS1 1996 年末成为标准推荐，包含非常基本的属性，如字体、颜色、外边距；
      CSS2 1998 年发布，添加了高级概念（比如浮动和定位）以及高级的选择器（如子选择器、相邻同胞选择和通用选择器）；
      CSS3 包含很多模块，部分模块已发布、部分仍处于草案或最后公告状态；

    • HTML

      HTML 4.01 1999 年末成为推荐标准；
      HTML 4.01 的 XML 版被命名为 XHTML 1.0；与 HTML 4.01 之间的主要差异是它遵守 XML 编码约定。所有的 XHTML 属性必须包含引号，所有元素必须是封闭的。
      XHTML 1.1 比 XHTML 1.0 更接近 XML。XHTML 1.0 可以作为 HTML 文档，而 XHTML 1.1 页面是作为 XML 发送给浏览器的。这意味着 XHTML 1.1 页面即使只包含一个错误，浏览器也不会显示页面。
      XHTML 2 开发缓慢且过时，HTML 5 正式成为 W3C 项目时停止了开发；
      HTML 5 相对较新，是一个不断变动的规范草案；引入了新的结构性元素（如 heacer、nav、article、section和footer）；包含一批新的表单特性，简化了 Web Application 的开发；

2. 文档类型、DOCTYPE 切换和浏览器模式 ​

DTD（文档类型定义）是一组机器可读的规则，定义了 XML 或 HTML 的特定版本中允许有什么，不允许有什么；
解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的错误；
浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD，由此知道要使用 HTML 的哪个版本；
DOCTYPE 声明是指 HTML 文档开头处的一行或两行代码；

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE 通常包含--但不总是--包含指定的 DTD 文件的 URL；如 HTML 5 就不需要 URL；
DOCTYPE 当前有两种风格：严格（strict）和过渡（transitional）；
过渡 DOCTYPE 目的是帮助开发人员从老版本迁移到新版本；过渡版本允许使用已经废弃的元素；

3. 有效性验证 ​

除了根据语义加标记之外，HTML 文档还需要用有效的代码来编写。如果代码是无效的，浏览器会尝试解释标记本身，有时候会产生错误的结果。

对页面进行有效性验证时要求有 DOCTYPE 声明。
可以使用 W3C 验证器（bookmarklet）或 Firefox Web Developer Extension 等插件检查 HTML 是否有效。
有效性验证很重要，有助于找到代码中的 bug。

DOCTYPE 声明除了对有效性验证很重要之外，还被浏览器用于另一个用途。

  • 浏览器模式

    浏览器为了确保向后兼容性，创建了两种呈现模式：标准模式和混杂模式（quirks mode）。
    标准模式中，浏览器根据规范呈现页面；混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
    Mozilla 和 Safari 还有第三种模式，称为 “几乎标准的模式（almost standards mode）”，除了在处理表格的方式上有一些细微的差异之外，与标准模式相同。
    在 Firefox 中，可以使用 Web Developer Extension 查看页面的呈现模式。

  • DOCTYPE 切换 或 DOCTYPE 侦测

    浏览器根据 DOCTYPE 是否存在以及使用的哪种 DTD 来选择要使用的呈现方法。

    如果 XHTML 文档包含形式完整的 DOCTYPE，那么它一般以标准模式呈现；
    对于 HTML 4.01 文档，包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现；
    包含过渡 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现，但是有过渡 DTD 而没有 URI 会导致页面以混杂模式呈现；
    DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现；
    并非所有浏览器都采用这些规则；

附 1. 引用 ​

  1. 《精通 CSS - 高级 Web 标准解决方案（第 2 版）》 - Andy Budd, Simon Collison, Cameron Moll 著；陈剑瓯 译。