在 CSS 中，at rules 是以“@”符号开头的特殊指令或语句。它们用于控制或修改样式表的行为，通常用于定义媒体查询、导入外部样式表或指定字体等任务。
at-rules 是一种扩展和增强 CSS 功能的方法，超越了基本选择器和属性值对。
at-rules 以 at （@） 符号开头，后跟标识符，并进一步包含直到下一个分号 （;) 或下一个 CSS 块的所有内容。
语法
/*一般结构 */
@identifier (RULE);
@ 规则的类型
常规
CSS 根据标识符提供不同的常规 at-rules，每个规则都有不同的语法。
- @charset：指定外部样式表的字符编码。
- @import：用于将外部CSS文件导入到当前样式表中。
- @namespace：用于在 CSS 样式表中声明和定义 XML 命名空间。
嵌 套
嵌套语句的子集，既用作独立样式表语句，又用作条件组规则中的组件。
- @media：如果设备满足使用媒体查询定义的条件的条件，则应用条件组规则的内容。
- @supports：如果浏览器满足给定条件，则应用条件组规则的内容。
- @page：定义打印页面的布局。
- @font-face：定义要在网页中使用的自定义字体。
- @keyframes：定义 CSS 动画序列中中间步骤的方面。
- @counter-style：定义未预定义的不同自定义计数器样式。
- @font-feature-values：定义 font-variant-alternates 中在 OpenType 中激活的功能的通用名称。它处理备用字形的使用，这些字形在 @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 @ Rules- 规则列表
下表列出了所有 CSS @ Rules：
| @Rule | 例子 |
|---|---|
| @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%) {} |
