CSS 链接(link)

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

链接样式

链接的样式的设置可以用任何CSS中的属性比如颜色,字体,背景等

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

这四个链接状态是:

  • a:link:正常,未访问过的链接

  • a:visited:用户已访问过的链接

  • a:hover:当用户鼠标放在链接上时

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

注意:当设置为若干链路状态的样式,要遵循一定的顺序规则:

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif

背景颜色

背景颜色属性指定链接背景色

实例

a:link {background-color:#F64F4F;}
a:visited {background-color:#d9a9e5;}
a:hover {background-color:#9777F1;}
a:active {background-color:#6DEFF9;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

GIF.gif