Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 432|回复: 0

[默认分类] 如何去掉a标签的下划线

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-7 13:23:09 | 显示全部楼层 |阅读模式



    首先,来了解下<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. a {font-size:16px}
    3. a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线
    4. a:active:{color: red; } //激活:红色
    5. a:visited {color:purple;text-decoration:none;} //已访问:紫色、无下划线
    6. a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线
    7. -->
    8. </style>
    复制代码




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


    对超链接下划线设置 使用代码"text-decoration"
    语法:
    text-decoration : none || underline || blink || overline || line-through


    text-decoration参数:

    none :  无装饰
    blink :  闪烁
    underline :  下划线
    line-through :  贯穿线
    overline :  上划线

    去掉下划线的方法就是将其text-decoration设置为none即可。
    如:
    1. <style>a{text-decoration:none}</style>
    复制代码
    可以在此基础上发挥:如:

    1. <style>.myclass a{text-decoration:none}</style>
    2. <style>div a{text-decoration:none}</style>
    复制代码
    可以扩展至<a>标签的伪类:

    1. a:link{text-decoration:none; cursor:pointer; color:red;}
    2. a:visited{text-decoration:overline; cursor:pointer}
    3. a:active{text-decoration:overline; cursor:pointer}
    4. a:hover{text-decoration:overline; cursor:pointer}
    5. .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 -- 代表使用&quot;tab&quot;键,遍历链接的顺序
    target -- 用来指出哪个窗口或框架应该被此链接打开
    title -- 代表链接的附加提示信息
    type -- 代表链接的MIME类型



      
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-5-16 10:40 , Processed in 0.342917 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表