您的位置：首页 > Web前端 > CSS

css的伪类别

2015-07-29 08:48 501 查看

css伪类别的介绍：

css的伪类别可分为四个属性：

1，a:link ：超链接的普通样式，即正常浏览状态的样式。

2，a:visited：被点击过的超链接的样式。

3，a:hover：鼠标指针经过超链接上时的样式。

4，a:active：在超链接上点击，即“当前激活”时，超链接的样式。

css伪类别的作用：

css的伪类别常常用来配合各种属性风格制作出千变万化的动态超链接，这里我为大家介绍一种通过css伪类别制作的按钮式超链接。

以下为实现代码：

<html>

<head>

<title>超链接测试</title>

<style type="text/css">

a{ /*统一设置所有样式*/

font-family:Arial;

font-size:14px;

text-align:center;

margin:3px;

background-color:#c0c0c0;

}

a:link,a:visited{ /*超链接正常状态、被访问过的样式*/

color:#ff0000;

padding:4px 10px 4px 10px;

backgroundcolor:#ecd8db;

text-decoration:none;/*取消下划线*/

border-top:1px solid #eeeeee; /*边框显示阴影效果*/

border-left:1px solid #eeeeee;

border-bottom:1px solid #717171;

border-right:1px solid #717171;

}

a:hover{ /*鼠标经过时的超链接*/

color:#821818;

padding:5px 8px 3px 12px;/*上左和下右的内边距变换，实现“按下去”的动态效果*/

backgroundcolor:#ecd8db;

border-top:1px solid #717171;/*上左和下右的颜色变换，体现出动态的效果*/

border-left:1px solid #717171;

border-bottom:1px solid #eeeeee;

border-right:1px solid #eeeeee;

}

</style>

</head>

<body>

<a href="css">Fint</a>

<a href="css">Tell Us</a>

<a href="css">Web</a>

<a href="css">Web Design</a>

<a href="css">Dom</a>

</body>

</html>

需要注意的几点：

1，对于这四个伪类别，要注意它们的声明顺序。例如，为了使超链接在平常状态下取消下划线，而鼠标经过时出现下划线，如下设置：

a:linnk,a:visited{text-decoration:none;}

a:linnk,a:visited{text-decoration:none;}

如果交换上面两行代码的顺序则鼠标经过时的效果不会产生，这是由于“层叠”的原因，后面的将会覆盖前面的。

2，在实际工作中，经常使用：

a,a:visited{text-decoration:none;}

而不用：

a:linnk,a:visited{text-decoration:none;}

3，当前激活状态“a:active”出现的情况非常少，因此很少使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航