Css 简明教程

CSS - @ Rules

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

In CSS, at-rules are special instructions or statements that begin with the "@" symbol. They are used to control or modify the behavior of the stylesheet and are typically used for tasks such as defining media queries, importing external stylesheets, or specifying font faces.

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

At-rules are a way to extend and enhance the capabilities of CSS beyond basic selectors and property-value pairs.

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

An at-rule begins with at (@) sign, followed by an identifier and further includes everything upto the next semicolon (;) or next CSS block.

Syntax

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

Types of @ Rules

Regular

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

CSS provides different regular at-rules, based on the identifier and each has a different syntax.

@charset: Specifies the character encoding of an external stylesheet.
@import: Used to import an external CSS file into the current stylesheet.
@namespace: Used to declare and define XML namespaces within a CSS stylesheet.

Nested

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

A subset of nested statements that serve as both standalone style sheet statements and components within conditional group rules.

@media: Content of conditional group rule gets applied, if the device meets the criteria of the condition defined using media query.
@supports: Content of conditional group rule gets applied, if the given condition is met by the browser.
@page: Defines the layout of printed pages.
@font-face: Defines custom fonts to be used in a web page.
@keyframes: Defines the aspect of intermediate steps in a CSS animation sequence.
@counter-style: Defines the different custom counter styles that are not predefined.
@font-feature-values: Defines the common names in font-variant-alternates for feature activated in OpenType. It deals with the usage of alternate glyphs and these glyphs are defined in @font-feature-values
@property: Defines the usage of custom properties and variables.
@layer: Defines a layer and sets the order of precedence, when there are multiple cascade layers.

CSS @ Rules - @page Example

以下是 @page 用法的示例：

Here is an example of usage of @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 用法的示例：

Here is an example of usage of @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 用法的示例：

Here is an example of usage of @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>