CSS @规则参考

CSS @规则（At-rules）是用于指示 CSS 如何表现的特殊语句，以 @ 符号开头，后跟标识符和规则内容。本文档提供了 CSS @规则的完整参考。

常用 @规则

@规则	描述	示例
@media	根据媒体查询结果应用样式	@media screen and (max-width: 600px) { ... }
@import	导入其他样式表	@import url("styles.css");
@font-face	定义可下载的自定义字体	@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }
@keyframes	定义动画关键帧	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@supports	根据浏览器对 CSS 特性的支持情况应用样式	@supports (display: grid) { ... }
@layer	声明级联层，控制样式优先级	@layer framework, custom;

其他 @规则

@规则	描述	示例
@charset	指定样式表的字符编码	@charset "UTF-8";
@page	定义打印文档时的页面样式	@page { margin: 2cm; }
@namespace	定义 XML 命名空间	@namespace url(http://www.w3.org/1999/xhtml);
@counter-style	定义自定义计数器样式	@counter-style circled-alpha { ... }
@property	定义自定义 CSS 属性	@property --my-color { syntax: '<color>'; inherits: false; initial-value: #c0ffee; }
@container	根据容器查询结果应用样式	@container (min-width: 700px) { ... }
@font-feature-values	定义字体特性值	@font-feature-values Font Name { @styleset { nice-style: 12; } }
@document	根据文档 URL 应用样式（已废弃）	@document url("https://example.com/") { ... }
@viewport	定义视口特性（已废弃）	@viewport { width: device-width; }

@media 媒体查询

媒体查询允许根据设备特性（如屏幕宽度、高度、方向等）应用不同的样式。

常用媒体类型

媒体类型	描述
all	适用于所有设备
screen	适用于屏幕
print	适用于打印预览和打印页面
speech	适用于语音合成器

常用媒体特性

媒体特性	描述	示例
width	视口宽度	(min-width: 768px)
height	视口高度	(max-height: 1080px)
aspect-ratio	视口宽高比	(aspect-ratio: 16/9)
orientation	视口方向	(orientation: landscape)
resolution	设备分辨率	(min-resolution: 2dppx)
color	设备颜色位数	(color)
color-gamut	设备色域	(color-gamut: p3)
display-mode	应用显示模式	(display-mode: fullscreen)
prefers-color-scheme	用户颜色方案偏好	(prefers-color-scheme: dark)
prefers-reduced-motion	用户动画偏好	(prefers-reduced-motion: reduce)
prefers-contrast	用户对比度偏好	(prefers-contrast: high)
hover	设备是否支持悬停	(hover: hover)
pointer	指针设备精度	(pointer: fine)

@font-face 属性

属性	描述	示例
font-family	定义字体名称	font-family: 'MyFont';
src	指定字体文件的 URL	src: url('myfont.woff2');
font-weight	指定字体粗细	font-weight: 700;
font-style	指定字体样式	font-style: italic;
font-display	控制字体加载和显示方式	font-display: swap;
unicode-range	指定字体支持的 Unicode 字符范围	unicode-range: U+0025-00FF;

@property 属性

属性	描述	示例
syntax	定义属性的语法	syntax: '<color>';
inherits	指定属性是否继承	inherits: true;
initial-value	指定属性的初始值	initial-value: #1e90ff;

@counter-style 属性

属性	描述	示例
system	指定计数系统	system: cyclic;
symbols	指定计数符号	symbols: '①' '②' '③';
additive-symbols	指定加法计数符号	additive-symbols: 10 'X', 5 'V', 1 'I';
negative	指定负数表示方式	negative: '-';
prefix	指定计数器前缀	prefix: '(';
suffix	指定计数器后缀	suffix: ')';
range	指定计数器范围	range: 1 infinite;
pad	指定数字填充	pad: 2 '0';
fallback	指定备用计数器样式	fallback: decimal;

@container 属性

属性	描述	示例
container-type	定义容器类型	container-type: inline-size;
container-name	定义容器名称	container-name: card;

浏览器兼容性

@规则	Chrome	Firefox	Safari	Edge	IE
@media	21+	3.5+	4.0+	12+	9+
@import	1+	1+	1+	12+	5.5+
@font-face	4+	3.5+	3.1+	12+	9+
@keyframes	43+	16+	9+	12+	10+
@supports	28+	22+	9+	12+	不支持
@layer	99+	97+	15.4+	99+	不支持
@container	105+	110+	16+	105+	不支持
@property	85+	不支持	14.1+	85+	不支持
@counter-style	91+	33+	不支持	91+	不支持
@page	2+	19+	5+	12+	8+
@charset	2+	1+	4+	12+	5.5+
@namespace	1+	1+	1+	12+	9+

相关资源

• MDN CSS @规则
• CSS 规范
• Can I Use - CSS 特性支持情况