🎨 CSS 在线格式化
整理样式表结构：一键美化缩进或压缩体积，与 HTML/JS 格式化工具配套使用。
输入 CSS
输出
什么是 CSS 在线格式化？
CSS 格式化用于把压缩包、构建产物或 DevTools 里复制的「一行 CSS」还原为分层缩进的可读代码；CSS 压缩则删除空白与注释以减小文件体积。前端开发者常搜索「CSS 格式化在线」「CSS 美化」「CSS minify」等词，在改样式、排查层叠冲突或上线前优化资源时使用。
典型使用场景
- 阅读第三方主题：快速理解选择器层级与
@media断点。 - 重构旧项目：把历史压缩 CSS 展开后再拆分模块。
- 上线前优化：压缩自定义样式片段，减少 HTML 内联体积。
- 学习与面试：演示 Flex/Grid、动画关键帧结构。
操作步骤
- 粘贴 CSS 到输入框（可含
@import、@media、@keyframes）。 - 点击格式化获得缩进结构；点击压缩得到紧凑版本。
- 用示例 CSS体验卡片布局样式；复制结果到项目或文档。
示例：压缩前 → 格式化后
.card{display:flex;padding:12px}@media (max-width:600px){.card{padding:8px}}
.card {
display: flex;
padding: 12px;
}
@media (max-width: 600px) {
.card {
padding: 8px;
}
}
美化 vs 压缩
| 目标 | 操作 | 注意 |
|---|---|---|
| 读懂结构、改样式 | 格式化 | 保留注释（若有） |
| 减小体积 | 压缩 | 会删除注释 |
| 检查对比度 | — | 用 颜色无障碍 |
| 配套 HTML/JS | — | HTML · JS 格式化 |
局限说明
本工具基于通用规则排版，不替代 PostCSS/Sass 等预处理器编译，也不保证 100% 符合团队 Stylelint 规范。含复杂嵌套、自定义属性或大型设计系统时，建议在 IDE 中二次整理。处理在本地完成，不上传样式代码。
常见问题
压缩后样式不生效怎么办？
先确认是否误删必要分号；再在浏览器 DevTools 查看计算后样式。若仍异常，请对比压缩前后差异。
支持 Less / Sass 吗？
页面处理的是 CSS 文本；预处理器请先编译为 CSS 再粘贴。
会改动颜色值或选择器吗？
不会改写属性值与选择器名称，仅处理空白与换行（压缩时去注释）。