CSS @規(guī)則(At-rules)系列詳解

___@charset規(guī)則使用方法

本篇目錄：

零、時光寶盒

一、@charset規(guī)則定義和用法

二、CSS @charset語法

三、@charset 使用方法例子

1、正確使用方法

2、無效的，錯誤的使用方法

---

??零、時光寶盒

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

　　前兩天，在網(wǎng)上看到有篇關(guān)于英語翻譯的文章，同一句話，不同人翻譯出來的效果顯示了不同性格。

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

正規(guī)翻譯：

1、人們來了，人們走了。這就是生活。別再留戀那些已經(jīng)放開你的人了。

2、有人來有人往，是正常的生活。不要抓住那些已經(jīng)放棄你的人不放手。放手那些已經(jīng)拋棄你的人，別再留戀。

3、人來人往都是過客，這就是生活的真諦。不要留戀那些讓你成為他生活中過客的人。

4、人來人往，這就是生活。別再執(zhí)著于那些已經(jīng)離開你的人。

五花八門的翻譯：

1、往來皆過客，人生須釋然。君既已放棄，何必多留戀。

2、沉舟側(cè)畔千帆過

3、緣起則聚，緣盡則散。

4、你我皆過客，難得一駐留

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

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

7、說走咱就走，風(fēng)風(fēng)火火闖九州！來去無牽掛，人生無限大！

8、有人靠近，有人離開，是謂常態(tài)，學(xué)會放下，學(xué)會釋懷

9、去留無意，紅塵來去皆是夢，既過不戀方為真！

10、我是天空里的一片云，偶爾投映在你的波心，你不必訝異，更無須歡喜，在轉(zhuǎn)瞬間消滅了蹤影

11、人來人往，萬法隨緣

12、人來人往皆過客，你我雖識亦路人

13、海海人生皆過客，棄我去者好走不送

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

15、天涯何處無芳草

16、人來人往，活在當(dāng)下！

17、愛誰誰，都是過客

18、鐵打的營盤流水的兵。天要下雨，娘要嫁人。由他去吧。

。。。。。。

你會怎么翻譯這句話呢？

??逆境清醒

2024.10.11

一、@charset規(guī)則定義和用法

　　@charset定義是CSS中的一個規(guī)則，@charset CSS @規(guī)則指定樣式表CSS文件中使用的字符編碼。

　　@charset定義應(yīng)該位于CSS文件的第一行，而前面不得有任何字符。放在任何其他規(guī)則之前。

　　例如，@charset "UTF-8";指定CSS文件采用UTF-8編碼。這樣做是為了確保CSS文件和HTML文件使用相同的字符編碼，以避免出現(xiàn)亂碼的問題。

　　常見的字符編碼包括UTF-8、GBK、GB2312等。在定義@charset時，需要使用引號將字符編碼包圍起來。

　　需要注意的是，如果CSS文件的字符編碼與HTML文件的字符編碼不一致，可能會導(dǎo)致樣式無效或者亂碼的問題，因此應(yīng)該在CSS文件中使用@charset定義來與HTML文件的字符編碼保持一致。

　　在樣式表中有多種方法去聲明字符編碼，瀏覽器會按照以下順序嘗試下邊的方法（一旦找到就停止并得出結(jié)果）：

?1、文件的開頭的 Unicode byte-order 字符值。

2、由 Content-Type：HTTP header 中的 charset 屬性給出的值或用于提供樣式表的協(xié)議中的等效值。?

?@charset規(guī)則特點(diǎn)：

• ?@charset 規(guī)則指定樣式表中使用的字符編碼。
• @charset 規(guī)則必須是樣式表中的第一個元素，并且不能以任何字符開頭。
• 如果定義了多個 @charset 規(guī)則，則僅使用第一個。 即：有多個 @charset @規(guī)則被聲明，只有第一個會被使用。
• @charset 規(guī)則不能在 style 屬性內(nèi)（在 HTML 元素上）或在與 HTML 頁面的字符集相關(guān)的 <style> 元素內(nèi)使用。
• @charset 規(guī)則不是一個嵌套語句，所以不能在@規(guī)則條件組中使用。
• 此 @規(guī)則在某些 CSS 屬性中使用非 ASCII 字符時非常有用，例如 content?

二、CSS @charset語法

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

@charset "<charset>";

屬性值

值	描述
charset	規(guī)定要使用的字符編碼。

charset

　　它是一個 <string> 表示字符編碼被使用。它必須是在被 IANA-registry 聲明過的 web-safe 字符編碼中的一個，還必須被雙引號包圍，遵循一個空格字符 (U+0020)，并且立即以分號結(jié)束。如果有多個相關(guān)的編碼名字，只有被標(biāo)記為 preferred 的那個才會被使用。

　　使用參考文檔定義的字符編碼：<link> 元素的 charset 屬性。該方法在 HTML5 標(biāo)準(zhǔn)中已廢除，無法使用。

　　@字符集必須按字面意思書寫，即10個字符“@charset”（小寫，無反斜杠轉(zhuǎn)義），后跟編碼名稱，后跟“；”；。

　　名稱必須是IANA注冊表中描述的字符集名稱。有關(guān)字符集的完整列表，請參閱CHARSETS]。作者應(yīng)使用IANA注冊表中標(biāo)記為“首選MIME名稱”的字符集名稱。

　　字符集名稱最多可包含40個字符，這些字符來自US-ASCII的可打印字符。然而，沒有區(qū)別
在使用大寫字母和小寫字母之間。

　　MIBenum值是MIB中用于標(biāo)識編碼的唯一值字符集。

MIBenum值的值空間分為三個部分區(qū)域。

第一個區(qū)域（3-999）由編碼字符集組成這些已經(jīng)被一些標(biāo)準(zhǔn)制定組織標(biāo)準(zhǔn)化了。該區(qū)域適用于沒有子集的標(biāo)準(zhǔn)實(shí)施。

第二個區(qū)域（1000-1999）是Unicode和ISO/IEC 10646編碼字符集及其規(guī)范可能出現(xiàn)的（一組）子曲目。

第三個地區(qū)（>1999年）是用于供應(yīng)商特定的編碼字符集。

三、@charset 使用方法例子

1、正確使用方法

設(shè)置 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 @規(guī)則(At-rules)索引目錄

???	???	???
給照片換底色（python+opencv）	貓十二分類	基于大模型的虛擬數(shù)字人__虛擬主播實(shí)例
?????	?????	?????
計算機(jī)視覺__基本圖像操作（顯示、讀取、保存）	直方圖（顏色直方圖、灰度直方圖）	直方圖均衡化（調(diào)節(jié)圖像亮度、對比度）
?????	?????	?????
語音識別實(shí)戰(zhàn)（python代碼）(一）	?人工智能基礎(chǔ)篇	?計算機(jī)視覺基礎(chǔ)__圖像特征

?????
?matplotlib 自帶繪圖樣式效果展示速查（28種，全）
?????
Three.js實(shí)例詳解___旋轉(zhuǎn)的精靈女孩(附完整代碼和資源)（一）
?????	?????	?????
立體多層玫瑰繪圖源碼__玫瑰花python 繪圖源碼集錦	?Python 3D可視化（一）	讓你的作品更出色——詞云Word Cloud的制作方法（基于python，WordCloud，stylecloud)
?????	?????	?????
?python Format()函數(shù)的用法___實(shí)例詳解（一）(全，例多）___各種格式化替換，format對齊打印	?用代碼寫出浪漫__合集（python、matplotlib、Matlab、java繪制愛心、玫瑰花、前端特效玫瑰、愛心）	python愛心源代碼集錦（18款）
?????	?????	?????
?Python中Print()函數(shù)的用法___實(shí)例詳解(全，例多）	?Python函數(shù)方法實(shí)例詳解全集(更新中...)	?《 Python List 列表全實(shí)例詳解系列（一）》__系列總目錄、列表概念
?????	?????
用代碼過中秋，python海龜月餅?zāi)阋灰獓L一口？	?python練習(xí)題目錄
?????	?????	?????
草莓熊python turtle繪圖（風(fēng)車版）附源代碼	??草莓熊python turtle繪圖代碼（玫瑰花版）附源代碼	??草莓熊python繪圖（春節(jié)版，圣誕倒數(shù)雪花版）附源代碼
?????	?????
?巴斯光年python turtle繪圖__附源代碼	皮卡丘python turtle海龜繪圖（電力球版）附源代碼

?????	?????	?????
?Node.js (v19.1.0npm 8.19.3) vue.js安裝配置教程（超詳細(xì)）	?色彩顏色對照表（一）(16進(jìn)制、RGB、CMYK、HSV、中英文名)	2024年6月多家權(quán)威機(jī)構(gòu)____編程語言排行榜__薪酬?duì)顩r
??????	?????	?????
?手機(jī)屏幕壞了____怎么把里面的資料導(dǎo)出（18種方法）	【CSDN云IDE】個人使用體驗(yàn)和建議（含超詳細(xì)操作教程）（python、webGL方向)	?查看jdk安裝路徑，在windows上實(shí)現(xiàn)多個java jdk的共存解決辦法，安裝java19后終端亂碼的解決

?????
vue3 項(xiàng)目搭建教程（基于create-vue，vite，Vite + Vue）
?????	?????	?????
2023年春節(jié)祝福第二彈——送你一只守護(hù)兔，讓它溫暖每一個你【html5 css3】畫會動的小兔子，炫酷充電，字體特	?別具一格，原創(chuàng)唯美浪漫情人節(jié)表白專輯，(復(fù)制就可用)（html5,css3,svg)表白愛心代碼(4套)	SVG實(shí)例詳解系列（一）(svg概述、位圖和矢量圖區(qū)別（圖解）、SVG應(yīng)用實(shí)例）
?????	?????	?????
【程序人生】卡塔爾世界杯元素python海龜繪圖（附源代碼），世界杯主題前端特效5個（附源碼）	HTML+CSS+svg繪制精美彩色閃燈圣誕樹，HTML+CSS+Js實(shí)時新年時間倒數(shù)倒計時(附源代碼)	?2023春節(jié)祝福系列第一彈（上）（放飛祈?？酌鳠?#xff0c;祝福大家身體健康）（附完整源代碼及資源免費(fèi)下載）

?????	?????	?????
?tomcat11、tomcat10 安裝配置（Windows環(huán)境）（詳細(xì)圖文）	?Tomcat端口配置（詳細(xì)）	?Tomcat 啟動閃退問題解決集（八大類詳細(xì)）