【精通CSS】基本知识
DTD & DOCTYPE
DTD （文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器使用这些规则来检查页面的有效性，并且采取相应的措施。浏览器是通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD， 由此知道要使用 HTML 的哪个版本。
DOCTYPE 声明是 HTML 文档开头处的一行或两行代码，它描述使用那个 DTD。
<!-- CSDN 的 DOCTYPE 声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 更常见的 DOCTYPE 声明-->
<!DOCTYPE html>
上面第一个指出 要使用的DTD是 XHTML 1.0 Transitional 的 DTD。DOCTYPE 当前有两种风格：strict（严格）、transitional（过渡）。过渡DOCTYPE是为了帮助开发人员从老版本迁移到新版本，因此 HTML4.01 和 XHTML 1.0 仍然允许使用已经废弃的元素。
第二个表示 HTML5，它不需要包含指定的 DTD 文件的 URL。
DOCTYPE切换
常见的几种情况：
- 对于 HTML 4.01 文档，包含 严格或过渡的 DTD 的 DOCTYPE 常常都会导致页面以标准模式呈现。而有过渡 DTD 而没有 URI 会导致页面以混杂模式呈现。
- 对于 XHTML 文档包含形式完整的 DOCTYPE 一般以标准模式呈现。
- DOCTYPE 不存在或形式不正确也会导致 HTML 和 XHTML 文档以混杂模式呈现。
在 https://hsivonen.fi/doctype/#handling 页面中有一个图表说明了不同浏览器如何根据不容的 DOCTYPE 声明选择呈现的方式。
IE6 下有个bug：如果 DOCTYPE 声明不是页面上的第一个元素，IE6 会自动切换到混杂模式。
有效性验证
可以使用 W3C 验证器（一个验证器bookmarklet）或 Firefox Web Developer Extension 等插件检查 HTML 是否是有效的。可以访问 http://validator.w3.org 并输入 URL 进行验证。
对页面进行有效性验证要求有 DOCTYPE 声明。
浏览器模式
有两种页面的呈现模式：
- 标准模式 Standard Mode
- 混杂模式 Quirks Mode
出现两种模式的原因：当浏览器厂商在开发与标准兼容的浏览器时，也希望能向后兼容，所以就出现了这两种模式。
- 在标准模式中，浏览器根据规范呈现页面。
- 在混杂模式中，会以一种比较宽松的向后兼容的方式呈现页面，兼容老式浏览器。比如在标准模式中使用正确的盒模型，在混杂模式中使用 IE5 及更低版本中的老式盒模型。
Mozilla和Safari中海油第三种模式： almost standard mode（几乎标准模式），在 Firefox 中，可以使用 Web Developer Extension 查看页面的呈现模式。
引用外部样式表
在 HTML 文档中引入外部样式表有两种方法，可以使用链接，也可以导入：
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("/css/advanced.css");
-->
</style>
也可以在另一个样式表中导入其他样式表，比如我们可以在 HTML 文档中链接基本的样式表，然后将复杂的样式表导入到这个样式表：
@import url("/css/layout);
@import url("/css/color");
把 CSS 分割为多个样式表是一种常见的做法，但是，浏览器的基准测试表明，导入样式表比链接样式表慢。
在使用多个 CSS 文件时，有 2 个与速度有关的问题：
- 多个文件会导致从服务器发送更多的数据包，这些数据包的数量（而不是内容）会影响下载时间。
- 浏览器只能从一个域同时下载数量有限的文件。老式浏览器限制为 2 个，现代浏览器限制为 8 个。
所以，使用结构单一的 CSS 文件可以显著提高下载速度。
层叠
即使是在不太复杂的样式表中，要寻找同一个元素可能有两种或更多的规则，CSS 通过层叠（cascade）的过程处理这种冲突。
层叠为每个规则分配一个重要度，以下是重要度次序：
- 标有 !important 的用户样式
- 标有!important 的作者样式
- 作者样式（站点作者编写的样式，被认为是最重要的样式表）
- 用户样式（用户可以通过浏览器应用自己的样式表）
- 浏览器/用户代理应用的样式
然后更具选择器的特殊性决定规则的次序。如果两个规则的特殊性相同，那么后定义的规则优先。
为了计算规则的特殊性，会给每种规则分配一个数字值，然后，将规则的每个选择器的值加在一起，计算出该规则的特殊性。
选择器的特殊性分成 4 个等级： a 、b、c、d。
- a: 行内样式
- b: id 选择器的数量
- c: 类、伪类、属性选择器的数量
- d: 类型选择器（元素选择器）和伪元素选择器的数量
示例：
继承
应用样式的元素的后代会继承样式的某些属性。如果将主体的字号设置为 1.4em，那么页面上多有的内容都应该继承这个字号（说“应该会”是因为 IE 和 NetScape 在继承表格的字号方面有bug）
body {
color: #333;
}
继承而来的样式的特殊性为 空
设计代码结构
为了便于维护，最好把样式表划分为几大类。通常，可以把最一般的规则放在最前面；然后处理更特殊的样式和辅助样式等等，如下：
- 一般样式表
- 主体样式
- reset 样式
- 链接
- 标题
- 其他元素
- 辅助样式
- 表单
- 通知和错误
- 一致的条目
- 页面结构
- 标题、页脚、导航
- 布局
- 其他页面结构元素
- 页面组件
- 各个页面
- 覆盖
注释风格
/* @group general styles
------------------------------------------------------------------------------------------------*/
/* @group helper styles
------------------------------------------------------------------------------------------------*/
/* @group page structure
------------------------------------------------------------------------------------------------*/
/* @group page components
------------------------------------------------------------------------------------------------*/
/* @group overrides
------------------------------------------------------------------------------------------------*/
同时，对于复杂的大型项目，在 CSS 文件中添加临时的注释常常对开发是有帮助的。
