• 技术文章 >web前端 >css教程

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

    寻∝梦寻∝梦2018-09-04 13:40:16原创86340
    超链接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

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

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

    <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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:a标签 超链接
    上一篇:如何使用纯CSS实现太阳和地球和月亮的运转模型动画 下一篇:html中的字体颜色怎么设置?css设置字体颜色方法介绍
    Web大前端开发直播班

    相关文章推荐

    • 鼠标移动到超链接上的效果_经验交流• 浅谈使用CSS实现元素垂直居中的几种方法• CSS做一个超链接的陷下效果_CSS/HTML• 四种参数传递的形式——URL,超链接,js,form表单_基础知识• HTML利用超链接打开链接文件的方法介绍_HTML/Xhtml_网页制作

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网