位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程: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;}

示例

小白教程网www.2d5.net

代码

<!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>

效果图

小白教程网www.2d5.net

image.png

上一篇: 所有的字体 font属性 下一篇: 示例:添加不同样式的超链接
毕业设计网             广告联系QQ:45157718(微信同号)