超链接设置

发表于: sitebuild | 作者: | 日期: 2008/6/12 08:06
标签:

总结一下超链接的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属性相同的链接的样式都会同时发生改变。

: https://blog.darkmi.com/2008/06/12/159.html

本文相关评论 - 1条评论都没有呢
Post a comment now » 本文目前不可评论

No comments yet.

Sorry, the comment form is closed at this time.