Thuộc tính viết tắt CSS

Tìm hiểu cách sử dụng thuộc tính viết tắt CSS để làm cho các bảng định kiểu của bạn chiếm ít dung lượng hơn.

Thuộc tính viết tắt CSS cho phép bạn viết ít hơn và làm được nhiều việc hơn.

Giả sử bạn muốn tạo kiểu cho h1 của mình phần tử với Georgia font-family, kích thước phông chữ là 42 pixel và chiều cao dòng là 1,25.

Đầu tiên, hãy xem phương pháp CSS bình thường bên dưới:

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

Bây giờ, hãy so sánh điều đó với việc sử dụng phông chữ CSS phương pháp viết tắt bên dưới:

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

Ba dòng được cô đọng thành một!

Thuộc tính tốc ký hoạt động bằng cách kết hợp một số khai báo kiểu thành một dòng và cho phép mã của bạn chiếm ít dung lượng hơn.

Mã tốc ký có thể không đọc được như phương pháp thông thường, phương pháp này diễn đạt hơn. Tuy nhiên, đó là vì nó mới. Nó sẽ nhanh chóng trở thành bản chất thứ hai khi bạn bắt đầu sử dụng nó.

Hãy xem thêm một ví dụ về thuộc tính CSS viết tắt để hướng điểm về nhà.

Đây là một nút có phần đệm trên cùng và dưới cùng là 12px và phần đệm bên trái và bên phải là 20px:

Nó sử dụng các thuộc tính đệm sau:

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

Bây giờ chúng ta hãy sử dụng padding viết tắt và làm cho CSS bớt cồng kềnh hơn:

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

Bốn dòng được cô đọng thành một!

padding tốc ký ở trên được gọi là tốc ký hai giá trị, bởi vì, nó sử dụng hai giá trị.

• Giá trị đầu tiên 12px tương ứng với padding-top và padding-bottom bất động sản.
• 20px giá trị tương ứng với padding-left và padding-right .

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

tất cả, hoạt ảnh, nền, đường viền, đường viền-kết thúc, đường viền-bắt đầu, đường viền-dưới cùng, đường viền-màu, đường viền-hình ảnh, đường viền-trong-dòng-cuối, đường viền-trong-dòng-bắt đầu, đường viền-trái, đường viền- bán kính, đường viền bên phải, kiểu đường viền, đường viền trên cùng, độ rộng đường viền, quy tắc cột, cột, linh hoạt, linh hoạt, phông chữ, khoảng cách, lưới, vùng lưới, cột lưới, hàng lưới, lưới- mẫu, kiểu danh sách, lề, mặt nạ, bù đắp, đường viền, phần tràn, phần đệm, nội dung vị trí, vị trí, vị trí tự, lề cuộn, phần đệm cuộn, trang trí văn bản, phần nhấn mạnh văn bản, quá trình chuyển đổi.

Xem tài liệu viết tắt CSS hoàn chỉnh của Mozilla.

Không phải tất cả các thuộc tính tốc ký đều đáng ghi nhớ vì rất có thể bạn sẽ hiếm khi sử dụng chúng. Tuy nhiên, hai ví dụ viết tắt từ hướng dẫn này font và padding , là một số lối tắt được sử dụng phổ biến nhất.

Các thuộc tính viết tắt sau đây cũng đáng xem xét (vì bạn sẽ sử dụng chúng rất nhiều) margin , background , border , animation , transition , border-radius .