文章: 阅读:

CSS Link 链接

CSSCSS

前言

  • 不同的链接可以有不同的样式。

1、链接样式

  • 链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。

  • 特别的链接，可以有不同的样式，这取决于他们是什么状态。

  • 这四个链接状态是：

状态 描述
a:link 正常，未访问过的链接
a:visited 用户已访问过的链接
a:hover 当用户鼠标放在链接上时
a:active 链接被点击的那一刻

  • 当设置为若干链路状态的样式，也有一些顺序规则：

    • a:hover 必须跟在 a:link 和 a:visited 后面
    • a:active 必须跟在 a:hover 后面

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        a:link {	/* 未访问链接*/
            color: #000000;
        }
        a:visited {	/* 已访问链接 */
            color: #00FF00;
        }
        a:hover {	/* 鼠标移动到链接上 */
            color: #FF00FF;
        }
        a:active {	/* 鼠标点击时 */
            color: #0000FF;
        }
    </style>
    1
    <a href="https://www.qianchia.com" target="_blank">这是一个链接</a>

  • 效果

2、文本修饰

  • text-decoration 属性主要用于删除链接中的下划线。
属性 描述 CSS 备注 🔗
text-decoration 向文本添加修饰 1 🔗

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        a:link {	/* 未访问链接*/
            text-decoration: none;
        }
        a:visited {	/* 已访问链接 */
            text-decoration: none;
        }
        a:hover {	/* 鼠标移动到链接上 */
            text-decoration: none;
        }
        a:active {	/* 鼠标点击时 */
            text-decoration: none;
        }
    </style>
    1
    <a href="https://www.qianchia.com" target="_blank">这是一个链接</a>

  • 效果

3、背景颜色

  • 背景颜色属性指定链接背景色。
属性 描述 CSS 备注 🔗
background-color 设置元素的背景颜色 1 🔗

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        a:link {	/* 未访问链接*/
            background-color: #B2FF99;
        }
        a:visited {	/* 已访问链接 */
            background-color: #FFFF85;
        }
        a:hover {	/* 鼠标移动到链接上 */
            background-color: #FF704D;
        }
        a:active {	/* 鼠标点击时 */
            background-color: #FF704D;
        }
    </style>
    1
    <a href="https://www.qianchia.com" target="_blank">这是一个链接</a>

  • 效果

4、添加不同样式的超链接

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <style>
        a.one:link {
            color: #ff0000;
        }
        a.one:visited {
            color: #0000ff;
        }
        a.one:hover {
            color: #ffcc00;
        }
        a.two:link {
            color: #ff0000;
        }
        a.two:visited {
            color: #0000ff;
        }
        a.two:hover {
            font-size: 150%;
        }
        a.three:link {
            color: #ff0000;
        }
        a.three:visited {
            color: #0000ff;
        }
        a.three:hover {
            background: #66ff66;
        }
        a.four:link {
            color: #ff0000;
        }
        a.four:visited {
            color: #0000ff;
        }
        a.four:hover {
            font-family: Georgia, serif;
        }
        a.five:link {
            color: #ff0000;
            text-decoration: none;
        }
        a.five:visited {
            color: #0000ff;
            text-decoration: none;
        }
        a.five:hover {
            text-decoration: underline;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <p>将鼠标移至链接上改变样式.</p>
        
    <p><b><a class="one" href="https://www.qianchia.com" target="_blank">这个链接改变颜色</a></b></p>
    <p><b><a class="two" href="https://www.qianchia.com" target="_blank">这个链接改变字体大小</a></b></p>
    <p><b><a class="three" href="https://www.qianchia.com" target="_blank">这个链接改变背景颜色</a></b></p>
    <p><b><a class="four" href="https://www.qianchia.com" target="_blank">这个链接改变字体类型</a></b></p>
    <p><b><a class="five" href="https://www.qianchia.com" target="_blank">这个链接改变文字修饰</a></b></p>

  • 效果

5、创建链接框

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        a:link,
        a:visited {
            display: block;
            font-weight: bold;
            color: #FFFFFF;
            background-color: #98bf21;
            width: 120px;
            text-align: center;
            padding: 4px;
            text-decoration: none;
        }
        
        a:hover,
        a:active {
            background-color: #7A991A;
        }
    </style>
    1
    <a href="https://www.qianchia.com" target="_blank">这是一个链接</a>

  • 效果

6、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:13


评论


文章目录
  1. 1. 前言
  2. 2. 1、链接样式
  3. 3. 2、文本修饰
  4. 4. 3、背景颜色
  5. 5. 4、添加不同样式的超链接
  6. 6. 5、创建链接框
  7. 7. 6、CSS 实例
隐藏目录