上一节:
下一节:

  CSS 链接

  • 链接样式

    链接可以与任何CSS属性(如设置样式colorfont-familybackground,等)。

    a {
                              color: hotpink;
                            }
    尝试一下

    此外,链接的样式可以根据它们所处的状态而有所不同。四个链接状态是:

    • a:link - 一个正常的,未经访问的链接
    • a:visited - 用户访问过的链接
    • a:hover - 当用户将鼠标悬停在其上时的链接
    • a:active - 点击时的链接
    /* 未访问的链接 */
                            a:link {
                              color: red;
                            }
    
                            /* 访问链接 */
                            a:visited {
                              color: green;
                            }
    
                            /* 鼠标悬停在链接上 */
                            a:hover {
                              color: hotpink;
                            }
    
                            /* 选定的链接 */
                            a:active {
                              color: blue;
                            }
    尝试一下

    为多个链接状态设置样式时,有一些规则:

    • a:hover必须在a:link和a:visited后
    • a:active必须在a:hover之后
  • 文字装饰

    text-decoration属性主要用于从链接中删除下划线:

    a:link {
                              text-decoration: none;
                            }
    
                            a:visited {
                              text-decoration: none;
                            }
    
                            a:hover {
                              text-decoration: underline;
                            }
    
                            a:active {
                              text-decoration: underline;
                            }
    尝试一下
  • 背景颜色

    background-color属性可用于指定链接的背景颜色:

    a:link {
                              background-color: yellow;
                            }
    
                            a:visited {
                              background-color: cyan;
                            }
    
                            a:hover {
                              background-color: lightgreen;
                            }
    
                            a:active {
                              background-color: hotpink;
                            } 
    尝试一下
  • 链接按钮

    此示例演示了一个更高级的示例,其中我们将多个CSS属性组合为显示链接作为框/按钮:

    a:link, a:visited {
                              background-color: #f44336;
                              color: white;
                              padding: 14px 25px;
                              text-align: center;
                              text-decoration: none;
                              display: inline-block;
                            }
    
    
                            a:hover, a:active {
                              background-color: red;
                            }
    尝试一下
  • 相关页面

    HTML教程:HTML样式

上一节:
下一节: