免費註冊

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 的註釋和空白,不改變執行結果。