使用 CSS 自定义属性

我们常见的网站日夜间模式的变化,其实用到了 css 自定义属性。

 CSS 自定义属性(也称为 CSS 变量)是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值,使得样式更易于维护和修改。

:root {--main-color: #06D6A;
}

在这个例子中,我们定义了一个名为 --main-color 的 CSS 自定义属性,并将其值设置为 #06D6A

然后,在任何需要使用这个颜色的地方,你可以使用 var() 函数来使用这个自定义属性,像这样:

body {background-color: var(--main-color);
}

在这个例子中,背景颜色会使用在 :root 中定义的 --main-color 属性的值,即 #06D6A

CSS 自定义属性可以帮助你更有效地组织和复用样式,使你的 CSS 更加简洁和易于维护。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container1,.container2 {display: flex;margin: 0 auto;width: 550px;height: 300px;line-height: 300px;text-align: center;border: 1px solid #cccccc;}.container1 div,.container2 div {flex: 1;border: 1px solid #cccccc;}/* 定义 css变量 选择器定义变量的范围 */html {--main-color: skyblue;}.container1 div {/* var() 输入css变量 */background-color: var(--main-color);}.container2 div {/* var() 输入css变量 */color: var(--main-color);}</style>
</head><body><div class="container1"><div>box1</div><div>box2</div><div>box3</div></div><div class="container2"><div>box4</div><div>box5</div><div>box6</div></div>
</body></html>

 最后结果:

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

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

相关文章

【LeetCode每日一题】——566.重塑矩阵

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 矩阵 二【题目难度】 简单 三【题目编号】 566.重塑矩阵 四【题目描述】 在 MATLAB 中&…

小红书运营推广方法分享

大家好&#xff0c;我是网媒智星&#xff0c;今天跟大家讨论一下小红书的运营推广方法&#xff0c;总结了七点经验分享给大家。 首先&#xff0c;让我们了解一下什么是热门文案。热门文案可从以下三个方面来定义&#xff1a; 1. 阅读量&#xff1a;如果一篇小红书的阅读量达到上…

【RabbitMQ】golang客户端教程1——HelloWorld

一、介绍 本教程假设RabbitMQ已安装并运行在本机上的标准端口&#xff08;5672&#xff09;。如果你使用不同的主机、端口或凭据&#xff0c;则需要调整连接设置。如果你未安装RabbitMQ&#xff0c;可以浏览我上一篇文章Linux系统服务器安装RabbitMQ RabbitMQ是一个消息代理&…

《MySQL 实战 45 讲》课程学习笔记(四)

深入浅出索引 索引的出现其实就是为了提高数据查询的效率&#xff0c;就像书的目录一样。 索引的常见模型 哈希表 哈希表是一种以键 - 值&#xff08;key-value&#xff09;存储数据的结构&#xff0c;我们只要输入待查找的值即 key&#xff0c;就可以找到其对应的值即 Val…

docker中涉及的挂载点总结

文章目录 1.场景描述2. 容器信息在主机上位置3. 通过docker run 命令4、通过Dockerfile创建挂载点5、容器共享卷&#xff08;挂载点&#xff09;6、最佳实践&#xff1a;数据容器 1.场景描述 在介绍VOLUME指令之前&#xff0c;我们来看下如下场景需求&#xff1a; 1&#xff…

xshell连接liunx服务器身份验证不能选择password

ssh用户身份验证不能选择password 只能用public key的解决办法 问题现象 使用密码通过Workbench或SSH方式(例如PuTTY、Xshell、SecureCRT等)远程登录ECS实例时&#xff0c;遇到服务器禁用了密码登录方式错误. 可能原因 该问题是由于SSH服务对应配置文件/etc/ssh/sshd_config中…

路由器工作原理

路由器原理 路由概述 路由&#xff1a;跨越从源主机到目标主机的一个互联网络来转发数据包的过程。&#xff08;为数据包选择路径的过程&#xff09; 作用&#xff1a;路由器是连接不同网段的。 转发依据&#xff1a; 路由表&#xff1a;路径选择全看路由表&#xff0c;根…

蓝桥杯2018省赛全球变暖dfs

全球变暖 问题描述格式输入格式输出样例输入样例输出评测用例规模与约定解析参考程序 问题描述 格式输入 格式输出 输出一个整数 样例输入 样例输出 1 评测用例规模与约定 最大运行时间&#xff1a;1s最大运行内存: 256M 解析 采用dfs的方式进行搜索&#xff0c;首先输入地…

Xshell使用是出现全黑或全白问题

Xshell使用是出现全黑或全白问题&#xff0c;这是我实际遇到的问题如图。 解决方式&#xff1a; 设置字体 解决成功&#xff1a;

整理mongodb文档(一):增

个人公众号 整理mongodb文档(一):增 看前提示 本文主要用到的工具是mongodb的db管理工具-----mongo compass。 本文主要讲的是在上述工具中如何对db的增加的操作&#xff0c;对应转化为mongose里面的语句我想应该不需要我帮忙了吧。。。 选用mongose的理由也很简单&#xf…

一个监控系统的典型架构

监控系统的典型架构图&#xff0c;从左往右看&#xff0c;采集器是负责采集监控数据的&#xff0c;采集到数据之后传输给服务端&#xff0c;通常是直接写入时序库。然后就是对时序库的数据进行分析和可视化&#xff0c;分析部分最典型的就是告警规则判断&#xff0c;即图上的告…

Java阶段五Day14

Java阶段五Day14 文章目录 Java阶段五Day14分布式事务整合demo案例中架构&#xff0c;代码关系发送半消息本地事务完成检查补偿购物车消费 鲁班周边环境调整前端启动介绍启动前端 直接启动的项目gateway&#xff08;网关&#xff09;login&#xff08;登录注册&#xff09;atta…

网络请求fetch

fetch()是 XMLHttpRequest 的升级版&#xff0c;用于在 JavaScript 脚本里面发出 HTTP 请求。浏览器原生提供这个对象 fetch()的功能与 XMLHttpRequest 基本相同&#xff0c;但有三个主要的差异。 与 Ajax 类似&#xff0c;Fetch 也是前后端通信的一种方式。Fetch 要比 Ajax …

React Flow

// 创建项目 npm create vitelatest my-react-flow-app -- --template react // 安装插件 npm install reactflow npm install antd // 运行项目 npm run dev 1、App.jsx import { useCallback, useState } from react; import ReactFlow, {addEdge,ReactFlowProvider,MiniMap…

享元模式——实现对象的复用

1、简介 1.1、概述 当一个软件系统在运行时产生的对象数量太多&#xff0c;将导致运行代价过高&#xff0c;带来系统性能下降等问题。例如&#xff0c;在一个文本字符串中存在很多重复的字符&#xff0c;如果每个字符都用一个单独的对象来表示&#xff0c;将会占用较多的内存…

39.手机导航

手机导航 html部分 <div class"phone"><div class"content"><img class"active" src"./static/20180529205331_yhGyf.jpeg" alt"" srcset""><img src"./static/20190214214253_hsjqw…

【CNN-BiLSTM-attention】基于高斯混合模型聚类的风电场短期功率预测方法(Pythonmatlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

测试|自动化测试(了解)

测试|自动化测试&#xff08;了解&#xff09; 1.什么是自动化测试☆☆☆☆ 自动化测试相当于把人工测试手段进行转换&#xff0c;让代码执行。 2.自动化测试的分类☆☆☆☆ 注&#xff1a;这里只是常见的自动化测试&#xff0c;并不全部罗列。 1.单元自动化测试 其中Java…

嵌入式硬件系统的基本组成

嵌入式硬件系统的基本组成 嵌入式系统的硬件是以包含嵌入式微处理器的SOC为核心&#xff0c;主要由SOC、总线、存储器、输入/输出接口和设备组成。 嵌入式微处理器 每个嵌入式系统至少包含一个嵌入式微处理器 嵌入式微处理器体系结构可采用冯.诺依曼&#xff08;Von Neumann&…

前后端分离实现博客系统

文章目录 博客系统前言1. 前端1.1 登陆页面1.2 博客列表页面1.3 博客详情页面1.4 博客编辑页面 2. 后端2.1 项目部署2.1.1 创建maven项目2.1.2 引入依赖2.1.3 创建目录结构2.1.4 部署程序 2.2 逻辑设计2.2.1 数据库设计2.2.2 实体类设计2.2.3 Dao层设计2.2.3.1 BlogDao 2.2.4 D…