RUNWEBTOOLS
繁體中文

CSS 格式化

在瀏覽器中美化並整理雜亂或壓縮的 CSS。

即時 — 邊輸入邊格式化

範例

美化壓縮的 CSS

輸入

.btn{color:#fff;background:#000;padding:8px 16px;}

輸出

.btn {
  color: #fff;
  background: #000;
  padding: 8px 16px;
}

整理不一致的間距

輸入

a{color:blue;}  a:hover{color:red;}

輸出

a {
  color: blue;
}

a:hover {
  color: red;
}

關於此工具

這個免費線上 CSS 格式化工具把雜亂或壓縮的樣式表變成整潔、縮排整齊的 CSS——一個快速的 CSS 美化和格式化工具。貼上你的 CSS,選擇縮排樣式,格式化結果立即出現。一切都在你的瀏覽器中執行,不上傳,你的程式碼絕不會離開你的裝置。

使用方法

  1. 把 CSS 貼到輸入框(點擊範例試用)。
  2. 選擇 2 空格、4 空格或定位字元縮排。
  3. 在右側輸出框查看美化後的 CSS。
  4. 用複製按鈕複製結果。

何時使用 CSS 格式化工具

從建置好的套件複製壓縮 CSS、接手間距不一致的樣式表,或在編輯前想讀懂某條規則時,重新格式化很有用。一致的縮排讓選擇器和巢狀一目了然,diff 也保持乾淨。

常見問題

這個 CSS 格式化工具免費嗎?

免費 — 無須註冊、無限制的完全免費線上 CSS 格式化和美化工具。想格式化和縮排多少 CSS 都行。

我的 CSS 會上傳到伺服器嗎?

不會。這是不上傳的工具——你的 CSS 完全在瀏覽器中格式化,所以程式碼絕不會離開你的裝置。對私密或內部樣式表也安全。

CSS 美化器做什麼?

它把每條規則和宣告各放一行,正規化大括號、冒號和分號周圍的間距,並重新縮排一切,讓壓縮或雜亂的 CSS 變得易讀。

我能選擇縮排嗎?

能——選 2 空格、4 空格或定位字元。你的選擇會記在瀏覽器中,下次仍在。

它能處理 SCSS 或 Less 嗎?

由於結構類似 CSS,它在縮排和整理方面能很好地處理大多數 SCSS 和 Less 語法。它是格式化而非編譯——不會展開巢狀或變數。

它能展開壓縮的 CSS 嗎?

能。貼上單行或壓縮的樣式表,它會把它展開成正確縮排、易讀的規則集。

離線和手機上能用嗎?

頁面載入後它在本地執行,所以在網路不穩時仍能運作,版面在手機和平板上完全響應式。

相關工具