a标签的css样式四个状态LVHA的设计

   2015-12-20 0
核心提示:a标签有四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的),下面有个示例大家可以看看
表示所有状态下的连接 如 a{color:red}

① a:link:未访问链接 ,如 a:link {color:blue}

② a:visited:已访问链接 ,如 a:visited{color:blue}

③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}

④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。

前三者分别对应body元素的link、vlink、alink这三个属性。

四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。

举例:伪类的常见状态值

复制代码
代码如下:

<style type = “text/css”>
a {font-size:16px}
a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线
a:active:{color: red; } //激活:红色
a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线
a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线
</style>
 
标签: a标签 CSS样式
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • css中a标签内容超出最大字数隐藏处理 css设置a
    css中a标签内容超出最大字数隐藏处理问题:a标签内容超出最大字数显示问题1.超出是最后显示为“...”2.鼠标放在上面显示完整内容3.点击新窗口打开链接内容解决方法:css部分:.list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200p
    03-08
  • css a标签去除下划线
    css a标签去除下划线a{text-decoration:none;}
    03-08
  • HTML a标签 target属性作用
    特殊的目标有 4 个保留的目标名称用作特殊的文档重定向操作:_blank浏览器总在一个新打开、未命名的窗口中载入目标文档。_self这个目标的值对所有没有指定目标的 a 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多
    03-08
  • html点击a标签弹窗QQ聊天界面 html点击按钮弹出
      以为很难。以为要第三方。谁知道不用。一句话的事情。1 a hfer="tencent://message/?uin=12345Site=Menu-=yes"弹出QQ为12345的窗口/a 
    03-08
  • Bootstrap dropdown a标签或者button 点击事件
    $(function() {$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {   ////[data-stopPropagation]为选择器,li里面点击事件选择器   e.stopPropagation(); }); });定义属性值data-stopPropagation的元素点击时停止传播事件  u
    03-08
  • 使用jquery触发a标签跳转 jquery触发点击
    错误示例a href="http://www.baidu.com" target="_blank"baidu/a// 直接是触发click事件是无法跳转的$('a#toMain').trigger('click') ;正确示例// 如果要用jquery触发进行跳转,那么a标签中【必须要有其它子标签】,然后触发该子类标签才能进行跳转a href="ht
    03-08
  • a标签中的href="#"与href="javascript:void(0)"
    转自http://blog.csdn.net/fightplane/article/details/5190037 a href="#" 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOPa href="javascript:void(0)" onClick="window.open()" 点击链接后,页面不动,只打开链接a href="#" onclick="javascript:retu
    03-08
  • html css 怎么使img和a标签在一个行内元素中间
    答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦。divdiv class="div01" div class="border"img src="../images/top_06.gif"/div ul class="content01 black"li class="clearfix"ul class="gtype"str
    03-08
  • jquery trigger 触发事件小计 -- 关于a标签
    jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题。在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题。我很想当然的写层这样:$("a").trigger('click')。然而却一直未能触发成功。 然后就问了问强大的度娘。原来: $('a').
    02-08
  • HTML5移动开发中的meta与link html中的meta标签
    metaHTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scal
    02-08
点击排行