在 CSS 中，at-rules 是以"@"符号开头的特殊指令或语句。它们用于控制或修改样式表的行为，通常用于定义媒体查询、导入外部样式表或指定字体等任务。

At 规则是一种扩展和增强的方式CSS 的功能超出了基本选择器和属性值对的范围。

at 规则以 at (@) 符号开头，后跟标识符，并进一步包括直到下一个分号 (;) 或下一个 CSS 的所有内容

语法

/* General structure */
@identifier (RULE);

@Rules的类型

常规

CSS根据标识符和每个都有不同的语法。

  • @charset:指定外部样式表的字符编码。

  • @import:用于将外部 CSS 文件导入到当前样式表中。

  • @namespace:用于在 CSS 样式表中声明和定义 XML 命名空间。

嵌套

嵌套语句的子集，用作独立样式表语句和条件组规则中的组件。

  • @media:如果设备满足使用媒体查询定义的条件，则应用条件组规则的内容。

  • @supports:如果浏览器满足给定条件，则应用条件组规则的内容。

  • @page:定义打印页面的布局。

  • @font-face:定义要在网页中使用的自定义字体。

  • @keyframes:定义中间步骤的方面CSS 动画序列。

  • @counter-style:定义未预定义的不同自定义计数器样式。

  • @ font-feature-values:定义在 OpenType 中激活的功能的 font-variant-alternates 中的通用名称。它处理备用字形的使用，这些字形在 @font-feature-values 中定义

  • @property:定义自定义属性和变量的使用。

  • @layer:当有多个级联层时，定义一个层并设置优先顺序。

CSS @ Rules  @ page示例

这里是@page的使用示例:

<html>
<head>
<style>
   @page :first {
      margin-left: 80%;
      margin-top: 80%;
}

p {
   page-break-after: always;
}
</style>
</head>
<body>
   <p>Page One.</p>
   <p>Page Two.</p>
   <button>Print</button>

   <script>
      document.querySelector("button").addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS @Rules @keyframes示例

这里是@keyframes的使用示例:

<html>
<head>
<style>
   p {
      animation-duration: 3s;
      animation-name: slidein;
   }

   @keyframes slidein {
      from {
         margin-left: 100%;
         width: 300%;
      }

      to {
         margin-left: 0%;
         width: 100%;
      }
   }
</style>
</head>
<body>
   <p>
      The text appears from right to left
      </p>
</body>
</html>

CSS @Rules @property 示例

这里是 @property 的使用示例:

<html>
<head>
<style>
   @property --item-size {
      syntax: "<percentage>";
      inherits: true;
      initial-value: 40%;
   }

   .container {
      display: flex;
      height: 100px;
      border: 3px dotted black;

   /* 在父级上设置自定义属性值 */
      --item-size: 50%;
      --item-color: tomato;
      --item-border: 5px solid green;
   }

   /* 使用自定义属性设置项目大小和背景颜色 */
   .item {
      width: var(--item-size);
      height: var(--item-size);
      border: var(--item-border);
      background-color: var(--item-color);
   }

   /* 在元素本身上设置自定义属性值 */
   .second {
      --item-size: initial;
      --item-color: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="first item">First Item</div>
      <div class="second item">Second Item</div>      
   </div>

   <script>
      window.CSS.registerProperty({
      name: "--item-color",
      syntax: "<color>",
      inherits: false,
      initialValue: "peachpuff",
   });
   </script>
</body>
</html>

CSS @Rules 规则列表

下表列出了所有 CSS @ 规则:

@Rule示例
@charset@charset "UTF-8";
@container@container（width> 400px）{ h1 }
@counter-style@counter-style sample{}
@font-face@font-face { font-family:"自定义字体"； src: url("customfont.woff2") fomat("woff2"); }
@font-feature-value@font-feature-values "CustomFont" {@swash { fancy: 2; }}
@font-palette-values@font-palette-values One { font-family: "Bungee Spice";}
@import@import ur();
@keyframes@keyframes sample-slide{ from {transform:translateY(100%) } }
@layer@layer sample-layer{ .margin-lg { margin: 5px; } }
@media@media screen and(max-width:600px）{}
@namespace @namespace svg url();
@page@page { size:5 in 6 in；margin-left:4in }
@property@property sample-property { rules}
@supports@supports(transform-origin:10% 10%）{}