CSS 链接样式

作者: 前白 | 来源:发表于2020-08-12 11:17 被阅读0次

    超链接是网页的基本元素之一,几乎每个网页我们都可以看到超链接。在之前讲 HTML 的时候就讲过,超链接会自带一些默认样式,例如未点击的超链接会显示带下划线的蓝色字体、点击时字体变为红色、点击后字体变为紫色。这种点击前后不一致的样式,其实是超链接的伪类样式,伪类就是不根据名称、属性或者内容,而是根据标签处于某种行为或状态时的特征来修饰样式,也就是说超链接将根据不同的状态显示不同的样式。

    去掉链接的下划线

    首先,我们知道超链接本身是带有默认下划线的,但是一般我们在网页中看到的超链接都是没有下划线的,那么要如何去掉超链接的下划线呢? 其实前面我们讲文本样式的时候提到过,就是使用 text-decoration 属性。

    示例:

    下面是两个超链接:

    <body>
        <p><a href="#">普通的超链接</a></p>
        <p><a href="#" class="no">去掉下划线的超链接</a></p>
    </body>
    

    我们使用类选择器 no ,去掉其中一个链接的下划线:

    .no{
        text-decoration: none;
    }
    

    在浏览器中的演示效果:


    链接伪类

    超链接有一个特点,就是可以根据它们所处的状态来设置不同的样式。

    超链接的四种状态(伪类)如下所示:

    伪类名称 描述
    a:link 未点击访问时超链接的样式
    a:hover 鼠标悬浮其上的超链接样式
    a:visited 单击访问后的超链接样式
    a:active 点击访问未释放的超链接样式

    伪类样式的基本语法:

    a:伪类名 {
        属性:属性值;
    }
    
    示例:

    例如设置不同状态下超链接的字体颜色:

    <a href="#">这是一个超链接</a>
    

    CSS 样式代码:

    a:link{ color: #F00; }   /* 未被访问的链接 */
    a:visited {color:#00FF00;} /* 已被访问的链接 */
    a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
    a:active {color: #ff7300;}  /* 正在被点击的链接 */
    

    在浏览器中的演示效果:


    上面讲到的四种超链接伪类,在设置样式时对顺序有没有要求呢?当然有啦,在 CSS 设置超链接伪类的顺序为:a:link 和 a:visited --> a:hover --> a:active

    其中 a:hover 必须位于 a:linka:visited 之后,a:active 必须位于 a:hover 之后,如果设置顺序不对,则样式可能不起作用。

    设置鼠标指针形状

    在浏览网页的时候,我们通常可以看到鼠标的指针形状一般可以为箭头、手形、I字形等,这些效果都可以通过 CSS 中的 cursor 属性来设置。

    cursor 属性的常用属性值如下所示:

    属性值 描述
    default 默认光标,箭头
    pointer 超链接的指针,手型
    wait 指示程序正在忙
    help 指示可用的帮忙
    text 指示文本
    crosshair 鼠标呈现十字状
    示例:

    举个例子,例如要设置当鼠标移动到超链接上时,将鼠标指针变为十字状:

    a:hover {
        color: green;
        cursor: crosshair;
    }  
    

    在浏览器中的演示效果:


    总结

    本节我们讲了四种超链接伪类,即 a:linka:visiteda:hovera:active。其中用的比较多的还是a:hover 鼠标悬浮其上。一定要记住如果想要同时使用好几种状态,四种状态的书写顺序, a:hover 必须位于 a:linka:visited 之后,a:active 必须位于 a:hover 之后。

    相关文章

      网友评论

        本文标题:CSS 链接样式

        本文链接:https://www.haomeiwen.com/subject/pwypdktx.html