一、基础
1.1设计代码的结构
1.1.1标记简史
千禧年之际，混乱的Web设计业迎来了CSS，标记返璞归真，文档形成语义趋势。
①ID和类名
@HTML4作为简单的文档标记语言被创建，而不是界面语言，故没有用于内容区域或导航栏等的专有元素；
HTML5则解决了部分问题，如header、nav、article、section和footer等结构性元素，以及data input和menu元素等新UI特性。
@次优的解决方案是使用这些名称作为ID和类名的命名约定，以此迎接HTML5，并为CSS提供有用得“钩子”(hook)。
@ID必须唯一，用于标识特定元素或持久的结构性元素。对于同个类名则可以应用于任意多个元素。
②元素命名
@给元素命名时，要尽可能保持名称和表现方式无关。
即根据“它是什么”给其命名(error、mainNav、intro)，而不是根据“它外观如何”(red、topNav、firstPara)。【让代码更有意义】
@本书作者自己的命名习惯是：完全小写、多个单词用连字符分隔(如andy-budd)。
③“多类症”(classitis)
@由于类的灵活性导致类常被滥用，可以使用重叠(cascade)识别子元素，而不是每个元素都添加类属性。
④div和span
@div是有语义的，部分(division)，用于分隔出文档的有意义区域。span用于行内元素的分组或标识。
@应避免“多div症”(divitus)，只在没有现有元素能实现区域分隔时，才使用。像主导航列表，无需添加div。
1.1.2文档类型、DOCTYPE切换 和 浏览器模式
@DTD(文档类型定义)是一组机器可读的规则。解析网页时，浏览器使用这些规则检查网页的有效性并且采用想要的措施。
@浏览器通过分析页面的DOCTYPE了解使用哪个DTD，由此知道要使用HTML的版本。
@浏览器一般不读取DTD文件，而是识别常见的DOCTYPE声明。HTML5就不需要DTD文件的URL。
@DOCTYPE用于区分遗留文档和符合标准的文档，有两种风格：严格(strict)、过渡(transitional)。
1.1.3有效性验证
①浏览器模式
@浏览器厂商为了确保向后兼容性，创建了两种呈现模式：标准模式和混杂模式(quiks mode)。
两模式的差异最显著的一个例子是盒模型的差异(IE6和Opera)。
Mozilla和Safari有第三中模式“几乎标准模式”，在表格处理上以标准模式有细微差异。
②DOCTYPE切换
@浏览器根据是否存在DOCTYPE以及使用哪种DTD选择呈现方式。
@呈现标准模式：XHTML文档包含形式完整的DOCTYPE；
HTML4.01包含一个DTD的DOCTYPE 或 包含过渡DTD和URI的DOCTYPE。
@呈现混杂模式：HTML4.01包含过渡DTD但无URI的DOCTYPE 或 DOCTYPE不存在/形式不正确；
IE6中，DOCTYPE不在第一行时。
二、指定样式的应用目标
2.1常用选择器
伪类：用于要根据文档结构之外的条件对元素应用样式时。
链接伪类：:link、visited (只能用于锚元素)
动态伪类：:hover、:focus、:active (理论上用于任何元素)
IE6中，:hover和:active只能用于锚链接，忽略:focus 。
IE7中，:hover可用于任何元素，忽略:focus和:active 。
2.2通用选择器
@作用类似通配符，匹配所有可以元素，用星号表示。
@与其他选择器配合，可用于对某元素的所有后台应用样式。
2.3高级选择器
虽然IE6-不支持，但由于创建CSS时考虑到向后兼容性，故浏览器不理解某选择器时，会忽略整个规则。
2.3.1子选择器、相邻同胞选择器
@后代选择器选择一个元素的所有后代，子选择器则选择元素的直接后代，即子元素。
@IE7-Bug：若父元素和子元素之间有注释，使用子选择器会出错；若目标元素间有注释，相邻同胞选择器会出错。
@IE6，通过通用选择器模拟子选择器：先在所有后代中应用你希望子元素具有的样式，再使用通用选择器覆盖子元素的后代上的样式。
#nav li { border: 1px dashed #ccc; } #nav li * { border:none; }
2.3.2属性选择器
@根据某个属性是否存在 或 属性的值 寻找元素。IE6-不支持。
2.3.3层叠、特殊性
@CSS通过一个称为层叠(cascade)的过程 解决同个元素多个规则的情况。层叠给没个规则分配一个重要度。
@层叠的重要度次序：①标有!important的用户样式；②标有!important的作者样式；③作者样式；④用户样式；⑤浏览器/用户代理应用的样式。
作者样式由网站开发者编写，用户样式为用户通过浏览器自定义的样式。
为了满足特殊的可访问性，有!important标志的用户样式规则是最高的。
@其后，再根据选择器的特殊性 决定规则的次序。具有更特殊选择器的规则优先与一般选择器规则。两个选择器特殊性相同时，后定义的规则优先。
①特殊性
@计算：给每种选择器分配一个数字值，将规则的每个选择器的值加起来，计算出规则的特殊性。
为了确保非常特殊的选择器(ID选择器)不被大量的一般选择器(类型选择器)超越，不以10为基数，而是采用一个更高的未指定的基数。
@选择器的特殊性分4个成分等级：a、b、c 和 d：
行内样式，a=1。
b = ID选择器总数。
c = 类、伪类 和 属性选择器总数。
d = 类型选择器 和 伪元素选择器总数。
@用style属性编写的规则比其他的规则都特殊。具有ID选择器的比没有ID选择器的规则特殊......
@直接应用与元素的任何样式总会覆盖继承而来的样式，因为继承而来的样式的特殊性为空！
②在大型网站中，为避免覆盖特殊样式，应该保持一般样式非常一般，特殊样式尽可能特殊。
③主体标签上添加类或ID
@当希望新页面具有特殊的布局时(覆盖一般样式)，可以给主体元素添加一个类名：
body.news { /* 特殊样式 */ }
2.3.4继承
常与层叠混淆，继承是应用样式的元素的后代 会继承样式的某些属性(如颜色和字号)。
2.4规划、组织 和 维护样式表
2.4.1对文档应用样式
@添加外部样式表的两种方法：链接 和 导入。
链接和导入 外部样式表
<link rel="stylesheet" type="text/css" href="css.css" />
<style type="text/css">
<--
@import url("css.css");
-->
</style>
@可以在一个样式表中导入另一个样式表。
@导入样式比链接样式慢。同时也受限于同个域中文件的同时下载数量。使用单一CSS文件时，建议分隔代码。