当前位置:首页 > 前端技术 > HTML设置超链接字体颜色和点击后的字体颜色

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

2022年09月17日 11:14:21前端技术12

CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类 定义链接样式 
  CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”。其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: 
:link 
:visited 
:hover 
:active 
  因为我们要定义链接样式,所以其中必不可少的就是超级链接中的锚标签--a,锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法,它们的写法如下: 
a:link,定义正常链接的样式; 
a:visited,定义已访问过链接的样式; 
a:hover,定义鼠标悬浮在链接上时的样式; 
a:active,定义鼠标点击链接时的样式。 
示例: 
代码如下:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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;

}

  上面示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。 
如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义: 

代码如下:

1

2

3

4

5

6

7

8

9

10

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就可以了。 
  示例: 

代码如下:

1

2

3

4

5

6

7

8

9

10

#sidebar a:link,

#sidebar a:visited {

color:#FF0000;

text-decoration:none;

}

#sidebar a:hover,

#sidebar a:active {

color:#000000;

text-decoration:underline;

}

  调用方法: 
<p id="sidebar"><a href="http://www.jb51.net" target="_blank">链接到脚本之家<a></p> 
  class的定义方法和id相同,只要将#sidebar改为.sidebar就行了,还有一种方法是直接定义链接的样式,那样更直接,不过调用时比较麻烦,需要给每个特定的链接加上定义的代码。 
  示例: 
代码如下:

1

2

3

4

5

6

7

8

9

10

11

 a.redlink a:link,

a.redlink a:visited {

color:#FF0000;

text-decoration:none;

}

a.redlink a:hover,

a.redlink a:active {

color:#000000;

text-decoration:underline;

background:#FFFFFF;

}

  调用方法: 
<p><a href="http://www.jb51.net" target="_blank" class="redlink" >链接到脚本之家一<a></p> 
  链接的定义主要有三个属性,颜色(color)、文本修饰(text-decoration)和背景(background)

以上就是HTML设置超链接字体颜色和点击后的字体颜色的详细内容,更多请关注php中文网其它相关文章!

作者:AllenSun-1990
来源链接:https://blog.csdn.net/xikangsoon/article/details/88783785

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42480.html

分享给朋友:

“HTML设置超链接字体颜色和点击后的字体颜色” 的相关文章

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

v-html 解析并插入 html 标签

v-html 解析并插入 html 标签

1. 双大括号会将数据解释为普通文本,而非 HTML 代码。 <div id="app"> <p id="a">Using mustaches: { { rawHtml }}</p> <p >Using v-ht...

HTML 5 video 视频标签全属性详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面...

html5 video 视频标签详解

现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

html标签及属性等相关整理笔记(不定期更新)

一、HTML标签简写及全称大全 HTML标签 英文全称 中文释义 a Anchor 锚 abbr...

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

HTML5 data-* 自定义属性及其注意点

在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写(后面会说),使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 1.&nbs...

HTML的标签英文全称

文章原文出处:https://blog.csdn.net/qq_40942329/article/details/78879992 标签 标签含义 英文 英文含义 备注...

HTML中,使用hover属性完成鼠标悬停切换图片效果

HTML中,使用hover属性完成鼠标悬停切换图片效果

  HTML中经常需要完成这样的一个效果:鼠标悬停切换图片:效果如下: 页面最初显示的时候:为下列五张图片: 当鼠标移动到第一张图片的时候,第一张图片将会切换为另外一张图片,结果如下:     实现这一个效果的...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。