程序员scholar 程序员scholar
首页
  • Web 三剑客

    • HTML
    • CSS
    • JavaScript
  • 现代 JavaScript

    • ES6
    • TypeScript
  • 前端工具库

    • jQuery
    • Ajax
    • Axios
  • Vue 生态

    • Vue2
    • Vue3
    • Vue3 + TS
    • Vuex
  • 小程序开发

    • 微信小程序
    • uni-app
  • 构建工具

    • Webpack
  • 服务端技术

    • Node.js
  • 实时通信

    • WebSocket
    • 第三方登录
  • Element-UI
  • Apache ECharts
后端 (opens new window)
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Web 三剑客

    • HTML
    • CSS
    • JavaScript
  • 现代 JavaScript

    • ES6
    • TypeScript
  • 前端工具库

    • jQuery
    • Ajax
    • Axios
  • Vue 生态

    • Vue2
    • Vue3
    • Vue3 + TS
    • Vuex
  • 小程序开发

    • 微信小程序
    • uni-app
  • 构建工具

    • Webpack
  • 服务端技术

    • Node.js
  • 实时通信

    • WebSocket
    • 第三方登录
  • Element-UI
  • Apache ECharts
后端 (opens new window)
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • HTML

  • CSS

    • CSS 基础语法
    • CSS 引入的方式
    • CSS 选择器
    • CSS 背景样式设置
    • CSS 文本和字体样式设置
    • CSS a标签样式设置
      • 1. 链接样式
      • 2. 文本修饰
      • 3. 背景颜色
      • 4. 自定义链接样式的其他属性
    • CSS 列表样式设置
    • CSS 表格样式设置
    • CSS 盒子模型
    • CSS 边框样式设置
    • CSS 轮廓样式设置
    • CSS margin(外边距)
    • CSS padding(填充)
    • CSS 长宽高样式设置
    • CSS 元素的隐藏与显示
    • CSS 内容溢出和滚动条
    • CSS 伪类和伪元素
    • CSS 表单样式设置
    • CSS !important 规则
    • CSS 元素的浮动和定位
    • CSS flex布局
    • CSS 布局对齐汇总
    • CSS 实战技巧
    • CSS 移动端适配
    • 移动端开发之流式布局
    • 移动端开发之 rem 布局
    • 移动端开发之响应式布局
  • JavaScript

  • 前端三剑客
  • CSS
scholar
2024-07-16
目录

CSS a标签样式设置

# CSS a标签样式设置

CSS 允许我们自定义和样式化 HTML 中的链接,使得它们在不同状态下呈现不同的效果。这些状态包括正常状态、访问过的状态、悬停状态以及点击状态。下面是关于如何使用 CSS 来样式化链接的详细指南。

# 1. 链接样式

链接的样式可以使用任何 CSS 属性(如颜色、字体、背景等)。特别的链接可以有不同的样式,具体取决于它们的状态。以下是四种链接状态:

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

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color: #000000;}      /* 未访问链接 */
a:visited {color: #00FF00;}   /* 已访问链接 */
a:hover {color: #FF00FF;}     /* 鼠标移动到链接上 */
a:active {color: #0000FF;}    /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

当设置若干链接状态的样式时,必须遵循以下顺序规则:

  • a:hover 必须跟在 a:link 和 a:visited 之后。
  • a:active 必须跟在 a:hover 之后。

# 2. 文本修饰

text-decoration 属性主要用于删除链接中的下划线或为链接添加其他文本装饰。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {text-decoration: none;}      /* 未访问链接 */
a:visited {text-decoration: none;}   /* 已访问链接 */
a:hover {text-decoration: underline;} /* 鼠标移动到链接上 */
a:active {text-decoration: underline;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3. 背景颜色

background-color 属性指定链接的背景色,使链接在不同状态下显示不同的背景颜色。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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="/css/" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 4. 自定义链接样式的其他属性

除了颜色和文本装饰外,还可以为链接添加其他样式属性,如字体大小、字体样式、边框等,以实现更多样化的链接效果。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color: #000; text-decoration: none; font-size: 16px;}      /* 未访问链接 */
a:visited {color: #060; text-decoration: none; font-style: italic;} /* 已访问链接 */
a:hover {color: #F00; text-decoration: underline; border-bottom: 2px solid #F00;} /* 鼠标移动到链接上 */
a:active {color: #00F; text-decoration: underline; background-color: #FF0;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编辑此页 (opens new window)
CSS 文本和字体样式设置
CSS 列表样式设置

← CSS 文本和字体样式设置 CSS 列表样式设置→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式