 |
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：CSS入门到精通 > CSS 链接 a标签样式 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 所有的字体 font属性 | 下一篇： 示例：添加不同样式的超链接 |
|
不同的链接可以有不同的样式。 链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： n a:link - 正常，未访问过的链接 n a:visited - 用户已访问过的链接 n a:hover - 当用户鼠标放在链接上时 n a:active - 链接被点击的那一刻 实例 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ 当设置为若干链路状态的样式，也有一些顺序规则： n a:hover 必须跟在 a:link 和 a:visited后面 n 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;} 示例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS 链接 a标签样式</title> <!--定义内部样式--> <style> a:link {color:red;} /* 未被访问的链接 */ a:visited {color:gray;} /* 已被访问的链接 */ a:hover {color:green;} /* 鼠标指针移动到链接上 */ a:active {color:blue;} /* 正在被点击的链接 */
a:link {text-decoration:none;} /* 去除下划线 */ a:visited {text-decoration:none;} /* 去除下划线 */ a:hover {text-decoration:underline;} /* 有下划线 */ a:active {text-decoration:underline;}/* 有下划线 */
/* 可以设置链接a标签各状态的背景颜色 a:link {background-color:purple;} a:visited {background-color:purple;} a:hover {background-color:purple;} a:active {background-color:purple;} */ </style> </head> <body>
<a href="http://www.qq.com" target="_blank"> 我要去腾讯 </a><br><br>
<a href="http://www.8895.org" target="_blank"> 黄老师站点 </a>
</body> </html> 效果图
|
|
| 上一篇： 所有的字体 font属性 | 下一篇： 示例：添加不同样式的超链接 |
