zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    docker 安装mysql
    Java web项目搭建系列之二 Jetty下运行项目
    Java web项目搭建系列之一 Eclipse中新建Maven项目
    Maven 添加其他Maven组件配置问题
    C# 中定义扩展方法
    Oracle 函数
    【Webservice】2 counts of IllegalAnnotationExceptions Two classes have the same XML type name
    Linux精简版系统安装网络配置问题解决
    Rsync 故障排查整理
    Failed to set session cookie. Maybe you are using HTTP instead of HTTPS to access phpMyAdmin.
  • 原文地址:https://www.cnblogs.com/nyw1983/p/12122346.html
Copyright © 2011-2022 走看看