【CSS】css变量_css 变量-程序员宅基地

1、css变量

有的网站都会有自己的主题色，例如饿了么：
在这里插入图片描述
所以很对元素都会用到这些颜色，例如某些字体颜色，弹框提示颜色等等。

如果每次用到的时候，都使用十六进制的颜色表示，那么效率十分低，并且如果万一有一天需要更换主题颜色，那么一个一个更改，是十分繁琐的。

为了解决以上问题，css引入了变量。

CSS变量可以访问 DOM，可以创建具有局部或全局范围的变量，使用 JavaScript 和媒体查询来修改变量。var() 函数用于插入 CSS 变量的值。全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。

例如：

:root{
     
  --bg-color: #cccccc;
}
.father{
     
  background-color: var(--bg-color);
}

:root声明的是全局变量，如果是一个自定义属性用–作为前缀，使用时比如: var(–bg-color)就和#cccccc相等。

好处:

1.可维护性
如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。
2.提高CSS可读性
可以通过变量名判断属性内容

注意事项：使用CSS变量要注意大小写敏感，不要把长度的变量用于颜色属性等。

2、实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
      
            --bg-color: #1e90ff;
            --font-color: #cccccc;
        }

        #app {
      
            width: 100px;
            height: 100px;
            background-color: var(--bg-color);
            color: var(--font-color);
        }
    </style>
</head>

<body>
    <div id="app">
        <p>Hello World!</p>
    </div>
    <br />
    <button onclick="changeColor()">切换背景色</button>
    <script>
        function changeColor() {
      
            console.log(document.documentElement.style);
            document.documentElement.style.setProperty('--bg-color', 'black');
            document.documentElement.style.setProperty('--font-color', 'white');
        }
    </script>
</body>

</html>

在这里插入图片描述
点击变色按钮后：

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/124924797

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

如何为应用选择最佳的FPGA（上）_fpga封装-程序员宅基地

文章浏览阅读1k次。另一方面，更高端的“重磅”FPGA价格非常昂贵。但这些FPGA的目标应用领域是那些用户愿意为昂贵的FPGA付费的应用，因为他们拥有尖端的技术和能力。例如，这些FPGA应用于顶级军用雷达、下一代无线技术、先进的数字信号处理、数据中心加速等。对于这些细分市场，成本并不是一个重大的交易破坏者。相反，他们对保持技术实力和能力的前沿感兴趣，领先于竞争对手或对手。..._fpga封装

solidity 字符串拼凑_solidity中的字符串-程序员宅基地

文章浏览阅读964次。自从我开始撰写博客以来，感觉已经很久了，直到现在它一直致力于撰写有关统计数据的文章。我不是特别喜欢这个monody，它很快就会变得枯燥乏味。此外，这个博客从一开始就是为了探究两个不同的领域，经过这么长时间的专注于其中一个，我一直感觉到写另一个的冲动。所以，今天我给你一篇关于使用Solidity语言编写以太坊区块链编程的帖子。我不会遵循这样做的任何计划：我的目标只是写下我学习这门语言的障碍和我在日常..._solidity string length

SSM健身俱乐部网站毕业设计附源码25623-程序员宅基地

文章浏览阅读122次。健身俱乐部网站解决了传统管理方式所带来的人力、物力和时间上的虚耗和交流深度的限定，这让交流的过程更快捷、准确、便利，同时完成健身俱乐部网站的基本功能：用户注册管理、健身教练管理、健身课程管理、商品信息、失物招领管理。

堆外内存与堆内内存详解_堆外内存和堆内存有什么区别-程序员宅基地

文章浏览阅读3.2w次，点赞17次，收藏84次。堆外内存一直是Java业务开发人员难以企及的隐藏领域，究竟他是干什么的，以及如何更好的使用呢？那就请跟着我进入这个世界吧。一、什么是堆外内存1、堆内内存（on-heap memory）回顾堆外内存和堆内内存是相对的二个概念，其中堆内内存是我们平常工作中接触比较多的，我们在jvm参数中只要使用-Xms，-Xmx等参数就可以设置堆的大小和最大值，理解jvm的堆还需要知道下面这个公式：堆内内存 = 新生..._堆外内存和堆内存有什么区别

Layuiadmin+Echarts全国地图数据分布_layui用echarts显示中国地图-程序员宅基地

文章浏览阅读3k次。Layuiadmin+Echarts全国地图数据分布*样式要引用layui的css jsHtml代码 <div class="layui-col-sm8"> <div class="layui-row layui-col-space15"> <div class="layui-col-sm12"> <div cla_layui用echarts显示中国地图

vim命令与参数的详细解析_cmd里vim是什么命令-程序员宅基地

文章浏览阅读320次。w 将所有输入的命令追加到文件-W 将所有输入的命令写入到文件 -S 加载第一个文件后执行文件 --cmd 加载任何 vimrc 文件前执行 _cmd里vim是什么命令

随便推点

error: no default toolchain configured_no 'defaultdestination' configured-程序员宅基地

文章浏览阅读7.6k次。当我们在windows上通过msi方式安装过rust之后，运行rustc或者cargo命令行命令时，出现如题所示的错误。stackoverflow上有一个issue,说过这个问题。最后的解决办法是通过rustup命令再次安装一次rust，并且指定stable为默认的rust工具链。我认为不用重新安装一次，如果系统中已经安装过rust，那么可以通过rustup相关命令link指定安装目录即可。D:\..._no 'defaultdestination' configured

Android OpenGL ES 开发指南：帧缓冲-程序员宅基地

文章浏览阅读447次。当我们进行图形渲染时，渲染结果会被存储在帧缓冲中，然后可以被用于后续的处理，例如屏幕显示、纹理贴图等。帧缓冲可以看作是一个图像缓冲区，可以暂时保存渲染结果。通过使用帧缓冲，我们可以实现各种高级图形效果和后期处理操作，为应用程序带来更丰富的视觉体验。最后，我们可以通过恢复默认帧缓冲，使用帧缓冲中的渲染结果进行后续处理，如绘制到屏幕上或生成纹理等。接着，我们将纹理附件绑定到帧缓冲的颜色附件上，指定附件的格式和大小。下面是一个简单的示例代码，演示了如何在Android上使用OpenGL ES创建和使用帧缓冲。

weixin087社区养老服务+ssm-程序员宅基地

文章浏览阅读861次，点赞15次，收藏18次。目录摘要Abstract目录第1章绪论1.1研究背景1.2设计原则1.3研究内容第2章关键技术简介2.1微信Web开发者工具2.2微信小程序API接口2.3 MYSQL数据库2.4 Java简介第3章系统分析3.1可行性分析3.1.1技术可行性3.1.2经济可行性3.1.3操作可行性3.1.4法律可行性3.2系统性能分析3.3系统功能分析3.4系统流程分析3.4.1登录流程3.4.2添加信息流程3.4.3注册流程3.4.4。

Analytic Normals 3D代码解析_vec2 ibox( in vec3 ro, in vec3 rd, in vec3 rad ) v-程序员宅基地

文章浏览阅读231次。Analytic Normals 3D代码解析作者：iq，网址：https://www.shadertoy.com/view/XttSz2标签：3d, noise, normals, analytical, numerical总共一个部分：Image照相机设置这个比较常见，就是简单的照相机旋转和矩阵获取// camera animfloat an = 0.1*iTime;vec3 ro = 3.0*vec3( cos(an), 0.8, sin(an) );vec3 ta = vec3(_vec2 ibox( in vec3 ro, in vec3 rd, in vec3 rad ) vec2 ibox( in vec3 ro, in v

得物 H5容器野指针疑难问题排查 & 解决_野指针出现时如何定位-程序员宅基地

文章浏览阅读1.1k次。得物 iOS 4.9.x 版本上线后，一些带有横向滚动内容的h5页面，有一个webkit 相关crash增加较快。通过Crash堆栈判断是UIScrollview执行滚动动画过程中内存野指针导致的崩溃。_野指针出现时如何定位

基础算法——基本思想_算法思想基础的基础题及答案-程序员宅基地

文章浏览阅读295次，点赞2次，收藏2次。竞赛基础算法、思想_算法思想基础的基础题及答案