CSS @规则—— @ charset 和 @import

一个 @规则(at-rule)是一个CSS语句,以 at符号开头,’@‘ 后面跟一个标识符,并包括直到下一个分号的所有内容,或是下一个CSS代码块,就近原则,先到的为准。

一、@charset 

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

必须是样式表中的第一个元素,而且前面不得有任何字符。因为它不是一个嵌套语句,所以不可以在 @规则条件组中使用。

如果有多个@charset 被声明,只有第一个会被使用,而且不能在HTML元素或是HTML页面的字符集相关 <style> 元素内的样式属性内使用。

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

在样式表中有很多种方法去声明字符编码:

(浏览器会`按照一下顺序尝试下边的方法,一旦找到声明就停止并且得出结果)

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

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

  3、CSS @规则 @charset

  4、使用参考文档定义字符编码 :<link> 元素的 charset 属性(该方法在 HTML5标准中已经废除,无法使用)

  5、假设文档是 UTF-8

语法:

@charset "<charset>";

参数:

charset:它是<string> 表示字符串被使用。它必须是在 IANA-registry 声明过的 web-safe 字符编码中的一个,还必须被双引号包围,遵循一个空格字符(U+0020),并且立即使用分号结束。

如果有多个相关的编码的名字,只有被标记为 preferred 的那个才会被使用

注意:

字符集名字大小写不敏感。

必须使用双引号包围,不可以使用单引号,表示字符串被使用。

需要正确的使用空格,@前面不可以加空格。

实例:

@charset "UTF-8";     
@charset "utf-8"; /*大小写不敏感*/  
/* 设置css的编码格式为Unicode UTF-8 */
@charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
@charset 'UTF-8';       /* 无效的, 使用了错误的引号 */
@charset  "UTF-8";      /* 无效的, 多于一个空格 */
 @charset "UTF-8";      /* 无效的, 在at-rule之前多了一个空格 */
@charset UTF-8;         /* Invalid, without ' or ", the charset is not a CSS <string> */

 

二、@import

@import  告诉CSS引擎引入一个外部样式表

@import 用于从其他样式表导入样式规则。这些规则必须先于所有其它类型的规则,@charset 规则除外,@charset 不是一个嵌套语句,@import 不能在条件组的规则中使用。

因此,用户代理可以避免为不支持的媒体类型检索资源,作者可以制定依赖媒体的 @import 规则。

这些条件导入在 URI 之后指定逗号分割的媒体查询。在没有任何媒体查询的情况下,导入是无条件的。指定所有的媒体具有都具有相同的效果。

语法:

@import url;
@import url list-of-media-queries;

参数:

  url :表示要引入资源位置的 字符串 或者是 路径。这个地址(URL)可以是绝对路径或者是相对路径。要注意的是这个 URL 不需要指明一个文件;  可以只指明文件名,然后适合的文件会被自动选择。

  list-of-media-queries:是一个逗号分隔的媒体查询 条件列表,决定通过 URL 引入的CSS 规则在什么条件下应用。如果浏览器不支持列表中的任何一个媒体查询条件,就不会引入 URL指明的 CSS文件。(例如import url("fineprint.css") print; 即为在媒体设备是 print的时候使用 fineprint.css)

 实例:

@import url("fineprint.css") print;  在设备是 打印机时应用样式
@import url("bluish.css") projection, tv;   在设备是 投影仪或电视时应用样式
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;  在设备是 投影仪 时应用样式
@import url('landscape.css') screen and (orientation:landscape);

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule

原文地址:https://www.cnblogs.com/nyw1983/p/12122346.html