html a标签如何设置颜色？超链接的颜色设置总结（css样式）

网站教程2024-10-30

[摘要]超链接a标签大家都应该很熟悉，这篇文章主要的讲的是a标签的基础css样式设置，里面介绍了四种颜色的变化，希望大家多多练习，下面就让我们一起来阅读本篇文章吧首先我们要知道html a标签的颜色设置：我...

超链接a标签大家都应该很熟悉，这篇文章主要的讲的是a标签的基础css样式设置，里面介绍了四种颜色的变化，希望大家多多练习，下面就让我们一起来阅读本篇文章吧

首先我们要知道html a标签的颜色设置：

我们都知道在html中a标签在网页中默认的颜色是什么样的，现在试个代码看一下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<a href="#">php中文网</a>
</body>
</html>

这是一个基础的html文档的代码，看在浏览器中的显示效果：

html a标签如何设置颜色？超链接的颜色设置总结（css样式）

上面的未点击的网址就是这样蓝色的，点击之后就是紫色的，这样的链接看上去不太好看，我们要给a标签设置一个颜色。比如说，我要给未点击的网址设置一个颜色，就红色吧，未点击之前是红色的，点击之后是就是黑色的。我们来做一下效果：

<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
a:link{color:red;}
a:visited{color:black;}
</style>
</head>
<body>
<a href="#">php中文网</a>
</body>

这是一段简单的css代码，来看看效果图：

html a标签如何设置颜色？超链接的颜色设置总结（css样式）

这是未被访问的样子，是红色的；

html a标签如何设置颜色？超链接的颜色设置总结（css样式）

这是已被访问的样式，是黑色的。我们来解释下代码：

a:link ：是未被访问的样式，可以在里面加很多东西，比如说去掉下划线，换颜色等功能都能在这里实现；
a:visited ：是已被点击后的样式，也可以在里面加很多元素，可以去下划线，改颜色，放大等功能；
a:hover ：这个是鼠标悬停的样式，这个等下有实例介绍，我们先来认识一下，是把鼠标停在超链接的位置的时候可以设置变颜色；
a:active ：这个说是已被激活的样式，简单得说就是能把鼠标点上去的时候，瞬间出的样式，在很多网站上都有这种样式的；

现在我们再来看个实例，把上面四个都放进去的效果：

<head> <meta charset="utf-8"> <title>PHP中文网</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="#">php中文网</a> </body>

我们现在来看看在浏览器中显示的效果：

html a标签如何设置颜色？超链接的颜色设置总结（css样式）

这是鼠标悬停的效果，做出来了

html a标签如何设置颜色？超链接的颜色设置总结（css样式）

这是点击瞬间的效果。（想看更多，请点击css视频教程）

超链接a标签的总结：

如此这个a标签的四种锚伪类的css样式都介绍完了，我们来回忆一下四种的用处，一个是未被点击的样式，就是没有点击，正常显示的样式，被点击之后的样式是你点击了这个标签后的样式，还有一个是鼠标悬停的样式，就是你一把鼠标放上去就会变的效果，这个效果是很好用的，大家用处以后就知道了，最后一个是点击的瞬间的效果，这四种效果可以说是a标签必备的四种的样式了，这样设置才能更好。

【小编推荐】

html5 datalist标签的用法是什么？这里有datalist标签的用法实例

html中的include标签是什么？html include实现配置解析

以上就是html a标签怎么设置颜色？超链接的颜色设置总结（css样式）的详细内容，更多请关注php中文网其它相关文章！

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

标签:html a标签怎样设置颜色？超链接的颜色设置总结（css样式）