关于CSS链接样式的4种操作方法

链接是网站的重要组成部分,几乎在每个网页上都能看到不少的链接,合理的设计链接的样式能够给网页的颜值加分。链接有四种不同的状态,分别是 link、visited、active 和 hover,可以通过以下伪类选择器来为链接的四种状态设置不同的样式:

  • :link:定义普通或未访问链接的样式;
  • :visited:定义已经访问过链接的样式;
  • :hover:定义当鼠标经过或悬停在链接上时的样式;
  • :active:定义点击链接时的样式。

通过上面的四个伪类选择器,您可以像给普通文本定义样式那样,为链接定义任何想要的 CSS 样式,例如颜色、字体、背景、边框等。

注意:在定义四个伪类选择器时需要按照一定的顺序,一般情况下:hover必须位于:link:visited之后,:active必须位于:hover之后。

在 Chrome、Firefox、Safari 等主流的 Web 浏览器中,都为链接定义了一套默认的样式,如果不专门为链接设置样式,浏览器则会使用默认的链接样式。

  • 普通链接:带有下划线的蓝色文本;
  • 已访问的链接:带有下划线的紫色文本;
  • 点击链接时:带有下划线的红色文本;
  • 经过或悬停在链接上时:链接的外观并没有变化,它将保持先前状态的颜色。

1. :link

通过:link伪类选择器可以为普通或未访问的链接设置样式,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. a {
  6. text-decoration: none;
  7. }
  8. a:link {
  9. font-size: 18px;
  10. border: 1px solid black;
  11. padding: 5px;
  12. margin-left: 10px;
  13. background: #ccc;
  14. color: black;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <a href=>这是一个链接</a>
  20. <a href=>这是另一个链接</a>
  21. </body>
  22. </html>

运行结果如下图所示:

11333UK8-0
图::link伪类选择器演示

2. :visited

通过:visited伪类选择器可以为已经访问过的链接设置样式,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. a {
  6. text-decoration: none;
  7. }
  8. a:link {
  9. font-size: 18px;
  10. border: 1px solid black;
  11. padding: 5px;
  12. margin-left: 10px;
  13. background: #ccc;
  14. color: black;
  15. }
  16. a:visited {
  17. background: #FFFF99;
  18. border: 1px soild red;
  19. color: red;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <a href=>这是一个链接</a>
  25. <a href=>这是另一个链接</a>
  26. </body>
  27. </html>

运行结果如下图所示:

11333TB7-1
图::visited伪类选择器演示

3. :hover

通过:hover伪类选择器可以定义当鼠标经过或悬停在链接上时的样式,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. a {
  6. text-decoration: none;
  7. }
  8. a:link {
  9. font-size: 18px;
  10. border: 1px solid black;
  11. padding: 5px;
  12. margin-left: 10px;
  13. background: #ccc;
  14. color: black;
  15. }
  16. a:visited {
  17. background: #FFFF99;
  18. border: 1px solid red;
  19. color: red;
  20. }
  21. a:hover {
  22. background: #9c6ae1;
  23. border: 1px solid black;
  24. color: black;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <a href=>这是一个链接</a>
  30. <a href=>这是另一个链接</a>
  31. </body>
  32. </html>

运行结果如下图所示:

11333Q253-2
图::hover伪类选择器演示

4. :active

通过:active伪类选择器可以定义点击链接时的样式,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. a {
  6. text-decoration: none;
  7. }
  8. a:link {
  9. font-size: 18px;
  10. border: 1px solid black;
  11. padding: 5px;
  12. margin-left: 10px;
  13. background: #ccc;
  14. color: black;
  15. }
  16. a:visited {
  17. background: #FFFF99;
  18. border: 1px solid red;
  19. color: red;
  20. }
  21. a:hover {
  22. background: #9c6ae1;
  23. border: 1px solid black;
  24. color: black;
  25. }
  26. a:active {
  27. background: #000;
  28. border: 1px solid black;
  29. color: white;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <a href=>这是一个链接</a>
  35. <a href=>这是另一个链接</a>
  36. </body>
  37. </html>

运行结果如下图所示:

11333R305-3
图::active伪类选择器演示
© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片