CSS 行高、超级链接、background总结

1.行高 line-height
1.1行高
<1>css中，行高是作用在”行“上的。
<2>为了严格保证字在行里面居中，有一个约定：行高、字号一般都是偶数。
1.2 单行文本垂直居中
<3>多行文本的行高是不能用行高来调整的，用padiing-top.
公式：
盒子高：行高 （ 文本垂直居中） 针对单行文本
1.3font属性和字体
<4>字号和行高，能够一起设置：

font:14px/24px "宋体"；
等价于：
font-size:14px;
font -height:24px;
font-family:"宋体"；

<5>font-family:字体
（1）不是所有字体都能用，因为这个字体要看用户有没有装。如果没有，就会变成宋体。
（2）页面中，我们只使用：微软雅黑、宋体、黑体。如果页面中需要其他字体，就需要切图。
（3）我们要将英文字体，都放在字体最前面。这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

font-family:"Times New Roman"，"微软雅黑"，“宋体”；

（4）英语使用：Arial 、Times New Roman
（5）所有中文字体，都有英文别称：
SimSun 宋体
Microsoft YaHei 微软雅黑
（6）行高可以用百分比。一般来说，都是大于100%的，因为行高一般一定要大于字号。

font:12px/200% “宋体”；
等价于：
font:12px/24px "宋体"；

2.超级链接的美化
2.1 伪类
<1>同一种标签，根据用户的某种状态不同，有不同的样式，这就是伪类。
<2>伪类用冒号来表示。

        a:link{
            color: red;
        }
        a:visited{
            color: orange;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: black;
        }

：link 表示用户没有点击过这个链接的样式； ：visited 表示用户访问过这个链接的样式； ：hover 表示用户鼠标悬停的时候链接的样式； （英语中表示“悬停”）

active 表示用户用鼠标点击这个链接，但是不松手的时候，此刻的样式。（鼠标悬停后点一下）
四种状态不允许更改顺序。如果更改顺序，那么将会失效。
所有关于盒子的属性，都要写在伪类中

2.2 超级链接的美化
<1>a标签中，描述盒子；伪类中描述文字的样式、背景。
<2>所有的a 不继承text/font这些，因为a自己有一个伪类的权重。

 .nav ul li a{
            display: block;
            width: 120px;
            height: 40px;
        }
        .nav ul li a:link,.nav ul li a:visited{
            text-decoration: none;
            color: white;
            background-color: yellowgreen;
        }
        .nav ul li a:hover{
            background-color:purple;
            font-weight: bold;
            color: yellow;

        }

3.background系列属性
3.1 background-color 属性
<1>背景颜色属性。
<2>css2.1中，颜色的表示方法：
（1）用英语单词来表示：

background-color: pink;

（2）用rgb方法表示：

background-color:rgb(255,0,0);

用逗号隔开r/g/b的值，每个值的取值范围为0~255.一共256个值。
（3）用十六进制表示：

background-color: #000;

所有用#开头的，都是十六进制。
16进制，逢16进1.
十六进制表示法，也是两位两位看颜色。可以简化为三位，所有#aabbcc的形式，能够简化为abc.
3.2 background-image属性
<1>用于给盒子加上背景图片：url()表示网址

background-image: url(images/1.jpg);

<2>背景天生是会被平铺满的。padding的区域也有背景图。
3.3 background-repeat属性
<1>设置背景图是否重复的以及重复方式。
<2>属性：
no-repeat 不重复
repeat -x 横向重复
repeat -y 纵向重复
3.4 background-position属性
<1>背景定位属性。
background-position:向右移动量 向下移动量；
<2>css精灵
方法是：将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示的图片部分。
<3>用单词描述：

background-position:描述左右的词 描述上下的词;
描述左右的词: left  / center/right
描述上下的词: top/center/bottom

用途：
（1）大背景图居中；
（2）通栏banner。
3.5 background-attachment
<1>背景是否固定。

background-attachment:fixed;

背景就会被固定住，不会被滚动条滚走。
3.6 background综合属性

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;