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

___@charset规则使用方法

本篇目录：

零、时光宝盒

一、@charset规则定义和用法

二、CSS @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 @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

@charset "UTF-8";

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

@charset "GBK";body {font-family: Arial, sans-serif;color: #333;
}

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

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

 /* 无效的，使用了错误的引号 */
@charset 'iso-8859-15'; /* 正确的使用方法如下： */
@charset iso-8859-15; 

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

/* 无效的，@charset之后和编码格式之间多于一个空格 */
@charset  "UTF-8"; /* 正确的使用方法如下： */
@charset "UTF-8"; 

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

/* 无效的，在 at-rule 之前多了一个空格，@charset前面不得有任何字符 */@charset "UTF-8"; /* 正确的使用方法如下： */
@charset "UTF-8"; 

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

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

/* 无效的，缺少单引号 ' 或双引号 "，charset 不是一个有效的 CSS <string> */
@charset UTF-8; /* 正确的使用方法如下： */
@charset "UTF-8"; 

        推荐阅读：

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

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

​​​​​
matplotlib 自带绘图样式效果展示速查（28种，全）
​​​​​
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
​​​​​	​​​​​	​​​​​
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)
​​​​​	​​​​​	​​​​​
python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）
​​​​​	​​​​​	​​​​​
Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
​​​​​	​​​​​
用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录
​​​​​	​​​​​	​​​​​
草莓熊python turtle绘图（风车版）附源代码	​草莓熊python turtle绘图代码（玫瑰花版）附源代码	​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
​​​​​	​​​​​
巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码

​​​​​	​​​​​	​​​​​
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2024年6月多家权威机构____编程语言排行榜__薪酬状况
​​​​​​	​​​​​	​​​​​
手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

​​​​​
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
​​​​​	​​​​​	​​​​​
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
​​​​​	​​​​​	​​​​​
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

​​​​​	​​​​​	​​​​​
tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）