超链接标签的4个样式

超链接标签的4个样式a超链接标签的4个样式:a:link超链接的默认样式。a:visited访问过的(已经看过的)链接样式。a:hover鼠标处于鼠标悬停状态的链接样式。a:active当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。…

a超链接标签的4个样式:

a:link 超链接的默认样式。

a:visited 访问过的(已经看过的)链接样式。

a:hover 鼠标处于鼠标悬停状态的链接样式。

a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。

简写:

a{}

a:hover{}

<style>
        /* a:link 超链接的默认样式 */
        a:link{
            color: green
        }
        /* a:visited 访问过的(已经看过的)链接样式。 */
        a:visitde{
            color: blue
        }
        /* a:hover 鼠标处于鼠标悬停状态的链接样式 */
        a:hover{
            color: yellow
        }
        /* a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。  */
        a:active{
            color:pink
        }
    </style>
</head>
<body>

a 超链接标签的特点:

(1)是行元素,行元素与行元素之间,内容可以”并排”存在。

(2)行元素,本身不能设置”宽度和高度”

如果在某些场景下,需要把 超链接 由 行元素 转成 块元素,我们的操作方法:

<style>
        .list a{
             /* 文本颜色 */ 
            color:#515151;
             /* 去除下划线 */ 
            text-decoration: none;
            /* 将行元素转换为块元素 */
            display: inline-block;
            /*宽度*/
            width: 200px;
             /*高度*/
            height: 100px;
            /*轮廓线(我们在网页布局中,写给开发人员自己看的,看完之后可以把它删了)*/
            outline: 5px  dashed red;
        }
        .list a:hover{
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
        <div class="list">
        <a href="">网易</a>
        <a href="">早安</a>
        <a href="">你好</a>
    </div>

今天的文章超链接标签的4个样式分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/8634.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注