tags: [css规则符]
categories: 重学前端系列笔记

（0）@charset （规定页面使用什么格式）

这个是标识 css 解析是按照什么字符格式解析。一般出现在css文件的最顶部。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果

  1. @charset "UTF-8";

（1）@import（用来引入文件）

这个是用来引入另外一个 css 文件到当前文件内。除了页面的 @charset 标识，其余的都会引入，就相当于复制

/* 两种引入方式 */
@import "/css/base.css"
@import url("/css/base.css")


@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

（2）@media（用来判断设备类型）

它能够对设备的类型进行一些判断。在 media 的区块内。是普通规则列表。

@media print{
    header{
   font-size:13pt; 
  }
}
@media screen{
    html{
   font-size:50px; 
  }
}

（3）@page（分页媒体访问网页时的表现设置）

page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

@page {
  size: 8.5in 11in;
  margin: 10%;
  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

（4）@counter-style（定义列表样式）


@counter-style count-style{
      system:cyclic/numeric/alphabetic/symbolic/additive/[fixed ?]/[ extends ]; /*这个定义算法*/
    range:auto/数字范围 ; /*使用范围*/;
    symbols：符号; or additive-symbols: 符号;
    prefix：前缀;
    suffix  : 后缀;
    pad:补零策略;
      negative：负数策略;
    fallback:出错后的默认值;
      speakas:语音策略;
}

具体的可以看 CSDN参数属性，或者可以看 MDN详解

（5）@keyframes（定义关键帧动画）

这个可能是比较熟悉了，定义关键帧动画。著名的 animate.css，就是使用这个定义的多达几十种动画

/* 定义 */
@keyframes animateName {
    from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

/*使用*/
.userAnimate{
    animation:animateName .5s ease-in infinite;
}

（6）@fontface（定义字体）

著名的 icon字体图标，就是使用这个定义的。

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}
p { 
  font-family: Gentium, serif; 
}

（7）@supports（判断环境）

support 检查环境的特性，它与 media 比较类似

（8）@namespace（设置命名空间）

用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。

*这个还没搞懂用法，暂时先记下

（9）@viewport（设置视口特性）

用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替。

大概的就是这些了。有其他的话，之后再做补充吧。