01 HOWTO
格式模式和代码输入区域
在顶部选择格式模式，并将要格式化或压缩的代码粘贴到左侧编辑器。也可在这里清空或复制输入内容。
这个区域可以做什么
- 可以选择格式模式
- 可以输入要处理的代码
- 可以清空输入
- 可以复制原始输入
操作位置
01
格式模式
在带缩进的格式化和压缩输出之间切换。
02
代码输入
将要格式化或压缩的代码粘贴到左侧编辑器。
03
清空输入
清空编辑器，用另一段代码重新开始。
04
复制输入
可以在处理前复制原始代码。
适用场景
适合在这些时候使用
- 让混乱的 CSS 更易阅读
- 复用前检查样式规则
- 发布前压缩 CSS
- 整理 CSS 便于分享
可实现内容
这个工具可以做什么
- 格式化和压缩 CSS
- 切换缩进方式
- 复制输入和结果
- 切换行号和自动换行
指南
各画面区域的使用方法
按画面区域说明设置、输入、预览、结果和保存等操作方法。
02 HOWTO
格式化和压缩模式区域
需要阅读检查时使用格式化，需要嵌入或传输时使用压缩。选择的模式会反映到右侧结果。
这个区域可以做什么
- 可以格式化代码
- 可以压缩代码
- 可以确认处理结果
- 可以修改输入后重新处理
操作位置
01
格式化模式
加入换行和缩进，让代码更容易检查。
02
压缩模式
移除多余空白和换行，生成更短代码。
03
结果栏
确认当前模式生成的结果。
04
检查输入
结果不符合预期时，回到左侧编辑器修改。
03 HOWTO
结果确认和复制区域
在右侧结果栏确认格式化或压缩后的代码，确认无误后复制。可根据用途切换格式化结果和压缩结果。
这个区域可以做什么
- 可以确认处理后的代码
- 可以复制结果
- 可以使用格式化结果
- 可以使用压缩结果
操作位置
01
确认结果
检查处理后的代码是否符合预期。
02
复制结果
将处理后的代码复制到编辑器、CMS 或管理界面。
03
使用格式化结果
将易读结果用于审查或共享。
04
使用压缩结果
将紧凑结果用于嵌入或传输。
04 HOWTO
重新编辑和重试区域
结果不符合预期时，检查输入、格式模式和复制目标。也可以清空编辑器，用另一段代码重试。
这个区域可以做什么
- 可以修改输入代码
- 可以清空后重试
- 可以重新选择模式
- 可以确认并复制结果
操作位置
01
修正输入
检查语法或粘贴范围，再重新处理。
02
清空输入
删除当前输入，用新代码重新开始。
03
重新选择模式
在格式化和压缩之间切换，并确认结果。
04
复制结果
确认修正后的结果后再复制。
注意事项
注意事项
将使用前应先判断的重要点按原因归纳整理。
确认事项
处理前先选择目标语言
格式化与压缩会按当前选中的语言规则执行。请先确认要处理的是 HTML、CSS 还是 JavaScript。
确认事项
压缩前先确认格式化结果
压缩会移除大量空格与换行。如果可读性更重要，建议先查看格式化结果，再决定最终输出。
注意
不支持 TypeScript、SCSS 等其他语言
本工具仅支持 HTML、CSS 和 JavaScript，不支持 TypeScript、SCSS 和 JSX。使用前请先确认目标语言。
FAQ
关于 CSS 格式化工具 的常见问题
这里先整理能帮助使用前判断的常见问题。
可以处理 CSS 以外的内容吗？
此页面仅用于 CSS。HTML 请使用 HTML 格式化工具。
压缩会重写 CSS 结构吗？
压缩会减少不必要的空白，并避免激进的结构改写。
输入内容会发送到服务器吗？
不会。格式化和压缩都在浏览器内完成。
下一步指南
相关指南
这里整理了相关指南，便于继续操作时不迷失。
