CSS 链接状态，轮廓(outline)

最新推荐文章于 2024-08-14 09:00:00 发布

「已注销」

最新推荐文章于 2024-08-14 09:00:00 发布

阅读量492

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46813809/article/details/120186312

版权

链接状态

链接状态可以更改不同的样式，比如字体颜色，背景颜色，字体样式。

状态名	说明
:link	未访问过的链接
:visited	用户已经访问的链接
:hover	鼠标在链接上时
:active	链接被点击的那一刻

<style>
    a {
        text-decoration: none;
        /*去掉a标签的默认样式*/
    }
    
    a:hover {
        /* 添加下划线 */
        text-decoration: underline;
        color: rgb(255, 50, 163);
    }
</style>

<body>
    <a href="#">悬浮在链接上时</a>
</body>

链接标签的设置

轮廓

轮廓是边框外的一条线，可以对轮廓的粗细，颜色，轮廓样式修改，轮廓不算在尺寸里。

属性	说明
outline-color	定义轮廓颜色
outline-style	定义轮廓样式
outline-width	定义轮廓宽度

组合属性：

outline: 宽度 样式 颜色

<style>
    div {
        width: 300px;
        height: 400px;
        color: rgb(100, 123, 255);
        outline: 2px solid red;
        text-align: center;
        line-height: 400px;
    }
</style>

<body>
    <div>
        请学好heml，cssJavaScript
    </div>
</body>