CSS如何使用变量(代码示例)

CSS变量就像任何编程语言的简单变量一样。这些变量用于存储值, 并具有可以使用这些变量的范围。通过在开头使用两个破折号(–), 然后使用区分大小写的名称来定义变量。变量的好处是它允许在多个位置重用相同的值, 并可以从一个位置更新/修改它们。而且, 与颜色的值相比, 变量名称更易于理解和使用。
语法如下:

var( --custom-name, value )

参数:变量var()接受下面列出的两个参数:
  • –自定义名称它是必需的参数, 它接受定制属性名称。
  • 值:它是一个可选参数。它接受当自定义属性无效时使用的后备值。
范例1:
< !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如何使用变量(代码示例)】输出如下:
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如何使用变量(代码示例)

文章图片
支持的浏览器:支持的浏览器CSS变量下面列出:
  • 谷歌浏览器49.0
  • Internet Explorer 15.0
  • Firefox 31.0
  • Safari 9.1
  • Opera 36.0

    推荐阅读