前端攻城狮---css样式之超链接伪类及其他知识点

咱们长话短说，取其精华去其糟粕，本章主要讲解超链接的伪类和背景图的定位使用。

超链接的伪类

伪类表示改标签的不同状态。就好比超链接点击的样式，点击完后的样式，未点击的样式等。

那么大家肯定会问，其他标签的伪类呢？其他的会在css3中讲到，这不现在才css2.1，慢慢来撒～。

超链接的伪类一共有四个，link、visited、hover、active

link

link是什么意识？link表示未访问的超链接的样式,(题外话超链接点击打开新的界面的属性target="_blank",突然抽风想起，就当做回顾把)。

使用方式：a:link{  }

visited

visited表示访问后的超链接，使用方式同上。

hover

hover表示鼠标放上面的样式，使用方式同上上。

active

active表示鼠标按下，使用方式同上上上。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

下边的demo，做一个导航栏把，顺便把上一节的浮动给应用一下

    
    
    


    

        

			

				菜单1
			
			

				菜单2
			
			

				菜单3
			
			

				菜单4
			
			

				菜单5
			
        
    

大家直接跑起来看看，效果更加直观哦。有的人可能会用visited的伪类，可能在使用中会出现没有效果，或者是直接显示visited的效果，主要原因是因为有两个：１．缓存问题；２．浏览器处于安全隐私的考虑屏蔽了该效果。

注：因为a是行内元素，使用要转成块级元素去设置宽高。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

背景系列属性

1 背景色
     background-color
2 背景图
      background-image: url(img/hebe.jpg);
3 背景重复
     background-repeat: no-repeat;  都不平铺
     background-repeat: repeat-y;  y轴平铺
     background-repeat: repeat-x;  x轴平铺
4 背景定位
     background-position: 200px 200px;　第一个参数是水平平移，第二个参数是竖直平移
     表示让背景图片向右移动200px 向下移动200px
 
     最大的用处：css sprite,css雪碧技术或css精灵(我们就叫css精灵把)

 什么叫css精灵呢？就是将很多个logo放到同一张图片上，然后根据不同的定位显示不同的图片

这面直接上demo把简单直接明了

　　这就是一张图，里面有很多标签，我们可以用它来实现css精灵图。

伪类和背景的属性的已经讲完，接下来会来讲定位的知识，如有表达错的请谅解和提出错的点，望能共同进步。