CSS快速回顾

1. 层叠样式表

CSS是层叠样式表（Cascading Style Sheets），用样式描述如何显示HTML元素，实现内容与表现分离。

2. CSS规则

CSS规则由选择器、一条或多条声明构成：selector{declaration1; declaration2;….; declaration n}
选择器是用户需要改变样式的HTML元素，每条声明由一个属性或一个值组成，属性是用户希望设置的样式属性：selector{property:value} eg: h1{color:red; font-size:14px;}

3. CSS高级语法

用户对选择器进行分组，被分组的选择器可以分享相同的声明： h1,h2,h3,h4{color: green;}
继承：子元素从父元素继承属性，针对子元素创建特殊规则可以摆脱父元素的规则

4. CSS选择派生器

li strong{font-weight: normal;}选择了列表中的strong元素

5. CSS id选择器

给HTML元素标特定id <p id="red>标记id属性为red；id属性在每个HTML文档中出现一次
id选择器： #red{color: red;}
建立派生选择器： #sidebar p{} 应用于id是sidebar的元素内的段落

6. CSS类选择器

.center{text-align: center;} 所有拥有center类的HTML元素均为居中（类名的第一个字符不能用数字）
类的派生选择器： .fancy td{}
基于类被选择： td.fancy{}

7. CSS背景

p{background-color: gray;}
body{background-image: url('图像所在位置');}

8. CSS文本

定义文本属性来改变文本的颜色、字符间距、对齐文本、装饰文本、对文本可缩进
1）缩进文本 所有元素第一行缩进一个给定的长度，常用于将段落的首行缩进
p{text-indent: 5em;}
2）水平对齐（文本行对齐方式）
text-align: left/right/center/justify(两端对齐)/inherit(从父元素继承属性)
3）字间隔
p.spread{word-spacing: 30px;}
p.tight{word-spacing: -0.5em;}
4）字母间隔
letter-spacing 默认值为normal
5）文本装饰text-decoration
(1)none：关闭所有装饰（用于去掉超链接的下划线）
(2)underline：下划线
(3)overline：上划线
(4)line-through：贯穿线
(5)blink：文本闪烁
(6)direction：块级元素中文本的书写方向、表中列布局的方向、内容水平填充的方向

9. CSS字体

font-family设置字体：h1{font-family: Georgia,serif;} 找不到后默认从serif字体中找
font-style设置斜体文本：normal/italic
font-weight设置字体加粗：bold/100~900/normal
font-size设置字体大小：相对值or绝对值（绝对值不允许用户在浏览器中改变文本大小）body{font-size: 100%;}

10. CSS链接

a:link 普通的、未被访问的链接 a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方 a:active 链接被单击的时刻

11. CSS列表

CSS允许用户放置、改变列表项标志 ul{list-style-type: square} ul{list-style-image: url(xxx.gif)}
list-style-type 设置列表项标志的类型
list-style-image 将图片设置为列表项标志
list-style-position 设置列表中列表项标志的位置

12. CSS表格

(1)表格边框 border
table,th,td{border: 1ppx solid blue;}为table、th及td设置了蓝色边框
注意此处为双线条边框，若要显示单线条边框，可使用border-collapse属性。
(2)表格宽度和高度
table{width:100%;} th{height:50px;}
(3)表格中的文本对齐
text-align设置水平对齐方式，如td{text-align:right;}
vertical-align设置垂直对齐方式，如td{height:50px;vertical-align:bottom;}

13. CSS框模型

框模型（Box Model）规定了元素框处理元素内容、内边距、和外边距的方式。

1. CSS内边距（padding）
   1.1 padding属性接受长度值或百分比值，不允许负值。h1{padding:10px;} h1{padding:10px 0.25em 2ex 20%;}
   1.2 单边内边距属性
   padding-top padding-right padding-left pading-bottom
   1.3 内边距的百分比数值
   百分数值是相对于其父元素的width计算的。注：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是高度。

2. CSS外边距（margin）
   2.1 margin属性接受任何长度单位：像素/英寸/毫米/em，可以设置为auto。h1{margin:0.25in;} h1{margin:10px 0px 15px 5px;} p{margin:10%;}
   2.2 margin的默认值是0，有的浏览器会自动应用一个外边距

14. CSS定位

1. CSS定位（Positioning）属性
   允许用户对元素进行定位，通过调整其定位和浮动属性，可以建立列式布局，将布局的一部分与另一部分重叠。
   定位的基本思想是允许用户定义元素框相对于其父元素、另一个元素、浏览器窗口本身的位置。
   1.1 CSS定位机制
   3种：普通流、浮动和绝对定位。默认普通流中，块级框从上到下排列，框之间的垂直距离由框的垂直外边距计算出来。行内框在一行中水平布置，可以使用水平内边距、边框和外边距调整它们的间距。由一行形成的水平框成为行框。
   1.2 position属性
   static：元素框正常生成，块级元素生成矩形框，行内元素生成一个或多个行框。
   relative：元素框偏移某个距离，元素仍保持其未定位前的形状。
   absolute：元素框从文档流中完全删除，并相对于其包含块定位。生成一个块级框。
   fixed：类似于设置为absolute，其包含块是视窗本身。
2. CSS相对定位
   元素出现在它的未知，设置水平或垂直位置，让这个元素相对于它的起点进行移动。
3. CSS绝对定位
   在文档流中就好像该元素不存在一样，不占据空间，从此与文档流无关。
   绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
4. CSS浮动
   as浮动的框可以向左或向右移动，直到碰到包含框或另一个浮动框为止，设置float属性，定义向哪个方向浮动。浮动元素会生成一个块级框。float属性值：left/right/none/inherit