Orion's Studio.

CSS的@规则

2018/06/07

@规则

@charset

样式表的第一个元素,前面不得有任意字符,只有第一个会被使用,属性值大小写不敏感且必须用双引号,主常用于让content属性使用非ASCII字符

浏览器查找样式表字符编码顺序:

  1. BOM(byte-order mark)
  2. Content-Type: Http header中的charset属性
  3. @charset
  4. link元素的charset属性(HTML5标准已废弃)
  5. 假设文档是UTF-8

@import

必须先于除@charset之外的规则,常用于避免为不支持的媒体类型检索资源

同步加载,会产生FOUC(Flash of Unstyled Content)问题

@namespace

位于@charset和@import之后,在其他任何规则之前,定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间内,常用于处理包含多个命名空间的文档,比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML

外语元素会自动加上命名空间,默认是http://www.w3.org/1999/xhtml,<svg>和<math>元素分别会加上对应的命名空间(http://www.w3.org/2000/svghttp://www.w3.org/1998/Math/MathML)

嵌套@规则

可以用在条件规则组中

@media

也可以在link标签中使用
<link rel="stylesheet" media="screen and (min-width:900px)" href="widescreen-style.css"/>

对大小写敏感

未匹配的样式也会被下载,但不会被应用

可以使用not、and、or、only逻辑运算符

媒体类型

  • all 所有设备,默认
  • screen 彩色电脑屏幕
  • print
  • speech

媒体特性

  • width
  • height
  • aspect-radio 可见区域宽高比
  • orientation 高度是否大于宽度
  • resolution 分辨率
  • scan
  • grid
@page
@supports

支持条件,类似于if判断

有not(和and or连用要带括号)、and、or操作符

CATALOG
  1. 1. @规则
    1. 1.1. @charset
    2. 1.2. @import
    3. 1.3. @namespace
    4. 1.4. 嵌套@规则
      1. 1.4.1. @media
      2. 1.4.2. @page
      3. 1.4.3. @supports