css——使用全局变量设置主题颜色
CSS 设置 颜色 主题 全局变量 使用
2023-09-27 14:29:10 时间
搬运自:https://www.cnblogs.com/WQLong/p/7792174.html
1. 变量的声明
CSS变量声明是字母前加两个横线(--)
例:
body{ --Colors:#dfdfdf; --fS16px:16px; }
body选择器中声明了Colors和fS16px两个变量。而使用‘--’是因为$被Sass占用了,@被Less占用了,所以是为了区分它们。
变量的声明对大小写敏感。如:colors和Colors表示两个不同的变量。
2. var()函数
var函数用来读取变量
例:
a{ color:var(--Colors); }
(1). var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
例:
color: var(--Colors, #e5e5e5);
(2). 第二个参数不处理内部的逗号或空格,都视作参数的一部分。
例:
var(--fontF, "Roboto", "Helvetica"); var(--Margins, 15px 20px 25px);
(3). var()函数还可以用在变量声明中
例:
div{ --bgcolors:red; --fColor:var(--bgcolors) }
注意:变量只能作为属性值,不能作为属性名
3.变量值的类型
(1). 字符串,可以与其他字符串拼接
--far:'hello'; --foo:var(--far)',world';
(2). 数值,不可以拼接
--far:20;
--foo:var(--far)'px'; //无效
但可以通过calc()函数,将他们拼接起来
--far:20; --foo:calc(var(--far)*1px);
(3). 变量值带单位,则不能写成字符串形式
--far:'20px'; margin-top:var(--far); //无效 --far:20px; margin-top:var(--far); //有效
4.作用域
<style> :root { --color: blue; } //css 伪类,匹配文档的根元素 div { --color: green; } #alert { --color: red; } //局部变量 * { color: var(--color); } </style> <p>蓝色</p> <div>绿色</div> <div id="alert">红色</div>
上面代码中,三个选择器都声明了--color
变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。
这就是说,变量的作用域就是它所在的选择器的有效范围。
所以一些通用的变量值,最好声明在:root{}内
相关文章
- 一文搞懂css常用字体属性与背景属性
- 开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!
- CSS:背景设置~笔记
- CSS中关于多个class样式设置的不同写法
- CSS字体设置
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
- 使用grep 解析出css中的地址
- 【Html + Js + CSS——电流壁纸(源码+特效)】
- 【超级炫酷的3D旋转相册——网页端动态显示,使用css,html等实现(附源代码)】
- 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
- 一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量?
- CSS预处理器之stylus
- web -- CSS样式
- css:为什么我设置宽高百分比不生效
- 前端css解决z-index 上层元素遮挡下层元素的方法
- 简单使用HTML和CSS实现动态的《圣诞树》
- 2017年要学习的三个CSS新特性
- 【HTML、JAVASCRIPT、CSS】2、HTML语言入门2
- 精通CSS+DIV网页样式与布局--设置表单和表格