去掉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不能设置有无下划线(总是有的)。

举例:伪类的常见状态值

[html] view plaincopy

  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标签的下划线

时间: 2024-08-05 20:14:57

去掉a标签的下划线的相关文章

如何去掉a标签的下划线

首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符包括: 总: a 表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color:blue} ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:activ

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

body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, form { padding:0px; margin:0px; border:0; font-size:14px; } h1, h2, h3, h4, h5, h6 { font-size:14px; font-weight:100; margin-top:0px !important; margin-bottom:0px !important;} ul li {

HTML-&lt;a&gt;标签添加下划线

<a href="ddrb/090630.asp" target="_blank" style="text-decoration:underline;">30</a>

js实现标签下划线平移

一.使用js实现导航行栏,点击时,下划线会跟着鼠标的点击移动. html代码如下: <header>    <div id="nav1">     <div id="id1" class="item">1</div>     <div id="id2" class="item">2</div>     <div id="

a标签去掉下划线

转载自:http://jingyan.baidu.com/article/a17d52853095838099c8f24e.html <a>是默认有下划线的.所以有时候为了美观,我们需要去掉下划线,使网页更加美观 方法/步骤 正常状态下的a标签是这样的. 去掉下划线只需要在样式里面加入 a{ text-decoration:none; } 或者 <a href="www.kanbuchuan.com"style='text-decoration:none;'>这

在HTML中怎么去掉a标签(超链接)的下划线?

<style type="text/css">a:link,a:visited{ text-decoration:none; /*超链接无下划线*/}a:hover{ text-decoration:underline; /*鼠标放上去有下划线*/}</style> <a href="#">超链接</a>

nginx 默认会把header里的参数去掉下划线

做token验证的时候遇到问题:在本地可以获取前端header传的参数,但是部署到服务器获取的就是null(服务器地址用nginx做了代理) 原因: nginx代理默认会把header的参数的 "_" 下划线去掉 所以部署后就获取不到. 解决: 1, 在header里不要用 "_" 下划线,可以用驼峰命名或者其他的符号代替. 2, 在nginx里的 nginx.conf文件中配置http的部分添加 : underscores_in_headers on;(默认值是o

css如何去掉新闻列表最后一个新闻的下划线

css如何去掉新闻列表最后一个新闻的下划线:本章节分享一个比较使用的效果,那就是如何去掉新闻列表最后一个新闻的下划线.在很多新闻列表效果中,在每一个新闻下面都有一个虚线或者其他什么形式的下划线,总之感觉有比较美观的,但是往往最后一个新闻是不需要这个下划线的,下面介绍一下如何实现此效果.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="

html 去掉html超链接下划线

去掉html超链接下划线 2012-08-30 17:31:00|  分类: css|举报|字号 订阅 我们可以用CSS语法来控制超链接的形式.颜色变化. 下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色:当鼠标在链接上时有下划线,链接文字显示为红色:当点击链接后,链接无下划线,显示为绿色. 实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制: <style type="text/css"> <!