- CSS3 基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
语法：
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
property：是设置的样式属性。每个属性有一个值。属性和值被冒号分开。
语法：
selector {property: value}
- CSS3 文本格式
通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。
例：
p {text-indent: 5em;}
属性：
color：设置文本颜色。
direction：设置文本方向。
line-height：设置行高。
letter-spacing：设置字符间距。
text-align：对齐元素中的文本。
text-decoration：向文本添加修饰。
text-indent：缩进元素中文本的首行。
word-spacing：设置字间距。
- CSS3 框模型
CSS 内边距
padding 属性：
padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
例：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性：
通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。
属性：（以下边框为例，上左右同理）
border：简写属性，用于把针对四个边的属性设置在一个声明。
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color：设置元素的下边框的颜色。
border-bottom-style：设置元素的下边框的样式。
border-bottom-width：设置元素的下边框的宽度。
CSS 外边距
margin 属性：
设置外边距的最简单的方法就是使用 margin 属性。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
语法：
margin: top right bottom left
单边外边距属性：
可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
- CSS3 背景
背景色：
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
例：
p {background-color: gray;}
背景图像：
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/04.gif);}
背景重复：
需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
背景定位：
可以利用 background-position 属性改变图像在背景中的位置。
背景关联：
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
- CSS3 表格
表格边框：
如需在 CSS 中设置表格边框，需使用 border 属性。
例：
table, th, td
{
border: 1px solid blue;
}
折叠边框：
border-collapse 属性设置是否将表格边框折叠为单一边框
表格宽度和高度：
通过 width 和 height 属性定义表格的宽度和高度。
表格文本对齐：
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。
- CSS3 定位
CSS 相对定位：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
例：
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
CSS 绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
例：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
- CSS3 动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
属性：
@keyframes：规定动画。
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
animation-delay：规定动画何时开始。默认是 0。
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode：规定对象动画时间之外的状态。
- CSS3 过渡
过渡是元素从一种样式逐渐改变为另一种的效果。
属性：
transition：简写属性，用于在一个属性中设置四个过渡属性。
transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：定义过渡效果花费的时间。默认是 0。
transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
transition-delay：规定过渡效果何时开始。默认是 0。
- CSS3 2D转换
translate() ：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
rotate() ：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale() ：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
skew() ：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。
matrix() ：把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
- CSS3 3D转换
rotateX() ：元素围绕其 X 轴以给定的度数进行旋转。
rotateY() ：元素围绕其 Y 轴以给定的度数进行旋转。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
语法：
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
property：是设置的样式属性。每个属性有一个值。属性和值被冒号分开。
语法：
selector {property: value}
- CSS3 文本格式
通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。
例：
p {text-indent: 5em;}
属性：
color：设置文本颜色。
direction：设置文本方向。
line-height：设置行高。
letter-spacing：设置字符间距。
text-align：对齐元素中的文本。
text-decoration：向文本添加修饰。
text-indent：缩进元素中文本的首行。
word-spacing：设置字间距。
- CSS3 框模型
CSS 内边距
padding 属性：
padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
例：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性：
通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。
属性：（以下边框为例，上左右同理）
border：简写属性，用于把针对四个边的属性设置在一个声明。
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color：设置元素的下边框的颜色。
border-bottom-style：设置元素的下边框的样式。
border-bottom-width：设置元素的下边框的宽度。
CSS 外边距
margin 属性：
设置外边距的最简单的方法就是使用 margin 属性。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
语法：
margin: top right bottom left
单边外边距属性：
可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
- CSS3 背景
背景色：
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
例：
p {background-color: gray;}
背景图像：
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/04.gif);}
背景重复：
需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
背景定位：
可以利用 background-position 属性改变图像在背景中的位置。
背景关联：
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
- CSS3 表格
表格边框：
如需在 CSS 中设置表格边框，需使用 border 属性。
例：
table, th, td
{
border: 1px solid blue;
}
折叠边框：
border-collapse 属性设置是否将表格边框折叠为单一边框
表格宽度和高度：
通过 width 和 height 属性定义表格的宽度和高度。
表格文本对齐：
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。
- CSS3 定位
CSS 相对定位：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
例：
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
CSS 绝对定位：
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
例：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
- CSS3 动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
属性：
@keyframes：规定动画。
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
animation-delay：规定动画何时开始。默认是 0。
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state：规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode：规定对象动画时间之外的状态。
- CSS3 过渡
过渡是元素从一种样式逐渐改变为另一种的效果。
属性：
transition：简写属性，用于在一个属性中设置四个过渡属性。
transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：定义过渡效果花费的时间。默认是 0。
transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
transition-delay：规定过渡效果何时开始。默认是 0。
- CSS3 2D转换
translate() ：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
rotate() ：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale() ：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
skew() ：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。
matrix() ：把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
- CSS3 3D转换
rotateX() ：元素围绕其 X 轴以给定的度数进行旋转。
rotateY() ：元素围绕其 Y 轴以给定的度数进行旋转。
