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…...

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

【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...

(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码:HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
shell脚本质数判断
shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数)shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数) 思路: 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...
手动给中文分词和 直接用神经网络RNN做有什么区别
手动分词和基于神经网络(如 RNN)的自动分词在原理、实现方式和效果上有显著差异,以下是核心对比: 1. 实现原理对比 对比维度手动分词(规则 / 词典驱动)神经网络 RNN 分词(数据驱动)…...
MyBatis-Plus 常用条件构造方法
1.常用条件方法 方法 说明eq等于 ne不等于 <>gt大于 >ge大于等于 >lt小于 <le小于等于 <betweenBETWEEN 值1 AND 值2notBetweenNOT BETWEEN 值1 AND 值2likeLIKE %值%notLikeNOT LIKE %值%likeLeftLIKE %值likeRightLIKE 值%isNull字段 IS NULLisNotNull字段…...

暴雨新专利解决服务器噪音与性能悖论
6月1日,我国首部数据中心绿色化评价方面国家标准《绿色数据中心评价》正式实施,为我国数据中心的绿色低碳建设提供了明确指引。《评价》首次将噪音控制纳入国家级绿色评价体系,要求从设计隔声结构到运维定期监测实现闭环管控,加速…...