CSS Bootstrap 4 – 在CSS中通过根名称引用颜色

在本文中，我们将介绍如何在CSS中使用根名称引用颜色。使用根名称引用颜色可以让我们在整个网站中轻松地更改主题颜色。

阅读更多：CSS 教程

什么是CSS根名称？

CSS根名称是一种特殊的CSS变量，使用两个减号（-）作为前缀，并用大写字母表示。例如，–PrimaryColor是一个有效的CSS根名称。

CSS根名称可以在整个CSS文件中使用，并通过var()函数引用。这使得我们可以在不同的CSS规则中使用相同的颜色值，从而实现全局样式的更改。

如何定义根名称颜色变量

在CSS中定义根名称颜色变量非常简单。我们只需要在:root伪类中使用–前缀声明变量，并为其设置特定的颜色值。例如，我们可以使用以下代码定义一个名为–PrimaryColor的根名称颜色变量：

:root {
  --PrimaryColor: #007bff;
}

如何在其他CSS规则中引用根名称颜色变量

一旦我们在:root伪类中定义了根名称颜色变量，我们就可以在其他任何CSS规则中使用它们。要引用根名称颜色变量，我们需要使用var()函数，并在括号中指定根名称变量的名称。例如，如果我们想将–PrimaryColor应用于按钮的背景颜色，我们可以使用以下代码：

button {
  background-color: var(--PrimaryColor);
}

示例：使用根名称引用颜色

下面是一个示例，展示了如何使用根名称引用颜色。首先，我们在:root伪类中定义了两个根名称颜色变量：

:root {
  --PrimaryColor: #007bff;
  --SecondaryColor: #6c757d;
}

然后，我们将这些根名称颜色变量应用于不同的元素中：

button {
  background-color: var(--PrimaryColor);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

a {
  color: var(--PrimaryColor);
}

.navbar {
  background-color: var(--SecondaryColor);
  color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

在上面的示例中，我们将–PrimaryColor应用于按钮的背景颜色，并将文本颜色设置为白色。同时，我们将–PrimaryColor应用于链接的颜色。此外，我们使用–SecondaryColor为导航栏设置了背景颜色。

这样，如果我们想要更改主题颜色，只需要更改:root伪类中的根名称颜色变量的值即可。这将自动更新整个网站中使用这些颜色的元素。

总结

在本文中，我们介绍了如何在CSS中通过根名称引用颜色。使用根名称颜色变量可以让我们在整个网站中轻松地更改主题颜色，而无需逐个更改每个元素的颜色。只需要在:root伪类中定义根名称颜色变量，并在其他CSS规则中使用var()函数引用它们即可。这使得我们的代码更加模块化和可维护。希望本文对你在CSS中使用根名称引用颜色有所帮助！