Css 简明教程

CSS - @ Rules

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

At 规则是一种扩展 CSS 超出基本选择器和属性值对的能力的方法。

At 规则以 at (@) 标记开头，后跟标识符，其进一步包含所有内容直到下一个分号 (;) 或下一个 CSS 块。

Syntax

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

Types of @ Rules

Regular

CSS 提供不同的常规 @ 规则，基于标识符，每个都有不同的语法。

@charset ：指定外部样式表的字符编码。
@import ：用于将外部 CSS 文件导入当前样式表。
@namespace ：用于在 CSS 样式表内声明和定义 XML 命名空间。

Nested

一组嵌套语句的子集，既作为独立样式表语句，又作为条件组规则中的组件。

@media ：如果设备符合使用媒体查询定义的条件的标准，则应用条件组规则的内容。
@supports ：如果浏览器满足给定的条件，将应用条件组规则的内容。
@page ：定义打印页面的布局。
@font-face ：定义在网页中使用的自定义字体。
@keyframes ：定义 CSS 动画序列中中间步骤的外观。
@counter-style ：定义未预定义的不同自定义计数器样式。
@font-feature-values ：定义字体变体替代中众所周知的名称，用于 OpenType 中激活的功能。它处理替换字形的用法，并且这些字形已在 @font-feature-values 中定义
@property ：定义自定义属性和变量的用法。
@layer ：定义图层并设置优先级顺序，当有多个级联图层时。

CSS @ Rules - @page Example

以下是 @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 Example

以下是 @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 Example

以下是 @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>