css原生变量 var
css 变量的支持情况:
在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧
CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码的维护,其实css也有自己原生的变量var:
命名方式:--* (以--开头,*代表变量名称)
变量名称命名规则:
不能以:$
,[
,^
,(
,%
等字符字符开头,可以是数字,但是css和js不能以数字开头;但是可以是中文,日文或者韩文
使用方法:
1 就想定义元素的属性一样:
:root{ --red:red; --blue:blue; --yellow:yellow; }
.div1{
background-color:var(--red);
}
2 css变量有自己的作用域:
例如:
#div2{ --borderWidth:2px; } .div3{ --borderColor:red; border:1px solid var(--borderColor); } #div2{ border:var(--borderWidth) solid red; }
.div3中的--borderColor只能class为div3的元素可以使用,它的作用域在div3中
--borderWidth 只能是id为div2的元素才可以使用,别的元素没有作用
:root下定义的变量的作用域是整个文档
3 css缺省值
var( <自定义属性名> [, <默认值 ]? )
.div5{ background-color:var(--color,red); }
--color变量没有定义,就使用默认值red;
所以上面的定义方式等价于:
.div5{ background-color:red;
}
4 css变量默认值
.div6{ background-color:var(--color); }
div6没有定义默认值。--color变量没有定义。背景颜色默认是白素
等价于没有定义背景颜色
5 不合法的变量值:
.div7{ --width:20px; color:var(--width,red); }
不合法的使用,不是缺省值。等价于
.div7{ --width:20px; color:20px; }
所以文字的颜色是文字的默认颜色,不是红色而是黑色
6 CSS变量的空格尾随特性
.div8{
--size:20px;
font-size:var(--size)px;
}
div8的字体大小并不是20px;是默认的字体大小
解析出来是font-size:20 px;在20的后边有一个空格 。。。。
可以使用CSS3 calc()
计算:
.div8 {
--size:;
font-size: calc(var(--size) * 1px);
}
div8的字体大小才是20px;
7 css属性不能定义变量。例如:
.div4{ --width:width; border-var(--width):1px; var(--width):20px; }
上面的定义方式是不合法的
8 与Sass/Less/Stylus中的定义不同,不能像定义变量一样;例如:
--red:red;
span{
background-color:var(--red);
}
上面的定义方法是不起作用的
css原生的变量的定义方法,就想定义元素的属性一样
css原生变量 var的更多相关文章
- css原生变量var()
了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
- 了解CSS/CSS3原生变量var
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- 了解CSS/CSS3原生变量var (转)
一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
- css - 原生变量及使用函数 var()
零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...
- 【转载】了解CSS/CSS3原生变量var
文章转载自:鑫空间鑫生活(https://www.zhangxinxu.com/) 原文链接:http://www.zhangxinxu.com/wordpress/?p=5804 内容摘要: 在任何 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- C#中隐式类型本地变量var
在新接触的项目中,看到很多声明变量时用var.只记得在javascript中声明变量用var.今天在家里看C#和.Net高级编程,看到隐式变量这一块,就总结一下C# 中隐式变量var的用法. 1.C# ...
- Swift学习——变量var和let常量的用法(一)
Swift中的变量var和let常量 首先介绍一下Swift中的 var 和 let (1)var 是 variable的缩写形式,是变量的意思 ,是可改变的.并非数据类型 比如: 注意每一个语句后面 ...
随机推荐
- 同一页面引入多个JS文件的编码问题
原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...
- Regularized least-squares classification(正则化最小二乘法分类器)取代SVM
在机器学习或者是模式识别其中有一种重要的分类器叫做:SVM .这个被广泛的应用于各个领域.可是其计算的复杂度以及训练的速度是制约其在实时的计算机应用的主要原因.因此也非常非常多的算法被提出来.如SMO ...
- leetcode笔记:Contains Duplicate
一. 题目描写叙述 Given an array of integers, find if the array contains any duplicates. Your function shoul ...
- 使用squid架设自己的代理server
主要參考了 http://blog.chinaunix.net/uid-20778906-id-540115.html Ubuntu下Squid代理server的安装与配置 1 安装 $ sudo a ...
- iOS之UI--涂鸦画板实例
iOS之UI--涂鸦画板实例 首先是搭建框架 其他的略过,直接展示效果: 然后接下来上传搭建好两个控制器框架的源码百度云下载链接: http://pan.baidu.com/s/1skjpDox ...
- C/C++用状态转移表联合函数指针数组实现状态机FSM
状态机在project中使用很的频繁,有例如以下常见的三种实现方法: 1. switch-case 实现.适合简单的状态机. 2. 二维状态表state-event实现.逻辑清晰.可是矩阵通常比較稀疏 ...
- XHTML中button加入超链接以及使插入图片与屏幕一样大
1.button加入超链接 (1)假设是在本页跳转到新页面.用 <span style="font-size:18px;"><input type="b ...
- Java中的文件上传和下载
文件上传原理: 早期的文件上传机制: 在TCP/IP中.最早出现的文件上传机制是FTP.他是将文件由客户端发送到服务器的标准机制. jsp中的文件上传机制: 在jsp编程中不能使用FTP的方法来上传文 ...
- 4.改变eclipse选中文字颜色
window-preferences-general-editors-text editors-annotations-occurrences 和 window-preferences-general ...
- 【翻译自mos文章】即使resource_limit = false, password的 资源限制也会生效
即使resource_limit = false, password的 资源限制也会生效 參考原文: Resource limits for passwords work even with reso ...