深入理解CSS中的变量(概念篇)

CSS变量,也称为自定义属性,是一种在CSS中定义和重用值的方式。它们允许开发者在一个地方定义样式值,然后在整个样式表中引用这些值,从而提高代码的可维护性和可读性。

1、定义和使用CSS变量

CSS变量的定义和使用非常简单。变量名以两个连字符开头,变量值为任何有效的CSS值。它和其他CSS属性一样,可以在任何选择器中定义。以下是一个基本示例:

:root { --main-bg-color: #3498db; --main-text-color: #ffffff; 
} body { background-color: var(--main-bg-color); color: var(--main-text-color); 
}

在这个示例中,我们在 :root 选择器中定义了两个变量:–main-bg-color–main-text-color。然后,我们使用 var() 函数在 body 选择器中引用这些变量。

在变量的定义中有以下几个约束:

  • 变量名:以两个两字符开头,区分大小写;
  • 变量值:可以是任何有效的CSS属性值;
  • 语法:写任何css样式集一样;

2、变量的作用域及继承性

在定义中,我们提到,CSS变量的定义,语法和写任何css样式集一样,那么它是否也存在作用域集相应的继承特性呢?答案是肯定的。

2.1、CSS变量的作用域

CSS变量的作用域类似于 ES中变量作用域:全局作用域“函数作用域”。注意"函数作用域"打了引号。

全局作用域:顾名思义就是定义后,可以在HTML文档的任何递地方访问到。定义在根伪类:root下:

:root{ --theme-color: blue; --theme-border-color: #c2c2c2; 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50589.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用自启设置

一、开机自启动 1、编辑 vi /lib/systemd/system/nginx.service 文件,没有创建一个 touch nginx.service 然后将如下内容根据具体情况进行修改后,添加到nginx.service文件中: [Unit] Descriptionnginx Afternetwork.target remote-fs.targ…

jdk版本区别

JDK(Java Development Kit)是 Java 开发工具包,它包括了 Java SE(Standard Edition)、编译器、调试器和其他开发工具。Oracle 公司是 JDK 的主要供应商,它提供了多个版本的 JDK,每个版本都有自己…

SPL 算法详解

1. 引言 SPL(Single-Precision Linear)算法是一种在计算机图形学和数据处理领域中常用的线性插值算法。线性插值用于在已知数据点之间估计未知数据点,通过简单的线性计算,SPL 算法可以快速、有效地实现这一目标。本文将详细介绍 …

SQLException:Operation not allowed after ResultSet closed

运行代码时出现的错误: 这是在运行简单的JDBC访问数据库时出现的问题,原因是在ResultSet方法中添加了close()关闭方法,如图: ResultSet 是通过 query 方法获得的,并且在 try-catch 块中没有显式地关闭它。这实际上是 一个常见的…

暴雨宅家?AI拯救你的无聊暑假!高中生必藏神器大公开

嘿,各位高中生朋友们,最近是不是被这没完没了的暴雨困在家里,感觉暑假生活都快发霉了?别急,今天我要揭秘一个宝藏网站—— ai123.cn,它简直就是咱们暑期宅家必备的救星!接下来,我就来…

whaler_通过镜像导出dockerfile

1、Whaler简介 Whaler:从镜像导出Dockerfile,whaler英文释义捕鲸船。 2、下载安装 # wget -cO /usr/local/bin/whaler https://github.com/P3GLEG/Whaler/releases/download/1.0/Whaler_linux_amd64 3、赋予可执行权限 [rootlocalhost ~]# chmod x /usr/local/…

【elasticsearch实现优先展示连词并按某个字段折叠显示最新一条】

elasticsearch实现优先展示连词并按某个字段折叠显示最新一条 前言match_phrase 顺序前缀 boost 权重collapse 折叠基本用法高级功能排序 前言 场景要求: 优先展示关键词连词的商品按照某个字段折叠相同字段,并按指定排序字段选择第一个 match_phras…

Web漏洞扫描工具(AWVS、Goby)

一、背景 想针对自己项目或者小公司的Web安全做相关扫描,自己做漏洞进行自查工作,能够减少自身系统的安全风险,提高系统的安全性。但是没有找到一些开源性质的、扫描质量比较高的相关工具,使用安全公司的专业产品价格又承受不起。…

loj2143组合题解

组合 求 ∑ i 0 ∞ C n k i k r \sum_{i0}^{\infty} C_{n k}^{i kr} ∑i0∞​Cnkikr​ 模 p p p 的值。 这道题题目非常的善良,直接把式子送给我们了,那我们直接开始推式子: ∑ i 0 ∞ C n k i k r ∑ i 0 ∞ ∑ j 0 w C w j C n…

Dav_笔记11:SQL Tuning Overview-sql调优 之 4

开发高效的SQL语句 本节介绍了提高SQL语句效率的方法: ■验证优化程序统计信息 ■审查执行计划 ■重构SQL语句 ■重组索引 ■修改或禁用触发器和约束 ■重组数据 ■随着时间的推移维护执行计划 ■尽可能少地访问数据 验证优化程序统计信息 查询优化器在确定最佳执行…

每日一练,java06

这里写目录标题 题目1.局部变量能否和成员变量重名?2.下面哪个不属于HttpServletResponse接口完成的功能?3.以下代码结果是什么?4.实现或继承了Collection接口的是()知识点局部变量与成员变量重名equals与HttpServletR…

5. 开发环境搭建

1. 概述 基于ubuntu20.04搭建开发环境 2. 开发环境安装 恒玄SDK编译,依赖gcc-arm的编译工具,编译工具由恒玄提供; 2.1 配置编译工具链的环境变量 修改~/.profile文件 source ~/.profile 2.2 安装依赖包 sudo apt install ccache sudo a…

Spring框架笔记详解

主要讲解了Spring框架的基本内容,可以当作笔记需要的时候查看!!! 文章目录 前言Spring1、Spring简介1.1、Spring概述1.2、Spring家族1.3、Spring Framework1.3.1、Spring Framework特性1.3.2、Spring Framework五大功能模块 2、IO…

一刷代码随想录(回溯4)

递增子序列 题意: 给定一个整型数组, 你的任务是找到所有该数组的递增子序列,递增子序列的长度至少是2。 示例: 输入: [4, 6, 7, 7]输出: [[4, 6], [4, 7], [4, 6, 7], [4, 6, 7, 7], [6, 7], [6, 7, 7], [7,7], [4,7,7]] 说明: 给定数组的长度不会…

【最新】cuda和cudnn和显卡驱动的对应关系

NV官方文档Support Matrix — NVIDIA cuDNN v9.2.1 documentation下列的非常清楚,如图:

【SpringBoot】 4 Thymeleaf

官网 https://www.thymeleaf.org/ 介绍 Thymeleaf 是一个适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 模板引擎:为了使用户界面和业务数据分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎会生成一个标准的 html 文档…

目标检测损失计算部分(YOLO)

ComputeLoss 标准化坐标的增益张量 标准化坐标的增益张量(gain tensor)用于将归一化的目标转换为特定特征层的网格尺度,以便进行匹配和计算。 在目标检测模型中,输入图像被划分为多个网格,每个网格负责预测多个锚框…

【Git】Git小项目模型梳理

事情的起因是笔者正在做的项目,是一个小团队,团队成员不到5人,且项目处于第一个生产版本的创建过程中,为没有合适的Git模型而犹豫了很久,最终确定的模型和最初的也有不同。特此记录,主要是为了个人总结&…

捉虫笔记(1)之 WinDbg符号配置

WinDbg符号配置 1、WinDbg简单介绍 WinDbg 是微软的一款强大的调试工具,用于 Windows 平台的内核和用户模式调试。它提供了一系列强大的功能,包括内存和寄存器的查看、断点设置、堆栈跟踪、性能分析等。 WinDbg 的历史可以追溯到微软早期的调试工具&a…

[Unity] ShaderGraph实现不同贴图素材的同一材质球复用

无意间发现的ShaderGraph小技巧, 可以实现同一个ShaderGraph,同一个Material材质球, 但使用不同的Texture贴图,而Sprite显示不会相互覆盖。 具体实现方法如下: 声明Texture2D时,把名字命名成&#xff1a…