CSS链接样式
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="blog.csdn/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="blog.csdn/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="blog.csdn/qq_47897078?type=blog"target="_blank">这是⼀个链接</a></b></p> <p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
css鼠标点击样式
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。