css入门（七）—— 超链接样式

最新推荐文章于 2024-01-15 20:00:00 发布

少年闲客

最新推荐文章于 2024-01-15 20:00:00 发布

阅读量2.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_40633131/article/details/104299316

版权

css 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

超链接a常用的样式控制包括超链接伪类和CSS鼠标样式。
1. 超链接伪类
    A. 超链接伪类可以定义链接在不同时期的样式，使用方法为：
        选择器:link{CSS样式}，元素未访问时的样式
        选择器:visited{CSS样式}，元素访问后的样式
        选择器:hover{CSS样式}，鼠标经过元素的样式
        选择器:actived{CSS样式}，鼠标点击激活时的样子（瞬间）
    e.g. <head>
            <title>超链接伪类</title>
            <style type="text/css">
                #div1 {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #CCCCCC;
                    text-align: center;
                }

                a {
                    text-decoration: none;
                    font-size: 18px;
                }

                #x:link {
                    color: red
                }

                #x:visited {
                    color: purple;
                }

                #x:hover {
                    color: yellow;
                    text-decoration: underline;
                }

                #x:active {
                    color: green;
                }
            </style>
        </head>

        <body>
            <div id="div1">
                <a id="x" href="http://www.baidu.com">百度一下</a>
            </div>
        </body>
    B. 一般情况下，超链接只需要设置为访问时和鼠标经过时的状态就行，而未访问时的样式可以直接对标签a设置样式，所以超链接伪类一般只用到hover。
    e.g. <head>
            <title>超链接伪类</title>
            <style type="text/css">
                #div1 {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #CCCCCC;
                    text-align: center;
                }

                /*text-decoration:none可以取消a标签自带的下划线样式*/
                a {
                    text-decoration: none;
                    color: purple
                }

                a:hover {
                    color: white
                }
            </style>
        </head>

        <body>
            <div id="div1">
                <a href="http://www.baidu.com">百度一下</a>
            </div>
        </body>
2. hover伪类
    A. hover不仅仅适用于标签a，它可以用在任意元素，即”元素:hover{样式}“

少年闲客

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css入门（七）—— 超链接样式

超链接a常用的样式控制包括超链接伪类和CSS鼠标样式。1. 超链接伪类 A. 超链接伪类可以定义链接在不同时期的样式，使用方法为：选择器:link{CSS样式}，元素未访问时的样式选择器:visited{CSS样式}，元素访问后的样式选择器:hover{CSS样式}，鼠标经过元素的样式选择器:actived{CSS样式...
复制链接

扫一扫

专栏目录