@font-face {  
  font-family: "MyCustomFont";  
  src: url("MyCustomFont.woff2") format("woff2"),  
       url("MyCustomFont.woff") format("woff");  
}

@keyframes color-change {  
  0% {  
    background-color: red;  
  }  
  50% {  
    background-color: yellow;  
  }  
  100% {  
    background-color: blue;  
  }  
}

div {  
  width: 100px;  
  height: 100px;  
  animation-name: color-change;  
  animation-duration: 4s;  
  animation-iteration-count: infinite;  
}

@page {  
  size: A4;   
  margin: 2cm;   
}

@page :first {  
  @top-left {  
    content: "前端充电宝";   
  }  
  @bottom-right {  
    content: "页码 " counter(page);   
  }  
}

  
@media screen {  
    
}  
  
  
@media print {  
  @page {  
    size: A4;  
    margin: 2cm;  
  }  
    
}

@media mediatype and|not|only (media feature) { 
  
}

  
body {  
  background-color: lightgray;  
  font-size: 16px;  
}  
  
  
@media screen and (max-width: 599px) {  
  body {  
    background-color: pink;  
    font-size: 14px;  
  }  
}  
  
  
@media screen and (min-width: 600px) and (max-width: 900px) {  
  body {  
    background-color: lightblue;  
    font-size: 18px;  
  }  
}  
  
  
@media screen and (min-width: 901px) {  
  body {  
    background-color: lightgreen;  
    font-size: 20px;  
  }  
}

@layer default, theme, state;

@layer default {
  button {
    background: rebeccapurple;
    color: white;
  }    
}

@layer state {
  :disabled {
    background: dimgray;
  }    
}

@layer theme {
  button.danger {
    background: maroon;
  }

  button.info {
    background: darkslateblue;
  }

  #call-to-action {
    background: mediumvioletred;
  }
}

@layer reset, framework, components, utilities;

@layer components {
  @layer default, theme, state;

  @layer state {
    
    :disabled { background: dimgray; }    
  }
}

@layer components.state {
  
  :focus-visible { outline: thin dashed hotpink; }
}

@layer low {  }
@layer medium {  }
@layer high {  }

@layer low, medium, high;

@scope (.block) {   
    
}

@scope (.block) {  
  .element {   
      
  }  
}

.block {  
  &.active {   
    color: red;  
  }  
    
  .element {   
    background-color: yellow;  
  }  
}

@scope (.block) {  
  &.active {  
    color: red;  
  }  
    
  .element {  
    background-color: yellow;  
  }  
}

元素。当.container的宽度小于800px时，改变

元素的字体颜色。可以这样实现：

.container {  
  container-name: myContainer;   
}  
  
@container myContainer (max-width: 800px) {  
  p {  
    color: gray;   
  }  
}

@starting-style

@starting-style 用于在元素首次应用样式或显示类型从 "none" 更改为其他类型时启动 CSS 过渡效果。这个规则使得开发者能够创建更平滑的动画效果，尤其是在元素从隐藏变为可见时。

@starting-style 的基本语法如下：

@starting-style {  
    
}  
  

当元素首次应用样式时，它将从 @starting-style 定义的初始样式开始过渡，到达在常规样式定义中指定的样式。

假设有一个 div 元素，希望在页面加载时它从透明变为不透明，同时背景颜色从绿色过渡到橙色。可以这样使用 @starting-style：

div {  
  transition: opacity 0.5s, background-color 0.5s;  
  opacity: 1;  
  background-color: lime;  
}  
  
@starting-style {  
  div {  
    opacity: 0;  
    background-color: green;  
  }  
}

在这个例子中，当 div 元素首次渲染时，它会从 opacity 为 0 和背景颜色为绿色的状态开始，然后过渡到 opacity 为 1 和背景颜色为橙色的状态。

@property

@property是CSS Houdini API的一部分。这个规则允许开发者显式地定义CSS自定义属性，并进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。通过 @property，可以直接在样式表中注册自定义属性，无需运行任何JavaScript代码；同时，它也配备了相应的JavaScript语法来注册自定义属性。

@property自定义属性可以看作是 CSS 变量声明变量的升级版本，它提供了更加规范和严谨的方式来定义和使用自定义属性。在CSS中使用自定义属性，可以使样式更加灵活和可维护，同时也能够减少重复的代码。

在定义一个@property时，需要指定自定义属性的名称、语法结构、初始值以及是否允许继承等参数。例如，可以使用以下语法来定义一个名为--my-color的自定义属性：

@property --my-color {  
  syntax: '';  
  inherits: false;  
  initial-value: red;  
}

这里，--my-color是一个自定义属性名称，syntax指定了该属性的语法结构为颜色值，inherits指定了该属性不被继承，initial-value指定了该属性的初始值为红色。定义了这个自定义属性之后，就可以在CSS中使用它了：

.element {  
  --my-color: blue;  
  background-color: var(--my-color);  
}

在这个例子中，.my-element的背景颜色被设置为蓝色，这是通过自定义属性--my-color来实现的。同时，也可以使用JavaScript来动态地改变这个自定义属性的值，从而改变元素的样式。

@charset

@charset 用于定义样式表中使用的字符编码。这个规则必须写在样式表的最开头，并且前面不可有别的字符，包括注释。在@charset之后，需要指定字符编码的名称，例如：

@charset 'UTF-8';

这个规则的主要为了在 CSS 文件中明确指定字符编码，以确保样式表能够正确解析和显示。当CSS文档没有声明字符编码时，将使用HTML文档声明的字符编码。如果两者都没有声明，那么默认会使用“UTF-8”编码。

@import

@import 用于从其他样式表中导入样式规则。这意味着可以将一个大的样式表拆分成多个较小的文件，并使用@import规则将它们组合在一起。这有助于更好地组织和管理样式表，特别是当项目变得庞大且复杂时。

@import规则的基本语法：

@import url('path/to/styles.css');

其中'path/to/styles.css'是要导入的外部样式表的路径。

还可以使用媒体查询与@import结合，以便在不同条件下导入不同的样式表。例如：

@import url('mobile.css') screen and (max-width: 768px);。

然而，需要注意的是，虽然@import提供了拆分和组织样式表的便利，但过度使用它可能会导致性能问题。因为每个@import都会触发一个新的HTTP请求，这可能会增加页面加载时间。因此，在实际项目中，建议谨慎使用@import，并考虑使用其他技术（如CSS预处理器）来更好地管理和组织样式表。

另外，关于@import的使用还有一些限制和注意事项：

• @import规则必须位于样式表的顶部，位于所有其他规则之前（除了@charset规则之外）。
• @import不是一个嵌套语句，这意味着不能在条件组的规则或媒体查询内部使用@import。

@namespace

@namespace 用于定义XML命名空间。它可以把通配、元素和属性选择器限制在指定命名空间里的元素。这在处理包含多个命名空间的文档时非常有用，例如HTML5中的内联 SVG、MathML 或者混合多个词汇表的 XML。

@namespace规则也可以用来定义默认命名空间。当定义过默认命名空间后，所有的通配选择器和类型选择器（但不包括属性选择器）都只应用在这个命名空间的元素中。此外，@namespace规则还可以用于定义命名空间前缀，当一个通配、类型、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与元素名或属性匹配的元素。

下面来在 CSS 中使用 @namespace 来为 SVG 元素定义样式：

在这个例子中，首先使用 @namespace 声明了 SVG 的命名空间 URL。然后，使用命名空间前缀 svg| 来指定想要选择的是 SVG 命名空间中的 circle 元素。这样，fill、stroke 和 stroke-width 的样式就只会应用到 SVG 命名空间中的 circle 元素，而不是 HTML 中的其他元素。

注意，在实际开发中，由于 HTML5 允许 SVG 直接嵌入而不需要显式地声明命名空间，因此在大多数情况下可能不需要使用 @namespace。

@supports

@supports 是 CSS3 引入的一个特性查询规则，用于检查浏览器是否支持某个 CSS 属性或属性值，然后根据检查结果应用不同的样式规则。如果浏览器支持指定的属性或属性值，那么就会应用相应的样式；如果不支持，则不会应用。

@supports 的基本语法如下：

@supports (property: value) {  
    
}

下面是一个使用 @supports 的例子，检查浏览器是否支持 display: grid 属性，并据此应用不同的布局样式：

.container {  
  display: block;   
}  
  
@supports (display: grid) {  
  .container {  
    display: grid;  
    grid-template-columns: 1fr 1fr;   
  }  
}

这里，如果浏览器支持 display: grid，.container 类将使用网格布局；否则，它将使用默认的块级布局。

@supports 的主要应用场景是渐进增强和优雅降级。通过 @supports，可以编写更灵活的 CSS，确保在不支持某些新特性的旧浏览器中仍然有可接受的样式表现，而在支持这些特性的新浏览器中则能享受更先进的布局和功能。

@supports 还支持使用逻辑操作符 and、or 和 not 来组合多个条件，这使得特性查询更加灵活。

@supports (display: flex) or (display: -webkit-flex) {  
    
}

在这个例子中，@supports 查询会检查浏览器是否支持标准的 display: flex 或者 WebKit 前缀的 display: -webkit-flex，如果满足其中一个条件，就会应用内部的样式规则。

@counter-style

@counter-style 允许定义如何将计数器的整数值转化为字符串表示，从而自定义计数器的样式。这个规则非常灵活，可以指定计数系统的类型、使用的符号、前缀、后缀等。

@counter-style 的基本语法如下：

@counter-style  {  
  system: ;  
  symbols: ;  
    
}

其中  是自定义计数器样式的名称， 指定了计数系统（如循环、数值、字母等）， 定义了一组用于表示计数器值的符号。

假设想要创建一个名为 "thumbs" 的计数器样式，该样式使用 Unicode 字符 "👍" 和 "👎" 作为计数符号，并且每两个计数值循环一次。可以这样定义：

@counter-style thumbs {  
  system: cyclic;  
  symbols: "👍" "👎";  
  suffix: " ";  
}  
  
  
ol.thumbs-list {  
  list-style: thumbs;  
}

这里创建了一个名为 "thumbs" 的计数器样式，它使用循环计数系统（system: cyclic），并且定义了两个符号（"👍" 和 "👎"）。然后，将这个样式应用到了一个有序列表（ol.thumbs-list）上，这样列表项就会使用我们定义的 "thumbs" 样式来显示计数器。

@font-palette-values

@font-palette-values 用于定义指定字体的配色方案。这个规则允许开发者不仅可以选择字体内置的各种配色方案，还可以自定义配色方案。通过 @font-palette-values 规则，开发者可以为特定的字体指定一组颜色，并在 CSS 中使用这些颜色来为网页元素提供一致的配色。

基本语法如下：

@font-palette-values  {  
   {  
     ;  
     ;  
      
  }  
    
}

其中  是指定的字体家族名称， 是自定义的配色方案名称， 是颜色值， 是该颜色在配色方案中的位置（百分比）。

例如，假设有一个名为 "MyCustomFont" 的字体，并想为它定义一个名为 "MyPalette" 的配色方案：

@font-palette-values MyCustomFont {  
  MyPalette {  
    red 0%;  
    orange 50%;  
    yellow 100%;  
  }  
}

这里定义了一个从红色渐变到橙色，再到黄色的配色方案。然后，在 CSS 中，可以使用这个配色方案来为网页元素设置颜色：

h1 {  
  font-family: MyCustomFont;  
  font-palette: MyPalette;  
}

注意，@font-palette-values 的支持和可用性可能取决于浏览器和字体文件本身，并非所有字体都支持自定义配色方案。

@font-feature-values

@font-feature-values 用于定义字体特性的替代值。这个规则允许开发者为特定的字体家族定义命名的特性值，然后在 font-variant-alternates 属性中使用这些命名值来应用字体特性，从而简化 CSS 的编写。

这个规则的基本语法如下：

@font-feature-values  {  
   {  
    : ;  
      
  }  
    
}

其中  是想要应用特性值的字体家族名称， 是字体特性（如 swash、styleset 等）， 是为特性定义的名称，而  是该特性值在字体中的索引。

举个例子，假设有一个名为 "FancyFont" 的字体，它支持 "swash" 特性，该特性有三个不同的样式。可以使用 @font-feature-values 来定义这些样式的命名值：

@font-feature-values FancyFont {  
  swash {  
    fancy-style: 1;  
    more-fancy-style: 2;  
    wild-style: 3;  
  }  
}

然后，在 CSS 中，可以使用这些命名值来应用 "swash" 特性的不同样式：

p {  
  font-family: FancyFont;  
  font-variant-alternates: swash(fancy-style);  
}  
  
h1 {  
  font-family: FancyFont;  
  font-variant-alternates: swash(more-fancy-style);  
}

这样，

 元素将使用 "fancy-style" 的 swash 特性，而 

 元素将使用 "more-fancy-style" 的 swash 特性。