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如何使用变量（代码示例）】输出如下：

文章图片
范例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 >

输出如下：