CSS 格式化/压缩工具
在线格式化美化 CSS 代码，或压缩 CSS 减小文件体积。支持 15+ 压缩选项、颜色简化、数值简化、选择器合并、属性合并、文件上传。所有处理在浏览器本地完成，数据不上传服务器。
输入 CSS 代码
输出结果
什么是 CSS 格式化/压缩？
CSS 格式化（CSS Beautification）是指通过添加缩进、换行等格式，使压缩后的 CSS 代码恢复可读性。CSS 压缩（CSS Minification）是指去除 CSS 代码中不影响渲染的多余字符，减小文件体积的技术。
格式化原理
CSS 格式化主要进行以下操作：
- 选择器分行 — 每个选择器单独一行
- 属性分行 — 每个属性单独一行，添加缩进
- 添加缩进 — 支持 2 空格、4 空格、Tab 缩进
- 大括号对齐 —
{在选择器后，}单独一行 - 保留注释 — 可选保留或删除注释
压缩原理
CSS 压缩主要去除以下内容：
- 空白字符 — 多个连续空格合并为一个，或完全删除
- 换行符 — 删除所有换行，输出为单行
- CSS 注释 —
/* 注释内容 */全部删除 - 最后一个分号 —
color:red;}→color:red} - 空规则 — 空选择器
{}删除 - 颜色值简化 —
#ffffff→#fff - 数值单位简化 —
0px→0 - 选择器合并 — 相同选择器的属性合并
- 属性合并 — 相同属性的选择器合并
压缩效果
通常 CSS 文件压缩后体积可减少 20%~40%，使用「极限压缩」模式（开启选择器合并、属性合并等）可获得更高的压缩率。
常见使用场景
- 生产环境部署 — 上线前压缩 CSS，提升页面加载速度
- 调试维护 — 格式化压缩后的 CSS，便于阅读和修改
- 节省带宽 — 减少服务器流量消耗，降低 CDN 成本
- SEO 优化 — 页面加载速度是 Google 排名因素之一
- 代码审查 — 格式化后便于团队协作和代码审查
预设模式说明
- 格式化 — 仅格式化，添加缩进和换行，不压缩
- 普通压缩 — 删除注释、空白，保留换行
- 完全压缩 — 删除注释、空白、换行，单行输出
- 极限压缩 — 开启所有压缩选项，包括选择器合并、属性合并、数值简化等，体积最小
常见问题（FAQ）
CSS 压缩会影响页面功能吗？
不会。CSS 压缩只去除对渲染无影响的字符（空白、换行、注释），不会修改选择器和属性值。压缩后的代码功能与原始代码完全一致。选择器合并和属性合并是安全的优化操作。
压缩后的 CSS 能恢复吗？
可以。使用本工具的「格式化」功能，可以将压缩后的单行 CSS 重新添加缩进和换行，恢复可读性。但被删除的注释无法恢复，被合并的选择器和属性也不会自动还原。
数据会上传到服务器吗？
不会。本工具所有处理均在浏览器本地完成，你的 CSS 代码不会上传到任何服务器，确保数据安全和隐私。
选择器合并和属性合并有什么区别？
选择器合并是将相同选择器的多个属性合并为一个规则，如 .a{color:red}.a{font-size:12px} → .a{color:red;font-size:12px}。属性合并是将具有相同属性值的不同选择器合并，如 .a{color:red}.b{color:red} → .a,.b{color:red}。
压缩率一般是多少？
通常在 20%~40% 之间。注释多、缩进深、有重复属性的代码压缩率更高。使用「极限压缩」模式可获得最大压缩率，但可能影响代码可读性和可维护性。
颜色值简化安全吗？
安全。颜色值简化只将可简化的十六进制颜色简化，如 #ffffff → #fff，#aa0000 → #a00。对于不能简化的颜色值（如 #abc123）保持不变。RGB/RGBA 简化会将 rgba(255,0,0,1) 转换为 red 等颜色名称。