2.6 css链接

kento_joyasa

已于 2022-10-27 13:38:42 修改

阅读量187

点赞数 2

分类专栏： h5&&c3 文章标签： css html 前端

于 2022-10-26 10:47:39 首次发布

原文链接：https://blog.csdn.net/InJavaWeTrust/article/details/101063545

版权

h5&&c3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS链接

链接可以有不同的样式

链接的样式可以用任何的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 {
            text-decoration: none;
        }

        /* unvisited link */
        a:visited {
            text-decoration: none;
        }

        /* visited link */
        a:hover {
            text-decoration: underline;
        }

        /* mouse over link */
        a:active {
            text-decoration: underline;
        }

        /* selected link */
    </style>
</head>

<body>
    <p><b><a href="/css/" target="_blank">This is a link</a></b></p>
    <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
    <p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        a:link {
            background-color: #B2FF99;
        }

        /* 未访问链接 */
        a:visited {
            background-color: #FFFF85;
        }

        /* 已访问链接 */
        a:hover {
            background-color: #FF704D;
        }

        /* 鼠标移动到链接上 */
        a:active {
            background-color: #FF704D;
        }

        /* 鼠标点击时 */
    </style>
</head>

<body>
    <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
    <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
    <p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>

</html>

主要使用text-decoration来处理链接的默认下划线问题

kento_joyasa

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.6 css链接

a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。链接的样式可以用任何的css属性，如字体，颜色，背景。特别的链接，可以有不同的样式，取决于他们的状态。a:active 必须在 a:hover之后。a:visited - 用户已访问过的链接。a:hover - 当用户鼠标放在链接上时。a:active - 链接被点击的那一刻。a:link - 正常，未访问过的链接。链接可以有不同的样式。
复制链接

扫一扫

专栏目录