CSS @charset 规则

CSS @charset 语法

在 CSS 中，@charset 规则用于定义样式表的字符编码，它决定了浏览器如何正确地解析和显示样式表中的文本内容。

语法：

@charset "字符编码名称";

说明：

@charset 后面跟的是一个字符串，用来指定字符编码（如 "utf-8"）。字符编码名称需要用 “双引号” 括起来，并以分号（;）结尾。

对于 @charset 规则，我们要清楚以下几点。

@charset 规则必须出现在样式表的最前面，并且前面不能有其他内容或注释。如果一个样式表中有多个 @charset 规则，只有第一个会生效。
如果是通过 link 标签导入样式表，那么样式表的字符编码通常由 HTML 文档的字符编码决定。
如果样式表是通过 @import 规则导入，那么导入的样式表中的 @charset 规则会覆盖导入它的样式表。
在大多数情况下，@charset 规则不是必须的，因为字符编码完全可以由 HTML 文档中的 meta 标签（比如 <meta charset="utf-8">）或者 HTTP 响应头来控制。

提示: @charset 规则在实际开发中用得很少，小伙伴们简单了解即可。

CSS @charset 摘要

属于	CSS @规则
使用频率	低
是否继承	否
默认值	无
兼容性	查看
官方文档	查看
MDN	查看

CSS @charset 示例

接下来，我们通过一个简单的例子来讲解一下 CSS @charset 规则是如何使用的。

index.css 文件内容：

@charset "utf-8";  /* 声明字符编码为 utf-8 */

/* 正文样式 */
body {
    font-family: Arial, sans-serif;
    color: #333;
}

/* 标题样式 */
h1 {
    color: #0066cc;
}

示例：@charset 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    <!-- HTML 中的字符编码声明 -->
    <title></title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>绿叶网</h1>
    <p>为好教程，全力以赴。</p>
</body>
</html>

页面效果如下图所示。

@charset 示例

分析：

在 index.css 文件的最顶部，我们使用 @charset "utf-8"; 声明了该文件的字符编码为 utf-8。这样做的目的是能够确保浏览器能够正确解析包含非 ASCII 字符（如中文、日文、特殊符号等）的样式表文件。

虽然 <meta charset="utf-8"> 标签在 HTML 中通常已经可以很好地处理字符编码问题，但为了确保样式表本身能够被正确解析，尤其是在不依赖 HTML 文档的情况下，使用 @charset 也是一种很好的实践。

如果样式表文件中包含中文等非 ASCII 字符，并且文件编码与 HTTP 头或 HTML 中的字符设置不一致，@charset 规则可以帮助浏览器正确解析文件，从而避免乱码现象。