a 的样式

简介: 引用:http://blog.csdn.net/mylitboy/article/details/6613518 首先来了解下标签的一些样式:标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。

引用:http://blog.csdn.net/mylitboy/article/details/6613518

首先来了解下<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 plain copy
  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类型

相关文章
|
安全 物联网 测试技术
物联网平台的优势与价值
物联网平台的优势与价值
1320 49
物联网平台的优势与价值
|
存储 测试技术 C++
实践:几十亿条数据分布在几十个节点上的毫秒级实时排序方法
#引子 先简单的问一下, 你如何解决这样的需求: ``` 对一堆数据按某字段排序,获取第100-10条的数据。 ``` 假设你面对的数据是个单节点,简单来说,就是一个mysql数据库, 很自然地用 select a from tb order by a limit 100, 10; ![imag
4394 0
|
机器学习/深度学习 传感器 监控
深度学习之智能传感与监控
基于深度学习的智能传感与监控技术通过利用传感器收集数据,并使用深度学习算法对这些数据进行分析,以实现智能化的监控和管理。
333 1
|
网络协议 网络安全 PHP
使用天猫精灵实现计算机WOL网络唤醒
解决笔记本连显示器不想掀盖子开机和远程办公时给公司电脑开机不方便的痛点。
15369 8
使用天猫精灵实现计算机WOL网络唤醒
|
存储 负载均衡 云计算
抖音服务器是什么样的
抖音服务器采用分布式云计算架构,遍布全国多个数据中心,如北上广、四川和贵州等地,利用高带宽、云集群并发及OSS、CDN、SLB等技术,确保大量用户同时流畅观看视频。这不仅需要强大的服务器群支持,还需精准的负载均衡与内容分发网络,保障用户体验。
642 1
|
关系型数据库 数据库 PostgreSQL
|
自然语言处理 数据挖掘 Unix
R 语言是什么、R 的优势、资源|学习笔记
快速学习 R 语言是什么、R 的优势、资源。
418 1
R 语言是什么、R 的优势、资源|学习笔记
|
供应链 搜索推荐 数据挖掘
电商小白想入门电商运营,应该先学什么?
电商行业激动人心且充满机遇,如今越来越多的人想要进入这个领域,成为一个成功的电商运营者。然而,作为一个电商小白,你可能不知道从何处开始学习。在这篇文章中,我将为你提供一些建议,帮助你入门电商运营。
|
机器学习/深度学习 达摩院 前端开发
达摩院开源工业级说话人识别模型CAM++
近日,达摩院正式向公众开源工业级说话人识别通用模型CAM++,兼顾准确率和计算效率,训练labels类别达20万,每类含20~200条梅尔频谱特征。当前该模型已上线Modelscope魔搭社区,后续将陆续开源针对各场景优化的工业级模型。
2186 0
|
存储 C# 开发者
【UiPath2022+C#】UiPath变量
变量和参数,或者说是如何在各种活动和工作流之间收集、存储、处理和传递数据;
【UiPath2022+C#】UiPath变量