CSS - @ 规则

在 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%) {}

打印本页