CSS变量 -- var() 使用教程
目录
- 1 CSS变量的基本使用
- 1.1 变量定义
- 1.1 变量使用
- 1.3 全局/局部变量
- 2 CSS变量的参数
- 3 CSS变量的拼接和计算
- 3.1 拼接
- 3.2 计算
- 4 JS 修改 CSS变量
CSS 自定义属性(有时候也被称作CSS 变量或者级联变量),它的值可以在整个文档中重复使用。
复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。
1 CSS变量的基本使用
1.1 变量定义
CSS 变量名前面要加两根连词线 –
--color: #E6E6FA;
--height: 100px;
1.1 变量使用
由 var() 函数来获取值,比如:
background-color: var(--color);
height: var(--height);
CSS 变量名不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合
1.3 全局/局部变量
- 全局变量
:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html>
元素
在里面声明的变量,下面的所有选择器都可以拿到
注:与 scope 冲突
:root {--color: #E6E6FA;--height: 100px;
}.header-container {background-color: var(--color);height: calc(var(--height) * 1.5);
}
- 局部变量
.header-container {--color: #E6E6FA;--height: 100px;background-color: var(--color);height: calc(var(--height) * 1.5);
}
2 CSS变量的参数
var() 函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
color: var(--foo, #7F583F);
3 CSS变量的拼接和计算
如果变量值是一个字符串,可以与其他字符串拼接;
如果变量值是数值,可以进行计算;
3.1 拼接
// 字符串
--bar: 'hello';
--foo: var(--bar)' world';
3.2 计算
:root {--height: 100px;
}.header-container {height: calc(var(--height) * 1.5);
}
4 JS 修改 CSS变量
在开发过程中,有时候我们需要根据不同的条件来动态修改样式,这时候就需要使用JavaScript来实现。
具体来说,我们可以通过 JavaScript 访问元素的 documentElement.style 属性,然后使用 setProperty 方法来更改 CSS 变量的值
<button @click="changeHeight">Change Height</button>
<script setup>
const changeHeight = () => {document.documentElement.style.setProperty('--height', '200px');
}
</script>
<style>
:root {--height: 100px;
}.header-container {height: var(--height);
}
</style>
相关文章:
CSS变量 -- var() 使用教程
目录 1 CSS变量的基本使用1.1 变量定义1.1 变量使用1.3 全局/局部变量 2 CSS变量的参数3 CSS变量的拼接和计算3.1 拼接3.2 计算 4 JS 修改 CSS变量 CSS 自定义属性(有时候也被称作CSS 变量或者级联变量),它的值可以在整个文档中重复使用。 复…...

python基础-数据结构-leetcode刷题必看-queue---队列-python的底层构建
文章目录 队列双端队列 deque底层存储deque接口1. __init__(self, iterable: Iterable[_T], maxlen: int | None None) -> None2. append(self, __x: _T) -> None3. appendleft(self, __x: _T) -> None4. copy(self) -> Self5. count(self, __x: _T) -> int6. …...
深入理解Spring Security:保护你的Web应用程序
深入理解Spring Security:保护你的Web应用程序 这听起来像是一部詹姆斯邦德电影,邦德试图进入坏家伙的藏身之处。坏家伙设置了一系列超级安全措施,有多层次的安全防御。邦德克服了其中一层,进入了隐藏处,但又遇到了下一个陷阱。他战胜了一个又一个陷阱,最终克服了所有障…...

【车载开发系列】Vector工具链的安装
【车载开发系列】Vector工具链的安装 【车载开发系列】Vector工具链的安装 【车载开发系列】Vector工具链的安装一. VectorDriver二. DaVinci_Developer三. DaVinci Configurator 一. VectorDriver Vector Driver Setup是Vector产品链中重要的驱动软件,所有的硬件设备进行连接…...

Windows系统部署YOLOv5 v6.1版本的训练与推理环境保姆级教程
文章目录 一 概述二 依赖环境(prerequisites)2.1 硬件环境2.2 软件环境 三 环境安装3.1 创建并激活虚拟环境3.2 安装Pytorch与torchvision3.3 校验Pytorch安装3.4 下载 YOLOv5 v6.1 源码3.5 安装 YOLOv5 依赖3.6 下载预训练模型3.7 安装其他依赖3.8 测试环境安装3.9 测试训练流…...
[RK3588-Android12] 关于EDP屏外设为Panel,不支持HPD的配置
问题描述 直接附上dts配置,也可自行查看先关文档RKDocs\common\display\Rockchip_RK3588_User_Guide_eDP_CN.pdf 解决方案: // EDP屏参数panel-edp {compatible "simple-panel";// 屏en脚 自行根据原理图配置enable-gpios <&gpioX R…...

142.栈和队列:用栈实现队列(力扣)
题目描述 代码解决 class MyQueue { public:stack<int> stIn; // 输入栈,用于push操作stack<int> stOut; // 输出栈,用于pop和peek操作MyQueue() {}void push(int x) {stIn.push(x); // 将元素压入输入栈}int pop() {// 如果输出栈为空&…...

乡村振兴的乡村产业创新发展:培育乡村新兴产业,打造乡村产业新名片,促进乡村经济多元化发展
目录 一、引言 二、乡村产业创新发展的必要性 (一)适应新时代发展要求 (二)满足消费升级需求 (三)促进农民增收致富 三、培育乡村新兴产业策略 (一)加强科技创新引领 &#…...

数据库|基于T-SQL创建数据库
哈喽,你好啊,我是雷工! SQL Server用于操作数据库的编程语言为Transaction-SQL,简称T-SQL。 本节学习基于T-SQL创建数据库。以下为学习笔记。 01 打开新建查询 首先连接上数据库,点击【新建查询】打开新建查询窗口, …...

智能家居ZigBee网关选型定制指南:主控,操作系统,天线设计,助力IoT开发者
随着科技的发展和人们生活水平的提高,智能家居以其便捷、舒适、安全等特点,逐渐走进千家万户,成为家装消费品换新升级的重要方向。在智能家居系统中,网关扮演着中枢控制器的角色,负责将各种设备连接到互联网上…...

QT截图程序,可多屏幕截图二,增加调整截图区域功能
上一篇QT截图程序,可多屏幕截图只是实现了最基本的截图功能,虽然能用但是缺点也有,没办法更改选中的区域,这在实际使用时不太方便。这篇增加了这个功能。先看看效果。 实现代码为: 头文件 #ifndef MASKWIDGET_H #de…...
开源浪潮与闭源堡垒:大模型未来的双重奏
从数据隐私、商业应用和社区参与等方面来看,开源大模型和闭源大模型各有优劣势。开源模型在透明度、社区协作和成本效益方面具有优势,而闭源模型在安全性、合规性和商业竞争力方面表现出色。因此,我更倾向于认为,未来的大模型发展…...

postman教程-6-发送delete请求
领取资料,咨询答疑,请➕wei: June__Go 上一小节我们学习了postman发送put请求的方法,本小节我们讲解一下postman发送delete请求的方法。 HTTP DELETE 请求是一种用于删除指定资源的请求方法。在RESTful API 设计中,DELETE 请求…...
java小技能: 数字和字母组合的验证码图片(生成验证码字符并加上噪点,干扰线)
文章目录 引言I 验证码的作用1.1 验证使用计算机的是一个人,而非计算机程序。1.2 提供一个很短的时间窗的一次性密码。II 数字和字母组合的验证码图片2.1 获取验证码图片2.2 生成验证码字符并加上噪点,干扰线see also引言 世界上没有绝对的信息安全,但是有防范得好和坏的分…...

网络故障与排除
一、Router-ID冲突导致OSPF路由环路 路由器收到相同Router-ID的两台设备发送的LSA,所以查看路由表看到的OSPF缺省路由信息就会不断变动。而当C1的缺省路由从C2中学到,C2的缺省路由又从C1中学到时,就形成了路由环路,因此出现路由不…...
Cocos Creator 编辑器的数据绑定详解
Cocos Creator 是一款由 Cocos 平台推出的游戏开发工具,它集成了图形化编辑器、脚本引擎和资源管理器等功能,方便开发者快速地创建游戏。其中,数据绑定是 Cocos Creator 编辑器中非常重要的一个功能,它可以帮助开发者实现页面元素…...
解决Selenium NameError: name ‘By’ is not defined
解决Selenium NameError: name ‘By’ is not defined 文章目录 解决Selenium NameError: name By is not defined背景错误原因解决方法1. 检查导入语句2. 修正拼写和大小写3. 验证Selenium库安装4. 重启IDE或终端5. 检查环境变量 验证总结 背景 在使用Selenium进行Web自动化测…...

创建特定结构的二维数组:技巧与示例
新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、引言:二维数组的奇妙世界 二、方法一:直接初始化 1. 初始化一个…...
React Native 之 BackHandler (二十)
react-native 中的 BackHandler 是一个用于处理 Android 设备上的硬件返回按钮(back button)和 iOS 设备上的手势返回(swipe back gesture)的模块。在 React Native 应用中,当用户按下返回按钮或执行返回手势时&#x…...

一篇文章讲透排序算法之快速排序
前言 本篇博客难度较高,建议在学习过程中先阅读一遍思路、浏览一遍动图,之后研究代码,之后仔细体会思路、体会动图。之后再自己进行实现。 一.快排介绍与思想 快速排序相当于一个对冒泡排序的优化,其大体思路是先在文中选取一个…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...

在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场,但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大,传统架构已较难满足当前企业发展的需求,企业面临着三重挑战: ① 业务:国内用户访问海外服…...

中科院1区顶刊|IF14+:多组学MR联合单细胞时空分析,锁定心血管代谢疾病的免疫治疗新靶点
中科院1区顶刊|IF14:多组学MR联合单细胞时空分析,锁定心血管代谢疾病的免疫治疗新靶点 当下,免疫与代谢性疾病的关联研究已成为生命科学领域的前沿热点。随着研究的深入,我们愈发清晰地认识到免疫系统与代谢系统之间存在着极为复…...
大模型智能体核心技术:CoT与ReAct深度解析
**导读:**在当今AI技术快速发展的背景下,大模型的推理能力和可解释性成为业界关注的焦点。本文深入解析了两项核心技术:CoT(思维链)和ReAct(推理与行动),这两种方法正在重新定义大模…...