07_CSS入门和高级技巧(5)

超级链接美化

1.伪类

同一个超级链接，根据用户的点击情况，有自己样式：

超级链接根据用户点选情况，有4种状态：

a:link 没有访问的超级链接

a:visited 已经访问的超级链接

a:hover 鼠标悬停的时候

a:active 鼠标按下的时候

<style type="text/css">
	a:link{
		color:orange;
	}
	a:visited{
		color:green;
	}
	a:hover{
		color:black;
		font-size: 20px;
		border: 1px solid black;
	}
	a:active{
		font-size: 30px;
	}
</style>

在css里面叫做类，这个东西是工程师加的，可以明确的指定某一个标签是什么类；

但是:link、:visited，是用户指定的状态，在页面编辑的时候，我们只能定义，但是不知道是属于什么类，所以叫做“伪类”。

2.爱恨准则

先爱了，才能恨。

css有规定，四个伪类的顺序必须是：

link、visited、hover、active

和love hate的顺序一样，所以可以帮助记忆，叫做“爱恨准则”。

如果顺序不一样，那么就有可能一些样式会错乱。

注意，可以省略某个，但是顺序不能变。比如我们省略visited，那么：link、hover、active

3.常见写法

一般的，我们都会把a:link、a:visited写在一起，这样点过和没有点过样式一样：

<style type="text/css">
	a:link,a:visited{
		text-decoration: underline;
		color:#333;
	}
	a:hover{
		color:red;
	}
</style>

如果a要转块、设置宽高，那么我们一般习惯把盒模型的属性写在a这个选择器里。把关于文字的属性，写在伪类选择器中。特别的，一定要记住text-decoration一定要写在伪类里面，或者a标签里，绝对不能从父亲继承，因为父亲继承来的text-decoration:none;干不掉超级链接默认的下划线。

 .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;
 }
 .nav ul li a:hover{
 	background-color: gold;
 }

a这个选择器，“暗含”了a:link、a:visited，所以也可以不写a:link、a:visited，直接写a:hover

 .nav ul li a{
 	display: block;
 	width: 120px;
 	height: 40px;
 	text-decoration: none;
 	color:white;
 }
 .nav ul li a:hover{
 	background-color: gold;
 }

伪类的权重和类一样，如果增加了一个类选择器。

background系列属性

1.background-color

背景颜色属性background-color:#f00;

没有什么好说的，我们一直在用，记住，padding区域也有背景颜色！border以内的地方都有颜色。

2.background-image

背景图片属性background-image:url(images/1.jpg);

url是uniform resource locator统一资源定位器的意思，说人话就是“网站”。

url里面没有引号，是相对路径、绝对路径都是可以的。

和插入图片不一样

背景图的应用

<img src=”” />

背景图片会默认的横向、纵向铺很多个。

3.background-repeat

repeat就是重复的意思

background-repeat:no-repeat;

background-repeat:repeat-x;

background-repeat:repeat-y;

background-image: url(images/libai.png);
background-repeat: repeat-y;

4.background-position

图片位置属性。

background-position:100px 200px;

表示让背景图片在盒子中向右移动100px，向下移动200px。

如果想向左、向下移动，要写负数。

background-position最常见的用处就是“CSS精灵”css sprite，有些人叫做“CSS雪碧技术”。

就是指把多个小杂碎图片，合成一张图片，然后用background-position定位只显示其中某一部分。

这样能够显著降低HTTP请求数。原来10个背景需要用10张图片，但是现在只需要1个。

background-position不仅仅可以用两个数字来定位，还可以用单词来定位。

在左右层面，我们用left、center、right来表示左、中、右

在上下层面，我们用top、center、bottom来表示上、中、下

先左右后上下

background-position:left bottom;

可以用百分比来表示background-position

backgrond-position:50% 0;等价于 background-position:center top;

假设盒子现在宽度是600px，背景图的宽度是121px，所以

background-position:center top;

等价于：background-position:50% 0;

等价于：background-position:239.5px 0;

怎么计算来的？

600 / 2 - 121 /2 = 239.5px

应用：

1）大背景

2）通栏banner

banner的尺寸一般都非常宽，是为了照顾有钱的用户，他们使用的是宽屏显示器，分比率达到1920，所以banner的宽度基本都是1920的。我们要用背景来做banner，写上

background-image: url(images/banner160223.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #E0B895;

不管多大的分辨率，我们的banner都是通栏的：

5.background-attachment

背景附属属性，attachment就是附属的意思。它的一个值比较有用fixed;

background-attachment: fixed;

css2.1层面，就这些。css3中又要增加background另外5个属性，等到时候再说。

我们可以合写：

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

等价于：

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

背景图的应用

1.图换文字

我们要插入logo：

<h1>
	<img src="images/logo.png" alt="" />
</h1>

这种插入logo的方式，对搜索引擎不友好。我们希望的是h1里面是文字，而不是图片。搜索引擎是无法识别图上的文字的。

所以，比较好的方法，就是用背景图来呈递这个图片，标签中写上文字，标签中的文字是搜索引擎能抓取的。

<h1>爱前端-专业前端开发培训</h1>

    .header h1{
        width: 221px;
        height: 68px;
        background:url(images/logo.png);
        text-indent: -999em;   → 赶走文字，让用户看不到文字
    }

也可以：

    .header h1{
        width: 221px;
        height: 68px;
        background:url(images/logo.png);
        line-height: 400px;
        overflow: hidden;
    }

2.先导符号放在 padding里

3.精灵的摆放

所有要成为先导符号的小图标，一定要放到精灵图的最右边。