[分享]css中如何设置全局样式

在CSS中，我们通常使用选择器来设置具体元素的样式。但是有些样式需要应用在全局范围内，为了避免在每个选择器中重复设置，我们可以通过一些技巧来实现全局样式的设置。/ 设置字体和颜色 / body { f...

在CSS中，我们通常使用选择器来设置具体元素的样式。但是有些样式需要应用在全局范围内，为了避免在每个选择器中重复设置，我们可以通过一些技巧来实现全局样式的设置。

/* 设置字体和颜色 */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

/* 统一设置标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

上述代码中，我们使用了一些选择器来实现全局样式的设置。首先，我们为整个页面设置了字体和颜色。接着，我们将标题的字体加粗。最后，我们使用通配符选择器重置了所有元素的默认样式。

另外，我们还可以通过在根元素上设置变量来实现全局样式的设置。

/* 在根元素上设置变量 */
:root {
  --primary-color: #007bff;
  --font-family: Arial, sans-serif;
}

/* 使用变量设置样式 */
a {
  color: var(--primary-color);
  font-family: var(--font-family);
} 

这里，我们在根元素上定义了两个变量，一个用于主要颜色，一个用于字体。然后，我们在链接的样式中使用了这两个变量。

通过以上的方法，我们可以轻松地为整个页面设置全局样式，避免在每个选择器中重复设置，提高了代码的可维护性。