css入门(七)—— 超链接样式

超链接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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值