第9章，装饰网站导航

限制访问，处于隐私方面考虑，浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了。其中包括对已访问过的链接定义color、background-color、border-color等样式（除非已经为那些链接的正常状态定义了颜、背景色和边框色）消除空格方法1：把上一个</li>与下一个<li>放同一行，不过，代码都不这样写

<ul>  <li><a href="#">one</a></li><li>  <a href="#">two</a></li><li>  <a href="#">three</a></li></ul>

对水平导航栏使用浮动

1、浮动列表项目

给特殊的链接类型定义样式

使用属性选择器

第10章，CSS的transform、transition和animation属性

transform（变形）

1、rotate（旋转）

.testClass{  transform:rotate(20deg);     /* 提供一个0~360的度数值，正值顺时针方向旋转，负值逆时针 */}

2、scale（缩放）

.testClass{  transform:scale(2);          /* 接受单个参数：放大或缩小，0~1之间的数是缩小，大于1的数是放大，负数会将元素倒过来缩放 */  transform:scale(x,y);         /* 接受两个参数：第一个表示水平缩放，第二个表示垂直缩放 *//*单方向缩放：*/  transform:scaleX(num);/*沿X轴缩放*/  transform:scaleY(num);/*沿Y轴缩放*/}

3、translate（平移）

transform的translate函数只是将一个元素从它现有位置向左或向右以及向上或向下移动一定距离这些函数的应用顺序就是浏览器应用这些效果的顺序

transition

实际上是在一定时间内，一组CSS属性变换到另一组属性的动画展示过程。transition-property用于定义要以动画显示哪些属性，可以指定一个或多个，也可以使用all关键字。时间与属性是一一对应的

给transition定时

transition-timing-function属性可控制动画速度。并不是控制动画时间长短，而是控制动画期间的速度。可以使用关键字：linear、ease、ease-in、ease-out、ease-in-out，浏览器默认以ease方法。可以使用在线工具创建和测试不同的定时函数，Mathew Lein的Ceasar工具就是其中之一：http://matthewlein.com/ceaser/在使用CSS下拉菜单时，如果不小心让鼠标离开了菜单，则下拉菜单很快就消失了，可以使用如下做法：

transition快捷方法

使用transition属性。只需要列出属性、延时时间、定时函数，并用空格分开即可。还可以分开定义多个，只需要逗号分隔：需要提供供应商前缀

animation

创建动画

@keyframes fadeIn{  from{  opacity: 0;  }  to{  opacity: 1;  }}

@keyframes growAndGlow{  from{    background-color: yellow;    animation-timing-function: cubic-bezier(1, .3, 1, .115);  }  50%{    transform:scale(1.5);    background-color:blue;    animation-timing-function: linear;  }  to{    transform:scale(3);    background-color: red;  }}

第11章，表格和表单格式化

使用text-align和vertical-align调整垂直对齐和水平对齐

圆角

利用border-radius可以给表格单元（而不是表格本身）添加圆角。

table{   empty-cells:hide;}

第三部分----CSS页面布局

第12章，CSS布局简介

网页布局类型

1、固定宽度，参看www.alistapart.com，www.espn.go.com，www.nytimes.com

原标题：CSS3秘笈第三版涵盖HTML5学习笔记9~12章

关键词：HTML