自学内容网 自学内容网

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

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

___@charset规则使用方法

本篇目录:

零、时光宝盒

一、@charset规则定义和用法

二、CSS @charset语法

三、@charset 使用方法例子

1、正确使用方法

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


  零、时光宝盒

https://blog.csdn.net/weixin_69553582  逆境清醒)

2ab463de26a541818271efa176656ae6.png

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

  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

7f8eafc867aa425cab7d368ee0eb4dd8.gif

一、@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)索引目录

9e598365ba5344e282453e71a676a056.jpeg​​​

b9b9f2b9374646798ca554110a498cda.jpeg​​​

23f61e3eac99458296be0fedea10019e.jpeg​​​

给照片换底色(python+opencv)猫十二分类基于大模型的虚拟数字人__虚拟主播实例

bfa502b957c247a7872d7e645d4c6f03.jpeg​​​​​

2f073e39924e42d2b33221f4262dcc1d.jpeg​​​​​

9d7e2b6a00aa45fd82291f0d5f9eea7e.jpeg​​​​​

计算机视觉__基本图像操作(显示、读取、保存)直方图(颜色直方图、灰度直方图)直方图均衡化(调节图像亮度、对比度)

01bfb23f2f894ee0b0164f52e57bbbbc.png​​​​​

47c92d6cf9fe4d279a142480a4340a0d.png​​​​​

1620a2a7b0914c42b3a8254e94269a79.png​​​​​

语音识别实战(python代码)(一)

 人工智能基础篇

 计算机视觉基础__图像特征

93d65dbd09604c4a8ed2c01df0eebc38.png​​​​​

 matplotlib 自带绘图样式效果展示速查(28种,全)

074cd3c255224c5aa21ff18fdc25053c.png​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一)

fe88b78e78694570bf2d850ce83b1f69.png​​​​​

62e23c3c439f42a1badcd78f02092ed0.png​​​​​

cb4b0d4015404390a7b673a2984d676a.png​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

 Python 3D可视化(一)

让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud)

e84d6708316941d49a79ddd4f7fe5b27.png​​​​​

938bc5a8bb454a41bfe0d4185da845dc.jpeg​​​​​

0a4256d5e96d4624bdca36433237080b.png​​​​​

 python Format()函数的用法___实例详解(一)(全,例多)___各种格式化替换,format对齐打印

 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

python爱心源代码集锦(18款)

dc8796ddccbf4aec98ac5d3e09001348.jpeg​​​​​

0f09e73712d149ff90f0048a096596c6.png​​​​​

40e8b4631e2b486bab2a4ebb5bc9f410.png​​​​​

 Python中Print()函数的用法___实例详解(全,例多)

 Python函数方法实例详解全集(更新中...)

 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念

09e08f86f127431cbfdfe395aa2f8bc9.png​​​​​

6d64357a42714dab844bf17483d817c0.png​​​​​

用代码过中秋,python海龟月饼你要不要尝一口?

 python练习题目录

03ed644f9b1d411ba41c59e0a5bdcc61.png​​​​​

daecd7067e7c45abb875fc7a1a469f23.png​​​​​

17b403c4307c4141b8544d02f95ea06c.png​​​​​

草莓熊python turtle绘图(风车版)附源代码

 ​草莓熊python turtle绘图代码(玫瑰花版)附源代码

 ​草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码

4d9032c9cdf54f5f9193e45e4532898c.png​​​​​

c5feeb25880d49c085b808bf4e041c86.png​​​​​

 巴斯光年python turtle绘图__附源代码

皮卡丘python turtle海龟绘图(电力球版)附源代码

80007dbf51944725bf9cf4cfc75c5a13.png​​​​​

1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​​​​

1750390dd9da4b39938a23ab447c6fb6.jpeg​​​​​

 Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

 色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名)

2024年6月多家权威机构____编程语言排行榜__薪酬状况

aa17177aec9b4e5eb19b5d9675302de8.png​​​​​​

38266b5036414624875447abd5311e4d.png​​​​​

6824ba7870344be68efb5c5f4e1dbbcf.png​​​​​

 手机屏幕坏了____怎么把里面的资料导出(18种方法)

【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决

1408dd16a76947e4a7eb3c54cd570d95.png​​​​​

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

fea225cb9ec14b60b2d1b797dd8278a2.png​​​​​

bba02a1c4617422c9fbccbf5325850d9.png​​​​​

37d6aa3e03e241fa8db72ccdfb8f716b.png​​​​​

2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特

 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4套)

SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例)

5d409c8f397a45c986ca2af7b7e725c9.png​​​​​

6176c4061c72430eb100750af6fc4d0e.png​​​​​

1f53fb9c6e8b4482813326affe6a82ff.png​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码)HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载)

fffa2098008b4dc68c00a172f67c538d.png​​​​​

5218ac5338014f389c21bdf1bfa1c599.png​​​​​

c6374d75c29942f2aa577ce9c5c2e12b.png​​​​​

 tomcat11、tomcat10 安装配置(Windows环境)(详细图文)

 Tomcat端口配置(详细)

 Tomcat 启动闪退问题解决集(八大类详细)


原文地址:https://blog.csdn.net/weixin_69553582/article/details/142834481

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!