学做网站培训课程介绍

当前位置:

CSS 颜色变量及var() 函数使用方法

我们制作网站时,网站上有很多的区域颜色都是一样的,通常我们会给这些区域写颜色样式,但这个对于后期的修改比较麻烦。

在CSS3中,出现了CSS 颜色变量,可以定义一下颜色变量将赋值,然后使用var() 函数进行调用。这样以后只要修改变量的值,所有的区域的颜色就都改变了。

下面是CSS 颜色变量及var() 函数使用方法。

CSS 颜色变量使用 -- 前缀来定义,然后使用 var() 函数来引用。

下面是如何定义和使用 CSS 颜色变量的例子:


css
:root {
--primary-color: #333;
--accent-color: #5c6ac4;
--background-color: #f0f0f0;
}

body {
background-color: var(--background-color);
}

h1 {
color: var(--primary-color);
}

button {
background-color: var(--accent-color);
color: var(--primary-color);
}

在这个例子中,我们定义了三个颜色变量:--primary-color,--accent-color 和 --background-color。

然后在 body 选择器中将背景颜色设置为 --background-color 变量的值,在 h1 选择器中将文本颜色设置为 --primary-color 变量的值,在 button 选择器中将背景颜色设置为 --accent-color 变量的值,并将文本颜色也设置为 --primary-color 变量的值。

这样,我们就可以在需要的时候方便地更改这些颜色,只需要在 :root 选择器中更改颜色变量的值即可。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注