当前位置： 首页 > news >正文

编程笔记 html5cssjs 048 CSS链接

news 2025/7/5 23:16:05

编程笔记 html5&css&js 048 CSS链接

  • 一、设置链接样式
  • 二、文本装饰
  • 三、背景色
  • 四、链接按钮
  • 五、练习
  • 小结

通过 CSS，可以用不同的方式设置链接的样式。

一、设置链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。
a {
color: hotpink;
}
可以根据链接处于什么状态来设置链接的不同样式。这里使用的是伪类选择器。
四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时/* 未被访问的链接 */
a:link {color: red;
}
/* 已被访问的链接 */
a:visited {color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {color: hotpink;
}
/* 被选择的链接 */
a:active {color: blue;
}

如果为多个链接状态设置样式，请遵循如下顺序规则：
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

二、文本装饰

text-decoration 属性主要用于从链接中删除下划线：

a:link {text-decoration: none;
}
a:visited {text-decoration: none;
}
a:hover {text-decoration: underline;
}
a:active {text-decoration: underline;
}

三、背景色

background-color 属性可用于指定链接的背景色：

a:link {background-color: yellow;
}
a:visited {background-color: cyan;
}
a:hover {background-color: lightgreen;
}
a:active {background-color: hotpink;
}

四、链接按钮

本例演示了一个更高级的例子，其中我们组合了多个 CSS 属性，将链接显示为框/按钮：

a:link, a:visited {background-color: #f44336;color: white;padding: 14px 25px;text-align: center; text-decoration: none;display: inline-block;
}a:hover, a:active {background-color: red;
}

五、练习

<!DOCTYPE html>
<html lang="zh-cn"><head><title>css链接 编程笔记 html5&css&js</title><meta charset="utf-8" /><style>body {color: cyan;background-color: teal;}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: monospace;}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><div align="center"><h2>移动鼠标观察样式的变化：</h2><p><b><a class="one" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变颜色</a></b></p><p><b><a class="two" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变字体大小</a></b></p><p><b><a class="three" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变背景色</a></b></p><p><b><a class="four" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变字体族</a></b></p><p><b><a class="five" href="https://yss5678.blog.csdn.net/" target="_blank">明月看潮生的博客 此链接改变文本装饰</a></b></p></div></body>
</html>

小结

有关伪类选择器就不再单独练习了。

相关文章：

编程笔记 html5cssjs 048 CSS链接

编程笔记 html5&css&js 048 CSS链接 一、设置链接样式二、文本装饰三、背景色四、链接按钮五、练习小结 通过 CSS&#xff0c;可以用不同的方式设置链接的样式。 一、设置链接样式 链接可以使用任何 CSS 属性&#xff08;例如 color、font-family、background 等&…...

编程日记 2024/1/21 9:28:34

Spring DI

目录 什么是依赖注入 属性注入 构造函数注入 Setter 注入 依赖注入的优势 什么是依赖注入 依赖注入是一种设计模式&#xff0c;它通过外部实体&#xff08;通常是容器&#xff09;来注入一个对象的依赖关系&#xff0c;而不是在对象内部创建这些依赖关系。这种方式使得对象…...

编程日记 2024/1/21 9:26:33

CorelDRAW Graphics Suite2024专业图形设计软件Mac/Windows版

以激情为创造动力&#xff0c;以目的为设计导向。“对专业的图形设计人士来说&#xff0c;CorelDRAW 是市面上最易于使用的软件。 我用它设计过标牌、横幅、T 恤&#xff0c;甚至 45 英尺长的房车图形&#xff01;” 使用 CorelDRAW 全新的聚焦模式&#xff0c;现在可以单独编…...

编程日记 2024/1/21 9:19:27

如何本地部署虚拟数字克隆人 SadTalker

环境&#xff1a; Win10 SadTalker 问题描述&#xff1a; 如何本地部署虚拟数字克隆人 SadTalker 解决方案&#xff1a; SadTalker&#xff1a;学习逼真的3D运动系数&#xff0c;用于风格化的音频驱动的单图像说话人脸动画 单张人像图像&#x1f64e; ♂️音频&#x1f3…...

编程日记 2024/1/21 9:16:24

电容充电时间的计算

电容充电时间的计算公式有两种。一种用于已知V0&#xff0c;Vu&#xff0c;Vt&#xff0c;R和C的情况&#xff0c;另一种用于已知E&#xff0c;R和C的情况。 当已知V0&#xff0c;Vu&#xff0c;Vt&#xff0c;R和C时&#xff1a; 设 V0 为电容上的初始电压值设 Vu 为电容充满…...

编程日记 2024/1/21 9:14:22

MicroPython核心（1）：源码获取、编译构建

本文介绍了MicroPython在主要平台进行构建的基本方法&#xff0c;包括如何进行版本控制、获取和构建移植的源代码、构建文档、运行测试&#xff0c;以及MicroPython代码库的目录结构。 使用git进行源码管理 MicroPython托管在GitHub上&#xff0c;并使用Git进行源码管理。在进…...

编程日记 2024/1/21 9:10:10

pyspark之Structured Streaming file文件案例1

# generate_file.py # 生成数据 生成500个文件,每个文件1000条数据 # 生成数据格式&#xff1a;eventtime name province action ()时间 用户名 省份 动作) import os import time import shutil import time FIRST_NAME [Zhao, Qian, Sun, Li, Zhou, Wu, Zheng, Wang] SEC…...

编程日记 2024/1/21 9:02:04

虚幻UE 特效-Niagara特效实战-雨天

回顾Niagara特效基础知识&#xff1a;虚幻UE 特效-Niagara特效初识 其他两篇实战&#xff1a;虚幻UE 特效-Niagara特效实战-火焰、烛火、虚幻UE 特效-Niagara特效实战-烟雾、喷泉 本篇笔记我们再来实战雨天&#xff0c;雨天主要用到了特效中的事件。 文章目录 一、雨天1、创建雨…...

编程日记 2024/1/21 8:59:01

k8s 集群搭建的一些坑

k8s集群部署的时候会遇到很多的坑&#xff0c;即使看网上的文档也可能遇到各种的坑。 安装准备 1、虚拟机两台&#xff08;ip按自己的网络环境相应配置&#xff09;(master/node) 192.168.100.215 k8s-master 192.168.100.216 k8s-node1 2、关闭防火墙(master/node) system…...

编程日记 2024/1/21 8:50:55

SpringMVC传递数据给前台

SpringMVC有三种方式将数据提供给前台 第一种 使用Request域 第二种 使用Model&#xff08;数据默认是存放在Request域中&#xff09; 与第一种方式其实是一致的 第三种 使用Map集合&#xff08;数据默认是存放在Request域中&#xff09;...

编程日记 2024/1/21 8:46:50

国标GB28181安防视频监控EasyCVR级联后上级平台视频加载慢的原因排查

国标GB28181协议安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;同时还…...

编程日记 2024/1/21 8:45:49

React16源码: React中的HostComponent HostText的源码实现

HostComponent & HostText 1 &#xff09;概述 HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent HostText&#xff0c;它是单纯的文本节点主要关注它们的一个更新过程 2 &#xf…...

编程日记 2024/1/21 8:40:45

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时&#xff0c;而C#语言易受反编译影响&#xff0c;存在代码泄露风险。本文通过《QQ乐团》项目实践&#xff0c;提出一种适用于Unity引擎的代码混淆方案&#xff0c;以保护代码逻辑。 引言 在Unity引擎下&#xff0c;为了防止代码被轻易反编译&a…...

编程日记 2024/1/21 8:34:40

安科瑞应急疏散照明系统在歌舞娱乐等场所的应用

首先必须明确疏散照明并不包含疏散指示标志&#xff0c;疏散照明是为了提供人员疏散时的必要照明&#xff0c;必须达到规定照度&#xff0c;以便逃生时看清逃生的路径&#xff0c;避免出现恐慌及踩踏事故&#xff0c;而疏散指示标志则是提供疏散路径方向引导的&#xff0c;所以…...

编程日记 2024/1/21 8:33:40

Go语言协程使用

主协程执行打印&#xff0c;子协程不打印 package main import ("fmt" )func do(i int) {fmt.Println("执行中") } func main() {fmt.Println("main协程")go do(1)fmt.Println("执行完了") }//main协程 //执行完了子协程没有打印输出…...

编程日记 2024/1/21 8:31:38

JAVA如何创建对象

在 Java 中创建对象的步骤如下&#xff1a; 定义一个类&#xff1a;在 Java 中&#xff0c;所有的对象都是通过类来创建的。因此&#xff0c;首先需要定义一个类&#xff0c;即描述对象的属性和行为。 声明变量&#xff1a;要创建一个对象&#xff0c;需要先声明一个变量来保存…...

编程日记 2024/1/21 8:29:36

《WebKit 技术内幕》之五（2）： HTML解释器和DOM 模型

2.HTML 解释器 2.1 解释过程 HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。 这一过程中&#xff0c;WebKit 内部对网页内容在各个阶段的结构表示。 WebKit 中这一过程如下&#xff1a;首先是字节流&#xff0c;经过解码之…...

编程日记 2024/1/21 8:27:34

Spring Boot多环境配置

Spring Boot的针对不同的环境创建不同的配置文件&#xff0c; 语法结构&#xff1a;application-{profile}.properties profile:代表的就是一套环境 需求 application-dev.yml 开发环境 端口8090 application-test.yml 测试环境 端口8091 application-prod.yml 生产环境 端口80…...

编程日记 2024/1/21 8:26:34

常用的目标跟踪有哪些

目标跟踪是计算机视觉领域的一个重要研究方向&#xff0c;主要用于实现视频监控、人机交互、智能交通等领域。下面介绍几种常用的目标跟踪方法&#xff1a; 特征匹配法 特征匹配法是目标跟踪中最基本的方法之一&#xff0c;其基本原理是通过提取目标的特征&#xff0c;然后在…...

编程日记 2024/1/21 8:20:27

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-帖子详情页实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…...

编程日记 2024/1/21 8:15:22

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/7/5 18:14:39

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/7/5 1:18:06

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/6/28 12:46:22

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/7/5 1:09:54

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/7/5 0:25:19

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/7/4 15:01:45

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2025/7/5 3:28:17

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/6/21 15:09:10

GraphQL 实战篇：Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

编程新知 2025/7/4 4:56:20

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...

编程新知 2025/7/4 8:12:34