at-rule
普通规则
- 选择器
- 声明区块

CSS 的顶层样式表由两种规则组成的规则列表构成，

@规则（at-rule）

@规则由@+相关区块内容组成

普通规则（ qualified rule）

由选择器+声明区块组成，声明区块又由属性和值组成

at-rule

@charset

@charset用于提示css文件使用字符编码方式，如果使用必须写在前面

@charset "utf-8"

@import

import 用于引入一个 CSS 文件除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容

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

@import url("css path")

使用 @import 引入的 CSS 文件，会在本 CSS 文件加载时，给服务器发一个 http 请求被 import 的 CSS 文件。
经常有个建议是：少用 @import ，因为会增加 http 的请求数量。

@media

利用媒体查询可以对设备的视口大小进行判断，从而实现响应式执行某些样式。

/*媒体查询*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
    #adver .center {
        width: 50%;
        margin: -10px 0 0 -25%;
    }
    main .center h2 {
        font-size: 40px;
    }
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
    #adver .center {
        width: 60%;
        margin: -10px 0 0 -30%;
    }
    #adver .search, #adver .button {
        font-size: 20px;
    }
    main .center h2 {
        font-size: 35px;
    }
}

@page

page 规则定义样式表中页面框的尺寸，方向和页边距，用于打印预览和从浏览器打印Web文档。
通常，在此构造中，各种CSS属性（如大小，页面和边距）用于指定页面框的尺寸，方向，边距等

页面框是一个矩形区域，其中包含两个区域：

该页面区域。页面区域包括该页面上布置的框。第一页区域的边缘建立了矩形，该矩形是文档的初始包含块。画布背景被绘制在其中并覆盖页面区域。
在边缘区域，围绕页面区域。页边距区域是透明的。

// 使用规则如下
@page [:left | :right | :first] {
    /* print-specific rules */
}

// 使用方式
@page {
    margin: 2in; /* default for all pages */
}
@page :left {
    margin: 1in; /* margin on left page */
}
@page :right {
    margin: 3in; /* margin on right page */
}
@page :first {
    margin-top: 5in; /* top margin on first page */
}

@counter-style

counter-style 产生一种数据，用于定义列表项的表现

// 语法
@counter-style <counter-style-name> {
    system: <counter system>        // 指定一个算法，用于将计数器的整数值转化为字符串表示
    symbols: <counter symbols>      // 定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码
    additive-symbols: <additive-symbols>
    negative: <negative symbol>     // 指定一个符号，当计数器表示的值为负的时候，把这个符号加在值的前面或后面 
    prefix: <prefix>                                // 指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在negative前
    suffix: <suffix>
    range: <range>
    pad: <padding>
    speak-as: <speak-as>
    fallback: <counter-style-name>
}

如果system的值是fixed,那么symbols属性指定的固定的N个符号，将被用来表示计数器的前N个值。用完了前N个符号后，列表里剩下的值将使用fallback定义的样式来表示

/* 下面的 @counter-style 规则使用图片而不是字符标记 */
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}

把无序列表的小点，换成字母序号 ```javascript @counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: “ “; }

.items { list-style: circled-alpha; }

```
// 在页面的展示结果
Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve
....
...
Ⓨ Twenty Five
Ⓩ Twenty Six

@key-frames

key-frames产生一种数据，用于定义动画关键帧

@keyframs myanimate{
  form {
    }
  to {
    }
}

@fontface

fontface 用于定义一种字体，iconfont 是利用这个 css 特性来实现的

@support

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

@namespace

用于和 xml 命名空间配合一个规则

普通规则

选择器

id选择器： #xxx
类选择权： .xxx
标签选择器： div span....
相邻选择器：h1+p
子代选择器：xx > xxx
后代选择器： xx xxx
通配符选择器： *
属性选择器： a[xx="xxx"]
伪类选择器：xxx：hover
伪元素选择器：xxx::after
声明区块

以下列举 CSS 的属性值为函数值的新特性

图片

filter：滤镜
- blur()：模糊
- brightness()
- contrast()
- opacity()
  图形绘制
background：背景
- conic-gradien()
- linear-gradient()
- radial-gradient()
- shape()

布局

calc()
clamp()
fit-content()
max()
min()
minmax()
repeat()

变形、动画
transform
- matrix()：矩阵动画
- matrix3d()：3d 矩阵动画
- perspective()
- rotate()
- scale()
- translate()
  环境与元素
var()
env()
attr()

前端知识库

CSS 的两种规则