CSS链接样式

最新推荐文章于 2024-04-19 12:52:58 发布

齐天大荒

最新推荐文章于 2024-04-19 12:52:58 发布

阅读量629

点赞数

分类专栏： CSS 文章标签： css css3 html

原文链接：https://blog.csdn.net/InJavaWeTrust/article/details/101063545

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS链接样式

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

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

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
a:link {color:red;}      /* 未访问链接*/
a:visited {color:yellow;}  /* 已访问链接 */
a:hover {color:blue;}  /* 鼠标移动到链接上 */
a:active {color:green;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="https://blog.csdn.net/qq_47897078?type=blog" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

文本修饰

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="https://blog.csdn.net/qq_47897078?type=blog" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

背景颜色

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */
</style>
</head>

<body>
<p><b><a href="https://blog.csdn.net/qq_47897078?type=blog" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>