免费注册

CSS 格式化

粘贴压缩过或挤在一起的 CSS,还原成每条声明一行、缩进整齐的样式。

关于CSS 格式化

CSS 格式化让样式表重新变得好读:主题自带的 style.min.css 里只想改一个颜色,想看看别的网站是怎么写布局的,或者接手的样式表经过好几个人修改,写法五花八门。把 CSS 贴进来或打开文件,格式化后的结果随输入实时出现,改起来不用在一长串代码里找来找去。要改颜色的话,颜色代码转换能给出 HEX、RGB、HSL 各种写法。

每条声明单独一行,冒号后面补一个空格,缩进可选 2 空格、4 空格或 Tab。@media、@supports、@layer 这类嵌套规则会多缩进一层,哪些样式属于哪个断点、哪个条件,一眼就能看清。注释全部保留,引号里的字符串,比如 content 的值和带引号的字体名,原样不动。改完要上线时,再用 CSS 压缩压回去。全部在浏览器里处理,样式表不会上传,页面加载后断网也能用。

CSS 格式化怎么用

  1. 1
    粘贴 CSS

    粘贴样式代码,或打开本地的 CSS 文件。

  2. 2
    选缩进

    选 2 空格、4 空格或 Tab,CSS 格式化结果实时更新。

  3. 3
    复制或下载

    复制格式化后的 CSS,或下载成文件。

为什么用熊仔工匠

  • 每条声明一行

    每个属性单独一行,冒号后自动加空格。

  • 嵌套规则分层

    @media、@supports、@layer 里的规则多缩进一层。

  • 注释、字符串不动

    注释保留,引号里的内容原样不变。

  • 本地运行

    不上传、不占次数,页面加载后断网也能用。

常见问题

CSS 格式化常见问题

压缩过的 CSS 怎么还原?
把压缩的 CSS 粘贴进来或打开文件,选好缩进,就会展开成每条声明一行,复制或下载即可。
CSS 格式化会改变样式效果吗?
不会。只调整空格、换行和缩进,选择器、属性值、注释和字符串都不变,浏览器应用的样式完全一样。
能处理 @media 媒体查询吗?
能。@media、@supports、@layer 里的规则会比外层多缩进一层,互相嵌套也能分清。
HTML 里的 style 样式能格式化吗?
请用 HTML 格式化,它会把内嵌的 style 块和网页代码一起重新缩进。
CSS 代码会上传吗?
不会。格式化在浏览器里完成,不用注册,也不占每日次数。
把CSS 格式化分享给朋友打开浏览器就能用,对方不注册也能先试。

相关工具

HTML HTML 格式化把杂乱的 HTML 按层级缩进,一目了然。
JS JS 格式化美化压缩过或排版混乱的 JavaScript。
HEX 颜色代码转换颜色在 HEX、RGB、HSL、CMYK 之间互转,并检查对比度。
CRON Cron 表达式生成与解析生成 Cron 表达式,用大白话说明含义并列出接下来的执行时间。
CSS CSS 压缩压缩 CSS,让网页加载更快。
HTML HTML 压缩去掉注释和多余空白,压缩 HTML。
HTTP 在线 HTTP 请求测试向公开的接口发送 GET、POST 等请求,查看返回结果。
JS JS 压缩去掉 JavaScript 的注释和空白,不改变运行结果。