/*全局变量保存的地方*/
:root {
--main-bg-color: red; /* 变量名必须以--开头 */
}

var(custom-property-name, value)
描述
custom-property-name 必需。自定义属性的名称,必需以 -- 开头。
value 可选。备用值,在属性不存在的时候使用。

举例使用:
#div1 {
background-color: var(--main-bg-color);
} #div2 {
background-color: var(--main-bg-color);
}
 
 

CSS函数var的更多相关文章

  1. css - 原生变量及使用函数 var()

    零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...

  2. JS里的CSS函数

    <title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...

  3. agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS函数大全

    CSS函数(方法)参考 CSS函数用作各种CSS属性的值. 函数 描述 attr() 返回所选元素的属性值 calc() 允许您执行计算以确定CSS属性值 cubic-bezier() 定义Cubic ...

  5. Vue style与css的var()

    vue绑定style直接给css的var变量传递一个值,然后结合css的var()函数使用这个值. 在data里面定义一个变量然后给定一个值,后期修改这个值之后,所有依赖这个变量的css样式都会被响应 ...

  6. CSS函数

    布局时发现CSS居然能进行计算,cale()函数用于动态计算长度值 html,body的height为100%,黑框浮动width为200px,橙框处标准流,由于浮动最初目的是为了实现文字环绕,所以文 ...

  7. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  8. css函数——calc()和attr()

    css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...

  9. js基础-函数-var和let的区别

    javaScript简介 javaScript历史 1995年,Netscape公司是凭借Navigator浏览器成为当时第一代互联网公司. 网景公司希望在HTML界面上加一点动态效果,于是叫Bren ...

  10. css中var函数

    引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...

随机推荐

  1. MongoDB的启动与停止

    1:启动和停止Mongodb    1)从命令行启动      执行mongod,启动MongoDB服务器,mongod有很多可配置的启动选项,可以使用mongod --help查看所有选项   -- ...

  2. 5分钟上手使用vuex,vuex状态管理,vuex遇到的坑

    很多刚学习vue的人对于全局变量管理工具vuex都觉得很神秘,今天就用很通俗的大白话协助大家理解一下vuex,作者的vue项目使用vue脚手架搭建的,用脚手架搭建的项目会在src文件夹下有一个stor ...

  3. VUE中如何使用MOCK

    安装mockjs npm install mockjs 可以使用数据模板生成模拟数据. Mock.mock( rurl?, rtype?, template ) ) // 或者 Mock.mock( ...

  4. JS篇(005)-== 和 === 的不同

    答案:==是抽象相等运算符,而===是严格相等运算符.==运算符是在进行必要的类型转换后,再比较.===运算符不会进行类型转换,所以如果两个值不是相同的类型,会直接返回false.使用==时,可能发生 ...

  5. 在Windows系统上安装和配置Jenkins自动发布

    一.安装jenkins的流程转载于: https://www.jianshu.com/p/de9c4f5ae7fa 二.在window中执行批处理文件bat或者powershell可以成功,但是Jen ...

  6. [2009年NOIP普及组] 分数线划定

    世博会志愿者的选拔工作正在A市如火如荼的进行.为了选拔最合适的人才,A市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根据计划录取人数的150%划定,即如果计划录取m ...

  7. Python 默认环境

    查看pip默认安装目录 python -m site 查看已安装 pip list installed 查看安装位置 pip show PyMySQL

  8. luogu 4142

    费用流好题 本题的建图很有意思 正常我们看到棋盘问题应该先对整个棋盘黑白染色构成一个二分图,然后再考虑建图的问题 但是本题题目中已经明确区分了不同的斜线,问题在于怎么保证一个"L" ...

  9. 简易orm 主要是为了旧平台查询方便

    直接新建个文件即可 ExLogic.cs public class ExLogic { public static int Execute(string sqlCommand, string dbCo ...

  10. react 获取文件流导出功能

    记录一下: 根据后台接口返回的文件流,前端实现导出下载,使用(react+ts) 1.请求方法 (这里写法绕开拦截器) // 导出日志 export async function exportLog( ...