div+css处理链接的:link,:visited,:hover,:active四种状态

原创 2007年09月23日 15:08:00

div+css处理链接的:link,:visited,:hover,:active四种状态

[示例代码]

<html>
    <head>
        <style>
            a:link {background-color: red; color: white;}
            a:visited {background-color: yellow; color: black;}
            a:hover  {background-color: green; color: white;}
            a:active {background-color: blue; color: white;}
        </style>
    </head>
    <body>
        <div>
            <a href="http://a.link/">
                链接的默认效果是a:link中的效果
            </a>
        </div>
        <div>
            <a href="">
                访问过的链接的效果是a:visited中的效果
            </a>
        </div>
        <div>
            <a href="http://blog.csdn.net/hu_zhenghui">
                鼠标移动到链接上的效果是a:hover中的效果
            </a>
        </div>
        <div>
            <a href="http://blog.csdn.net/hu_zhenghui">
                鼠标单击链接时的效果是a:active中的效果
            </a>
        </div>
    </body>
</html>

[div+css关键词]

div css

[div+css重要工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&amp;displaylang=en

[div+css的常见问题]

较验div+css格式,http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式
链接的:link,:visited,:hover,:active四种状态

[div+css的浏览器兼容问题]

水平居中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中,Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记,Firefox支持!important标记,IE6忽略!important标记
手形鼠标指针,使用cursor: pointer;
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。

CSS中常用的四种链接状态:a:link、a:visited、a:hover及a:active

CSS 链接 不同的链接可以有不同的样式。 链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。 特别的链接,可以有不同的样式,这取决于他们是什么状态。 这四个链...
  • mtdyxsplzm
  • mtdyxsplzm
  • 2016年08月04日 21:25
  • 1103

谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序

今天学到一个有趣的新知识呢,迫不及待的想分享一下。自学前端的这条路上,还在基础部分打转,未来好难,走好现在脚下的每一步才是我现在最重要的。小小地感慨一下,下面进入正题吧。 1. 标签 我们先说...
  • wumenglu1018
  • wumenglu1018
  • 2017年01月18日 17:38
  • 3311

a:link a:visited a:hover a:active 样式顺序

1. a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的 2. a:active 必须被置于 a:hover 之后,才是有效的...
  • zjuwwj
  • zjuwwj
  • 2017年02月17日 16:10
  • 615

a标签的四个css伪类(link、visited、hover、active)样式理解

转自点击打开链接 伪类是CSS 用于向某些选择器添加特殊的效果,chrome和firefox中的css监控并不会显示所有的样式,有些显示会有点不全,IE下还是有点问题的,不过大体不变 ...
  • u010552788
  • u010552788
  • 2016年03月12日 21:53
  • 1711

CSS中A标签的a:link a:visited a:hover a:active 原来是有严格的顺序的

1。以前没注意,原来css定义超链接四个状态也是有顺序的。今天在网站里犯了这个错误,把hover写在visited 前面了,导致出现问题。 .a:link{text-decoration:none ;...
  • zxstone
  • zxstone
  • 2010年07月22日 19:37
  • 2173

hover active link visited

html> head lang="en"> meta charset="UTF-8"> title>title> style> /*a:hover...
  • yangwenlongsss
  • yangwenlongsss
  • 2017年07月17日 20:58
  • 1982

CSS定义中a:link,a:visited,a:hover,a:active 分别是什么意思?

CSS定义中a:link,a:visited,a:hover,a:active 分别是什么意思? 假如CSS放在Style文件夹下,页面引用时: <link href="Style/...
  • 99guo
  • 99guo
  • 2011年09月05日 15:22
  • 10025

css的link a:hover 必须在 a:link 和 a:visited 之后

近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。 再重复一遍正确的顺序:a:link、a...
  • u010002184
  • u010002184
  • 2015年10月24日 18:23
  • 636

html 超链接样式设置(link;visited;hover;active)

//去掉超链接下划线: style="text-decoration: none;" //链接平常样式 a:link {     font-size: 10pt;     c...
  • AnneQiQi
  • AnneQiQi
  • 2016年04月26日 09:44
  • 1523

超链接(link,visited,hover,active)

/*伪类选择器*/         /*1.默认链接状态*/         a:link{             color: brown;         }         /*2....
  • JV_YAN
  • JV_YAN
  • 2017年04月23日 13:55
  • 86
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css处理链接的:link,:visited,:hover,:active四种状态
举报原因:
原因补充:

(最多只允许输入30个字)