小编给大家分享一下html中a标签如何设置颜色,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
首先我们要知道html a标签的颜色设置:
我们都知道在html中a标签在网页中默认的颜色是什么样的,现在试个代码看一下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>亿速云</title> </head> <body> <a href="#">亿速云</a> </body> </html>
这是一个基础的html文档的代码,看在浏览器中的显示效果:
上面的未点击的网址就是这样蓝色的,点击之后就是紫色的,这样的链接看上去不太好看,我们要给a标签设置一个颜色。比如说,我要给未点击的网址设置一个颜色,就红色吧,未点击之前是红色的,点击之后是就是黑色的。我们来做一下效果:
<head> <meta charset="utf-8"> <title>亿速云</title> <style type="text/css"> a:link{color:red;} a:visited{color:black;} </style> </head> <body> <a href="#">亿速云</a> </body>
我们来解释下代码:
a:link :是未被访问的样式,可以在里面加很多东西,比如说去掉下划线,换颜色等功能都能在这里实现;
a:visited :是已被点击后的样式,也可以在里面加很多元素,可以去下划线,改颜色,放大等功能;
a:hover :这个是鼠标悬停的样式,这个等下有实例介绍,我们先来认识一下,是把鼠标停在超链接的位置的时候可以设置变颜色;
a:active :这个说是已被激活的样式,简单得说就是能把鼠标点上去的时候,瞬间出的样式,在很多网站上都有这种样式的;
现在我们再来看个实例,把上面四个都放进去的效果:
<head> <meta charset="utf-8"> <title>亿速云</title> <style type="text/css"> a:link{color:red;} a:visited{color:black;} a:hover{color:pink;} a:active{color:#ccc;} </style> </head> <body> <a href="#">亿速云</a> </body>
以上是html中a标签如何设置颜色的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。