1. 基础知识
   1. 设计代码结构
      1. 标记简史
         1. 有意义的标记的重要性
         2. ID和类名
         3. 为元素命名
         4. ID还是类
            1. ID只在绝对确定某个元素只会出现一次的情况下才用
         5. div和span
            1. div对块级元素进行分组，应该只在没有元素能够实现区域分割的情况下使用
            2. span对行内元素进行分组和标识
         6. 微格式
         7. 不同的HTML和CSS版本
      2. 文档类型和DOCTYPE
         1. DOCTYPE有两种风格，严格和过渡
      3. 浏览器模式和DOCTYPE切换
         1. 浏览器模式主要包括混杂模式和标准模式
         2. 根据DOCTYPE是否存在呈现模式，被称为DOCTYPE切换
2. 为样式找到应用目标
   1. 常用的选择器
      1. 类型选择器
      2. 后代选择器
      3. ID选择器
      4. 类选择器
      5. 伪类
   2. 通用的选择器
   3. 高级选择器
      1. 子选择器
      2. 相邻同胞选择器
      3. 属性选择器
      4. 层叠和特殊性
         1. 层叠规则
         2. 特殊性的计算规则
         3. 继承
   4. 规划、组织和维护样式表
      1. 对文档应用样式
         1. @import
         2. <link>
         3. 设计代码的结构
         4. 删除注释和优化样式表
3. 可视化格式模型
   1. 盒模型概述
      1. IE和盒模型
         1. E6及更早的IE版本在混杂模式中使用了非标准盒模型
         2. width属性不是内容的宽度，而是内容、内边距和边框的宽度总和
      2. 外边距叠加
         1. 只有普通文档流中块框（块级元素）的垂直外边距才会发生外边距叠加
   2. 定位概述
      1. 可视化格式模型
         1. CSS中三种基本的定位机制：普通流、浮动和绝对定位
         2. 块级元素
            1. 从上到下一个接一个排列，元素之间的垂直距离由元素的垂直外边距计算出来
         3. 行内元素
            1. 在一行中水平排列，可以使用水平内边距、边框和外边距调整行内元素之间的水平间距
            2. 垂直内边距、边框和外边距不影响行内的高度
         4. display: inline-block
            1. 让元素像行内元素一样水平排列，并且元素可以设置宽度、高度、垂直外边距和内边距
      2. 相对定位
         1. 在使用相对定位时，无论是否移动，元素仍然占据原来的空间
      3. 绝对定位
         1. 绝对定位使元素的位置与文档流无关，因此不占据空间
         2. 绝对定位元素的位置是相对于距离它最近的那个已定位的祖先元素确定的
         3. 绝对定位不仅可以覆盖页面上的其他元素，还可以设置z-index属性来控制元素的叠放次序
      4. 固定定位
         1. 固定定位（position: fixed）是绝对定位的一种
         2. 能够创建总是出现在窗口中相同位置的浮动元素
      5. 浮动
         1. 浮动元素不在普通文档流中
      6. 行框和清理
         1. 元素内的文本内容会受到浮动元素的影响，会移动以留出空间
         2. 想要阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性
         3. clear属性可以是left、right、both或none。它表示框的哪边不应该挨着浮动框
4. 背景图像效果
   1. 背景图像基础
      1. background-position使用像素为单位设置背景图像的位置时，是图像左上角到元素左上角的距离为指定像素。
      2. background-position使用百分数为单位时，是图像上距离图像左上角的指定百分数的点到父元素上距离父元素左上角为指定百分数距离的位置
   2. 圆角框
      1. 山顶角
         1. border-image工作原理是把图片分成9块，然后把他们应用到元素边框的边和角
         2. border-image-slice规定图像边框的向内偏移，从而可以精确地把图片划分成9块
         3. border-image-width可以定义划分边框的宽度
         4. border-image-outset可以定义在边框外部绘制border-image-area的数量
      2. 不透明度
         1. css不透明度
            1. opacity属性的不透明度除了对背景生效之外，应用它的元素的内容也会继承它
         2. RGBa
            1. RGBa是一种同时设置颜色和不透明度的机制
         3. PNG透明度
            1. PNG文件格式支持alpha透明度
   3. 图像替换
      1. FIR
         1. display值为none或visibility为hidden的元素会被屏幕阅读器忽略，应该避免使用
      2. Phark
      3. sIFR
5. 对链接应用样式
   1. 简单的链接样式
      1. :link伪类选择器用来寻找没有被访问过的链接
      2. :visited伪类选择器用来寻找被访问过的链接
      3. :hover动态伪类选择器用来寻找鼠标悬停处的元素
      4. :active动态伪类选择器用来寻找被激活的元素（对于链接来说，激活发生在链接被单击时）
      5. 为了确保后定义的伪类覆盖之前定义的伪类，应用链接样式的顺序为：a:link、a:visited、a:hover、a:focus、a:active（可以记为LVHFA）
   2. 为链接目标设置样式
      1. 用:target伪类为目标元素设置样式
   3. 突出显示不同类型链接
      1. 用[att^=val]属性选择器寻找以文本http:开头的所有链接
      2. 使用[att$=val]属性选择器寻找以特定值结尾的属性
   4. 创建类似按钮的链接
      1. CSS spirit
         1. CSS spirit是包含许多不同图标、按钮或图形的单个图像，这样可以减少请求数量
      2. 用CSS3实现翻转
         1. -webkit-box-reflect属性可以创建对象的倒影，这个属性包含倒影的位置和距离以及蒙版图像这几个参数。可以使用-webkit-gradient值自动生成这个蒙版
   5. 对列表应用样式和创建导航条
      1. 基本列表样式
         1. 用list-style-image属性可以添加定制的项目符号。但这种方法对项目符号图像的位置控制能力不强
         2. 常用的方法是关闭项目符号，并将定制的项目符号作为背景添加到元素上，然后可以使用背景图像的定位属性精确地控制自定义项目符号的对准方式
      2. 创建基本的垂直导航条
      3. 创建简单的水平导航条
      4. 创建图形化导航条
      5. Suckerfish下拉菜单
6. 对表单和数据表格应用样式
   1. 对数据表格应用样式
      1. 表格特有的元素
         1. caption基本上用作表格的标题
         2. summary用于表格标签，用来描述表格的内容
         3. thead表示列表标题
         4. 行标题和列标题应该使用th而不是td标记。但是某些内容既是内容又是数据，那么应该使用td标记
         5. th可以设置scope="col"或scope="row"的属性来定义是列标题还是行标题
         6. tr表示整行
         7. col表示整列，colgroup能够使用col元素对一个或多个列定义和分组
      2. 对表格应用样式
         1. border-collapse可以用来设置表格的边盒模型，其值seperate表示单独模型，collapse表示叠加模型
         2. border-spacing属性设置相邻单元格的边框间的距离（仅用于单独模型中）
   2. 简单的表单布局
      1. 有用的表单元素
         1. fieldset用来对相关信息块进行分类
         2. 为了识别每个fieldset元素的用途，可以使用legend元素,legend在不同浏览器有不同的默认样式
      2. 表单标签
         1. label元素用来帮助添加结构和增加表单的可用性和可访问性
         2. 标签和表单控件关联起来的方法
            1. 隐式方式
            2. <label>email<input name="email" type="text"/></label>
            3. 显式方式
            4. <label for="email">email</label> <input name="email" id="email" type="text" />
         3. 在表单输入控件和标签之间创建关联需要id属性，将表单数据发送回服务器需要name属性。id和name不必相同，但为了保持一致，尽可能让它们相同
   3. 复杂的表单布局
7. 布局
   1. 所有CSS布局技术的根本都是3个基本概念：定位、浮动和外边距操纵
   2. 计划布局
      1. 先把页面划分为大的结构性区域
      2. 然后将注意力转移到内容区域本身，开始建立网格结构
      3. 最后在各个内容区域中寻找不同的布局结构
      4. 结构设计完成之后，可以开始关注不同类型的内容
      5. 查看每个内容块的结构，看看不同的类型中是否有共同的模式
      6. 找出模式并确定命名约定后，最好马上开始定义将使用的元素
   3. 基于浮动的布局
      1. 常见的做法不是连续地浮动和清理元素，而是浮动几乎所有东西，然后在整个文档的“战略点”（比如页脚）上进行一次或两次清理。还可以使用overflow: hidden;清理某些元素的内容
      2. 两列的浮动布局
         1. 让一个元素向左浮动，让另一个元素向右浮动
      3. 三列的浮动布局
   4. 固定宽度、流式和弹性布局
      1. 流式布局
         1. 使用流式布局时，尺寸是使用百分数而不是像素设置
         2. 不要横跨浏览器而是让容器只跨越宽度的一部分，比如85%
         3. 可以考虑用百分数设置内边距和外边距
      2. 弹性布局
         1. 弹性布局相对于字号来设置元素的宽度，以em为单位设置宽度
         2. 建议内部宽度仍然使用百分数，只以em为单位设置容器的宽度
      3. 流式和弹性图像
         1. 对于需要跨大区域的图像，比如站点页眉或品牌区域中的图像，可以考虑使用背景图像，而不是图像元素
         2. 对于常规内容图像，如果希望它们垂直和水平伸缩以避免被剪切，可以将图像元素添加到没有设置任何尺寸的页面上，然后设置图像的百分数宽度，并且添加与图像宽度相同的max-width以避免像素失真
   5. faux列
      1. 在一个占据布局最大高度的元素上应用重复的背景图像，从而创建列的效果
      2. 为流式布局创建faux列需要按百分比对背景图像进行定位。按百分比定位背景图像可以创建水平比例与布局相同的背景图像
   6. 高度相等的列
   7. CSS3列
      1. CSS3也可以创建等高文本列，需要用到colum-count、colum-width和colum-gap属性
8. bug和修复bug
   1. 捕捉bug
      1. 常见的CSS问题
         1. 特殊性和分类次序的问题
         2. 外边距叠加的问题
            1. 如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离
            2. 通过添加一个垂直边框或内边距，外边距就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部外边距边缘的距离
   2. 捕捉bug的基本知识
      1. 尽量一开始就避免bug
      2. 隔离问题
      3. 创建基本测试案例
      4. 修复问题，而不是修复症状
   3. 拥有布局
      1. 什么是布局
         1. IE使用布局概念来控制元素的尺寸和定位
         2. “拥有布局”（have layout）的元素负责本身及其子元素的尺寸设置和定位
         3. 一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制
      2. 解决办法
         1. IE条件注释
         2. 关于hack和过滤器的一个警告
         3. 明智地使用hack和过滤器
         4. 应用IE for Mac带通过滤器
         5. 应用星号HTML hack
         6. 应用子选择器hack
   4. 分级浏览器支持
      1. 首先确定一组浏览器，让站点在这些浏览器中的表现一致
      2. 确定一组已经过时但仍然比较重要的浏览器，在这些浏览器中随机选择几个执行测试，尝试修复问题
      3. 最后确定一组完全不想正式支持的浏览器，可以确保内容和功能可用
9. 实例研究：Roma Italia
   1. 对于各种标记（HTML元素、属性和值，CSS的选择器、属性和值），能简化就简化
   2. RGBa不透明度可以应用于特定的属性（比如背景），它只影响这个属性。opacity会影响应用它的元素中的所有东西
   3. 如果文本太长，在包含它的元素中放不下，text-overflow会截断它，使用ellipsis值在被截断的文本后面加上省略号
   4. 对于Ctrl+/-和Command+/-命令，每种浏览器的最新版本现在默认采用页面缩放，。页面缩放直接缩放整个页面—布局、格式和文本大小