CSS输入
CSS输出
关于 CSS 格式化工具
CSS 格式化工具帮助你美化或压缩 CSS 代码，基于 CSS 词法分析器逐 token 解析，正确处理选择器、声明块、属性值、注释和嵌套规则。完整支持 @media 响应式查询、@keyframes 关键帧动画、@supports 特性检测、@font-face 字体定义、@import 导入规则等 at-rule，以及 CSS Variables 自定义属性、:where() 与 :is() 伪类函数和 calc() 计算函数。提供 2 空格、4 空格和 Tab 缩进选项，美化与压缩模式一键切换。例如把一行压缩 CSS 展开为每条规则独立成行的格式，选择器、属性与值一目了然。统一缩进后再进入代码评审，能减少因格式差异造成的无关改动；压缩模式适合放进生产构建产物，需要改回可读格式时也只需一键切换。格式化对 :root 变量、层叠顺序和重复声明也能清晰呈现，协助定位覆盖优先级等问题。
使用方法
- 打开「CSS 格式化工具」
- 选择源格式与目标格式
- 根据需要调整输出选项
- 点击「转换」按钮，结果实时显示
- 复制或导出结果
使用场景
- 规则/层堆叠梳理 — 把压缩 CSS 按选择器规则的层次展开，理清 @media、@keyframes 与普通规则的堆叠关系。
- 项目整理 — 统一项目中 CSS 代码的缩进和格式风格，提升代码一致性。
- 样式审查 — 在审查前格式化 CSS，使选择器和属性结构更清晰。
- 压缩产物 — 将 CSS 压缩为单行紧凑格式，移除空白，用于生产构建。
- 排查覆盖问题 — 展开压缩样式后，对照选择器权重与重复声明，定位样式不生效的根因。
常见问题
格式化会改变 CSS 样式吗？
不会。格式化只调整缩进、换行和空格，不改变选择器、属性或值的语义，渲染效果保持不变。
支持 @media 和 @keyframes 吗？
支持。正确处理媒体查询、关键帧动画、@supports 等 at-rules 的嵌套和缩进。
支持压缩模式吗？
支持。切换到压缩模式可以移除多余空格和换行，生成最小化的 CSS 代码。
压缩会保留注释吗？
压缩模式默认移除普通注释；如需保留某些说明（如许可证版权头），可在压缩前手动处理或使用保留注释选项。
支持 calc() 和 CSS 变量吗？
支持。calc() 计算函数、var() 自定义属性引用以及 :where()/:is() 伪类都会保持结构正确排版。
压缩代码能还原成可读吗？
可以。用美化模式一键还原缩进，选择器与声明逐条展开，适合在排查问题时读回压缩产物。
广告