CSS @ 规则：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入探讨 CSS @ 规则的迷人世界。如果你之前从未听说过它们，不用担心——在这个教程结束时，你将像专业人士一样熟练地使用这些强大的工具！

什么是 CSS @ 规则？

在我们开始之前，让我们从基础知识开始。CSS @ 规则（发音为“at-规则”）是赋予 CSS 超能力的特殊指令。它们允许我们定义样式在不同情况下的行为，创建动画，甚至定义自定义属性。把它们想象成让你的网页真正动态和引人入胜的秘密酱料！

语法

@ 规则的语法非常直接。它们总是以 '@' 符号开始，后面跟着一个标识符（规则名），然后是一个声明块或一个分号。下面是一般结构：

@规则名 {
/* 规则内容 */
}

或者对于一些不需要块的规则：

@规则名 值;

简单吧？现在，让我们探索一些最常见和有用的 @ 规则！

@ 规则的类型

CSS 中有很多 @ 规则，每个都有其特殊用途。下面是一个总结一些最重要规则的表格：

@ 规则	用途
@media	根据设备特性应用样式
@keyframes	定义动画序列
@font-face	允许使用自定义字体
@import	从其他 CSS 文件导入样式
@page	为打印定义页面特定的规则
@supports	根据浏览器功能支持应用样式
@charset	指定样式表的字符编码

现在，让我们更深入地了解一些规则和示例！

CSS @ 规则 - @page 示例

@page 规则在你处理打印布局时特别有用。它允许你定义打印页面的尺寸、边距和其他属性。

@page {
size: A4;
margin: 1cm;
}

@page :first {
margin-top: 2cm;
}

在这个示例中，我们将所有页面设置为 A4 尺寸，边距为 1cm。然后，我们给第一页一个特殊的 2cm 顶部边距。想象一下你正在创建一份漂亮的简历——这个规则确保它在纸上看起来和屏幕上一样好！

CSS @ 规则 - @keyframes 示例

现在，让我们添加一些动画来增加吸引力！@keyframes 规则是你创建平滑、引人注目的网页动画的门票。

@keyframes 弹跳 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: 弹跳 1s 无限次;
}

这段代码创建了一个简单的弹跳动画。按钮将向上移动 20 像素，然后回到原位，无限重复。就像给按钮装了一个小蹦床！

要使用这个动画，你可以像这样应用到一个元素：

<button class="bouncy-button">点击我！</button>

CSS @ 规则 - @property 示例

@property 规则是 CSS 的新增功能，允许你定义和使用具有特定类型、继承行为和初始值的自定义属性（也称为 CSS 变量）。

@property --主颜色 {
语法: '<颜色>';
继承: false;
初始值: #ff0000;
}

.my-element {
background-color: var(--主颜色);
}

在这个示例中，我们定义了一个名为 --主颜色 的自定义属性。它被设置为颜色值，不继承父元素，初始值为红色。这给我们更多的控制和灵活性，当使用 CSS 变量时。

CSS @ 规则 - 规则列表

虽然我们已经覆盖了一些最常见的 @ 规则，但还有更多可以探索的。下面是一个更全面的列表：

@ 规则	描述
@charset	指定样式表的字符编码
@import	从其他 CSS 文件导入样式
@namespace	声明一个命名空间前缀
@media	根据设备特性应用样式
@supports	根据浏览器功能支持应用样式
@document	根据文档特性应用样式（已弃用）
@font-face	允许使用自定义字体
@keyframes	定义动画序列
@viewport	控制视口特性（大多被 meta 视口标签替代）
@page	为打印定义页面特定的规则
@counter-style	定义计数器样式
@font-feature-values	定义 OpenType 字体特征的名字值
@property	定义自定义 CSS 属性

每个规则都为样式和控件你的网页打开了新的可能性。在你继续 CSS 之旅时，你会发现自己越来越频繁地使用这些强大的工具。

记住，掌握 CSS @ 规则的关键是实践。不要害怕尝试不同的组合。谁知道呢？你可能会创造出下一个大的网页设计趋势！

快乐编码，愿你的样式表永远无虫！

Credits: Image by storyset