当前位置:首页 > java知识学习_java技术文章 > 正文

html页面中CSS样式设置超链接下划线取消与显示

浏览147+

html5页面

一、html页面中超链接简介

本文主要讲解超链接下划线的取消与显示设置,恐怕新手朋友们对超链接的概念不清楚,故简短几句话介绍一下什么是html页面的超链接。

超链接是html超文本标记语言中的可以点击的内容链接,在网页中充当桥梁的作用,用于实现页面与页面之间的跳转,超链接的文本内容可以是文字、图片或者是一句短语都可以,文本上面内嵌跳转到的url链接,当鼠标指向时显示小手状,意思就是可以进行点击。

文字类型的超链接格式如下:<a href=”http://www.itjcw123.cn/2376.html”>点击跳转</a>

二、html页面应用css样式取消清除超链接下划线

带有下划线的a标签图

众所周知,像a标签这种添加了超链接之后就会默认自带下划线的,而实际工作中为了页面的简洁和美观考虑,要求超链接不允许有下划线,因此就有了我们本文标题所提到的需求,下面我们就以实际需求案例的方式讲解如何超链接下划线。

取消超链接下划线的a标签效果

需求案例一:页面中所有的a标签全部清除下划线。

按照以上需求一的要求,我们可以使用css的标签样式来控制整个页面的a标签的超链接下划线,具体css样式代码如下:

  <head>

<style type=”text/css”>a {text-decoration: none}</style>

</head>

需求案例二:页面中特定的几个a标签清除下划线,其它的a标签保留下划线。

根据需求二的问题,我们不能直接用标签选择器,因为标签样式会清除所有a标签的超链接下划线,这时我们可以给需要清除下划线的几个a标签添加一个class属性,然后通过类选择器的方式清除带有该class属性的a标签的下划线,代码如下:

<head>

<style type=”text/css”>.cancel {text-decoration: none}</style>

</head>

<a class=”cancel” href=”http://www.itjcw123.cn”>超链接</a>

<a class=”cancel”  href=”xxxxxxxxxxxxx”>取消下划线</a>

<a class=”cancel” href=”xxxxxxxxxxxxx”>点击跳转</a>

 

需求案例三:页面中的a标签清除下划线,当鼠标悬停时显示下划线。

需求三的前半部分要求跟需求一一致,我们可以应用需求一的代码案例,然后在鼠标移到a标签上时调用鼠标悬停的样式加上下划线,代码如下:

   <head>

<style type=”text/css”>

a {text-decoration: none}

a:hover{TEXT-DECORATION:underline}

</style>

</head>

三、text-decoration控制超链接下划线的属性知识延伸

上文中用到了text-decoration样式的none属性,其实该样式还有其它多个属性在工作中能够用到,这里我们也详细介绍一下其它属性,以备大家工作中的不时之需。

添加文本上划线样式属性展示:a {text-decoration: overline}

添加贯穿文字文本的横线属性:a {text-decoration: line-through}

显示超链接文本下划线属性:a {text-decoration: underline}

取消文本下划线属性:a {text-decoration: none}

text-decoration其它属性一览图

总结:

以上便是小编精心编辑的关于html和html5页面中超链接下划线取消和显示的全部方式,内容浅显易懂,代码格式清晰,不论是小白还是刚接触web前端的人员都能够轻易读懂,需要告知大家的是下划线的设置只能通过控制css样式去实现相应的效果,除此之外别无它法。

 

相关文章推荐

html超链接去掉下划线 

在HTML中怎么去掉超链接的下划线

CSS 将超链接a标签的文本下划线去除

全网页CSS 超链接无下划线如何实现

html <a>锚文本A超链接标签

如何消除超链接的下划线

责任声明:文章信息由IT教程屋小编精心整理总结编排而成,倾注了心血和汗水,转载时请遵循行业规范务必注明文章作者、来源及本页链接,谢谢合作!
本篇文章标题:html页面中CSS样式设置超链接下划线取消与显示
本篇文章url地址:http://www.itjcw123.cn/2376.html