CSS 自定义属性|极客教程

CSS 自定义属性

CSS自定义属性（Custom Properties）是CSS的一项新特性，也被称为CSS变量。它允许开发者在CSS中定义自己的变量，以便在整个样式表中重复使用。这为开发者提供了更大的灵活性和可维护性，使得样式表更易于管理和修改。

定义和使用自定义属性

要定义一个自定义属性，只需在根元素（通常是html元素）中使用--前缀来声明变量，然后在需要使用的地方通过var()函数来引用这个变量。

示例代码：

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

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

在上面的示例中，我们定义了一个名为--main-color的自定义属性，并在h1元素中使用了这个属性来设置文字颜色。

自定义属性的继承和覆盖

自定义属性可以继承和覆盖，就像普通的CSS属性一样。如果一个元素没有定义某个自定义属性，它会向上查找直到找到定义了该属性的元素。

示例代码：

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

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

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

在这个示例中，h1元素会继承.container元素中定义的--main-color属性值，而不是根元素中定义的值。

自定义属性的动态性

自定义属性是动态的，可以通过JavaScript来修改和更新。这使得我们可以根据用户的操作或其他条件来改变样式。

示例代码：

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

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

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

代码运行结果:

CSS 自定义属性

在这个示例中，点击按钮后会通过JavaScript修改--main-color属性的值，从而改变h1元素的文字颜色。

自定义属性的作用域

自定义属性的作用域与普通的CSS属性相同，即在定义了该属性的元素及其子元素中可见。如果在一个元素中定义了一个自定义属性，那么该属性只在该元素及其子元素中有效。

示例代码：

.container {
  --main-color: #ff0000;
}

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

在这个示例中，--main-color属性只在.container元素及其子元素中有效，而不会影响到其他元素。

自定义属性的默认值

可以为自定义属性设置默认值，当某个元素没有定义该属性时，会自动使用默认值。

示例代码：

:root {
  --main-color: #ff0000;
  --secondary-color: #00ff00;
}

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

在这个示例中，如果h1元素没有定义--main-color属性，它会使用--secondary-color属性作为默认值。

自定义属性的命名规范

自定义属性的命名规范与普通的CSS属性相同，可以使用字母、数字、连字符和下划线，但必须以--前缀开头。

示例代码：

:root {
  --main_color: #ff0000; /* 无效的命名，不以--开头 */
  --main-color: #00ff00; /* 有效的命名 */
}

自定义属性的应用场景

自定义属性可以应用于各种场景，例如主题色、字体大小、间距等。下面是一些常见的应用场景示例：

主题色

示例代码：

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

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

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

间距

示例代码：

:root {
  --spacing-small: 5px;
  --spacing-medium: 10px;
}

.container {
  padding: var(--spacing-medium);
}

.item {
  margin-bottom: var(--spacing-small);
}