欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS:自定义链接样式(设置链接不同状态下的字体颜色/背景色等)_html/css_WEB-ITnose

程序员文章站 2022-03-10 08:54:48
...
能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

代码整理自w3school:http://www.w3school.com.cn

效果图:

示例代码:

CSS 链接样式

链接的状态

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

这是一个链接

注释:

  1. a:hover 必须位于 a:link 和 a:visited 之后
  2. a:active 必须位于 a:hover 之后

自定义链接的下划线样式

自定义链接的背景色样式

使用链接样式制作一个精美的按钮:

登录