CSS基础-5 伪类

一、伪类

我们以a标签为例

伪类标签分为4类

    1. 设置超链接默认的样式

a:link {属性:值;.....}

或者

a { 属性: 值;}           推荐使用这种方式

    2. 设置超链接访问过后的样式

a:visited {属性:值; ......}

注意：该伪类（visited ）只能设置有关颜色的属性。

有浏览器缓存问题

　　

    3. 鼠标移动到超链接上的样式

a:hover {属性:值;.....}

    4. 超链接激活状态下的样式

a:active {属性: 值;...}

二、背景(background)

（1）background-color   设置背景颜色

（2）background-image: url(2.png);   设置背景图片

注意：给标签元素设置背景图片的时候，需要有宽度和高度

例子：

.a {

margin:100px auto;

width:300px;

height:300px;

background-image:url(img/b.jpg)

}

效果如下：

（3）background-repeat: no-repeat;    背景不平铺

默认值为　repeat 平铺

no-repeat;    背景不平铺

　　　　　　　　

　　　　　　　　 代码如下：

.a {

margin:100px auto;

width:300px;

height:300px;

border:3px solid red;

background-image:url(img/b.jpg);

 background-repeat: no-repeat;

}

repeat-x       背景横向平铺

　　　　　　　　

代码如下：

.a{

margin:100px auto;

width:300px;

height:300px;

border:3px solid red;

background-image:url(img/b.jpg);

　　            background-repeat: repeat-x;

}

repeat-y        背景纵向平铺

（4）background-position： 设置背景图片的位置

直接设置具体的方位名词 （left,right,top,center,bottom）

注意： 当给背景设置位置的时候，如果背景位置的取值为具体的方位名词的时候，取值位置可以调换。

　　　　　　　　

如果只写一个具体方位名称，默认的第二值为居中（center）

例子：

.a {

margin:100px auto;

width:500px;

height:500px;

border:3px solid red;

background-image:url(img/b.jpg);

background-repeat: no-repeat;

background-p osition:left;

}

设置具体值的时候，第一个值为水平方向，第二个值为垂直方向

background-attachment: fixed;  设置背景图片固定