Công cụ dành cho nhà phát triển / 16

Định dạng & Làm đẹp CSS

Định dạng, thụt lề và mở rộng quy tắc CSS, danh sách bộ chọn cùng khai báo thuộc tính thành mã dễ đọc.

Định dạng & Làm đẹp CSS: TOEA phân tích các quy tắc CSS, truy vấn media và khai báo, đồng thời chuẩn hóa khoảng cách quanh thuộc tính và thụt lề khối. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục: Công cụ lập trình viên
Lượt chạy: Trong trình duyệt của bạn
Chi phí: Miễn phí · không cần đăng ký
Trạng thái khả dụng: Sẵn sàng sử dụng

Công cụ định dạng và làm đẹp CSSXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

CSS đầu ra đã làm đẹp

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Đọc stylesheet của người khác

Định dạng một tệp đã được thu gọn giúp tệp dễ đọc, nhưng không khiến nó giống nguồn ban đầu: công cụ thu gọn gộp các quy tắc và sắp xếp lại khai báo, nên hãy chờ đợi các bộ chọn được nhóm và các giá trị viết tắt. Để tìm quy tắc định dạng một phần tử, công cụ dành cho nhà phát triển của trình duyệt nhanh hơn, và bảng Sources của chúng có thể định dạng đẹp một tệp đã thu gọn ngay tại chỗ. Định dạng hai phiên bản stylesheet rồi so sánh chúng bằng công cụ kiểm tra khác biệt sẽ cho biết bản cập nhật đã thay đổi gì.

Định dạng không thay đổi những gì

Công cụ định dạng thêm thụt lề và khoảng cách; công cụ không sắp xếp thuộc tính, sửa tên thuộc tính viết sai, thêm tiền tố nhà cung cấp hoặc xóa khai báo trùng lặp, nên colour: red vẫn được giữ nguyên. Các chuỗi khoảng trắng liên tiếp bị thu gọn ở mọi nơi, kể cả bên trong chuỗi đặt trong dấu ngoặc kép, vì vậy hãy kiểm tra các giá trị content phụ thuộc vào nhiều khoảng trắng. Khi tệp đã sẵn sàng để phát hành, hãy nén lại bằng công cụ thu gọn CSS.

Cách sử dụng

Dán mã CSS thô hoặc đã được thu gọn.
Chọn thụt lề 2 hoặc 4 dấu cách.
Nhấp vào Định dạng CSS, sau đó sao chép hoặc tải xuống kết quả.

Quyền riêng tư và giới hạn

Mọi thao tác định dạng CSS đều chạy cục bộ trong trình duyệt của bạn.

Công cụ liên quan

Câu hỏi thường gặp

Công cụ có hỗ trợ truy vấn @media không?

Có. Các quy tắc at lồng nhau và truy vấn media được định dạng với thụt lề phù hợp.

Công cụ có thay đổi mã màu hoặc bộ chọn không?

Không. Công cụ chỉ điều chỉnh khoảng trắng, thụt lề và cấu trúc mà không thay đổi giá trị thuộc tính.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản