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

使用 CSS 自定义属性

news 2026/3/29 19:16:25

我们常见的网站日夜间模式的变化，其实用到了 css 自定义属性。

 CSS 自定义属性（也称为 CSS 变量）是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值，使得样式更易于维护和修改。

:root {--main-color: #06D6A;
}

在这个例子中，我们定义了一个名为 --main-color 的 CSS 自定义属性，并将其值设置为 #06D6A。

然后，在任何需要使用这个颜色的地方，你可以使用 var() 函数来使用这个自定义属性，像这样：

body {background-color: var(--main-color);
}

在这个例子中，背景颜色会使用在 :root 中定义的 --main-color 属性的值，即 #06D6A。

CSS 自定义属性可以帮助你更有效地组织和复用样式，使你的 CSS 更加简洁和易于维护。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container1,.container2 {display: flex;margin: 0 auto;width: 550px;height: 300px;line-height: 300px;text-align: center;border: 1px solid #cccccc;}.container1 div,.container2 div {flex: 1;border: 1px solid #cccccc;}/* 定义 css变量 选择器定义变量的范围 */html {--main-color: skyblue;}.container1 div {/* var() 输入css变量 */background-color: var(--main-color);}.container2 div {/* var() 输入css变量 */color: var(--main-color);}</style>
</head><body><div class="container1"><div>box1</div><div>box2</div><div>box3</div></div><div class="container2"><div>box4</div><div>box5</div><div>box6</div></div>
</body></html>

 最后结果：

相关文章：

使用 CSS 自定义属性

我们常见的网站日夜间模式的变化&#xff0c;其实用到了 css 自定义属性。 CSS 自定义属性&#xff08;也称为 CSS 变量&#xff09;是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值&#xff0c;使得样式更易于维护和修改。…...

编程日记 2023/7/26 19:07:27

Unity 性能优化一：性能标准、常用工具

性能标准 推荐耗时&#xff1a; 性能提现到玩家直观感受&#xff0c;就是帧率&#xff0c;为了达到要求的帧率&#xff0c;就要控制CPU的耗时&#xff0c;不同类型的游戏&#xff0c;对帧率要求不一样。下面是推荐耗时&#xff1a; 推荐内存&#xff1a; 避免游戏闪退的重点…...

编程日记 2023/7/26 19:06:26

【http长连接+池化】

参考&#xff1a; https://it.cha138.com/ios/show-49862.html http://blog.chinaunix.net/uid-16480950-id-103597.html https://www.cnblogs.com/kevin-yuan/p/13731552.html https://www.jianshu.com/p/17e9aacca438 一、http长连接和短连接 HTTP协议是无状态的协议&#…...

编程日记 2023/7/26 19:05:25

opencv-20 深入理解HSV 色彩空间（通过指定，标记颜色等来拓展ROI区域）

RGB 色彩空间是一种被广泛接受的色彩空间&#xff0c;但是该色彩空间过于抽象&#xff0c;我们不能够直接通过其值感知具体的色彩。 我们更习惯使用直观的方式来感知颜色&#xff0c;HSV 色彩空间提供了这样 的方式。 通过 HSV色彩空间&#xff0c;我们能够更加方便地通过色调、…...

编程日记 2023/7/26 19:04:23

python调用arcgis功能一例

python调用arcgis功能一例 执行方法&#xff1a; D:\data\python>python test_Select.pywindow11下环境变量设置 此电脑/属性/系统/高级系统设置/高级/环境变量/path path中添加全局目录&#xff1a;C:\Python27\ArcGIS10.4 test_Select.py脚本内容 # Name: Select_Examp…...

编程日记 2023/7/26 19:03:21

Spring MVC 是什么？

一、什么是 Spring MVC&#xff1f; 官方对于 Spring MVC 的描述是这样的&#xff1a; Spring Web MVC is the original web framework built on the Servlet API and has been included in the Spring Framework from the very beginning. The formal name, “Spring Web …...

编程日记 2023/7/26 19:02:20

Rust操作MySQL

查询 本部分是对 「Rust入门系列」Rust 中使用 MySQL[1]的学习与记录 经常使用的时间处理库&#xff1a; chrono 流式查询使用&#xff1a; query_iter 输出到Vec使用&#xff1a; query 映射到结构体使用&#xff1a; query_map 获取单条数据使用&#xff1a; query_first 命名…...

编程日记 2023/7/26 19:01:18

JAVA面试总结-Redis篇章(二)——缓存击穿

JAVA面试总结-Redis篇章&#xff08;二&#xff09; 缓存击穿解决方案一&#xff1a;互斥锁解决方案二&#xff1a;逻辑过期![在这里插入图片描述](https://img-blog.csdnimg.cn/176dfab3e26044a9a730fabea4314e8e.png) 缓存击穿 解决方案一&#xff1a;互斥锁 解决方案二&…...

编程日记 2023/7/26 19:00:18

Spring相关知识点

概述 分层的轻量级的全栈开源框架 展示层SprigMVC 持久层 Spring JDBCTemplate 业务层事务管理 注&#xff1a; 轻量级&#xff1a;API简单 全栈&#xff1a;各层都有相应解决方案 在Spring的体系结构中&#xff0c;由上而下&#xff0c;逐层依赖 Spring相当于是一个粘合剂&…...

编程日记 2023/7/26 18:59:16

Nginx专题--反向代理(未完成)

反向代理 　　正向代理&#xff1a;如果把局域网外的 Internet 想象成一个巨大的资源库&#xff0c;则局域网中的客户端要访问 Internet&#xff0c;则需要通过代理服务器来访问&#xff0c;这种代理服务就称为正向代理。 反向代理&#xff1a;其实客户端对代理是无感知的&…...

编程日记 2023/7/26 18:58:15

什么是搜索引擎？2023 年搜索引擎如何运作？

目录 什么是搜索引擎&#xff1f;搜索引擎的原理什么是搜索引擎爬取&#xff1f;什么是搜索引擎索引&#xff1f;什么是搜索引擎检索?什么是搜索引擎排序&#xff1f; 搜索引擎的目的是什么&#xff1f;搜索引擎如何赚钱&#xff1f;搜索引擎如何建立索引?网页抓取文本处理建…...

编程日记 2023/7/26 18:57:14

Spring系列一：spring的安装与使用

文章目录 &#x1f49e; 官方资料&#x1f34a;Spring5下载&#x1f34a;文档介绍 &#x1f49e;Spring5&#x1f34a;内容介绍&#x1f34a;重要概念 &#x1f49e;快速入门&#x1f34a;Spring操作演示&#x1f34a;类加载路径&#x1f34a;Debug配置&#x1f34a;Spring容器…...

编程日记 2023/7/26 18:56:10

Ubuntu--科研工具系列

翻译系列 pot-desktop github链接: https://github.com/pot-app/pot-desktop 下载deb Releases pot-app/pot-desktop GitHub 安装过程 在下载好的deb目录下打开终端(自动安装依赖) sudo apt install "XXX.deb" &#xff08;后面可以直接托文件到终端&#…...

编程日记 2023/7/26 18:55:08

【压测指南|压力测试核心性能指标及行业标准】

文章目录 压力测试核心性能指标及行业标准指标1&#xff1a;响应时间指标2&#xff1a;吞吐量&#xff08;TPS)指标3&#xff1a;失败率总结&#xff1a; 压力测试核心性能指标及行业标准 在做压力测试时&#xff0c;新手测试人员常常在看报告时倍感压力&#xff1a;这么多性能…...

编程日记 2023/7/26 18:54:07

spark-submit --files

一、原理 spark-submit --files通常用来加载外部资源文件&#xff0c;在driver和executor进程中进行访问 –files和–jars基本相同 二、使用步骤 2.1 添加文件 spark-submit --files file_paths 其中file_paths可为多种方式&#xff1a;file: | hdfs:// | http:// | ftp:// |…...

编程日记 2023/7/26 18:53:06

应该选云服务器还是物理服务器

应该选云服务器还是物理服务器 一、为什么需要云服务器或独立服务器取代共享主机 在最早之前&#xff0c;大多数的网站都是共享主机开始的&#xff0c;这里也包含了云虚拟机。这一类的站点还有其他站点都会共同托管在同一台服务器上。但是这种共享机只适用于小的网站&#xff…...

编程日记 2023/7/26 18:52:04

【iOS】动态链接器dyld

参考&#xff1a;认识 dyld &#xff1a;动态链接器 dyld简介 dyld&#xff08;Dynamic Linker&#xff09;是 macOS 和 iOS 系统中的动态链接器&#xff0c;它是负责在运行时加载和链接动态共享库&#xff08;dylib&#xff09;或可执行文件的组件。在 macOS 系统中&#xf…...

编程日记 2023/7/26 18:50:01

RocketMQ集成Springboot --Chapter1

RocketMQ集成Springboot 三种消息发送方式 生产者 引入依赖 <!--⽗⼯程--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.2.RELEASE</version><…...

编程日记 2023/7/26 18:48:59

【Unity3D日常开发】Unity3D中比较string字符串的常用方法

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 字符串string的比较有很多方法&#xff0c;比如&#xff1a; …...

编程日记 2023/7/26 18:47:57

vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

vue3tselement-plus axiosnode.jsmysql开发管理系统之表格展示 ✏️ 1. 新建一个node项目* 初始化node* 安装可能用到的依赖* 配置文件目录* 添加路由router1. 添加router.js文件&#xff0c;添加一个test目录2. 修改app.js ,引入router&#x1f4d2; 3. 启动并在浏览器打开 * …...

编程日记 2023/7/26 18:46:55

PyTorch 2.5镜像使用指南：从环境搭建到模型训练完整流程

PyTorch 2.5镜像使用指南&#xff1a;从环境搭建到模型训练完整流程 1. 镜像概述与环境准备 PyTorch 2.5镜像是一个预配置的深度学习开发环境&#xff0c;集成了PyTorch框架和CUDA工具包&#xff0c;支持GPU加速计算。这个开箱即用的解决方案能帮助开发者快速搭建AI开发环境&…...

编程新知 2026/3/29 18:33:28

Alibaba DASD-4B Thinking 对话工具应用：自动化软件测试用例生成与评审

Alibaba DASD-4B Thinking 对话工具应用&#xff1a;自动化软件测试用例生成与评审 每次新版本上线前&#xff0c;测试团队是不是都忙得焦头烂额&#xff1f;产品需求文档改了又改&#xff0c;测试用例也得跟着一遍遍更新&#xff0c;手动编写不仅耗时&#xff0c;还容易遗漏边…...

编程新知 2026/3/29 18:15:22

掌握微信聊天记录永久备份：从数据主权到智能记忆管理

掌握微信聊天记录永久备份&#xff1a;从数据主权到智能记忆管理 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChat…...

编程新知 2026/3/29 18:05:17

OpenClaw+nanobot自动化测试：24小时监控网站可用性

OpenClawnanobot自动化测试&#xff1a;24小时监控网站可用性 1. 为什么需要自动化网站监控 作为个人站长&#xff0c;我经常遇到这样的困扰&#xff1a;半夜网站突然宕机&#xff0c;直到第二天收到用户反馈才发现问题。传统监控方案要么价格昂贵&#xff0c;要么配置复杂&a…...

编程新知 2026/3/29 15:40:02

Aurix TC275实战：手把手教你配置.lsl链接文件，搞定多核Trap向量表

Aurix TC275多核开发实战&#xff1a;深度解析.lsl链接文件与Trap向量表配置 在Aurix TC275多核MCU开发中&#xff0c;.lsl链接文件的配置往往是工程师面临的最大挑战之一。不同于传统单核MCU的简单内存布局&#xff0c;多核系统需要精确控制每个核心的代码和数据位置&#xff…...

编程新知 2026/3/29 14:23:30

aiofiles源码解析：从AsyncBase到线程池委托的完整实现

aiofiles源码解析&#xff1a;从AsyncBase到线程池委托的完整实现 【免费下载链接】aiofiles File support for asyncio 项目地址: https://gitcode.com/gh_mirrors/ai/aiofiles aiofiles 是一个专为异步文件操作设计的Python库&#xff0c;它巧妙地将阻塞式文件IO操作委…...

编程新知 2026/3/29 14:13:22

Kronos创新应用实战指南：从技术原理到跨行业落地

Kronos创新应用实战指南&#xff1a;从技术原理到跨行业落地 【免费下载链接】Kronos Kronos: A Foundation Model for the Language of Financial Markets 项目地址: https://gitcode.com/GitHub_Trending/kronos14/Kronos Kronos作为金融市场的"语言模型"&a…...

编程新知 2026/3/29 14:09:20

EEVDF调度器完全调优指南：从lag公式推导到place_entity()参数配置

EEVDF调度器完全调优指南&#xff1a;从lag公式推导到place_entity()参数配置 在Linux内核6.6版本中&#xff0c;EEVDF&#xff08;Earliest Eligible Virtual Deadline First&#xff09;调度器正式取代CFS成为默认进程调度算法。这一变革不仅带来了更精细的权重分配机制&…...

编程新知 2026/3/29 12:34:13

离散裂隙注浆与COMSOL的应用

离散裂隙注浆 comsol裂隙注浆模拟这件事&#xff0c;搞过岩土工程的都懂——看着像往裂缝里灌水泥&#xff0c;实际操作起来比煮一锅意大利面还容易翻车。COMSOL在这块儿的优势就像给工程师开了透视挂&#xff0c;尤其是处理随机分布的离散裂隙时&#xff0c;能直接把三维地质结…...

编程新知 2026/3/29 12:18:08

马年开始杂谈补

总感觉时间越过越快&#xff0c;是不是年纪大了。马年春节9天假期&#xff0c;历史上最长春节&#xff0c;一眨眼就过去了。今年刚开始就发生了很多事&#xff0c;不知福祸。首先是人工智能发展迅速&#xff0c;各种智能体开始出现。美以伊战争&#xff0c;油价狂飙。到了3月&a…...

编程新知 2026/3/29 11:57:53