资料目录

超链接的样式

2020年04月28日更新
观看视频

这一节我们要学习的是超链接的样式设置

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>

    </style>
</head>

<body>
<a href="https://itfun.tv" target="_blank">ITFun.tv 不正经的在线教育平台 (・ω・)ノ- ( ゜- ゜)つロ</a>
</body>
</html>

四种状态

先来做一个简简单单的超链接了。在实际写代码之前，先要清除一下浏览器缓存。不然接下来，你可能会感觉有的样式设置了，却没有任何效果。超链接其实是有四种状态的，具体是哪些状态，我们用代码来一一演示。

清除浏览器缓存

<style>
    a:link {
        color: red;
    }

    a:hover {
        color: yellow;
    }

    a:active {
        color: deepskyblue;
    }

    a:visited {
        color: forestgreen;
    }
</style>

分别把它的样式设置成了红、黄、蓝、绿。

平常一般怎么写

平常我们写代码，很少会这样每种状态都写出来。以 ITFun 的会员按钮为例，咱们一起动手，实际写写看。

CSS超链接

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        body {
            font-family: "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
            font-size: 12px;
        }

        a, a:visited {
            text-decoration: none;
            background: #1f99b0;
            color: #fff;
            padding: 4px 10px;
            display: inline-block;
            border-radius: 30px;
        }

        a:hover {
            opacity: 0.7;
        }
    </style>
</head>

<body>
<a href="https://itfun.tv" target="_blank">ITFun会员</a>
</body>
</html>

平常一般不会将四种状态都写出来，最常用的是，将a和a:visited一起写。在单独写一个a:hover的。

Tips: a与a:link有啥区别？
通常来说，没啥区别。但是当一个链接，没有写href属性，a可以生效，而a:link无效。

总结

属性 意义
a:link 刚打开浏览器，默认的样子
a:hover 鼠标放上去时
a:active 正在被点击，鼠标还没松手
a:visited 被点击、访问过的链接
text-decoration 下划线的样式，通常会设置成none
opacity 透明度

已添加到喜欢了