CSS shorthand properties – Cách viết tắt trong CSS

Một trong những lợi thế chính của việc sử dụng CSS là giảm lớn trong thời gian tải trang web. Bạn có lẽ cũng đã đưa ra trang web của bạn với các bảng, các bảng lồng nhau và gif spacer. Bây giờ tất cả những thông tin phần trình bày có thể được đặt trong một tài liệu CSS, với mỗi lệnh được liệt kê chỉ một lần.

Nhưng tại sao dừng lại ở đó? Bằng cách sử dụng các thuộc tính CSS viết tắt bạn có thể làm giảm kích thước của tài liệu CSS của bạn nhiều hơn và giảm thiểu thời gian code hơn.

Những thuộc tính viết tắt trong CSS:

– Font
– Margin
– Padding
– Background
– Border
– List-style

Font

Sử dụng:

font: 1em/1.5em bold italic serif

Thay vì phải dùng:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Background

Sử dụng:

background: #fff url(image.gif) no-repeat top left

Thay vì phải dùng:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Lists

Sử dụng:

list-style: disc outside url(image.gif)

Thay vì phải dùng:

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Margin & padding

4 giá trị khác nhau:

Sử dụng:

margin: 2px 1px 3px 4px (top, right, bottom, left)

Thay vì phải dùng:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

3 giá trị khác nhau:

Sử dụng:

margin: 5em 1em 3em (top, right and left, bottom)

Thay vì phải dùng:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

2 giá trị khác nhau:

Sử dụng:

margin: 5% 1% (top and bottom, right and left)

Thay vì phải dùng:

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

1 giá trị khác nhau:

Sử dụng:

margin: 0 (top, bottom, right and left)

Thay vì phải dùng:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Border

Sử dụng:

border: 1px black solid

Thay thế cho:

border-width: 1px;
border-color: black;
border-style: solid

Sử dụng:

border-right: 1px black solid

Thay thế cho:

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(Bạn có thể làm tương tự với border top, left, bottom)

Kết luận

Viết tắt trong CSS là tuyệt vời! Đây là cách rất hay giúp chúng ta giảm thiểu mã CSS, giảm dung lượng file CSS, giảm thời gian code, cho phép tải nhanh hơn và dễ dàng chỉnh sửa.