CSS 格式化与美化

粘贴 CSS 或压缩后的 CSS,可美化为带缩进的版本,也可压缩为生产环境用的单行版本。

功能特性

美化 / 压缩一键切换
属性排序
去除重复项

使用方法

1. 把 CSS 粘贴到左侧的输入框。

2. 点击「格式化」美化,或点击「压缩」压缩。

3. 在右侧面板复制格式化后的结果。

关于这个工具

压缩过或被多人手改的 CSS 很难审阅:一整行代码会掩盖重复规则、缺失的分号和样式覆盖。这个格式化工具把样式表重建为每条声明一行,使用两个空格、四个空格或制表符统一缩进,同时完整保留字符串、注释以及 @media、@supports 等嵌套块。“压缩”则反过来,为生产环境去掉注释和多余空白,减小传输体积。你可以直接粘贴代码或拖入 .css 文件,然后复制或下载结果。格式化只改变排版——规则的顺序和含义完全不变,层叠效果和之前一样。

常见问题

格式化会改变 CSS 的效果吗?
不会。格式化只改变空白和换行,选择器、声明及其顺序都保持不变,所以优先级和层叠规则与之前完全相同。
压缩 CSS 能节省多少?
去掉注释和空白通常能让手写的样式表缩小 15–30%。配合 gzip 或 Brotli 压缩传输能节省更多,生产环境建议两者都用。
支持 @media、@supports 和嵌套规则吗?
支持。@ 规则和嵌套块会按层级缩进,其中的内容与普通规则一样被格式化,媒体查询依然便于浏览。
注释会保留吗?
格式化时保留块注释并让它们单独成行;压缩时会删除注释,因为浏览器不需要它们。
格式化工具会检查 CSS 错误吗?
不会校验属性名和属性值。它只格式化收到的内容,所以 colr: red 这样的拼写错误会原样保留;请用编辑器或 Stylelint 等检查工具来发现错误。

相关工具