开发者工具 / 16

CSS格式化与美化工具

将CSS规则、选择器列表和属性声明格式化、缩进并展开为易读的代码。

CSS格式化与美化工具: TOEA会解析CSS规则、媒体查询和声明，统一属性间距和代码块缩进。完全在浏览器中本地运行，文件不会上传到服务器。

类别: 开发者工具
使用次数: 在浏览器中
费用: 免费·无需注册
可用性: 可直接使用

CSS格式化与美化工具本地处理

完全在浏览器中运行

美化后的CSS输出

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

阅读他人的样式表

格式化压缩文件会让它更易读，但结果不会与原始文件完全相同：压缩工具会合并规则并重新排列声明，因此应预期会看到分组选择器和简写值。要查找哪个规则设置了某个元素的样式，浏览器的开发者工具更快，其Sources面板还可以直接美化压缩文件。分别格式化样式表的两个版本，然后在差异检查工具中比较，即可查看更新改动了什么。

格式化不会改变什么

格式化工具只会添加缩进和空格；它不会对属性排序、修复拼写错误的属性名、添加厂商前缀或删除重复声明，因此colour: red会原样通过。连续空白会在所有位置被合并，包括引号内的字符串，因此请检查依赖多个空格的content值。文件准备发布时，请使用CSS压缩器再次压缩。

使用方法

粘贴原始或压缩后的CSS代码。
选择2个空格或4个空格缩进。
点击“格式化CSS”，然后复制或下载结果。

隐私与限制

所有CSS格式化操作都在您的浏览器中本地运行。

常见问题

支持@media查询吗？

支持，嵌套的at-rule和媒体查询会以正确的缩进进行格式化。

会修改颜色代码或选择器吗？

不会，格式化只会调整空白、缩进和结构，不会更改属性值。

免费工具·使用在浏览器中次·无需账户