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

【css】css中使用变量var

news 2026/4/5 7:04:58

CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

下面的例子与上面的例子相同，但是在这里我们使用 var() 函数。

首先，声明两个全局变量（–blue 和 --white）。使用 var() 函数稍后在样式表中插入变量的值：
代码：

<style>
:root {--blue: #6495ed;--white: #faf0e6; 
}body {background-color: var(--blue);
}.container {color: var(--blue);background-color: var(--white);padding: 15px;
}div {background-color: var(--white);color: var(--blue);border: 1px solid var(--blue);padding: 5px;
}
</style>
</head>
<body><h1>var() 函数</h1><div class="container"><div>div1</div>
</div></body>

渲染效果：
在这里插入图片描述

相关文章：

【css】css中使用变量var

CSS 变量可以有全局或局部作用域。 全局变量可以在整个文档中进行访问/使用&#xff0c;而局部变量只能在声明它的选择器内部使用。 如需创建具有全局作用域的变量&#xff0c;请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。 如需创建具有局部作用域的变量&am…...

编程日记 2023/8/15 16:12:25

判断自己网络所在的NAT类型

文章目录 各NAT类型介绍软件准备流程 各NAT类型介绍 NAT0: OpenInternet&#xff0c;没有经过NAT地址转换&#xff0c;公网IP NAT1: Full Cone NAT&#xff0c;动态家宽可以达到最优的状态&#xff0c;外网设备可以主动发信息给NAT1网络内的设备。 NAT2: Address-Restricted C…...

编程日记 2023/8/15 16:11:24

ClickHouse（十九）：Clickhouse SQL DDL操作-1

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…...

编程日记 2023/8/15 16:10:23

小程序保留2位小数据，不四舍五入

方法1&#xff1a; parseInt toFixed /* * 保留2位小数&#xff0c;不四舍五入 * 5.992550 >5.99 , 2 > 2.00 * */ const toFixed2Decimal (value) > {return (parseInt(value*100)/100).toFixed(2) } console.log(587.67*100) console.log(toFixed2Decimal(587.67…...

编程日记 2023/8/15 16:09:22

【linux-nginx】nginx限流以及控制访问方法

一、限流 可以使用一些模块和指令来实现限流。以下是一些常用的方法&#xff1a; 使用 ngx_http_limit_req_module 模块&#xff1a;该模块可以限制每个客户端的请求速率。你可以在 Nginx 的配置文件中启用该模块&#xff0c;并使用 limit_req_zone 指令来定义限流规则。例如…...

编程日记 2023/8/15 16:08:21

菜单和内容滚动的联动原理及代码

之前写代码有个需求&#xff1a;左侧是一个菜单&#xff0c;右边是内容&#xff0c;点击左侧菜单右边内容滚动到对应位置&#xff0c;右边内容滚动到某位置时&#xff0c;左侧菜单也会选中对应的菜单项。UI如下&#xff1a;这是大多网站的移动端都会有的需求。 解决方案一&…...

编程日记 2023/8/15 16:07:20

Python爬虫：单线程、多线程、多进程

前言 在使用爬虫爬取数据的时候&#xff0c;当需要爬取的数据量比较大&#xff0c;且急需很快获取到数据的时候&#xff0c;可以考虑将单线程的爬虫写成多线程的爬虫。下面来学习一些它的基础知识和代码编写方法。 一、进程和线程 进程可以理解为是正在运行的程序的实例。进…...

编程日记 2023/8/15 16:06:18

超强的Everything，吊打系统自带文件搜索功能！

目录 一、软件简介 二、软件下载 三、软件说明 一、软件简介 Everything是一款由David OReilly开发的电脑搜索软件&#xff0c;它可以帮助用户快速找到电脑上的文件和文件夹。与其他搜索工具不同的是&#xff0c;Everything使用了一种非常快速和高效的搜索算法&#xff0c…...

编程日记 2023/8/15 16:05:17

flink配置参数

flink-conf.yaml 基础配置 # jobManager 的IP地址jobmanager.rpc.address: localhost# JobManager 的端口号jobmanager.rpc.port: 6123# JobManager JVM heap 内存大小jobmanager.heap.size: 1024m# TaskManager JVM heap 内存大小taskmanager.heap.size: 1024m# 每个 TaskMan…...

编程日记 2023/8/15 16:04:16

学习Vue:安装Vue.js和设置开发环境

当您决定进入现代前端开发的世界&#xff0c;Vue.js 无疑是一个令人激动的选择。它以其简洁、灵活和高效的特点在开发者社区中备受赞誉。本文将为您详细介绍如何安装 Vue.js 并设置开发环境&#xff0c;让您能够迅速开始编写 Vue 应用程序。 步骤1&#xff1a;安装 Node.js 和 …...

编程日记 2023/8/15 16:03:14

代理技术在网络安全、爬虫和数据隐私中的多重应用

1. Socks5代理&#xff1a;灵活的数据中转 Socks5代理协议在网络通信中起着关键作用。与其他代理技术不同&#xff0c;Socks5代理不仅支持TCP连接&#xff0c;还能够处理UDP流量&#xff0c;使其在需要实时数据传输的场景中表现尤为出色。通过将请求和响应中转到代理服务器&am…...

编程日记 2023/8/15 16:02:12

Python 3 使用Hadoop 3之MapReduce总结

MapReduce 运行原理 MapReduce简介 MapReduce是一种分布式计算模型&#xff0c;由Google提出&#xff0c;主要用于搜索领域&#xff0c;解决海量数据的计算问题。 MapReduce分成两个部分&#xff1a;Map&#xff08;映射&#xff09;和Reduce&#xff08;归纳&#xff09;。…...

编程日记 2023/8/15 16:01:10

KU Leuven TU Berlin 推出“RobBERT”，一款荷兰索塔 BERT

荷兰语是大约24万人的第一语言&#xff0c;也是近5万人的第二语言&#xff0c;是继英语和德语之后第三大日耳曼语言。来自比利时鲁汶大学和柏林工业大学的一组研究人员最近推出了基于荷兰RoBERTa的语言模型RobBERT。 谷歌的BERT&#xff08;来自Transformers的B idirectional …...

编程日记 2023/8/15 16:00:06

Postern中配置和使用Socks5代理指南

在Postern中配置和使用Socks5代理&#xff0c;可以为你的爬虫项目提供更灵活、更可靠的网络连接。本文将向你分享如何在Postern中配置和使用Socks5代理的方法&#xff0c;解决可能遇到的问题 配置和使用Socks5代理的步骤&#xff1a; 1.了解Socks代理&#xff1a;了解Socks5代…...

编程日记 2023/8/15 15:59:05

android 窗口级模糊实现方式

在Android上实现窗口级模糊效果有多种方法&#xff0c;下面列出了其中两种常用的实现方式&#xff1a; RenderScript模糊效果&#xff1a; 使用ScriptIntrinsicBlur类在RenderScript中实现模糊效果。创建一个RenderScript实例并将要模糊的图像传递给它。创建一个ScriptIntrinsi…...

编程日记 2023/8/15 15:58:01

面试热题（数组中的第K个最大元素）

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

编程日记 2023/8/15 15:57:00

HTTP2协议介绍

前言 HTTP是现代互联网通信的基础协议之一&#xff0c;早在1991年&#xff0c;HTTP/0.9版本就诞生了&#xff0c;之后又陆续发布了HTTP/1.0和HTTP/1.1&#xff0c;为互联网应用提供了更高效和可靠的通信方式。 随着时间的推移&#xff0c;互联网的规模和复杂性不断扩大&#x…...

编程日记 2023/8/15 15:55:58

矩阵的转置

题目&#xff1a; 给你一个二维整数数组 matrix&#xff0c; 返回 matrix 的 转置矩阵 。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[[1,4,7],[2,5,8],[3,6,9]]class Solution(object):def transpose(self, matrix):"&q…...

编程日记 2023/8/15 15:54:55

web集群学习：nginx+keepalived实现负载均衡高可用性

目录 项目架构 一&#xff0c;环境介绍 二&#xff0c;项目部署 在Web服务器上配置Web测试页面 nginx负载均衡配置 配置Nginx_Master 通过vrrp_script实现对集群资源的监控&#xff08;1>通过killall命令探测服务运行状态&#xff09; 通过vrrp_script实现对集群资源…...

编程日记 2023/8/15 15:53:54

MFC第二十九天 CView类的分支（以及其派生类的功能）、MFC六大关键技术

文章目录 CView类的分支CEditViewCHtmlViewMainFrm.h CMainFrame 类的接口CMainView .h CListCtrl与CListView的创建原理 CTreeViewCTreeCtrl类简介CTreeCtrl类的原理以及常用功能 MFC六大关键技术视图和带分割栏的框架开发与消息路由CLeftView.cppCRightView.hCRightView.cppC…...

编程日记 2023/8/15 15:52:53

揭秘三角形分割魔术：为什么重新拼接后少了一块？数学视觉陷阱解析

揭秘三角形分割魔术&#xff1a;为什么重新拼接后少了一块&#xff1f;数学视觉陷阱解析 你是否曾在数学魔术表演中见过这样的场景&#xff1a;一个完整的三角形被分割成几块&#xff0c;重新拼接后竟然神秘地少了一小块面积&#xff1f;这种看似违背几何常识的现象&#xff0c…...

编程新知 2026/4/5 6:46:28

SecGPT-14B镜像快速体验：OpenClaw云端沙盒安全测试方案

SecGPT-14B镜像快速体验&#xff1a;OpenClaw云端沙盒安全测试方案 1. 为什么需要云端沙盒测试安全模型 作为一名长期关注AI安全领域的技术从业者&#xff0c;我一直在寻找能够快速验证安全大模型实际效果的方法。传统方式需要在本地搭建完整环境&#xff0c;不仅耗时耗力&am…...

编程新知 2026/4/5 6:30:08

告别SSH断开烦恼：用nohup让你的Python脚本永不掉线（附常见问题排查）

告别SSH断开烦恼&#xff1a;用nohup让你的Python脚本永不掉线&#xff08;附常见问题排查&#xff09; 远程开发时最崩溃的瞬间是什么&#xff1f;不是代码报错&#xff0c;不是逻辑漏洞&#xff0c;而是当你训练了8小时的模型即将完成时&#xff0c;SSH连接突然断开——所有进…...

编程新知 2026/4/5 5:16:55

Linux ALSA声卡驱动开发实战：手把手教你配置Cpu_dai参数（附MTK示例代码解析）

Linux ALSA声卡驱动开发实战&#xff1a;手把手教你配置Cpu_dai参数&#xff08;附MTK示例代码解析&#xff09; 在嵌入式Linux音频系统开发中&#xff0c;ALSA&#xff08;Advanced Linux Sound Architecture&#xff09;框架扮演着核心角色。作为连接硬件与应用的桥梁&#x…...

编程新知 2026/4/5 4:42:18

【数据结构】哈夫曼树的原理、实现与考研真题解析

一、什么是哈夫曼树哈夫曼树&#xff08;Huffman Tree&#xff09; 也叫最优二叉树&#xff0c;是一种带权路径长度&#xff08;WPL&#xff09;最小的二叉树。节点带有权值&#xff08;比如字符出现的频率&#xff09;树的带权路径长度 WPL 所有叶子节点的权值 该节点到根的…...

编程新知 2026/4/5 3:35:37

别再只跑官方Demo了！用UA-DETRAC数据集手把手教你训练一个能分清‘轿车、巴士、货车’的YOLOv5s车辆检测模型

从UA-DETRAC到精准车辆分类&#xff1a;YOLOv5s实战进阶指南 当交通监控摄像头捕捉到一辆快速驶过的车辆时&#xff0c;系统需要在一瞬间判断这是需要重点追踪的嫌疑车辆&#xff0c;还是普通通勤轿车。这种毫秒级的决策背后&#xff0c;是目标检测模型对车辆类型精准识别的能力…...

编程新知 2026/4/5 2:50:55

C语言变量与数据类型在嵌入式开发中的核心要点

1. C语言变量与数据类型基础解析作为一名在嵌入式领域摸爬滚打多年的工程师&#xff0c;我深知变量和数据类型是C语言编程的基石。每次带新人时&#xff0c;发现80%的基础错误都源于对这两个概念理解不透彻。C语言作为静态类型语言&#xff0c;要求每个变量都必须明确指定类型&…...

编程新知 2026/4/5 2:14:15

2026 分水岭：马斯克为何给 “旧世界” 一记当头棒喝

一、开篇&#xff1a;世界一分为二的裂响 2026 年 1 月&#xff0c;注定不会因某款芯片架构、某款精密机器人传感器被载入史册&#xff0c;而会被铭记为天堑骤成的一年。 2026 年国际消费类电子产品展览会&#xff08;CES&#xff09;上&#xff0c;现场气氛一派欢庆&#xff0…...

编程新知 2026/4/5 1:25:22

HCSR04超声波测距库底层实现与嵌入式工程实践

1. HCSR04超声波测距库深度解析&#xff1a;面向嵌入式工程师的底层实现与工程实践1.1 库定位与工程价值HCSR04超声波传感器是嵌入式系统中成本最低、部署最便捷的距离感知方案之一&#xff0c;广泛应用于智能小车避障、液位监测、工业物位检测及IoT环境感知等场景。其核心优势…...

编程新知 2026/4/5 0:36:20

毕设日志26.4.4（2）:ds3231画板细节，中断引脚接法，去耦电容

Q&#xff1a;INT/SQW 上拉电阻 4.7kΩ&#xff08;如果需要使用该引脚&#xff09;&#xff0c;漏极开路输出需要上拉。意思是说&#xff0c;其内部是漏极开路输出所以需要上拉电阻&#xff1f;以及&#xff0c;我要把这个用作中断引脚&#xff0c;在引脚和GPIO口之间还要怎…...

编程新知 2026/4/5 0:07:50