阅读本书主要目的：
自从学会CSS以来，虽然熟练掌握了其使用方法和技巧，但对其底层的原理和实现并不清晰，阅读本书想进一步系统化的学习和深入研究其本质，对这门前端基础语言从熟练使用到真正理解。
第1章 CSS和文档
1.1 WEB的衰落（为了表现增加很多标记元素如font等，这些阻碍了页面的结构化）
1.2 CSS作救星（95年W3C发布正在进行的CSS计划）
CSS特点：丰富的样式；易于使用和维护；可以在多个页面重复使用；方便层叠；缩减文件大小；为将来做准备（为解决HTML结构化而生，实现结构和表现分离）
1.3 元素（文档结构的基础，至少在CSS2.1中，每个元素生成一个框，也成为盒）
替换元素：用来替换元素内容的部分并未由文档内容直接表示，如img、input等
非替换元素：大多数都属于非替换元素，内容由用户在元素本身生成的框中显示，如段落、标题、单元格等
元素显示角色（块级元素：生成一个元素框，它会填充其父元素的内容区；行内元素：在一个文本行内生成元素框，而不会打断这行文本）
在HTML和XHTML中块级元素不能嵌套在行内元素中，但在CSS中对嵌套没有任何限制
1.4 结合CSS和XHTML（外部、内联、导入、行内）
<link rel="stylesheet" type="text/css" href="sheet.css" media="all" />
<!--link标记（外部样式表），link必须放在head内，rel“关系”（relation），media样式应用的媒体类型（大部分类型不被支持）-->
<style type="text/css">
...
</style><!--style元素（内联样式表）-->
@import url(sheet2.css);
/*@import指令（导入样式表），此指令写在样式文件中或style元素内*/
<p style="...">test</p><!--行内样式表，不推荐，因为不利于内容和表现的分离-->
第2章 选择器
2.1 基本规则
CSS的核心特性是向文档中的一组元素类型应用某些规则；每个规则由选择器和声明块组成
2.2 分组
h2,p{ color:green}/*选择器分组:为多个元素应用同一样式*/
/*声明分组：为一个元素应用多个声明*/
h3{color:orange;}
h3{ font-size:18px;}
2.3 类选择器和ID选择器
多类选择器：通过将多个类选择器连接在一起，仅可选择同时包含这些类的元素（类名顺序不限）
.warning.urgent{background:red;}/*注意中间不含空格：同时包含不限顺序，可以是class="urgent warning"*/
ID选择器与类选择器类似，但它仅适用一次
2.4 属性选择器
img[alt]{border:solid 1px red;} /*简单属性选择，选择有此属性的元素，不论属性是何值*/
a[title="w3c"]{color:red;} /*根据具体属性值选择，选择属性值为指定值的元素*/
p[class~="warning"]{color:red;} /*根据部分属性值选择，选择属性值含有指定值的元素*/
*[foo^="bar"]{color:red;}/*选择foo属性以“bar”开头的所有元素*/
*[foo$="bar"]{color:red;}/*选择foo属性以“bar”结尾的所有元素*/
*[foo*="bar"]{color:red;}/*选择foo属性包含“bar”的所有元素*/
*[lang|="en"]{color:red;}/*选择lang属性等于“en”或以“en-”开头的所有元素*/
2.5 使用文档结构
h1 em{color:red;} /*后代选择器*/
h2>strong{color:red;} /*选择子元素，即只选择h2的子元素（而不是后代元素）strong元素*/
h3+p{color:red;} /*选择相邻元素，即选择h3紧接的p元素，且两者有相同父元素*/
2.6 伪类和伪元素
a:link{color:blue;} /*选择超链接（含有href属性）*/
a:visited{color:purple;} /*已访问状态的超链接*/
a:hover{color:red;} /*鼠标悬停状态的超链接*/
a:active{color:orange;} /*鼠标激活（按下）状态的超链接*/
input:focus{color:green;} /*获取焦点状态的输入框*/
p:first-child{color:red;} /*选择第一个元素，即第一个p元素*/
*:lang( ) /*等价于|=属性选择器*/
a:link:hover{color:red;}/*结合伪类，即合并书写，注意不要把互斥的伪类结合使用*/
p:first-letter{color:red;} /*首字母，只用于标记或段落*/
p:first-line{color:red;} /*首行，只用于标记或段落*/
h2:before{content:" ";}/*之前元素，伪元素特有属性content*/
h2:after{content:" ";} /*之后元素，设置content才能使其置于文档结构中*/
第3章 结构和层叠
3.1 特殊性
/*特殊性值表示为：0,0,0,0(即：行内，ID，类或属性或伪类，元素或伪元素)*/
p+em{color:red;} /*0,0,0,2*/
.warning em{color:red;} /*0,0,1,1*/
ul#menu li.active{color:red;} /*0,1,1,2*/
*{color:black;}/*0,0,0,0，通配符特殊行为0*/
div[id="nav"]{} /*0,0,1,1，ID属性选择区别于ID选择器*/
p.drak{color:#333 !important;} /*重要声明，此规则总会优先*/
3.2 继承（继承没有特殊性，连0都没有，所以通配符的0特殊性>继承的无特殊性）
3.3 层叠（按权重和来源排序，按特殊性排序，按顺序排序（链接伪类顺序LVHA））
第4章 值和单位
4.1 数字
4.2 百分数
4.3 颜色（命名，RGB，十六进制）
/*CSS中定义的17个颜色名*/
aqua(浅绿) fuchsia(紫红) lime(绿黄) olive(橄榄) red white
black gray maroon(褐红) orange silver yellow
blue green navy(深蓝) purple(紫色) teal(青色)
4.4 长度单位
绝对长度（web几乎不用）：英寸（in）、厘米（cm）、毫米（mm）、点（pt）、派卡（pc）
相对长度：em和ex，像素长度（px），相对根元素rem
4.5 URL
4.6 CSS2单位
角度值：度（deg）、梯度（grad）和弧度（rad），直角可以声明为90deg=100grad=1.57rad
时间值：毫秒（ms、秒（s），时间不能为负值
频率值：赫兹（Hz）、兆赫（MHz）
4.7 其他值
关键字：none（空值）、inherit（继承）
第5章 字体
5.1 字体系列（font-family）
5.2 字体加粗（font-weight）
5.3 字体大小（font-size）
5.4 风格和变形（font-style和font-variant）
5.5 拉伸和调整字体（font-stretch和font-size-adjust）
5.6 font属性
5.7 字体匹配
CSS2可以通过@font-face对字体匹配更多控制，可以在文档中下载一个远程字体来使用
@font-face {font-family: DeliciousRoman;src: url('Delicious-Roman.otf');}
/*先引入，再使用*/
p {font-family: DeliciousRoman, Helvetica, Arial, sans-serif;}
第6章 文本属性
6.1 缩进和水平对齐（text-indent和text-align）
6.2 垂直对齐（line-height）
垂直对齐文本（vertical-align）只应用于行内元素和替换元素，如图像和表单；上标和下标super和sub；
6.3 字间隔和字母间隔（word-spacing和letter-spacing）
6.4 文本转换（text-transform：大小写转换）
6.5 文本装饰（text-decoration）
6.6 文本阴影（text-shadow）
第7章 基本视觉格式化
7.1 基本框
7.2 块级元素（block）
7.3 行内元素（inline）
7.4 改变元素显示（display设置）
行内块元素（inline-block）
第8章 内边距、边框和外边距
8.1 基本元素框
8.2 外边距（margin）
8.3 边框（border）
8.4 内边距（padding）
第9章 颜色和背景
9.1 颜色
9.2 前景色（color）
9.3 背景（background或background-color、background-images）
第10章 浮动和定位
10.1 浮动（float：left|right|none|inherit）
清除浮动（clear：left|right|both|none|inherit）
10.2 定位（position：static|relative|absolute|fixed|inherit）
偏移属性（top|right|bottom|left）
内容溢出（overflow：visible|hidden|scroll|auto|inherit）
内容剪裁（clip：ract(top,right,bottom,left)|auto|inherit）
元素可见性（visibility：visible|hidden|collapse|inherit）
Z轴上的放置（z-index）
第11章 表布局
11.1 表格式化
表显示值display：inline-table、table-row（tr）、table-row-group（tbody）、table-header-group（thead）、table-footer-group（tfoot）、table-column（col）、table-column-group（colgroup）、table-cell（th或td）、table-caption
11.2 表单元格边框
表格边框模型（border-collapse:collapse（合并）|separate（分隔）|inherit）
边框间隔（border-spacing:<length><length>?|inherit）
11.3 表大小
宽度：固定布局和自动布局
高度和对齐
第12章 列表与生成内容
12.1 列表
列表类型（list-style-type）、列表项图像（list-style-image）、列表项位置（list-style-position）
12.2 生成内容
使用before和after伪类生成，设置content值；计数器的应用
第13章 用户和界面样式
13.1 系统字体和颜色
13.2 光标（cursor）
13.3 轮廓（outline）
第14章 非屏幕媒体
14.1 设计特定于媒体的样式表
14.2 分页媒体
14.3 声音样式