文档章节

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

 大东家
发布于 2015/08/27 13:20
字数 704
阅读 8
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

【TencentOS tiny】深度源码分析(4)——消息队列

消息队列 在前一篇文章中【TencentOS tiny学习】源码分析(3)——队列 我们描述了TencentOS tiny的队列实现,同时也点出了TencentOS tiny的队列是依赖于消息队列的,那么我们今天来看看消息...

杰杰1号
12分钟前
2
0
Hive

这就是那个 JAVA 类 package cn.itcast.bigdata;import java.util.HashMap;import org.apache.hadoop.hive.ql.exec.UDF;public class PhoneNbrToArea extends UDF{privat......

Garphy
12分钟前
5
0
Springboot开发,第二天

SpringBoot学习,第二天 目录:1、Springboot整合Listener 2、Springboot访问静态资源 3、异常处理 4、热部署 一、SpringBoot整合Listener 两种方式完成组件的注册 1、通过注解扫描完成组件的...

有一个小阿飞
16分钟前
5
0
BeginnersBook Perl 教程

来源:ApacheCN BeginnersBook 翻译项目 译者:飞龙 协议:CC BY-NC-SA 4.0 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 请您勇敢地去翻译和改进翻译。虽然我们追求卓越,但我们并...

ApacheCN_飞龙
28分钟前
5
0
我的Java秋招面经大合集

阿里面经 阿里中间件研发面经 蚂蚁金服研发面经 岗位是研发工程师,直接找蚂蚁金服的大佬进行内推。 我参与了阿里巴巴中间件部门的提前批面试,一共经历了四次面试,拿到了口头offer。 然后我...

Java技术江湖
33分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部