CSS 链接

链接样式

链接可以与任何CSS属性（如设置样式color，font-family， background，等）。

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;
                        }

尝试一下

链接样式

文字装饰

背景颜色

链接按钮

相关页面