css的伪类别

最新推荐文章于 2020-12-26 14:58:54 发布

原创最新推荐文章于 2020-12-26 14:58:54 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css的伪类别 #伪类 #超链接 #鼠标

css 专栏收录该内容

3 篇文章

订阅专栏

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>