CSS基础笔记——超链接样式

CSS基础笔记——超链接样式在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式a:link{…}a:visited{…}a:hover{…}a:active{…}定义四个伪类,必须按照link、visited、hover、active的顺序进行,不然浏览器可能无法正常显示这四种样式<!DOCTYPEhtml><html><head&gt

大家好,又见面了,我是你们的朋友全栈君。

在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色

而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

定义四个伪类,必须按照link、visited、hover、active的顺序进行,不然浏览器可能无法正常显示这四种样式

CSS基础笔记——超链接样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            a{text-decoration: none;}
            a:link{color: red;}
            a:visited{color: purple;}
            a:hover{color: yellow;}
            a:active{color: blue;}
        </style>
    </head>
    <body>
        <a href="http://www.bilibili.com" target="_blank">BiliBili</a>
    </body>
</html>

 text-decoration:none表示去掉下划线

在实际开发中,并不是每一个超链接都必须定义这四种状态下的样式,一般只会用到未访问和鼠标经过时的状态

对于未访问时状态,我们直接针对a元素定义就行了,没必要使用a:link

a{
    color:red;
    text-decoration:none;
}
a:hover{
    color:blue;
    text-decoration:underline;
}

深入了解:hover

事实上,:hover伪类可以定义任何一个元素在鼠标经过时的样式

举例:”:hover”用于div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background-color: lightblue;
            }
            div:hover{
                background-color: lightcoral;
            }
        </style>
    </head>
    <body>
        <div>我爱学习</div>
    </body>
</html>

在鼠标经过一张图片时为其添加边框 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>字体样式</title>
        <style type="text/css">
            
            img:hover{
                border: 2px solid skyblue;
            }
        </style>
    </head>
    <body>
        <img src="maomao.jpg" alt="">
    </body>
</html>

 :hover伪类应用非常广泛,我们要好好掌握

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161764.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Zigbee协议栈ZStack构架

    Zigbee协议栈ZStack构架协议栈版本信息:ZigBee2006\ZStack-1.4.3-1.2.11、ZStack协议栈构架  Zigbee协议栈就是将各个层定义的协议都集合在一起,以函数的形式实现,并给用户提供一些应用层API,供用户调用。协议栈体系分层架构与协议栈代码文件夹对应表如下:   整个协议栈的构架,如图所示APP:应用层目录,这是用户创建各种不同工程的区域,在这个目录

  • 三极管的使用方法,放大,截止,饱和[通俗易懂]

    三极管的使用方法,放大,截止,饱和[通俗易懂]1.首先认识清楚三极管的管脚                       参考资料万用表区分mos管引脚2.知道管脚我们也就知道NPN和PNP了,箭头朝内PNP,导通电压顺箭头过,电压导通,电流控制。那箭头朝外的自然就是NPN了!NPN管工作在放大区的时候:集电极电压&gt;基极电压&gt;发射极电压也就是:Vc&gt;Vb&gt;Ve …

  • 淘宝核心系统团队博客在哪_团队理念

    淘宝核心系统团队博客在哪_团队理念http://rdc.taobao.com/blog/cs/?paged=2这是 淘宝核心系统团队的博客,核心系统团队的总目标是为淘宝和阿里集团打造一个高性能、高可扩展、低碳、低成本、稳定可靠的软件基础设施平台。目前的主要工作领域如下图所示:

  • Lucene4 TokenStream「建议收藏」

    Lucene4 TokenStream「建议收藏」packageorg.apache.lucene.analysis;/**LicensedtotheApacheSoftwareFoundation(ASF)underoneormore*contributorlicenseagreements.SeetheNOTICEfiledistributedwith*thisworkfor

  • pycharm 修改镜像源_linux镜像源哪个好

    pycharm 修改镜像源_linux镜像源哪个好镜像网站是将一个完全相同的站点放到几个服务器,分别有自己的URL,在这些服务器上互为镜像网站。它和主站并没有太大差别,或者可算是为主站作的后备措施。有了镜像网站的好处是:如果不能对主站作正常访问(如某个服务器死掉或出了意外),但仍能通过其它服务器正常浏览。相对来说主站在速度等各方面比镜像站点略胜一筹。

  • G1 收集器介绍「建议收藏」

    G1 收集器介绍「建议收藏」G1收集器一.名词解释MetaSpace在Java8之后取代永久代方法区的内存部分,NativeMemoryMixedGCEvent所有YoungRegion和一部分OldRegion的混合GC时间。ReclaimableG1为了能够回收,创建了一系列专门用于对象回收的Region,存放在链表中,只包含存活率小于-XX:G1MixedGCLIveThr…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号