CSS - @规则

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

@规则是一种扩展和增强 CSS 功能的方法，使其超越基本的选择器和属性-值对。

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

语法

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

@规则的类型

常规

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 @规则 - @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 @规则 - @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 @规则 - @property 示例

这是一个@property用法的示例

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

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

   /* set custom property values on parent */
      --item-size: 50%;
      --item-color: tomato;
      --item-border: 5px solid green;
   }

   /* use custom properties to set item size and background color */
   .item {
      width: var(--item-size);
      height: var(--item-size);
      border: var(--item-border);
      background-color: var(--item-color);
   }

   /* set custom property values on element itself */
   .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 @规则 - 规则列表

下表列出了所有 CSS @规则

@规则	示例
@charset	@charset "UTF-8";
@container	@container (width > 400px) { h1 {font-size: 2em;} }
@counter-style	@counter-style sample {}
@font-face	@font-face { font-family: "CustomFont"; src: url("customfont.woff2") format("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: 5in 6in; margin-left: 4in }
@property	@property sample-property { rules }
@supports	@supports (transform-origin: 10% 10%) {}

打印页面