CSS @规则(At-rules)系列详解___@charset规则使用方法

CSS @规则(At-rules)系列详解

___@charset规则使用方法

本篇目录：

零、时光宝盒

一、@charset规则定义和用法

[二、CSS @charset语法](#二、CSS @charset语法)

[三、@charset 使用方法例子](#三、@charset 使用方法例子)

1、正确使用方法

2、无效的，错误的使用方法

零、时光宝盒

**（**https://blog.csdn.net/weixin_69553582 逆境清醒）

前两天，在网上看到有篇关于英语翻译的文章，同一句话，不同人翻译出来的效果显示了不同性格。

People come and people go. That's life. Stop holding on to people that have let go of you。这句英语怎么翻译？

正规翻译：

1、人们来了，人们走了。这就是生活。别再留恋那些已经放开你的人了。

2、有人来有人往，是正常的生活。不要抓住那些已经放弃你的人不放手。放手那些已经抛弃你的人，别再留恋。

3、人来人往都是过客，这就是生活的真谛。不要留恋那些让你成为他生活中过客的人。

4、人来人往，这就是生活。别再执着于那些已经离开你的人。

五花八门的翻译：

1、往来皆过客，人生须释然。君既已放弃，何必多留恋。

2、沉舟侧畔千帆过

3、缘起则聚，缘尽则散。

4、你我皆过客，难得一驻留

5、此身寄岁月，聚散各自由

6、不能相濡以沫，不如相忘于江湖

7、说走咱就走，风风火火闯九州！来去无牵挂，人生无限大！

8、有人靠近，有人离开，是谓常态，学会放下，学会释怀

9、去留无意，红尘来去皆是梦，既过不恋方为真！

10、我是天空里的一片云，偶尔投映在你的波心，你不必讶异，更无须欢喜，在转瞬间消灭了踪影

11、人来人往，万法随缘

12、人来人往皆过客，你我虽识亦路人

13、海海人生皆过客，弃我去者好走不送

14、人潮人海中，有你有我，相遇相识相互琢磨

15、天涯何处无芳草

16、人来人往，活在当下！

17、爱谁谁，都是过客

18、铁打的营盘流水的兵。天要下雨，娘要嫁人。由他去吧。

。。。。。。

你会怎么翻译这句话呢？

逆境清醒

2024.10.11

一、@charset规则定义和用法

@charset定义是CSS中的一个规则，@charset CSS @规则指定样式表CSS文件中使用的字符编码。

@charset定义应该位于CSS文件的第一行，而前面不得有任何字符。放在任何其他规则之前。

例如，@charset "UTF-8";指定CSS文件采用UTF-8编码。这样做是为了确保CSS文件和HTML文件使用相同的字符编码，以避免出现乱码的问题。

常见的字符编码包括UTF-8、GBK、GB2312等。在定义@charset时，需要使用引号将字符编码包围起来。

需要注意的是，如果CSS文件的字符编码与HTML文件的字符编码不一致，可能会导致样式无效或者乱码的问题，因此应该在CSS文件中使用@charset定义来与HTML文件的字符编码保持一致。

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

1、文件的开头的 Unicode byte-order 字符值。

2、由 Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。

@charset规则特点：

@charset 规则指定样式表中使用的字符编码。

@charset 规则必须是样式表中的第一个元素，并且不能以任何字符开头。

如果定义了多个 @charset 规则，则仅使用第一个。即：有多个 @charset @规则被声明，只有第一个会被使用。

@charset 规则不能在 style 属性内（在 HTML 元素上）或在与 HTML 页面的字符集相关的 <style> 元素内使用。

@charset 规则不是一个嵌套语句，所以不能在@规则条件组中使用。

此 @规则在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 content

二、CSS @charset语法

css 复制代码

CSS @charset语法：
@charset "<charset>";

@charset "<charset>";

属性值

|---------|-------------|
| 值 | 描述 |
| charset | 规定要使用的字符编码。 |

charset

它是一个 <string> 表示字符编码被使用。它必须是在被 IANA-registry 声明过的 web-safe 字符编码中的一个，还必须被双引号包围，遵循一个空格字符 (U+0020)，并且立即以分号结束。如果有多个相关的编码名字，只有被标记为 preferred 的那个才会被使用。

使用参考文档定义的字符编码：<link> 元素的 charset 属性。该方法在 HTML5 标准中已废除，无法使用。

@字符集必须按字面意思书写，即10个字符"@charset"（小写，无反斜杠转义），后跟编码名称，后跟"；"；。

名称必须是IANA注册表中描述的字符集名称。有关字符集的完整列表，请参阅CHARSETS]。作者应使用IANA注册表中标记为"首选MIME名称"的字符集名称。

字符集名称最多可包含40个字符，这些字符来自US-ASCII的可打印字符。然而，没有区别

在使用大写字母和小写字母之间。

MIBenum值是MIB中用于标识编码的唯一值字符集。

MIBenum值的值空间分为三个部分区域。

第一个区域（3-999）由编码字符集组成这些已经被一些标准制定组织标准化了。该区域适用于没有子集的标准实施。

第二个区域（1000-1999）是Unicode和ISO/IEC 10646编码字符集及其规范可能出现的（一组）子曲目。

第三个地区（>1999年）是用于供应商特定的编码字符集。

三、@charset 使用方法例子

1、正确使用方法

设置 css 的编码格式为 Unicode UTF-8

css 复制代码

@charset "UTF-8";

css 复制代码

@charset "utf-8"; /*大小写不敏感*/

css 复制代码

@charset "GBK";

body {
  font-family: Arial, sans-serif;
  color: #333;
}

2、无效的，错误的使用方法

（1）无效的，使用了错误的引号

css 复制代码

 /* 无效的，使用了错误的引号 */
@charset 'iso-8859-15'; 

 /* 正确的使用方法如下： */
@charset iso-8859-15;

（2）无效的，@charset之后和编码格式之间多于一个空格

css 复制代码

/* 无效的，@charset之后和编码格式之间多于一个空格 */
@charset  "UTF-8"; 

 /* 正确的使用方法如下： */
@charset "UTF-8";

（3）无效的，在 at-rule 之前多了一个空格，@charset前面不得有任何字符

css 复制代码

/* 无效的，在 at-rule 之前多了一个空格，@charset前面不得有任何字符 */
 @charset "UTF-8"; 

 /* 正确的使用方法如下： */
@charset "UTF-8";

（4）无效的，使用了错误的引号

@charset UTF-8; /* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS <string> */

css 复制代码

/* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS <string> */
@charset UTF-8; 

 /* 正确的使用方法如下： */
@charset "UTF-8";

推荐阅读：

CSS @规则(At-rules)索引目录

|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| | | |
| | | |
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
| | | |
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
| | | |
| 语音识别实战（python代码）(一） | 人工智能基础篇 | 计算机视觉基础__图像特征 |
| | | |