极客教程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>
代码运行结果:
在上面的示例中，我们定义了两个变量 --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>
代码运行结果:
在上面的示例中，我们通过 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>
代码运行结果:
在上面的示例中，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>
代码运行结果:
在上面的示例中，通过切换 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);
}
在上面的示例中，我们使用 --grid-columns 和 --grid-gap 变量定义了网格布局的列数和间距。
通过以上示例，我们可以看到在 CSS 中使用 :root 定义变量的灵活性和便利性，可以帮助我们更好地管理样式和实现各种效果。