首先来了解下<a>标签的一些样式:



<a>标签的伪类样式

一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:


总: a 表示所有状态下的连接 如 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不能设置有无下划线(总是有的)。



举例:伪类的常见状态值

  1. <style
    type = “text/css”>
  2. <!--
  3. a {font-size:16px}
  4. a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线
  5. a:active:{color: red; } //激活:红色
  6. a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线
  7. a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线
  8. -->
  9. </style>
  1. <style type = “text/css”>
  2. <!--
  3. a {font-size:16px}
  4. a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线
  5. a:active:{color: red; } //激活:红色
  6. a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线
  7. a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线
  8. -->
  9. </style>

如何去掉<a>的下划线:

对超链接下划线设置 使用代码"text-decoration"

语法:

text-decoration : none || underline || blink || overline || line-through



text-decoration参数:

none :  无装饰

blink :  闪烁

underline :  下划线

line-through :  贯穿线

overline :  上划线



去掉下划线的方法就是将其text-decoration设置为none即可。

如:<style>a{text-decoration:none}</style>

可以在此基础上发挥:如:<style>.myclass a{text-decoration:none}</style>

<style>div a{text-decoration:none}</style>



可以扩展至<a>标签的伪类:

a:link{text-decoration:none; cursor:pointer; color:red;}

a:visited{text-decoration:overline; cursor:pointer}

a:active{text-decoration:overline; cursor:pointer}

a:hover{text-decoration:overline; cursor:pointer}

.myclass:hover{text-decoration:overline; cursor:pointer}

<a>标签的一些属性

a标签是成对出现的,以<a>开始, </a>结束

属性.

Common -- 一般属性

accesskey -- 代表一个链接的快捷键访问方式

charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8

coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标

href -- 代表一个链接源(就是链接到什么地方)

hreflang -- 指出了链接到的页面所使用的语言编码

rel -- 代表文档与链接到的内容(href所指的内容)的关系

rev -- 代表文档与链接到的内容(href所指的内容)的关系

shape -- 使用图像地图的时候可以使用shape指定链接区域

tabindex -- 代表使用"tab"键,遍历链接的顺序

target -- 用来指出哪个窗口或框架应该被此链接打开

title -- 代表链接的附加提示信息

type -- 代表链接的MIME类型

如何去掉a标签的下划线的更多相关文章

  1. Visual Studio vs2010 去掉中文注释红色下划线;去掉代码红色下划线;

    vs去掉下挂线也分两种: 1.去掉中文注释红色下划线,需要去掉VisualAssist下划线鸡肋功能: 1.选择Visual AssistX Options: 2.把如图所示的勾去掉,解决. 以后再次 ...

  2. html初始化页面和a标签无下划线

    body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, form { padding:0px; margin:0px; b ...

  3. 如何让a标签的下划线去掉?

    在css中添加 a{ text-decoration: none; }

  4. [原创]css中a标签去掉锚点文本下划线

    我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子. 1.问题解决方式: 设置属性:text-decoration:none; 2.更多属性参数参考 text-decorati ...

  5. HTML-<a>标签添加下划线

    <a href="ddrb/090630.asp" target="_blank" style="text-decoration:underli ...

  6. 去除a标签的下划线

    a:link ,a:visited,a:hover,a:active { text-decoration: none;}

  7. a标签下划线

    页面中有一处box中的a标签都被加上了下划线,查找元素却没有找到css中的underline. 原因是 <a>标签默认是有下划线的,而一般看到的<a>标签链接中的下划线都被覆盖 ...

  8. a标签去掉下划线

    转载自:http://jingyan.baidu.com/article/a17d52853095838099c8f24e.html <a>是默认有下划线的.所以有时候为了美观,我们需要去 ...

  9. CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案

    经过查阅,如果想要去掉a标签的默认效果,就要用text-decoration: none;,但是经过试验发现并不好用,可能是因为你用a标签里的class或id定义的CSS样式,就像这样: <di ...

随机推荐

  1. hdu1337 水题

    题意:       给你n个格子,每个格子初始状态都是1,然后这样变化1 2 3...n,2 4 6 ... n, 3 6 9 ....n ,...n;如果是1变成0,如果是0变成1,问经过n次变换之 ...

  2. POJ2226 不错的最小顶点覆盖

    题意:        给你一个n * m 的矩阵,上面有" * " 和 " . " ,让你用少的木板吧所有" * "覆盖,木板宽度是1,长度 ...

  3. 手机访问电脑本地localhost网页

    项目需要用手机访问电脑本地网页,从而可以调试项目,对代码的理解的快一点 重点 确保手机和电脑在同一个局域网 可以通过手机开热点电脑连接或者电脑开便携式热点手机连接 确保电脑的防火墙是关闭的 打开apa ...

  4. Mac 右键强化工具-超级右键

    App Store 功能介绍 1.新建文件 默认支持新建:TXT/RTF/XML/Word/Excel/PPT/WPS文字/WPS表格/WPS演示/Pages/Numbers/keynote/Ai/P ...

  5. Error starting userland proxy: /forwards/expose/port returned unexpected status: 500.

    欢迎关注微信公众号 Error starting userland proxy: /forwards/expose/port returned unexpected status: 500. dock ...

  6. 基于蒙特卡洛树搜索(MCTS)的多维可加性指标的异常根因定位

    摘要:本文是我在从事AIOps研发工作中做的基于MCTS的多维可加性指标的异常根因定位方案,方案基于清华大学AIOPs实验室提出的Hotspot算法,在此基础上做了适当的修改. 1        概述 ...

  7. Http协议有什么特点,能说说这些特点体现在哪些方面吗?

    Http协议有什么特点,能说说这些特点体现在哪些方面吗? Http协议是我们最常用的接口,那它有什么特点呢? 无连接 无状态 还有呢? 灵活,简单快速 还有它的这些特点体现在哪些方面?你也要能说一说. ...

  8. net5学习笔记---依赖注入

    小王的故事 小王去上班 ​ 小王是个程序员,每个工作日他都要去上班,诸多交通工具他最喜欢的交通工具是骑电车.在骑行的过程中放空自己使他很快. ​ 突然有一天天气预报说近期有很大的雨,小王再想骑电车去上 ...

  9. Excel导出数据Excel.Application组件权限设置方法

    很多网络应用系统都会涉及到数据采用Excel方式导出的模块,部分朋友问我到底怎么弄,其实方式很多种,目前比较优秀的方式还是直接用Excel的Excel.Application方式比较合适. 采用Exc ...

  10. java基础——创建对象与内部分布

    类与对象的关系 类是一种抽象的数据类型,它是对某一类事物整体描述和定义,但是不能代表某一个具体的事物 动物.植物.手机.电脑... Person类,Pet类,Car类,这些类都是用来描述和定义某一类具 ...