@规则 👌

@规则（at-rule）是 CSS 中的特殊语句，也称为@语句、CSS 语句或 CSS 指令。它们以@符号开头，用于向 CSS 引擎提供特殊的指令或信息。

1. @charset - 字符编码声明

语法

@charset "编码格式";

作用

告诉浏览器该 CSS 文件使用的字符编码集

使用规则

• 必须写在 CSS 文件的第一行
• 必须使用双引号包围编码格式
• 分号结尾
• 前面不能有任何字符（包括注释、空格等）

示例

@charset "utf-8";

/* 其他CSS规则 */
h1 {
  color: red;
}

注意事项

• 如果不声明@charset，浏览器会使用默认编码或从 HTTP 头部获取编码信息
• 推荐始终使用 UTF-8 编码
• 在 HTML 中通过<meta charset="UTF-8">声明的编码优先级更高

2. @import - 导入外部样式表

语法

@import "路径";
@import url("路径");
@import "路径" 媒体查询;

作用

导入另外一个 CSS 文件，将外部样式表的内容合并到当前样式表中

使用规则

• 必须写在所有 CSS 规则之前（@charset 除外）
• 可以使用相对路径或绝对路径
• 支持媒体查询条件导入

基本示例

@charset "utf-8";
@import "reset.css";
@import "components.css";

/* 自定义样式 */
h1 {
  text-align: center;
  font-size: 3em;
}

条件导入示例

/* 只在打印时导入 */
@import "print.css" print;

/* 只在屏幕宽度大于768px时导入 */
@import "desktop.css" screen and (min-width: 768px);

/* 只在移动设备上导入 */
@import "mobile.css" screen and (max-width: 767px);

实际应用场景

1. 重置样式导入

/* index.css */
@charset "utf-8";
@import "reset.css"; /* 导入重置样式 */

/* 页面特定样式 */
h1 {
  text-align: center;
  font-size: 3em;
}

2. 模块化样式管理

/* main.css */
@import "base.css"; /* 基础样式 */
@import "layout.css"; /* 布局样式 */
@import "components.css"; /* 组件样式 */
@import "utilities.css"; /* 工具类样式 */

@import vs <link>标签

特性	@import	<link>
加载时机	CSS 解析时加载	HTML 解析时并行加载
性能	较慢，串行加载	较快，并行加载
兼容性	CSS2.1+	所有浏览器
位置要求	必须在 CSS 文件顶部	可在 HTML 任意位置
媒体查询	支持	支持
JavaScript 控制	不易控制	易于控制

性能注意事项

• @import 会阻塞页面渲染，直到导入的 CSS 加载完成
• 多层@import 嵌套会导致串行加载，影响性能
• 生产环境建议使用构建工具合并 CSS 文件，而不是运行时@import

3. 其他常用@规则

@media - 媒体查询

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2em;
  }
}

@keyframes - 动画关键帧

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@font-face - 自定义字体

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}