CSS函数var
/*全局变量保存的地方*/
: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的更多相关文章
- css - 原生变量及使用函数 var()
零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
- JS里的CSS函数
<title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...
- agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS函数大全
CSS函数(方法)参考 CSS函数用作各种CSS属性的值. 函数 描述 attr() 返回所选元素的属性值 calc() 允许您执行计算以确定CSS属性值 cubic-bezier() 定义Cubic ...
- Vue style与css的var()
vue绑定style直接给css的var变量传递一个值,然后结合css的var()函数使用这个值. 在data里面定义一个变量然后给定一个值,后期修改这个值之后,所有依赖这个变量的css样式都会被响应 ...
- CSS函数
布局时发现CSS居然能进行计算,cale()函数用于动态计算长度值 html,body的height为100%,黑框浮动width为200px,橙框处标准流,由于浮动最初目的是为了实现文字环绕,所以文 ...
- 利用CSS函数calc(...)实现Web页面左右布局
前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...
- css函数——calc()和attr()
css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...
- js基础-函数-var和let的区别
javaScript简介 javaScript历史 1995年,Netscape公司是凭借Navigator浏览器成为当时第一代互联网公司. 网景公司希望在HTML界面上加一点动态效果,于是叫Bren ...
- css中var函数
引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...
随机推荐
- deployment.yml参考
apiVersion: apps/v1kind: Deploymentmetadata: labels: com.xx.service: xxxxxxxxxxxxx name: xxxxxxxxxxx ...
- host头攻击
一.问题源起 HTTP1.1规范中在增加了HOST头信息,用于存储服务端与客户端的路由信息. 例如: Request的Header里就有一个标名请求,它是用来记录服务端网站域名的. 如果前端或者后台正 ...
- Docker学习——Kubernetes(八)
在线阅读:GitBook 下载:pdf Kubernetes 是 Google 团队发起并维护的基于 Docker 的开源容器集群管理系统,它不仅支持常见的云平台,而且支持内部数据中心. 建于 Doc ...
- 使用Wireshark完成实验2-TCP
1.打开Google Chorme,进入https://gaia.cs.umass.edu/wireshark-labs/alice.txt 2.将文本保存,进入https://gaia.cs.uma ...
- Opengl数学markdown
# opengl数学 $$\begin{Bmatrix} {A_{x}}\\ {A_{y}}\\ {A_{z}}\\ \end{Bmatrix} * \begin{Bmatrix} {B_{x}}\\ ...
- 【flask】建站经验随笔
[前端] 1.前端table标签中每行使用template中 {%for i in rows%} {% endfor %}来生成之后,如果想对每行进行一个button处理,此时如果使用jquery的$ ...
- openSUSE Tumbleweed 安装原生微信
优麒麟网站上有提供下载. 之前用 Ubuntu的时候,直接安装就可以使用. ...
- docker build提示 error checking context:can't stat xxx
这个提示基本是权限不够外加目录结构不对,保险的做法直接删除 Dockerfile. 正确做法:(可能还有其他的解决方案吧,这个可以生效) 重新建个目录,给目录授权,然后再dockerfile文件夹中建 ...
- 数组(Java)
数组的定义 数组是相同类型数据的有序集合 数组描述的是相同类型的若干数据,按照一定的先后次序排列组合而成 其中,每个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们 数组的声明和创建 基本 ...
- uniapp中使用echarts点击图例与tooltips无反应
只需要在项目main.js文件中加上 window.wx = {} // echarts中tooltips点击无反应与点击图例无反应解决方法 即可