超链接设置

发表于: sitebuild | 作者: darkmi | 日期: 2008/06/12 08:00
标签: 超链接
字号:

总结一下超链接的css设置。

a:link
尚未链接过的超链接文字样式,同HTML的link属性。

a:visited
已经链接过的超链接文字样式,同HTML的vlink属性。

a:active
当鼠标点击超链接后,超链接显示的文字样式,同HTML的alink属性。

a:hover
当鼠标移动到超链接文字上方时,超链接显示的文字样式。

a
在此属性设置样式时,则上述四种属性将同时引用此值。

示例代码1:

a:link, a:active, a:visited {
text-decoration: none;
color: #333;
}

a:hover {
text-decoration: none;
color: #577DE7;
}

示例代码2:

a:link {
	color: #336699;
	text-decoration: underline;
}
a:visited {
	color: #666699;
	text-decoration: underline;
}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background: #003399;
}
a:active {
	color: #FFFFFF;
	text-decoration: none;
	background: #FF9933;
}

其他补充:
1、如果要在CSS中对不同ID的超链接设置不同的样式,可以通过如下方式设置:

a#link1:link{
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 3px solid #333333;
}

a#link1:hover{
	color: yellow;
	font-weight: bold;
	border-bottom: 3px solid #2E8B57;
}

a#link1:active {
	color: blue;
	font-weight: bold;
	border-bottom: 3px solid #2E8B57;
}

a#link1:visited{
	color: red;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 3px solid #333333;
}

2、如果在一个页面中有若干个超级链接的href属性相同,即超级链接指向同一个页面,那么只要有任一个链接被点击,其他所有href属性相同的链接的样式都会同时发生改变。

切换主题切换主题
返回顶部