Thuộc tính tắt (Shorthand Properties) CSS

Tìm hiểu cách dùng thuộc tính tắt CSS (CSS shorthand properties) để bảng định kiểu gọn nhẹ hơn.

Thuộc tính tắt CSS cho phép bạn viết ít mà làm nhiều.

Giả sử bạn muốn định kiểu h1 với font-family Georgia, font-size 42 pixel, line-height 1.25.

Trước, xem phương pháp CSS bình thường:

h1 { font-family: "Georgia", "serif"; font-size: 42px; line-height: 1.25; }

Bây giờ so sánh với phương pháp tắt CSS font:

h1 { font: 42px/1.25 "Georgia", "serif"; }

Ba dòng gộp thành một!

Thuộc tính tắt hoạt động bằng cách gộp nhiều khai báo kiểu thành một dòng và cho phép code gọn hơn.

Mã tắt có thể không dễ đọc như phương pháp thường, vì phương pháp thường diễn đạt rõ hơn. Tuy nhiên, đó là vì nó mới. Nó sẽ thành thói quen nhanh khi bạn bắt đầu dùng.

Hãy xem thêm ví dụ shorthand CSS để bám chắc.

Đây là nút bấm với padding trên/dưới 12px, trái/phải 20px:

Nó dùng các thuộc tính padding sau:

button { padding-top: 12px; padding-right: 20px; padding-bottom: 12px; padding-left: 20px; }

Bây giờ dùng thuộc tính tắt padding và làm CSS gọn hơn:

button { padding: 12px 20px; /* top-bottom, left-right */ }

Bốn dòng gộp thành một!

padding tắt trên gọi là tắt hai giá trị (two-value shorthand), vì nó dùng hai giá trị.

• Giá trị đầu 12px tương ứng padding-top và padding-bottom.
• Giá trị 20px tương ứng padding-left và padding-right.

Dưới đây là danh sách đầy đủ thuộc tính tắt trong CSS:

all, animation, background, border, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, gap, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, mask, offset, outline, overflow, padding, place-content, place-items, place-self, scroll-margin, scroll-padding, text-decoration, text-emphasis, transition.

Xem tài liệu CSS shorthand đầy đủ của Mozilla.

Không phải tất cả thuộc tính tắt đáng nhớ vì bạn hiếm khi dùng. Tuy nhiên, hai ví dụ tắt từ hướng dẫn này font và padding, là những tắt thường dùng nhất.

Các thuộc tính tắt sau cũng đáng xem (vì bạn sẽ dùng nhiều) margin, background, border, animation, transition, border-radius.