5.CSS链接

1.链接样式

1.不同的链接可以有不同的样式。
2.链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。
3.特别的链接，可以有不同的样式，这取决于他们是什么状态。
4.这四个链接状态是：
①a:link：正常，未访问过的链接。
②a:visited：用户已访问过的链接。
③a:hover：当用户鼠标放在链接上时。
④a:active：链接被点击的那一刻。

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

5.当设置为若干链路状态的样式，也有一些顺序规则：
①a:hover 必须跟在 a:link 和 a:visited后面。
②a:active 必须跟在 a:hover后面。

2.文本修饰

1.text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

3.背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

4.例子

1.为超链接添加其他样式。

<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>

2.结合若干 CSS 属性显示为方框。

<style>
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>