CSS 美化

将紧凑的 CSS 格式化为可读的规则、选择器和声明。

输入
输出
0 字符 0 行

使样式表更易于阅读和审查

CSS 美化 将紧凑的 CSS 扩展为可读的选择器、声明块、属性和值。 它有助于调试复制的样式、检查生成的 CSS、检查框架输出或准备示例。

美化改变布局，而不是级联语义。选择器顺序、重复声明、自定义属性、注释、媒体查询和图层顺序应保持不变，因为这些细节可能会影响最终样式。

使用方法

  1. 将 CSS 代码粘贴到输入编辑器中。
  2. 单击 美化 CSS 以重排规则和声明。
  3. 检查输出中保留的选择器顺序、注释和 at 规则。
  4. 使用 复制 作为剪贴板，使用 下载 作为文件，或使用 清除 进行重置。

什么是CSS美容仪？

CSS 美化 是一个基于浏览器的实用程序，用于使样式表更易于扫描。它将规则块和声明分开，这样您就可以检查选择器、属性、值和 at 规则，而无需读取密集的一行文件。

CSS 行为取决于级联顺序、特异性、继承、层和自定义属性解析。格式化不应重新排序规则或声明；验证浏览器中重要的样式表更改。

输入说明

仅粘贴 CSS，包括 @media、@supports 和 @layer 等 at 规则。将输出复制回项目时，保持选择器和声明顺序不变。

示例

一旦每个声明都放在自己的行上，密集的 CSS 就变得更容易扫描：

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

MCP 集成

MCP（Model Context Protocol，模型上下文协议）让 AI 代理和应用可以发现并调用 Coding.Tools 工具，用于可重复的转换、格式化、哈希和生成工作流。

MCP 工具名: css-beautifier

MCP 端点: https://coding.tools/mcp

请先调用 tools/list。每个工具条目都会包含 inputSchema、outputSchema 和 examples，AI 代理或客户端可以据此生成合法参数，不需要猜。

调用 tools/call 后，result.content[0].text 是展示用结果，result.structuredContent 是适合程序解析的结构化结果。工具级失败会返回 isError: true；协议级失败会返回 JSON-RPC error。

tools/call 请求示例：

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

大多数文本和数据工具接收 input 字符串以及可选的 options。只依赖浏览器图片 API 的图片工具会用于发现，并在需要浏览器能力时返回网页入口。