总结一下超链接的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属性相同的链接的样式都会同时发生改变。
Sorry, the comment form is closed at this time.
No comments yet.