CSS变量就像任何编程语言的简单变量一样。这些变量用于存储值, 并具有可以使用这些变量的范围。通过在开头使用两个破折号(–), 然后使用区分大小写的名称来定义变量。变量的好处是它允许在多个位置重用相同的值, 并可以从一个位置更新/修改它们。而且, 与颜色的值相比, 变量名称更易于理解和使用。
语法如下:
var( --custom-name, value )
参数:变量var()接受下面列出的两个参数:
- –自定义名称它是必需的参数, 它接受定制属性名称。
- 值:它是一个可选参数。它接受当自定义属性无效时使用的后备值。
<
!DOCTYPE html>
<
html >
<
head >
<
title >
CSS Variables<
/ title >
<
style >
:root {
--bg-color: green;
--txt-color: white;
}/* var() function used here */
body {
background-color: var(--bg-color);
}
h1 {
color: var(--txt-color);
}
div {
color: var(--txt-color);
}
<
/ style >
<
/ head >
<
body >
<
h1 >
lsbin<
/ h1 >
<
div >
A computer science portal for geeks
<
/ div >
<
/ body >
<
/ html >
【CSS如何使用变量(代码示例)】输出如下:
文章图片
范例2:
<
!DOCTYPE html>
<
html >
<
head >
<
title >
CSS Variables<
/ title >
<
style >
:root {
--bg-color: green;
}/* var() function used here */
body {
background-color: var(--bg-color);
}
h1 {
color: var(--txt-color, white);
}
div {
color: var(--txt-color, white);
}
<
/ style >
<
/ head >
<
body >
<
h1 >
lsbin<
/ h1 >
<
div >
A computer science portal for geeks
<
/ div >
<
/ body >
<
/ html >
输出如下:
文章图片
支持的浏览器:支持的浏览器CSS变量下面列出:
- 谷歌浏览器49.0
- Internet Explorer 15.0
- Firefox 31.0
- Safari 9.1
- Opera 36.0
推荐阅读
- 如何下载并安装Python 3最新版本(环境部署指南)
- PHP如何使用fgetc()函数(用法实例)
- 如何使用CSS自动调整图像大小以适合div容器()
- NumPy Python中的基本切片和高级索引
- 2020年最受欢迎的5种编程语言
- JavaScript中的循环语句用法详细指南
- AngularJS如何使用货币过滤器(代码示例)
- 本图文详细教程教你如何更新win10显卡驱动
- 本图文详细教程教你win10开始菜单没反应怎样处理