CSS :root|极客教程

CSS :root

在 CSS 中，我们可以使用变量来存储和重复使用值。其中，:root 伪类用于表示文档的根元素，通常是 <html> 元素。通过在 :root 中定义变量，我们可以在整个文档中方便地引用这些变量，实现样式的统一管理和灵活调整。

定义变量

要在 :root 中定义变量，只需使用 -- 前缀加上变量名，并赋予对应的值。例如：

:root {
  --main-color: #ff0000;
  --font-size: 16px;
}

使用变量

在其他样式规则中使用变量时，只需使用 var() 函数，并传入变量名。例如：

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

示例代码

示例 1：定义和使用变量

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

    h1 {
      color: var(--main-color);
      font-size: var(--font-size);
    }
  </style>
</head>
<body>
  <h1>Hello, Geek-docs.com!</h1>
</body>
</html>

代码运行结果:

CSS :root

在上面的示例中，我们定义了两个变量 --main-color 和 --font-size，并在 h1 标签中使用了这两个变量。

示例 2：动态改变变量值

我们可以通过 JavaScript 动态改变变量的值，从而实现主题切换等功能。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>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 :root

在上面的示例中，我们通过 JavaScript 中的 setProperty 方法动态改变了 --main-color 变量的值，从而改变了 h1 标签的颜色。

示例 3：变量的继承

在 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</title>
  <style>
    :root {
      --main-color: #ff0000;
    }

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

    h1 {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Hello, Geek-docs.com!</h1>
  </div>
</body>
</html>

代码运行结果:

CSS :root

在上面的示例中，h1 标签继承了 .container 元素中定义的 --main-color 变量的值。

示例 4：变量的默认值

如果变量没有被定义，可以使用 var() 函数的第二个参数来设置默认值。例如：

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

在上面的示例中，如果 --main-color 变量没有被定义，h1 标签的颜色将默认为黑色。

示例 5：变量的计算

变量可以进行简单的计算，例如：

:root {
  --base-font-size: 16px;
  --heading-font-size: calc(var(--base-font-size) * 2);
}

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

在上面的示例中，--heading-font-size 变量的值是 --base-font-size 的两倍。

示例 6：变量的作用域

变量的作用域与 CSS 的规则相同，即在定义变量的选择器内部有效。例如：

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

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

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

在上面的示例中，h1 标签中使用的 --main-color 变量是在 .container 内定义的值。

示例 7：使用变量实现响应式设计

我们可以使用变量来实现响应式设计，例如：

:root {
  --breakpoint-small: 576px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 992px;
}

@media (min-width: var(--breakpoint-small)) {
  /* Styles for small screens */
}

@media (min-width: var(--breakpoint-medium)) {
  /* Styles for medium screens */
}

@media (min-width: var(--breakpoint-large)) {
  /* Styles for large screens */
}

在上面的示例中，我们定义了三个断点变量，根据不同屏幕尺寸应用不同的样式。

示例 8：使用变量实现主题切换

通过改变变量的值，我们可以实现主题切换的效果。例如：

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

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

    .dark-theme {
      --main-color: #000000;
    }
  </style>
</head>
<body>
  <h1>Hello, Geek-docs.com!</h1>
  <button onclick="toggleTheme()">Toggle Theme</button>

  <script>
    let isDarkTheme = false;

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

代码运行结果:

CSS :root

在上面的示例中，通过切换 dark-theme 类来改变 --main-color 变量的值，实现了主题切换的效果。

示例 9：使用变量实现动画效果

变量可以用于定义动画效果中的属性值。例如：

:root {
  --animation-duration: 1s;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide {
  animation: slide-in var(--animation-duration) ease-in-out;
}

在上面的示例中，我们使用 --animation-duration 变量定义了动画的持续时间。

示例 10：使用变量定义阴影效果

变量可以用于定义阴影效果中的属性值。例如：

:root {
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.box {
  box-shadow: var(--box-shadow);
}

在上面的示例中，我们使用 --box-shadow 变量定义了一个阴影效果。

示例 11：使用变量定义边框样式

变量可以用于定义边框样式中的属性值。例如：

:root {
  --border-width: 2px;
  --border-color: #ff0000;
}

.box {
  border: var(--border-width) solid var(--border-color);
}

在上面的示例中，我们使用 --border-width 和 --border-color 变量定义了边框的宽度和颜色。

示例 12：使用变量定义渐变背景

变量可以用于定义渐变背景中的属性值。例如：

:root {
  --gradient-color1: #ff0000;
  --gradient-color2: #00ff00;
}

.box {
  background: linear-gradient(to right, var(--gradient-color1), var(--gradient-color2));
}

在上面的示例中，我们使用 --gradient-color1 和 --gradient-color2 变量定义了一个渐变背景。

示例 13：使用变量定义字体样式

变量可以用于定义字体样式中的属性值。例如：

:root {
  --font-family: 'Arial', sans-serif;
  --font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
}

在上面的示例中，我们使用 --font-family 和 --font-size 变量定义了字体的样式和大小。

示例 14：使用变量定义按钮样式

变量可以用于定义按钮样式中的属性值。例如：

:root {
  --button-background: #ff0000;
  --button-color: #ffffff;
}

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

在上面的示例中，我们使用 --button-background 和 --button-color 变量定义了按钮的背景色和文字颜色。

示例 15：使用变量定义表格样式

变量可以用于定义表格样式中的属性值。例如：

:root {
  --table-border: 1px solid #000000;
}

table {
  border-collapse: collapse;
}

td, th {
  border: var(--table-border);
  padding: 5px;
}

在上面的示例中，我们使用 --table-border 变量定义了表格的边框样式。

示例 16：使用变量定义列表样式

变量可以用于定义列表样式中的属性值。例如：

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

ul {
  list-style-type: none;
}

li {
  color: var(--list-color);
}

在上面的示例中，我们使用 --list-color 变量定义了列表项的颜色。

示例 17：使用变量定义输入框样式

变量可以用于定义输入框样式中的属性值。例如：

:root {
  --input-border: 1px solid #000000;
  --input-padding: 5px;
}

input {
  border: var(--input-border);
  padding: var(--input-padding);
}

在上面的示例中，我们使用 --input-border 和 --input-padding 变量定义了输入框的边框和内边距样式。

示例 18：使用变量定义链接样式

变量可以用于定义链接样式中的属性值。例如：

:root {
  --link-color: #0000ff;
  --link-hover-color: #ff0000;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

在上面的示例中，我们使用 --link-color 和 --link-hover-color 变量定义了链接的颜色和悬停颜色。

示例 19：使用变量定义响应式布局

变量可以用于定义响应式布局中的属性值。例如：

:root {
  --breakpoint-small: 576px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 992px;
}

@media (min-width: var(--breakpoint-small)) {
  /* Styles for small screens */
}

@media (min-width: var(--breakpoint-medium)) {
  /* Styles for medium screens */
}

@media (min-width: var(--breakpoint-large)) {
  /* Styles for large screens */
}

在上面的示例中，我们使用断点变量定义了不同屏幕尺寸下的样式。

示例 20：使用变量定义网格布局

变量可以用于定义网格布局中的属性值。例如：

:root {
  --grid-columns: 3;
  --grid-gap: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-gap: var(--grid-gap);
}