输入
开发工具
CSS 格式化工具
无需上传代码即可美化或压缩 CSS，查看规则、选择器和声明统计，检查基础语法提示，并在隔离预览中测试结果。
大小
规则
选择器
声明
输出
格式化或压缩后的 CSS
语法提示
CSS 问题与警告
结构
选择器与声明摘要
| # | 选择器 / at-rule | 声明 | 属性 |
|---|
隔离预览
使用你的 CSS 渲染示例
预览运行在带严格内容安全策略的沙箱框架中，样式不会影响本页，远程资源也会被阻止。
示例
常用 CSS 示例
CSS 快速参考
| 概念 | 示例 | 说明 |
|---|---|---|
| 规则 | .card { padding: 16px; } | 选择器后跟声明块。 |
| 声明 | color: #333; | 属性和值之间用冒号分隔。 |
| 自定义属性 | --accent: #16735f; | 名称以两个连字符开头的可复用 CSS 变量。 |
| 媒体查询 | @media (max-width: 640px) | 条件匹配时应用嵌套规则。 |
| 关键帧 | @keyframes fade | 定义 CSS 动画的各个步骤。 |
格式化与检查说明
感知字符串的格式化修改结构空白前会识别带引号字符串、注释和括号内容。
保守压缩删除不必要空白，同时保留 calc() 等函数内部所需的间距。
轻量语法检查提示覆盖分隔符配对、未闭合字符串或注释以及声明缺少冒号。完整标准检查请使用专业解析器或 linter。
本地处理CSS 始终保留在浏览器中，格式化、统计、检查和预览均不会上传输入。
CSS 格式化工具常见问题
此 CSS 格式化工具会上传代码吗？
不会。格式化、压缩、统计、语法提示和预览均在浏览器本地运行。
它可以替代完整的 CSS linter 吗？
不能。它能发现常见结构问题，但标准符合性、浏览器兼容性和项目规则仍需专业解析器或 linter。
压缩 CSS 会改变其行为吗？
压缩器会保留字符串、按选项保留注释，并保留函数内部间距。部署前仍应测试特殊旧式 hack 或构建工具指令。
CSS 预览与页面隔离吗？
是。预览使用沙箱 iframe 和严格内容安全策略，并阻止远程资源。