知识点导航：

* 行高和字号
    + 行高
    + 单行文本垂直居中
    + font 属性
* 超级链接
    + 伪类
* background 系列属性
    + background-color
    + background-image
    + background-repeat
    + background-position
    + background-attachment
    + background 综合属性

行高和字号<p>

行高<p>

在 CSS 中，所有的行都有行高。盒模型的 padding 不是作用在文字上的，而是作用在 “行”上的

line-height: 40px

文字是在自己的行里面居中的

字号 14px 行高 24px

为了严格保证字在行里面居中，行高、字号一般都是偶数，这样他们的差就是偶数，能够被 2 整除

单行文本垂直居中<p>

文本在行里面居中: 对于单行文本, 让行高等于盒子高；多行文本垂直居中，设置盒子的 padding。

单行文本垂直居中 多行文本垂直居中

font 属性<p>

font 综合属性<p>

font: 14px/24px "宋体"

等价于：

font-size: 14px;
line-height: 24px;
font-family: "宋体";

字体<p>

有些时候设置的字体系统没有，默认会设置为宋体。遇到这种情况可以设置备选字体( 英语字体放前面，这样所有的中文就不能匹配英语字体，因为英语字体内没有中文字 )

font-family: "Times New Roman", "微软雅黑", "宋体";

行高使用百分比<p>

行高可以用百分比，表示字号的百分之多少。一般来说，都是大于 100%的，因为行高一定要大于字号

font: 12px/200% "宋体"；

等价于：

font: 12px/24px "宋体"；

超级链接<p>

伪类<p>

同一个标签根据用户的状态不同有不同的样式，这就是伪类，它用冒号来表示。

a 标签有 4 种伪类：

a:link {  //正常状态下
  color: red;
}
a:visited {  //已访问的状态
  color: orange;
}
a:hover {  //鼠标悬停的状态
  color: green;
}
a:active {  //鼠标点击的状态
  color: black;
}
//必须按照这个顺序写，否则会失效

编写代码时，a 标签中描述盒子；伪类中描述文字的样式、背景

所有的 a 不继承 text、font 这些东西，因为 a 自己有一个伪类的权重

background 系列属性<p>

1. background-color<p>

在 CSS2.1 中，颜色的表示方法共有三种：

1. 单词      （简单的颜色）
2. rgb     
3. 十六进制   （可以简化成三位）

---

2. background-image<p>

用来给盒子加上背景图片，默认会被铺满（padding的区域有背景图）

background-image: url(images/wuyifan.jpg) //相对路径

本地图片

在 CSS 2.1 中，背景图片是不能调整尺寸大小的

3. background-repeat<p>

用来设置背景图是否重复以及重复方式。共有三种值：

background-repeat: no-repeat;  //不重复
background-repeat: repeat-x;  //横向重复
background-repeat: repeat-y;  //纵向重复

4. background-position<p>

背景定位属性,类似iOS中的 frame 的 origin 的感觉，可以为负数，表示相反方向

background-position

它还可以用单词来描述：

background-position: right bottom; //右下角

right bottom

CSS 精灵
"CSS 精灵"也叫做"CSS 雪碧"技术（CSS Sprite），是一种 CSS 图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用 CSS 的背景定位来显示需要显示的图片部分，减少了请求，比如 4 张小图片，原本需要 4 个请求，但是用了 CSS 精灵，小图片变为了一张图，请求就只有一个了。

5. background-attachment<p>

背景是否固定<p>

background-attachment: fixed;

背景被固定住，不会被滚动条滚走

6. background 综合属性<p>

background 属性和 border 一样，是一个综合属性

background: red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;

它是可以任意省略某个部分不写的：

background: blue url(1.jpg) no-repeat 100px 100px；

如图

精灵的使用

background: url(1.jpg) no-repeat 0-133px;