css中常见的At-rule

1. @chatset，用来提示css文件使用的字符编码方式，其一般在外部样式表文件中使用，如果它被使用，必须出现在最前面。该规则后面的分号是不可省略的，如果省略了该分号，会生成错误信息。

使用方式:

@charset<charset>;

一般常用的编码方式有两个，世界统一编码：utf-8，中文编码：gb2312

2. @import，用来引入一个css文件，除了@charset规则不会被引入外，其余全部内容都会被引入。该规则必须在样式文件头部最先声明，同样需要尾部的分号。

常见的使用方式:

@import url;
@import url 媒体查询列表; /*一个逗号分隔的 媒体查询 条件列表，满足条件时才引入 CSS。*/

url又分为两种形式，直接的一个链接，另一种形式就是url(url)，前者需要字符串，后者可以不需要

3. @media，媒体查询，可以针对不同的屏幕尺寸来设置不同的样式

使用方式：

@media mediatype and | not | only (media feature) { css-code; }

常见的媒体类型有三种：all(全部设备)，print(打印机和打印预览)，screen(电脑或者手机屏幕)

常见的媒体功能：

max-width: 页面最大可见区域宽度

min-width: 页面最小可见区域宽度

orientation: 检测设备是处于横屏还是竖屏(landscape: 横屏，portrait：竖屏)

device-pixel-ratio: 像素比

4. @page，用于在打印时修改某些css属性，不能使用该规则来修改所有的css属性，一般只能用其来修改margin，window等属性，对其他属性的修改是无效的。

其常见的使用方式：

@page <label> <pseudo-classes>{ sRules }

label：页面标识符

pseudo-classes：伪类，:right，:left，:first

5. @counter-style，使用该命令可以自定义列表样式，可以用在list-style,counter等上

其常见的使用方式:

@counter-style counter名字{
     system  : 算法;
     range   : 使用范围;
     symbols : 符号; or additive-symbols: 符号
     prefix  : 前缀;
     suffix  : 后缀;
     pad     : 补零(eg. 01,02,03);
     negative: 负数策略;
     fallback: 出错后的默认值;
     speakas : 语音策略;
}

平时最常使用的一般是system，range，prefix，suffix

6. @key-frames，用来定义动画关键帧，创建动画的原理就是将一套css样式逐渐变化为另一套样式

其最常使用的形式为:

@keyframes animationname {keyframes-selector {css-styles;}}

keyframes-selector,动画时长的百分比，一般有两种形式：

0%~100%，

from-to，from等同于0，to等同于100%

@keyframe只存在于渐变属性中，例如各种width，height，opacity等属性中。一般为了减少重绘和重排，一般使用的属性有：color，background，transform等

7. @fontface，用于定义一种字体，在该规则中，必须首先定义字体的名称，然后指向字体文件

常见的使用形式：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

除了上面最常见的两个属性，还有font-style和font-weight这两个属性来设置自定义的字体

8. @support，检测环境的属性，其与media类似。该规则允许我们根据浏览器对css的支持程度来定义不同的样式

其常见的使用形式：

@supports <supports_condition> {
  /* specific rules */
}

@support支持and，or，not等条件判断，在使用的时候可以组合条件来判断

9. @namespace，用于跟xml命名空间配合的一个规则，表示内部的css选择器全部带上特定命名空间

@namespace规则通常在处理包含多个namespaces的文档时才有用，比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML。

10. @viewport，用于设置视口的一些特性，由于其兼容性不太好，目前大多数被meta标签所代替。

常见的属性值有：

min-width：最小宽度

max-width：最大宽度

zoom：设置初始的缩放系数

min-zoom：最小的缩放系数

max-zoom：最大的缩放系数

orientation：横屏还是竖屏