文档章节

HTML中设置超链接字体颜色和点击后的字体颜色的方法

 大东家
发布于 2015/01/13 10:28
字数 704
阅读 13
收藏 0

原文地址:http://www.krsky.net/article/7/173/2009/200903281595.html

定义链接样式 

CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 

 

:link 

:visited 

:hover 

:active 

 

因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下: 

 

a:link,定义正常链接的样式; 

a:visited,定义已访问过链接的样式; 

a:hover,定义鼠标悬浮在链接上时的样式; 

a:active,定义鼠标点击链接时的样式。 

 

 

示例: 

 

 

a:link { 

color:#FF0000; 

text-decoration:underline; 

a:visited { 

color:#00FF00; 

text-decoration:none; 

a:hover { 

color:#000000; 

text-decoration:none; 

a:active { 

color:#FFFFFF; 

text-decoration:none; 

 

 

上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。 

 

如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义: 

 

 

a:link, 

a:visited { 

color:#FF0000; 

text-decoration:underline; 

 

a:hover, 

a:active { 

color:#000000; 

text-decoration:none; 

 

 

链接定义的顺序 

没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。 

 

定义局部链接样式 

在CSS中写上a:link{}这样的定义会使整个页面的链接样式改变,但有些局部链接需要特殊化,这个问题也不难解决,只要在链接样式定义的前面加上指定的id或class就可以了。 

 

示例: 

 

 

#sidebar a:link, 

#sidebar a:visiteid { 

color:#FF0000; 

text-decoration:none; 

#sidebar a:hover, 

#sidebar a:active { 

color:#000000; 

text-decoration:underline; 

 

 

调用方法: 

 

 

<div id="sidebar"><a href="http://www.abang.com" target="_blank">链接到阿邦网<a></div> 

 

 

class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。 

 

示例: 

 

 

a.redlink a:link, 

a.redlink a:visiteid { 

color:#FF0000; 

text-decoration:none; 

a.redlink a:hover, 

a.redlink a:active { 

color:#000000; 

text-decoration:underline; 

background:#FFFFFF; 

 

 

调用方法: 

 

 

<div><a href="http://www.ch163.net.cn"  target="_blank" class="redlink" >链接到阿邦网一<a></div>

本文转载自:http://blog.csdn.net/xiaohelong2005/article/details/4436144

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
div css页面如何提高用户体验 和 chrome浏览器CSS字体大小小于12px不起作用解决方法

提高用户体验度可以增加流量、增加用户在你网页停留时间、提高成交转化率等。 提高用户体验度首先是需要设计适合用户体验的网页美工图。有了合适的美工图,在后续的CSS切图布局时候才能按照网...

名字已被取
2016/03/08
175
0
前端CSS基础学习之——排版练习二

一、 二、HTML里 默认 超链接 带下划线,怎么去除呢 text-decoration:none 三、 标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Cour...

guitarist0505
2018/03/27
0
0
安卓开发学习笔记(七):仿写腾讯QQ登录注册界面

这段代码的关键主要是在我们的相对布局以及线性布局上面,我们首先在总体布局里设置为线性布局,然后再在里面设置为相对布局,这是一个十分常见的XML布局模式。 废话不多说,直接上代码: 一...

Geeksongs
2018/11/27
0
0
HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面 (4...

别叫小伙
2016/09/03
0
0
为什么用Markdown,而不用Word?

写博客、写文章比较多的人都知道 Markdown 是什么。 Markdown 是一种轻量级标记语言,创始人为 John Gruber。它允许人们「使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 ...

陈树义
10/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么Netty的FastThreadLocal速度快

前言 最近在看netty源码的时候发现了一个叫FastThreadLocal的类,jdk本身自带了ThreadLocal类,所以可以大致想到此类比jdk自带的类速度更快,主要快在什么地方,以及为什么速度更快,下面做一...

ksfzhaohui
25分钟前
5
0
资治通鉴解析:无论什么条件,要挟权力做出承诺,都会被清算

电影《满城尽带黄金甲》里有句经典的名言“朕赐给你的,才是你的。朕不给你的,你不能抢。”之所以这段话有名,核心的就是,它揭示了这样一个权力心思:无论什么情况,权力的行使,都不愿意受...

太空堡垒185
29分钟前
4
0
CSS技巧之向下箭头

本文转载于:专业的前端网站➫CSS技巧之向下箭头 思路: 使用◇符号(可在输入法的软键盘找到该符号),使用定位选择位置,并隐藏溢出的上半部分 细点: 1.使用i标签的楷体属性把◇变大 2.给i...

前端老手
46分钟前
2
0
SpringCloud alibaba微服务之NACOS多环境配置整合

前言 伴随着spring cloud alibaba 登上主板以后,我就去了解下感觉还是蛮不错的。说实话第一次看见Nacos好长一段时间连读法都不知道...(/nɑ:kəʊs/)。按照官方的话说Nacos是:一个更易于...

攻城狮-飞牛
48分钟前
4
0
tcpdump

tcpdump -A -s0 port 21011 -i any (1)tcp: ip icmp arp rarp 和 tcp、udp、icmp这些选项等都要放到第一个参数的位置,用来过滤数据报的类型 (2)-i eth1 : 只抓经过接口eth1的包 (3)-t : 不显...

mskk
54分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部