超级链接美化
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
background-repeat:no-repeat;
no-repeat
background-repeat:repeat-x;
repeat-x
background-repeat:repeat-y;
repeat-y
background-image: url(images/libai.png);
background-repeat: repeat-y;
4.background-position
图片位置属性。
background-position:100px 200px;
表示让背景图片在盒子中向右移动100px，向下移动200px。
如果想向左、向下移动，要写负数。
background-position:100px 200px;
background-position最常见的用处就是“CSS精灵”css sprite，有些人叫做“CSS雪碧技术”。
CSS精灵
就是指把多个小杂碎图片，合成一张图片，然后用background-position定位只显示其中某一部分。
这样能够显著降低HTTP请求数。原来10个背景需要用10张图片，但是现在只需要1个。
background-position不仅仅可以用两个数字来定位，还可以用单词来定位。
在左右层面，我们用left、center、right来表示左、中、右
在上下层面，我们用top、center、bottom来表示上、中、下
先左右后上下
background-position:left 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
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;
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里
padding
padding-top
3.精灵的摆放
精灵的摆放
所有要成为先导符号的小图标，一定要放到精灵图的最右边。
网友评论