CSS链接

百科大全

更新时间：2025-10-05 14:18:1141

admin管理员组
文章数量:1794759

CSS 链接

为访问/未访问链接添加不同的颜色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body> <a href="/CSS/" target="_blank">这是一个链接</a> 注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。 注意： a:active 必须在 a:hover 之后。 </body> </html>

在链接上使用文本装饰

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</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> <a href="/css/" target="_blank">This is a link</a> 注意: hover必须在:link和 a:visited之后定义才有效. 注意:active必须在hover之后定义是有效的. </body> </html>

指定链接的背景颜色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</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> <a href="/css/" target="_blank">这是一个链接</a> 注意: hover必须在:link和 a:visited之后定义才有效. 注意:active必须在hover之后定义是有效的. </body> </html>

超链接添加其他样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;} a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:Georgia, serif;} a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} </style> </head> <body> 将鼠标移至链接上改变样式. <a class="one" href="/css/" target="_blank">这个链接改变颜色</a> <a class="two" href="/css/" target="_blank">这个链接改变字体大小</a> <a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a> <a class="four" href="/css/" target="_blank">这个链接改变字体类型</a> <a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a> </body> </html>

高级 - 创建链接框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#7A991A; } </style> </head> <body> <a href="/css/" target="_blank">这是一个链接</a> </body> </html>

参考：

www.yuque/docs/share/ed3b24c9-6a80-4e9d-bee0-9a25c6835c0e

本文标签：链接 css

版权声明：本文标题：CSS链接内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969431a123681.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。