HTML示例02---插入超链接以及超链接颜色设置

浅浅的花香味﹌ 2022-03-19 10:56 429阅读 0赞

这里主要讲了下超链接在不同时刻时候的颜色设置，包括：未访问的链接、已访问的链接、鼠标移动到链接上时的颜色设置

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>简单的HTML文件</title>
        <style type="text/css">
            a:link {color: #00FF00} /* 未访问的链接 */
            a:visited {color: #FF0000} /* 已访问的链接 */
            a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
            a:active {color: #0000FF} /* 选定的链接 */
        </style>
    </head>
    <body style="background-repeat:no-repeat;
                 background-size:cover;
                 background-color: #47C4ED;
                 color: rebeccapurple;"
          topmargin="100px" leftmargin="50px">
    <h1 align="center">HTML5初露端倪</h1>
    <hr>
    <p>让我们一起体验超炫的HTML5的旅程吧</p>
    <span style="font-size: 20px; color: red;">This is some text!</span>
    <br>
    <a href="https://www.163.com/">访问网易官网</a>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70][]

**观察结果：**

（1）访问超链接之前的颜色为浅**绿色**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 1][]

（2）访问超链接之后的颜色为**红色**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 2][]

（3）鼠标悬浮在链接上的颜色为**紫红色**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70]: /images/20220319/cc0d64957d07433db525881e87e952c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 1]: /images/20220319/5073fe887ead4a5aa5d08971f0e7e941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 2]: /images/20220319/4aa9006c9401444f86f4b54caeb2035c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 3]: /images/20220319/681fe7e062be42108f0471861bfa97c7.png