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

编程笔记 html5cssjs 048 CSS链接

news 2026/3/30 2:40:06

编程笔记 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

百川2-13B模型微调实战：提升OpenClaw中文邮件处理准确率

百川2-13B模型微调实战&#xff1a;提升OpenClaw中文邮件处理准确率 1. 问题背景与挑战 去年在尝试用OpenClaw自动化处理公司内部邮件时&#xff0c;我发现了一个棘手的问题&#xff1a;当邮件内容涉及复杂业务术语或非标准表达时&#xff0c;基于通用大模型的OpenClaw经常出…...

编程新知 2026/3/30 1:42:17

uConfigLib：嵌入式轻量级类型安全配置注册表

1. uConfigLib 库深度解析&#xff1a;面向嵌入式系统的轻量级配置注册表实现1.1 设计目标与工程定位uConfigLib 是一个专为资源受限嵌入式平台设计的纯 C 语言配置管理库&#xff0c;其核心目标并非提供通用键值存储&#xff0c;而是构建一种类 Windows 注册表&#xff08;Reg…...

编程新知 2026/3/30 1:28:03

DownKyi如何成为B站视频下载的智能管家？8K高清+批量处理全解析

DownKyi如何成为B站视频下载的智能管家&#xff1f;8K高清批量处理全解析 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等…...

编程新知 2026/3/30 1:18:00

TypeScript——tsconfig.json

tsconfig.json1、使用配置文件1.1、自动搜索配置文件1.2、指定配置文件2、编译选项列表3、编译文件列表3.1、--listFiles编译选项3.2、　默认编译文件列表3.3、files属性3.4、include属性3.5、　exclude属性4、声明文件列表4.1、--typeRoots编译选项4.2、--types编译选项5、继承…...

编程新知 2026/3/30 1:15:58

如何用AI在3分钟内自动生成专业视频：告别复杂剪辑的全新解决方案

如何用AI在3分钟内自动生成专业视频&#xff1a;告别复杂剪辑的全新解决方案 【免费下载链接】auto-video-generateor 自动视频生成器&#xff0c;给定主题&#xff0c;自动生成解说视频。用户输入主题文字&#xff0c;系统调用大语言模型生成故事或解说的文字&#xff0c;然后…...

编程新知 2026/3/30 1:01:47

Fast-LIO2 + Lidar_IMU_Init：提升机器人定位精度的完整数据流与标定实战

Fast-LIO2与Lidar_IMU_Init融合实践&#xff1a;从标定到部署的机器人定位优化全流程 在机器人自主导航领域&#xff0c;激光雷达与IMU的融合定位系统已成为工业级应用的主流选择。然而&#xff0c;许多开发者在实际部署时会发现&#xff1a;即使采用了Fast-LIO2这样先进的激光…...

编程新知 2026/3/30 0:51:46

VLN性能提升秘籍：详解JanusVLN的‘记忆宫殿’如何解决长期导航的内存爆炸问题

VLN性能优化实战&#xff1a;JanusVLN混合记忆机制解析与工程落地指南 1. 视觉语言导航的工程挑战与性能瓶颈 在智能家居助手、仓储机器人等实际应用场景中&#xff0c;视觉语言导航&#xff08;VLN&#xff09;系统经常面临三大核心性能挑战。首先是内存占用失控——传统方法需…...

编程新知 2026/3/29 23:15:09

如何用Java处理地震波？信号滤波算法

常用的地震波信号滤波算法包括傅里叶转换&#xff08;fft&#xff09;与频域滤波器、fir滤波器、iir滤波器和中值滤波器一起。. 通过将时域信号转换为频域&#xff0c;java可以通过apache实现特定频率组件的操作 commons math库中的fastfouriertransformer类实现&#xff1b;2.…...

编程新知 2026/3/29 22:40:53

特征选择新思路：Laplacian Score与PCA/Lasso对比实验报告

特征选择方法深度对比&#xff1a;Laplacian Score在真实数据集中的突围表现 当面对高维数据时&#xff0c;特征选择就像是在嘈杂的市场中寻找真正有价值的声音。传统的PCA和Lasso方法已经服务了我们多年&#xff0c;但Laplacian Score带来的图论视角正在悄然改变游戏规则。本文…...

编程新知 2026/3/29 21:22:20

计算机毕业设计springboot鲜花在线商城 基于SpringBoot的园艺花卉网络销售系统 基于Java Web的线上花店订购管理平台

计算机毕业设计springboot鲜花在线商城911yt9 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09;本套源码可以先看具体功能演示视频领取&#xff0c;文末有联xi 可分享近年来&#xff0c;互联网技术的迅猛发展和智能终端设备的全面普及&#xff0c;为传统零售行业带来…...

编程新知 2026/3/29 19:53:45