登录  /  注册
首页 > web前端 > css教程 > 正文

html a标签怎么设置颜色?超链接的颜色设置总结(css样式)

寻∝梦
发布: 2018-09-04 13:40:16
原创
104836人浏览过

超链接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文档的代码,看在浏览器中的显示效果:

tuyi.png

上面的未点击的网址就是这样蓝色的,点击之后就是紫色的,这样的链接看上去不太好看,我们要给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代码,来看看效果图:

tuer.png

这是未被访问的样子,是红色的;

tusan.png

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

  • 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>
登录后复制

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

tusi.png

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

tuwu.png

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

超链接a标签的总结:

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

【小编推荐】

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

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

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号