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

编程笔记 html5cssjs 048 CSS链接

news 2025/9/12 21:59: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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/9/12 17:49:14

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/9/5 21:34:35

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/9/6 15:52:58

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/9/9 15:01:44

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/8/10 12:06:15

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/7/25 14:20:29

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51