CSS入门

超链接的样式

此课程是收费课程,请先购买或加入会员后再访问。

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

<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>

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

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

总结

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

现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×