css中的var函数

css中的var函数

假设我们在css文件存在多个相同颜色值,当css文件越来越大的时候,想要改颜色就要手动在每个旧颜色上修改,这样维护工作非常难进行。

但是我们可以使用变量来存储值,这样可以在整个css样式表中重复使用,同时也更容易维护。

变量(也称为自定义属性)由开发人员定义,以便于使用,并避免重复值和在元素上重复定义。

如何声明变量

变量接受唯一的名称.

变量声明必须以以下内容开头:

  • 两个破折号(--)
  • 自定义属性名称
  • 自定义属性值

例如

--color-name:#1b1b22;

在上面的代码中,--color-name是自定义属性名称,#1b1b22是值。

var() 函数

var()函数检索变量名称的值并将该值应用于使用它的任何属性。var() 函数使用括号声明,后跟自定义属性名称。

background-color: var(--color-name);

var() 函数将收集变量名称的值以设置background-color给定元素的样式。

在本例中,var() 正在寻找--color-name的值来绘制元素的背景色。

<h1>通过变量改变颜色</h1>
<style>h1 {text-align: center;/* 定义颜色 */--color-name:red;/* 使用变量 */color: var(--color-name);}
</style>

上面代码中,h1文本颜色值为红色;var()--color-name 变量名中检索值。

在这里插入图片描述

var() 函数参数

var() 函数接受两个参数。第一个参数的值用于想要设置样式的元素,第二个参数代表后备值。

var() 没有后备值:

background-color: var(--body-color);

--body-color是第一个参数的值。不提供后备值。

具有后备值的 var()

background-color: var(--body-color, orange);

--body-color是第一个参数值;orange是后备值。

注意:

  • 当浏览器无法加载第一个参数值或该值无效时使用回退
  • 回退是可选的。
  • 使用逗号分隔第一个参数和第二个参数。
  • 还可以使用 var() 函数作为后备值参数。使用逗号分隔 var() 函数声明。
    background-color: var(--color-name,  var(--color-name2));
    
    background-color有一个 var() 函数作为后备值。

变量范围类型

  1. 局部变量作用域
  2. 全局变量作用域

局部变量作用域

局部范围变量在样式表中的元素选择器中定义。上述所有示例都是局部作用域的,并且变量只能用于元素的节点。

例如

h1 {--style-color1:#1b1b22;
}

从上面的代码来看, –-style-color1的作用域仅限于文档的<h1>元素,这意味着变量仅限于元素<h1>

使用局部作用域变量的优点是它会覆盖全局变量。

这意味着如果有两个名称相似但值不同的自定义属性,浏览器将忽略全局自定义属性名称并使用本地范围的名称。

例如

root{
--main-color:blue;
}p{--main-color:brown;color: var(--main-color);
}

在上面的代码中,-–main-color值为brown,也就是p元素上的局部变量覆盖根选择器中的全局变量。

全局变量作用域

全局范围是不同的,因为我们要在样式表顶部的:root 选择器中声明它。

根选择器中的全局变量是 CSS 中的最高级别。

当变量存在时,我们可以设置所有选定元素的样式,并更改变量值。我们对值所做的任何更改都会影响该元素。

创建一个全局变量。

  1. 输入冒号,或者简单地说:
  2. 写下这四个字母:root
  3. 用大括号符号将其关闭,即 {}
:root{}

练习

为了总结本文,让我们创建 4 个框来练习全局变量作用域。

<section><div class="box1">box 3</div><div class="box2">box 2</div><div class="box3">Box 3</div><div class="box4">Box 4</div>
</section>

定义基础样式

section{display: flex;flex-direction:row;justify-content: space-between;background-color: black;margin: 2px;padding: 10px;
}
div {width: 250px;height: 250px;border-radius: 10px;
}

预览代码时,浏览器应该显示下图:

在这里插入图片描述

设置全局变量

:root{--box-color1:#24242a;--box-color2:#454533;--box-color3:#fff444;--box-color4:#30204a;
}

使用上述自定义属性设置每个框的背景颜色:

.box1{background-color: var(--box-color1);
}
.box2{background-color: var(--box-color2);
}
.box3{background-color: var(--box-color3);
}
.box4{background-color: var(--box-color4);
}

结果:

在这里插入图片描述

变量的重要性:

  • CSS 变量区分大小写,即--new-color与自定义属性--New-color不同。
  • 不要重复某个值,例如,#1b1b22颜色 使用 CSS 变量来编写更节省时间。
  • 变量值很容易理解。例如,--text-color#773fff更清晰。

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

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

相关文章

硬盘文件恢复怎么做?文件恢复,问题已解决!

“请问一下可以帮我恢复硬盘里的文件吗&#xff1f;我之前删除了一些重要的文件和数据&#xff0c;但是最近我突然想起来那些文件是很有用的&#xff0c;有没有什么好的方法可以帮我恢复硬盘中的文件呢&#xff1f;” 硬盘作为电脑的存储设备&#xff0c;电脑用户通常会将各种重…

【Vue-Router】使用 prams 路由传参失效

报错信息&#xff1a; [Vue Router warn]: Discarded invalid param(s) “name”, “price”, “id” when navigating. list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水",&quo…

springBoot 简单的demo

springBoot 学习开始 场景开发流程1、创建项目2、导入依赖3、创建启动springBoot 项目的主入口程序4、创建业务程序5、在MainApplication文件运行程序6、将文件打包成jar包 遇到的问题未解决 希望大哥们帮忙--本地运行jar包报错 场景 浏览器发送hello请求&#xff0c;返回“he…

Jquery 复选框点击生成标签 源代码

html <!DOCTYPE html> <html><head><meta charset"utf-8"><title>服务资源管理</title><link rel"stylesheet" type"text/css" href"../lib/layui/css/layui.css" /><link rel"st…

image has dependent child images

问题&#xff1a;很多none的镜像无法被删除 解决过程&#xff1a; 1、通过 docker image prune -f 提示可删除为 0 2、直接进行删除报错&#xff1a; docker rmi 8f5116cbc201Error response from daemon: conflict: unable to delete 8f5116cbc201 (cannot be forced) - im…

NSI45030AT1G LED驱动器方案为汽车外部及内部照明恒流稳流器(CCR)方案

关于线性恒流调节器&#xff08;CCR&#xff09;&#xff1a;是一种用于控制电流的稳定输出。它通常由一个功率晶体管和一个参考电流源组成。CCR的工作原理是通过不断调节功率晶体管的导通时间来维持输出电流的恒定。当输出电流超过设定值时&#xff0c;CCR会减少功率晶体管的导…

windows下dll文件的创建详细教程

1、前言 dll文件是啥&#xff0c;就不作过多赘述了。现在直接教大家如何创建与使用dll文件。 本文基于windows系统&#xff0c;使用的编译相关工具为visual studio 2019。 2、创建dll 2.1 创建dll工程 首先打开visual studio&#xff0c;然后选择创建新项目&#xff0c;在搜…

pdf怎么压缩?一分钟学会文件压缩方法

PDF文件过大一般主要原因就是内嵌大文件、重复的资源或者图片比较多&#xff0c;随之而来的问题就是占用存储空间、被平台限制发送等等&#xff0c;这时候我们可以通过压缩的方法缩小PDF文件大小&#xff0c;下面就一起来看看具体的操作方法吧。 方法一&#xff1a;嗨格式压缩大…

2023年国赛数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 描述 …

面试热题(数组中的第K个最大元素)

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 输入: [3,2,1,5,6,4] 和 k 2 输出: 5提到数组中最大元素&#xff0c;我们往往想到就是先给数组…

用免费Leangoo敏捷看板工具进行可视化的缺陷跟踪管理

用Leangoo敏捷看板进行可视化的缺陷跟踪管理 缺陷管理通常关注如下几个方面&#xff1a; 1. 缺陷的处理速度 2. 缺陷处理的状态 3. 缺陷的分布 4. 缺陷产生的原因 使用Leangoo敏捷看板我们可以对缺陷进行可视化的管理&#xff0c;方便我们对缺陷的处理进展、负责人、当前…

AIF360入门教学

1、AIF360简介 AI Fairness 360 工具包(AIF360)是一个开源软件工具包&#xff0c;可以帮助检测和缓解整个AI应用程序生命周期中机器学习模型中的偏见。在整个机器学习的过程中&#xff0c;偏见可能存在于初始训练数据、创建分类器的算法或分类器所做的预测中。AI Fairness 360…

clickHouse部署

docker仓库地址 https://hub.docker.com/ 1、docker环境搭建 # 1.先安装yml yum install -y yum-utils device-mapper-persistent-data lvm2 # 2.设置阿里云镜像 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo# 3.查…

Docker 镜像

1. 什么是镜像&#xff1f; 镜像 是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;我们把应用程序和配置依赖打包好形成一个可交付的运行环境(包括代码、运行时需要的库、环境变量和配置文件等)&#xff0c;这个打包好的运行环境就…

R语言ggplot2 | R语言绘制物种组成面积图(三)

&#x1f4cb;文章目录 面积图简介准备数据集加载数据集数据处理数据可视化 利用R语言绘制物种组成图。本文以堆叠面积图的方式与大家分享。 面积图简介 面积图又叫区域图。它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充&…

KubeSphere 部署 Zookeeper 实战教程

前言 知识点 定级&#xff1a;入门级如何利用 AI 助手辅助运维工作单节点 Zookeeper 安装部署集群模式 Zookeeper 安装部署开源应用选型思想 实战服务器配置(架构 1:1 复刻小规模生产环境&#xff0c;配置略有不同) 主机名IPCPU内存系统盘数据盘用途ks-master-0192.168.9.9…

培训报名小程序-用户注册

目录 1 创建数据源2 注册用户3 判断用户是否注册4 完整代码总结 我们的培训报名小程序&#xff0c;用户每次打开时都需要填写个人信息才可以报名&#xff0c;如果用户多次报名课程&#xff0c;每次都需要填写个人信息&#xff0c;比较麻烦。 本篇我们就优化一下功能&#xff0c…

AWK +iptables+shell实战脚本案例

目录 一、在Centos下安装httpd 查看安装是否成功 重启httpd 查看80端口是否开放 在主机上查询 查看防火墙 在浏览器中查询主机IP地址 查看日志是否生成 二、AWK iptablesshell实战脚本案例 1、封堵扫描器 (1) 开始扫描器 特别注意&#xff1a;在Vim中尽量不要使用空格…

YOLOv8目标检测算法

YOLOv8目标检测算法相较于前几代YOLO系列算法具有如下的几点优势&#xff1a; 更友好的安装/运行方式速度更快、准确率更高新的backbone&#xff0c;将YOLOv5中的C3更换为C2FYOLO系列第一次尝试使用anchor-free新的损失函数 YOLOv8简介 YOLOv8 是 Ultralytics 公司继 YOLOv5…

【UniApp开发小程序】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面首页让文字只显示两行路由跳转传递对象将商品分为两列显示使用中划线划掉原价 后端商品controllerservicemappersql 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除关于商品分类页面的实现&#xff0c;请在我…