CSS 4.4 样式-链接

来源：互联网发布：JavaScript字符串分割编辑：程序博客网时间：2024/05/22 02:05

CSS 4.4 样式-链接

1.链接的四种形态：

·a：link，普通的，未被访问的链接

·a：visited，已访问过的链接

·a：hover，鼠标指针在链接上时，hover ['hʌvɚ]徘徊

·a：active，鼠标点击链接时

注意顺序要求：

link -> visited -> hover -> active或

visited -> link -> hover -> active

2.实例（颜色）：

a：link { color：#FF0000；}

a：visited { color：#00FF00；}

a：hover { color：#0000FF；}

a：acitve { color：#FFFF00；}

</style>

结果：颜色会变化

3.实例（下划线）：

a：link { text-decoration：none；}

a：visited { text-decoration：none；}

a：hover { text-decoration：underline；}

a：acitve { text-decoration：underline；}

</style>

结果：会出现下划线

4.实例（字体尺寸）：

a：link { color：red；}

a：visited { color：red；}

a：hover { font-size：150%；}

</style>

结果：字体颜色不变（红），字体由100%（原尺寸）变为150%

注：hover继承link和visited的属性，active继承hover的属性

5.实例（综合）：

<html>

<head>

<style>

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active

{

background-color:#7A4400;

}

</style>

</head>

<body>

<a href="/index.html" target="_blank">W3School</a>

</body>

</html>

结果：

0 0