css链接link_CSS :link 伪类

更新日期: 2019-01-01 阅读: 2.9k 标签: 链接

链接可以使用任何css属性,包括字体、颜色、背景等等、链接有四个状态,可在四个状态时设置不同的属性

a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻


当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后

例如编辑一个如下的html文件

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        a:link {color:red;}      /* 未访问链接*/
        a:visited {color:green;background-color:gray}  /* 已访问链接 */
        a:hover {color:pink;font-size:20px}  /* 鼠标移动到链接上 */
        a:active {color:yellow;}  /* 鼠标点击时 */
    </style>
    </head>
    <body>
        <p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
        <p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
        <p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
    </body>
</html>


初次点开时显示如下,将鼠标放在链接上显示粉色,并且字体变大;点击时显示黄色;点击之后显示绿色,并且背景为灰色



本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/1737

使用a标签超链接打开qq对话框

我们经常遇到,网页上点击一个链接或者qq图片,就开启了qq聊天窗口。那么如何通过a标签超链接打开qq对话框呢?下面介绍2种实现方式。

实现短链接服务(Node + Express + MongoDB)

短链接我们或多或少都使用过,所谓短链接就是根据较长的原链接url生成一段较短的链接,访问短链接可以跳转到对应的原链接,这样做好处在于:1. url更加美观;2. 便于保存和传播;3. 某些网站内容发布有字数限制,短链接可以节约字数

用 await/async 正确链接Js中的多个函数

在我完成 electrade 的工作之余,还帮助一个朋友的团队完成了他们的项目。最近,我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继,其中包含 “serverless” Google Firebase Function

Nginx 如何配置防盗链

需求:通常站点,都会想让自己网站的视频和图片,免被盗用,毕竟视频流量,花的都是白花花银子(土豪可以不用考虑)~~。vaild_referers 有效的引用连接,如下,否则就进入$invaild_refere,返回403 forbiden。

根据图片url链接判断图片大小

背景:产品需求,input框输入图片链接,点击检测按钮的时候需要判断该图片不超过2M

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!