CSS 格式化是指将 CSS 代码组织成更易读和规范的格式，以便开发人员能更方便地查看和修改。格式化的 CSS 代码通常具有清晰的缩进、适当的空格和换行，以提高代码的可维护性和可读性。
CSS 格式化的特点：
清晰的缩进和对齐：每个规则和属性在新的一行开始，并且使用缩进使层级结构清晰。
适当的空格：在冒号（:）前后添加空格，以提高可读性。
分号：每个属性值后面加上分号（即使是最后一项），以保持一致性。
换行：每个属性占一行，避免过长的行，让代码更易读。
注释：适当的注释能帮助理解 CSS 的目的和功能。
格式化前和格式化后的对比
原始 CSS（压缩）
css
body{margin:0;padding:0;}h1{color:red;font-size:24px;}p{line-height:1.5;}
格式化后的 CSS（可读性更强）
css
body {
margin: 0;
padding: 0;
}
h1 {
color: red;
font-size: 24px;
}
p {
line-height: 1.5;
}
CSS 格式化方法
手动格式化：可以通过手动缩进、添加换行符和空格等方式来格式化 CSS 代码。这种方法适用于小型的样式表。
在线工具：有很多在线工具可以帮助自动格式化 CSS 代码。例如：
CSS Formatter & Beautifier
Free CSS Formatter
代码编辑器和 IDE：许多代码编辑器（如 VSCode、Sublime Text、Atom 等）都有内置或插件支持自动格式化 CSS 代码。
使用构建工具：使用 CSS 预处理器（如 Sass、LESS）时，可以通过工具链中的格式化功能来格式化 CSS。
使用在线工具进行格式化
例如，使用 CSS Formatter & Beautifier：
将你的 CSS 代码粘贴到输入框中。
点击"Beautify"按钮。
工具会自动格式化你的 CSS 代码，输出格式化后的代码。
使用构建工具进行自动化格式化
使用 Prettier
Prettier 是一个流行的代码格式化工具，支持多种语言，包括 CSS。你可以使用 Prettier 来自动化格式化过程。
安装 Prettier：
bash
npm install --save-dev prettier
使用 Prettier 格式化 CSS：
在你的项目根目录下创建一个 .prettierrc 文件，配置 Prettier：
json
{
"singleQuote": true,
"semi": false,
"tabWidth": 2
}
格式化你的 CSS 文件：
bash
npx prettier --write src/styles.css
Prettier 会根据你在 .prettierrc 文件中的配置自动格式化你的 CSS 代码。
使用 VSCode 的格式化功能
如果你使用的是 VSCode 编辑器，可以通过以下步骤格式化 CSS 代码：
打开 VSCode 编辑器并安装 Prettier 插件（如果尚未安装）。
打开 CSS 文件。
按下 Shift + Alt + F （Windows）或 Shift + Option + F （Mac）来格式化文件。
小结
CSS 格式化有助于提升代码的可读性和可维护性，尤其在团队合作中尤为重要。你可以使用手动格式化、在线工具、代码编辑器的内置功能或构建工具（如 Prettier）来格式化 CSS 代码。格式化后的 CSS 使得每个规则和属性清晰可见，便于开发和调试。