HTML 学习笔记 CSS样式（链接）

我们能够以不同的方法为链接设置样式。

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态

a:link－普通的未被访问的链接

a:visited-用户已经访问过的链接

a:hover 鼠标指针位于链接的上方

a:active 链接被点击的时刻

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

⚠️当为链接的不同状态设置样式的时候请按照以下次序规则

a:hover 必须位于a:link和 a:visited之后

a:active必须位于a:hover之后

例子:

1:向链接添加不同的样式

<head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            a:link {
                color: #00FFFF;
                font-size: 10px;
                text-decoration: none;
            }
            a:visited {
                color: #FF0000;
                font-size:25px;
                text-decoration: underline;
            }
            a:hover {
                color: blue;
                font-size: 30px;
                text-decoration: underline;
                background-color: gray;
            }
            a:active {
                color: orange;
                font-size: 20px;
                text-decoration: none;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <p><b><a class="one" href="http://www/baidu.com">百度一下</a></b></p>
    </body>

高级 - 创建链接框

<head>
        <meta charset="UTF-8">
        <title>链接</title>
        <style type="text/css">
            a:link ,a:visited{
                /*把标签a设置为块级元素*/
                display: block;
                width: 120px;
                font-weight: bold;
                font-size: 14px;
                background-color: #98bf21;
                font-family: "french script mt";
                color: #ffffff;
                text-align: center;
                padding: 4px;
                text-decoration: none;
            }
            a:hover, a:active{
                background-color: #7a991a;
            }
            
        </style>
    </head>
    <body>
        <a href="http:www.baidu.com" target="_blank">百度一下</a>
    </body>