CSS格式化工具

专业的CSS代码美化、压缩和验证工具

格式化设置

显示设置

辅助工具

字符数: 0
行数: 0
CSS规则: 0
状态: 未验证
源代码
格式化后
压缩后
错误信息
转换输出

使用说明

基本功能

  • 在左侧文本框中粘贴CSS代码，点击「格式化」按钮美化代码，点击「压缩」按钮减小文件体积
  • 使用标签页切换不同的视图：源代码、格式化后、压缩后、错误信息和转换输出
  • 点击「验证」按钮检查CSS语法错误
  • 使用「清空」按钮清除输入内容，「加载示例」按钮查看示例代码

格式化选项

  • 缩进大小：控制代码缩进的空格数或使用Tab
  • 最大行长度：设置代码行的最大长度，超过会自动换行
  • 换行样式：选择Unix或Windows风格的换行符
  • 删除注释：压缩时是否删除CSS注释
  • 保留 !important：在压缩时保留!important标记
  • 排序选择器：按字母顺序排列CSS选择器

辅助功能

  • 转换功能：支持CSS转Sass、CSS转Less
  • 提取颜色：分析并提取CSS中使用的所有颜色值
  • 添加前缀：自动添加浏览器兼容性前缀
  • 优化建议：分析CSS并提供优化建议
  • 移除前缀：清除冗余的浏览器前缀

快捷键

  • Ctrl+Shift+F：格式化代码
  • Ctrl+Shift+M：压缩代码
  • Ctrl+Shift+V：验证代码
  • Ctrl+Shift+S：保存文件
  • Ctrl+Shift+L：加载示例
  • Ctrl+Shift+X：清空内容

常见问题

  • Q: 为什么我的CSS无法格式化？
    A: 可能是代码中存在语法错误，请先点击「验证」按钮检查错误。
  • Q: 压缩后的CSS是否会丢失功能？
    A: 不会，压缩只会删除空白字符、注释等，不会改变CSS的功能。
  • Q: 如何导出格式化后的CSS？
    A: 可以使用「复制」按钮复制，或使用「保存文件」按钮下载为CSS文件。