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

【CSS】变量的声明与使用

news 2026/4/1 12:13:55

  • 原生变量
  • root 伪类

原生变量

CSS中我们可以统一设置变量方便页面维护。变量声明的时候，自定义样式变量名之前加上两根连词线 " – " 即可，使用 var() 来引用。声明的变量是有作用域的 ( 比如是在html中声明的变量，那么该变量在html中的任何地方都可以使用这个变量，如果该变量在h2标签中声明的，那么只能在h2标签下使用这个变量或它的值)

声明

body {--yanse: #f700ff;--kuandu: 30px;--gao: 50px;
}
/*yanse 与 kuandu 与 gao 是变量名称，它们的值分别是 #f700ff 和 30px 和 50px变量大小写敏感、变量名等这些参考 js变量名规则，而变量名中存储的值的书写规则仍然采用 css的规则如： --x: 50px 30px   而不是   --x: '50px 30px'
*/

使用
var() 函数是用来读取变量

div{background-color: var(--yanse);width: var(--kuandu);height: var(--gao);
}

var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。并且第一个参数后面的全部算第二个参数，写多个第二个参数语法也会提示报错

div{background-color: var(--yanse, #ffea00);width: var(--kuandu,50px);height: var(--gao,70px);
}

var() 函数也可作为其它变量的值，但也仅作为其它变量的值使用

html{--main-color: red;--div-text-color: var(--main-color);/* 无效 */var(--main-color): green;
}

作用域
CSS 变量遵从 CSS 优先级的原则，变量值可能会被覆盖

<style>
html {--color: blue;
}
h1 {--color: green;
}
.h1 {--color: yellow;
}
#h1 {--color: red;--div: #a2ffe2
}
* {color: var(--color); /* 在不同作用域中声明同一个变量，只生效自己作用域中的变量值，且遵从优先级原则 */
}
div{color: var(--div); /* 无法使用 #h1 标签作用域中声明的变量 */
}
</style>
<h2>蓝色</h2>
<h1>绿色</h1>
<h1 class="h1">黄色</h1>
<h1 id="h1">红色</h1>
<div>我会是什么颜色(蓝色)</div>

效果:
在这里插入图片描述

root 伪类

这个 CSS伪类 :root 匹配文档树的根元素，表示 <html> 被选中，除了优先级更高之外，与 html 选择器相同

语法

<style>/* 选中文档的根元素（HTML 中的 <html>） */:root {background: yellow;}
</style>

效果:
在这里插入图片描述使用

只要当前页面引用了 :root 所在的样式文件，都可以使用 var() 来引用

<style>:root{--opc: 0.9;--bgc: 72;--width: 200px;--height: 100px;}div{/* var() 函数可以代替元素中任何属性中的值的任何部分，var() 函数不能作为属性名、选择器或者其它除了属性值之外的值 */background-color: rgba(0, var(--bgc), 243, var(--opc));width: var(--width);height: var(--height);}
</style>
<div></div>

效果:

相关文章：

【CSS】变量的声明与使用

原生变量root 伪类 原生变量 CSS中我们可以统一设置变量方便页面维护。变量声明的时候&#xff0c;自定义样式变量名之前加上两根连词线 " – " 即可&#xff0c;使用 var() 来引用。声明的变量是有作用域的 ( 比如是在html中声明的变量&#xff0c;那么该变量在html…...

编程日记 2024/9/26 3:03:46

【数学分析笔记】第3章第4节闭区间上的连续函数（1）

3. 函数极限与连续函数 3.4 闭区间上的连续函数 3.4.1 有界性定理 【定理3.4.1】 f ( x ) f(x) f(x)在闭区间 [ a , b ] [a,b] [a,b]上连续&#xff0c;则 f ( x ) f(x) f(x)在闭区间 [ a , b ] [a,b] [a,b]上有界。 【证】用反证法&#xff0c;假设 f ( x ) f(x) f(x)在 [ …...

编程日记 2024/9/26 3:01:43

Mybatis中sql数组为空判断

一、Mybatis xml中的sql通过if语句判定是否为空 <if test"arrays ! null"> </if>上述示例只能判断arrays数组不为null&#xff0c;那如果是个空数组呢 二、Mybatis xml中的sql通过if语句判定数组非空数组 <if test"arrays ! null and arrays.l…...

编程日记 2024/9/26 2:59:41

12.第二阶段x86游戏实战2-CE找基地址

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要…...

编程日记 2024/9/26 2:58:41

笔记整理—内核！启动！—linux应用编程、网络编程部分（3）文件共享与标准IO

文件共享是指同一个文件被多个独立的读写进行操作。同一个文件为同一个inode&#xff0c;同一个pathname也就是同一个静态文件。同时进行操作&#xff0c;打开一个文件未关闭又被另一个操作打开。文件共享的方式可以实现高效的大文件读写。 文件共享的三种方式&#xff1a;①同…...

编程日记 2024/9/26 2:57:39

plt常用函数介绍一

目录 前言plt.figure()plt.subplot()plt.subplots()plt.xticks()plt.xlim() 前言 Matplotlib是Python中的一个库&#xff0c;它是数字的-NumPy库的数学扩展。 Pyplot是Matplotlib模块的基于状态的接口。在Pyplot中可以使用各种图&#xff0c;例如线图&#xff0c;轮廓图&#…...

编程日记 2024/9/26 2:55:38

基于ExtendSim的 电子制造 仿真模型

说明&#xff1a; 此模型表示电路板制造设施。该过程有4个步骤&#xff1a; *焊料制备 *组件放置 *烤箱 *检查 详情&#xff1a; *烤箱的容量为10张卡&#xff0c;但如果烤箱循环开始时仅能处理5张卡&#xff0c;则最多只能处理5张。 *如果检查员发现问题&#xff0c;他们将修理…...

编程日记 2024/9/26 2:54:37

BGP 路由反射器

转载&#xff1a;BGP 路由反射器 / 实验介绍: / 原理概述 缺省情况下&#xff0c;路由器从它的一个 IBGP 对等体那里接收到的路由条目不会被该路由器再传递给其他IBGP对等体&#xff0c;这个原则称为BGP水平分割 原则&#xff0c;该原则的根本作用是防止 AS 内部的 BGP 路由…...

编程日记 2024/9/26 2:53:35

CSRF高级防御绕过

1&#xff09;回顾low级别做过csrf页面的密码重置&#xff0c;重复之前的操作&#xff0c;我们发现级别调整中级之后&#xff0c;报错如下 2&#xff09;检查源码 进入dvwa源码&#xff0c;查找到checktoken&#xff1a; 3&#xff09;在dvwa-csrf页面上&#xff0c;抓包 http…...

编程日记 2024/9/26 2:52:35

MySQL安装文档-Windows

文章目录 MySQL安装1. 安装2. 配置 MySQL安装 1. 安装 1). 双击官方下来的安装包文件 2). 根据安装提示进行安装 安装MySQL的相关组件&#xff0c;这个过程可能需要耗时几分钟&#xff0c;耐心等待。 输入MySQL中root用户的密码,一定记得记住该密码 2. 配置 安装好MySQL之后…...

编程日记 2024/9/26 2:51:34

html TAB、table生成

1. 代码 <!DOCTYPE html> <head> <meta charset"UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 10px solid #ccc; padding: 30px; mar…...

编程日记 2024/9/26 2:48:30

2024！再见前端！

各位朋友大家晚上好&#xff0c;夜深了&#xff0c;睡不着&#xff0c;想想还是写一篇文章和大家说再见吧&#xff01; 自2014年入行前端以来&#xff0c;满打满算差不多整整十年了&#xff0c;这十年可以说是见证了中国整个互联网的起飞到全盛时期。这期间经历了电商、金融、…...

编程日记 2024/9/26 2:45:28

【源码+文档+调试讲解】人事管理系统设计与实现Python

摘 要 人事管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff…...

编程日记 2024/9/26 2:44:27

基于注意力机制的图表示学习：GRAPH-BERT模型

人工智能咨询培训老师叶梓 转载标明出处 图神经网络&#xff08;GNNs&#xff09;在处理图结构数据方面取得了显著的进展&#xff0c;但现有模型在深层结构中存在性能问题&#xff0c;如“悬挂动画问题”和“过平滑问题”。而且图数据内在的相互连接特性限制了大规模图输入的并…...

编程日记 2024/9/26 2:42:24

linux服务器安装原生的php环境

在CentOS上安装原生的PHP环境相对简单。下面是一个详细的步骤指南&#xff0c;适用于CentOS 7及更高版本。 ### 第一步&#xff1a;更新系统 首先&#xff0c;确保你的系统是最新的&#xff1a; sudo yum update -y ### 第二步&#xff1a;安装EPEL和Remi仓库 1. **安装EP…...

编程日记 2024/9/26 2:36:18

数电学习基础（逻辑门电路+）

1.逻辑门电路 1.1逻辑门电路的简介 1.1.1各种逻辑门电路的简介 基本概念 &#xff08;1&#xff09;实现基本逻辑运算和常用逻辑运算的电路称为逻辑门电路&#xff0c;简称门电路。逻辑门电路是组成各种数字电路的基本单元电路。将构成门电路的元器件制作一块半导体芯片上再…...

编程日记 2024/9/26 2:35:17

【艾思科蓝】Spring Boot实战：零基础打造你的Web应用新纪元

第七届人文教育与社会科学国际学术会议&#xff08;ICHESS 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看&#xff1a;https://ais.cn/u/nuyAF3 目录 一、Spring Boot简介 1.1 Spring Boot的诞生背景 1.2 Spring Boot的核心特性 二、搭建开发环境 2.1…...

编程日记 2024/9/26 2:34:16

C++ 二叉树

1. 二叉搜索树 1.1 二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;他或者是一棵空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; ①若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 ②若它的右子树不为空&#xff0c;则右子树上所有节…...

编程日记 2024/9/26 2:32:14

初探IT世界：从基础到未来

初探IT世界&#xff1a;从基础到未来 1. 引言 随着科技的不断发展&#xff0c;IT&#xff08;信息技术&#xff09;已经成为全球经济的支柱之一。从软件开发、网络安全到数据分析和人工智能&#xff0c;IT 领域为我们的日常生活提供了许多不可或缺的技术服务。无论你是初学者…...

编程日记 2024/9/26 2:31:13

一区黏菌算法+双向深度学习+注意力机制！SMA-BiTCN-BiGRU-Attention黏菌算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测

一区黏菌算法双向深度学习注意力机制&#xff01;SMA-BiTCN-BiGRU-Attention黏菌算法优化双向时间卷积双向门控循环单元融合注意力机制多变量回归预测 目录 一区黏菌算法双向深度学习注意力机制&#xff01;SMA-BiTCN-BiGRU-Attention黏菌算法优化双向时间卷积双向门控循环单元…...

编程日记 2024/9/26 2:27:09

手把手教你用AT32F403A实现串口空闲中断接收完整数据帧

深入解析AT32F403A串口空闲中断实现高效数据帧接收 在嵌入式系统开发中&#xff0c;串口通信是最基础也最常用的外设接口之一。面对实际应用中常见的不定长数据帧接收需求&#xff0c;传统轮询方式不仅效率低下&#xff0c;还容易丢失数据。而国产MCU雅特力AT32F403A提供的**串…...

编程新知 2026/4/1 12:08:08

别再乱装CUDA了！保姆级教程：从显卡驱动到PyTorch 2.x，一次搞定Windows深度学习环境

深度学习环境配置避坑指南&#xff1a;从显卡驱动到PyTorch 2.x全流程解析 刚接触深度学习的开发者&#xff0c;往往在环境配置阶段就遭遇重重阻碍。显卡驱动与CUDA版本不匹配、cuDNN安装失败、PyTorch下载缓慢等问题&#xff0c;让许多初学者在起步阶段就耗费大量时间。本文将…...

编程新知 2026/4/1 12:04:06

Wan2.1-umt5多轮对话效果展示：复杂任务分解与执行跟踪

Wan2.1-umt5多轮对话效果展示&#xff1a;复杂任务分解与执行跟踪 最近在测试各种对话模型时&#xff0c;我遇到了一个挺有意思的挑战&#xff1a;让AI帮忙规划一次完整的旅行。这可不是简单的一问一答&#xff0c;它涉及到理解模糊需求、主动追问细节、分解多个子任务&#x…...

编程新知 2026/4/1 11:53:49

OEC-turbo变废为宝：从吃灰PCDN盒子到家庭服务器，Armbian/OpenWrt刷机实战记录

OEC-turbo硬件改造指南&#xff1a;从闲置PCDN设备到全能家庭服务器 手上闲置的OEC-turbo盒子除了吃灰还能做什么&#xff1f;这款搭载RK3568芯片的设备实际上是一块被低估的硬件宝藏。相比市面上热门的斐讯N1等矿渣设备&#xff0c;OEC-turbo在处理器性能、内存配置和扩展性方…...

编程新知 2026/4/1 10:24:50

基于python的演唱会门票演出购票系统的设计与实现

目录同行可拿货,招校园代理 ,本人源头供货商用户管理模块演出信息管理购票与选座功能支付系统集成订单与票务管理数据分析与报表高并发优化项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商…...

编程新知 2026/4/1 9:25:52

Claude Code 愚人节彩蛋：终端里的虚拟宠物伴侣

Claude Code 愚人节彩蛋&#xff1a;终端里的虚拟宠物伴侣 在 AI 编程助手的深处&#xff0c;藏着一个等待孵化的秘密——18 种 ASCII 精灵、5 级稀有度、完整的 RPG 属性系统。这可能是你见过的最可爱的命令行宠物。 意外的发现 在逆向分析 Claude Code 源码的过程中&#xf…...

编程新知 2026/4/1 9:13:36

UI-TARS-desktop场景应用：自动生成销售报告与更新库存实战

UI-TARS-desktop场景应用&#xff1a;自动生成销售报告与更新库存实战 1. 场景痛点与解决方案 1.1 传统销售管理的效率瓶颈 在零售和电商行业中&#xff0c;销售数据分析和库存管理是日常运营的核心工作。传统方式通常需要&#xff1a; 手动从多个系统导出销售数据人工整理…...

编程新知 2026/4/1 8:38:55

Wan2.2-I2V-A14B：在4090显卡上快速体验专业级视频生成

Wan2.2-I2V-A14B&#xff1a;在4090显卡上快速体验专业级视频生成 1. 开篇&#xff1a;认识这款视频生成神器 你是否想过用一张普通的图片就能生成流畅的视频&#xff1f;Wan2.2-I2V-A14B让这个想法变成了现实。作为一款开源的视频生成模型&#xff0c;它能在消费级显卡上实现…...

编程新知 2026/4/1 7:31:15

2025年11月一区SCI-壁虎优化算法Gekko Japonicus Algorithm-附Matlab免费代码

引言 近年来&#xff0c;在合理框架内求解优化问题的元启发式算法的发展引起了全球科学界的极大关注。本期介绍一种新的创新算法——壁虎优化算法Gekko Japonicus Algorithm&#xff0c;GJA。该算法的灵感主要来自于壁虎的捕食策略和生存行为。通过模拟壁虎的混合运动模式、定…...

编程新知 2026/4/1 7:08:46

Linux 内核遍历宏介绍

Linux内核中的遍历宏全面详解 Linux内核中大量使用遍历宏&#xff08;Iteration Macros&#xff09;来简化数据结构的遍历操作。这些宏提供了类型安全、简洁且高效的遍历方式&#xff0c;是内核编程的核心范式之一。一、遍历宏的分类 1.1 按功能分类 Linux内核遍历宏 ├── 链…...

编程新知 2026/4/1 6:58:22