注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

姑射道人的博客

博客新地址:nixuchen.com

 
 
 

日志

 
 

HTML超链接的样式定义  

2013-10-10 11:59:27|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

文字超链接默认的样式是:有下划线,文字在未访问时、访问时和访问过后有不同的颜色。

图像超链接默认的样式是:有边框,边框的颜色在未访问时、访问时和访问过后都不同。

利用CSS可更改超链接的样式:

伪类:

由于超链接有四种不同的状态,CSS用伪类来标识它们。

(1) :link:未访问过的链接。

(2) :visited:已访问过的链接。

(3) :hover:鼠标移动到链接上。

(4) :active:选定的链接。

伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才是有效的,:active必须被置于:hover之后才是有效的。

如果没有指定伪类,则默认为 :link

定义超链接的样式:

定义超链接样式的一般格式是:

选择符:伪类名 { 样式表 }

这样,一个超链接选择符最多可定义4个样式表,不同状态设置不同的样式。

例1:

<style type="text/css">
a:link { color: red; }
a:visited { color: blue; }
a:hover { color: green; }
</style>

a 是一个类型选择符,表示把样式应用在所有 <a> 标签上。

三个伪类对应于三种状态,它表示:当超链接未访问时是“红”色的,访问后为“蓝”色,鼠标移到超链接上时为“绿”色。:active 伪类未定义,使用默认值。

如果是文字超链接,以上颜色是文字的颜色,如果是图像超链接,颜色是边框颜色。

例2:

<style type="text/css">
#mlink a:link { color: #FF0000; text-decoration: none; }
#mlink a:visited { color: #008B8B; text-decoration: none; }
#mlink a:hover,#mlink a:active { color: #3CB371; text-decoration: underline; }
</style>

#mlink a 是一个包含选择符,表示把样式应用在 id="mlink" 区块内部的所有 <a> 标签上。如:

<div id="mlink">
<a href="……">……</a>
<a href="……">……</a>
</div>

这个超链接的效果是:未访问时是“#FF0000”色、无下划线,访问后为“#008B8B”色、无下划线,鼠标移到超链接上或选定时为“#3CB371”色、有下划线。

例3:

<style type="text/css">
a.mk:link { color: red; }
a.mk:visited { color: blue; }
a.mk:hover { color: green; }
a.mk:active { color: #3CB371; }
</style>

a.mk 是一个类选择符,表示把样式应用在含有 class="mk" 的 <a> 标签上。如:

<a href="……" class="mk">……</a>
<a href="……" class="mk">……</a>
  评论这张
 
阅读(1660)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017