如何玩转CSS连接（link）的知识点？

CSS 连接

不一样的连接能够有不一样的样式。

---

 

连接样式

连接的样式，能够用任何CSS属性（如颜色，字体，背景等）。

特别的连接，能够有不一样的样式，这取决于他们是什么状态。

这四个连接状态是：

• a:link - 正常，未访问过的连接
• a:visited - 用户已访问过的连接
• a:hover - 当用户鼠标放在连接上时

• a:active - 连接被点击的那一刻

    a:link {color:#000000;}      /* 未访问连接*/
    a:visited {color:#00FF00;}  /* 已访问连接 */
    a:hover {color:#FF00FF;}  /* 鼠标移动到连接上 */
    a:active {color:#0000FF;}  /* 鼠标点击时 */

 

 

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

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

---

 

*常见的连接样式

根据上述连接的颜色变化的例子，看它是在什么状态。

让咱们经过一些其余常见的方式转到连接样式：

1.文本修饰

text-decoration 属性主要用于删除连接中的下划线：

    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:underline;}
    a:active {text-decoration:underline;}

2.背景颜色

背景颜色属性指定连接背景色：

    a:link {background-color:#B2FF99;}
    a:visited {background-color:#FFFF85;}
    a:hover {background-color:#FF704D;}
    a:active {background-color:#FF704D;}