当前位置：极客教程 > CSS > CSS 问答 > CSS变量的用法和示例代码

CSS变量的用法和示例代码

CSS变量的用法和示例代码

在CSS中，变量是一种非常有用的功能，它可以帮助我们在整个样式表中重复使用值，从而提高代码的可维护性和灵活性。CSS变量也被称为自定义属性，它们以--开头，类似于--main-color: #ff0000;。在本文中，我们将详细介绍CSS变量的用法和示例代码。

声明和使用CSS变量

要声明一个CSS变量，只需在根元素（通常是html元素）中使用--前缀来定义变量名，并为其赋值。然后，在需要使用这个变量的地方，可以使用var()函数来引用这个变量。

:root {
  --main-color: #ff0000;
}

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

在上面的示例中，我们定义了一个名为--main-color的变量，并将其值设置为红色。然后，我们在h1元素的样式中使用var(--main-color)来引用这个变量，从而使h1元素的文字颜色为红色。

示例代码1：声明和使用CSS变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    h1 {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们定义了一个名为--main-color的变量，并将其值设置为红色。然后，我们在h1元素的样式中使用var(--main-color)来引用这个变量，从而使h1元素的文字颜色为红色。

局部变量

除了在根元素中定义全局变量外，我们还可以在任何元素中定义局部变量。局部变量只在当前元素及其子元素中有效，不会影响其他元素。

.container {
  --text-color: #333;
}

p {
  color: var(--text-color);
}

在上面的示例中，我们在一个名为.container的元素中定义了一个名为--text-color的局部变量，并将其值设置为灰色。然后，我们在p元素的样式中使用var(--text-color)来引用这个局部变量，从而使p元素的文字颜色为灰色。

示例代码2：局部变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    .container {
      --text-color: #333;
    }

    p {
      color: var(--text-color);
    }
  </style>
</head>
<body>
  <div class="container">
    <p>Welcome to geek-docs.com</p>
  </div>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们在一个名为.container的元素中定义了一个名为--text-color的局部变量，并将其值设置为灰色。然后，我们在p元素的样式中使用var(--text-color)来引用这个局部变量，从而使p元素的文字颜色为灰色。

使用CSS变量实现主题切换

CSS变量的一个重要用途是实现主题切换功能。通过定义不同主题的变量值，我们可以在用户切换主题时动态改变整个页面的样式。

:root {
  --main-color: #ff0000;
}

.dark-theme {
  --main-color: #0000ff;
}

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

在上面的示例中，我们定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，当用户切换到暗黑主题时，我们可以在.dark-theme类中重新定义--main-color的值为蓝色，从而改变页面的主题颜色。

示例代码3：主题切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    .dark-theme {
      --main-color: #0000ff;
    }

    h1 {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
  <button onclick="toggleTheme()">Toggle Theme</button>

  <script>
    function toggleTheme() {
      document.documentElement.classList.toggle('dark-theme');
    }
  </script>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，当用户点击按钮切换主题时，我们通过JavaScript动态切换.dark-theme类，从而改变页面的主题颜色。

媒体查询中使用CSS变量

CSS变量也可以在媒体查询中使用，这使得我们可以根据不同的屏幕尺寸或设备类型来动态改变样式。

:root {
  --main-color: #ff0000;
}

@media (max-width: 768px) {
  :root {
    --main-color: #00ff00;
  }
}

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

在上面的示例中，我们定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，在小于768px的屏幕宽度下，我们重新定义了--main-color的值为绿色，从而改变页面在不同屏幕尺寸下的主题颜色。

示例代码4：媒体查询中使用CSS变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    @media (max-width: 768px) {
      :root {
        --main-color: #00ff00;
      }
    }

    h1 {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，在小于768px的屏幕宽度下，我们重新定义了--main-color的值为绿色，从而改变页面在不同屏幕尺寸下的主题颜色。

使用JavaScript动态修改CSS变量

除了在样式表中定义和使用CSS变量外，我们还可以通过JavaScript来动态修改CSS变量的值，从而实现更加灵活的样式控制。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    h1 {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
  <button onclick="changeColor()">Change Color</button>

  <script>
    function changeColor() {
      document.documentElement.style.setProperty('--main-color', '#00ff00');
    }
  </script>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们通过JavaScript编写了一个changeColor()函数，当用户点击按钮时，该函数会动态修改--main-color变量的值为绿色，从而改变h1元素的文字颜色。

示例代码5：使用JavaScript动态修改CSS变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    h1 {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
  <button onclick="changeColor()">Change Color</button>

  <script>
    function changeColor() {
      document.documentElement.style.setProperty('--main-color', '#00ff00');
    }
  </script>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们通过JavaScript编写了一个changeColor()函数，当用户点击按钮时，该函数会动态修改--main-color变量的值为绿色，从而改变h1元素的文字颜色。

CSS变量的继承和覆盖

CSS变量可以继承和覆盖，这使得我们可以在不同的元素中灵活地控制样式。

:root {
  --main-color: #ff0000;
}

.container {
  --main-color: #00ff00;
}

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

p {
  color: var(--main-color);
}

在上面的示例中，我们在根元素中定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，在一个名为.container的元素中重新定义了--main-color的值为绿色。最后，我们在h1和p元素的样式中分别使用var(--main-color)来引用这个变量，从而使它们的文字颜色分别为绿色和红色。

示例代码6：CSS变量的继承和覆盖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    .container {
      --main-color: #00ff00;
    }

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

    p {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to geek-docs.com</h1>
    <p>This is a paragraph with custom color</p>
  </div>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们在根元素中定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，在一个名为.container的元素中重新定义了--main-color的值为绿色。最后，我们在h1和p元素的样式中分别使用var(--main-color)来引用这个变量，从而使它们的文字颜色分别为绿色和红色。

使用CSS变量实现动态效果

通过结合CSS变量和CSS过渡或动画，我们可以实现一些动态效果，比如颜色渐变、大小变化等。

:root {
  --main-color: #ff0000;
}

h1 {
  color: var(--main-color);
  transition: color 0.5s;
}

h1:hover {
  --main-color: #00ff00;
}

在上面的示例中，我们定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，我们在h1元素的样式中使用var(--main-color)来引用这个变量，并添加了一个颜色过渡效果。当用户将鼠标悬停在h1元素上时，我们通过重新定义--main-color的值为绿色，从而实现了文字颜色的渐变效果。

示例代码7：使用CSS变量实现动态效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

    h1 {
      color: var(--main-color);
      transition: color 0.5s;
    }

    h1:hover {
      --main-color: #00ff00;
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们定义了一个名为--main-color的全局变量，并将其值设置为红色。然后，我们在h1元素的样式中使用var(--main-color)来引用这个变量，并添加了一个颜色过渡效果。当用户将鼠标悬停在h1元素上时，我们通过重新定义--main-color的值为绿色，从而实现了文字颜色的渐变效果。

使用CSS变量实现响应式设计

CSS变量也可以帮助我们实现响应式设计，根据不同的屏幕尺寸或设备类型来动态调整样式。

:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}

h1 {
  font-size: var(--font-size);
}

在上面的示例中，我们定义了一个名为--font-size的全局变量，并将其值设置为16px。然后，在小于768px的屏幕宽度下，我们重新定义了--font-size的值为14px，从而实现了在不同屏幕尺寸下文字大小的调整。

示例代码8：使用CSS变量实现响应式设计

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Example</title>
  <style>
    :root {
      --font-size: 16px;
    }

    @media (max-width: 768px) {
      :root {
        --font-size: 14px;
      }
    }

    h1 {
      font-size: var(--font-size);
    }
  </style>
</head>
<body>
  <h1>Welcome to geek-docs.com</h1>
</body>
</html>

Output:

CSS变量的用法和示例代码

在上面的示例中，我们定义了一个名为--font-size的全局变量，并将其值设置为16px。然后，在小于768px的屏幕宽度下，我们重新定义了--font-size的值为14px，从而实现了在不同屏幕尺寸下文字大小的调整。

通过以上示例，我们可以看到CSS变量的强大之处，它们不仅可以简化样式表的管理，还可以实现动态效果和响应式设计，为网页开发带来更多的灵活性和可维护性。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程