Softonic

CSS 格式化工具

步 1 / 2
格式化 CSS

在 DevTools 中打开生产样式表时，所有内容均显示为单行格式。该格式化工具可将压缩后的 CSS 代码转换为可读形式：每行仅包含一个声明、保持统一的缩进、规范括号位置，并在规则之间空一行。该工具适用于原始 CSS 代码、Sass 或 PostCSS 生成的输出结果以及内联 <style> 块内的 CSS。您粘贴的 CSS 会被发送到我们的服务器进行格式化，并在您切换工具的各个步骤时随页面链接一同传递。格式化时会删除块注释。

如何格式化 CSS

  1. 1

    粘贴 CSS

    单行缩写、部分格式化或已美化形式。解析器均不予理会。

  2. 2

    格式化

    点击"格式化 CSS"按钮。每条声明都会移至自己的行并采用两个空格缩进，规则之间用空行分隔。

  3. 3

    检查

    检查输出结果。属性顺序保持不变，但块注释会被删除。

  4. 4

    复制

    将格式化后的 CSS 复制到剪贴板，然后粘贴回您的项目中。

之前与之后

输入（压缩形式）：

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

输出（格式化后）：

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

格式化工具的功能

行为 值
声明 每行一条，采用两个空格缩进
规则之间的空行 1
左花括号 与选择器位于同一行
右花括号 独占一行
属性顺序 保持不变，从不重新排序
块注释 格式化时删除

格式化工具会删除的内容

/* 此注释在格式化后会消失 */
.button { background: #2563eb; }

块注释（/* ... */）会从输出中移除。如果需要保留它们，请在格式化前保存原始文件的副本。

处理嵌套规则（Sass/现代CSS嵌套）

格式化工具会根据嵌套规则的深度进行缩进：

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

亦可使用不含 & 的 Sass/Less 语法。@mixin、@include 和 @extend 等 Sass 专用 at 规则会原样保留，但不会被深度重新格式化。如需完整的 Sass 格式化效果，请使用 Prettier 等支持 Sass 格式化的工具。

不要格式化的场景

  • 生产环境：仅进行压缩处理，不进行格式化。已格式化的 CSS 文件体积是压缩后版本的 2 至 3 倍。
  • 差异分析前：需对两侧内容进行格式化处理。将压缩文件与格式化文件进行差异分析时，生成的差异结果将无法阅读。
  • 构建流程中：可由 Prettier 或您框架自带的格式化工具负责确保代码一致性；该工具适用于一次性清理任务。

常见问题

该工具支持标准 CSS 及 CSS 嵌套（2023 年规范）。Sass 特有的语法（如 @mixin、@include、@extend）以及带有 $ 的变量均保持原样传递，但不会进行深度格式化处理。如需完整的 Sass 格式化效果，请使用 Prettier 等支持 Sass 格式化的工具。

是的。格式化在我们的服务器上执行，因此您粘贴的 CSS 会随每次格式化请求一起发送，并在您切换工具的各个步骤时随页面链接一同传递。它不会保存到任何账户中，也不会在之后被重复使用。

不会，前提是语法有效。在 CSS 中，空白字符在数值之外并无意义，格式化工具仅会重新排列空白字符和换行符。声明顺序和数值本身都将保持不变。

可以。复制 <style> 标签内的 CSS，粘贴并格式化后再粘贴回去。格式化工具仅处理 CSS，因此请粘贴 CSS 内容，而不是其周围的 HTML。

格式化工具会删除块注释（/* ... */）以保持输出统一。如果您想保留它们，请在格式化前保存原始 CSS 的副本。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本