1. Web
  2. CSS
  3. Guides
  4. Cascading and inheritance
  5. Shorthand properties

Shorthand properties

Shorthand properties là các thuộc tính CSS cho phép bạn đặt các giá trị của nhiều thuộc tính CSS khác trong một khai báo duy nhất. Sử dụng shorthand property, bạn có thể viết các style sheet ngắn gọn hơn (và thường dễ đọc hơn), tiết kiệm thời gian và công sức.

Đặc tả CSS định nghĩa shorthand properties để nhóm các định nghĩa của các thuộc tính phổ biến tác động đến cùng một chủ đề. Ví dụ, thuộc tính CSS background là một shorthand property có thể định nghĩa các giá trị của background-color, background-image, background-repeat và background-position.

Các trường hợp đặc biệt cần chú ý

Có một số trường hợp đặc biệt cần lưu ý khi sử dụng shorthand properties.

Bỏ qua thuộc tính

Một giá trị không được chỉ định sẽ được đặt thành giá trị mặc định được định nghĩa bởi shorthand, có thể khác với initial value của thuộc tính đó.

Điều đó có nghĩa là nó ghi đè các giá trị đã được đặt trước đó. Ví dụ:

css
p {
  background-color: red;
  background: url("images/bg.gif") no-repeat left top;
}

Điều này sẽ không đặt màu nền thành red mà thành giá trị mặc định của background-color, đó là transparent.

Chỉ có thể kế thừa các giá trị của thuộc tính riêng lẻ. Vì các giá trị bị thiếu được thay thế bằng initial value của chúng, không thể cho phép kế thừa các thuộc tính riêng lẻ bằng cách bỏ qua chúng. Từ khóa inherit có thể được áp dụng cho một thuộc tính, nhưng chỉ như một toàn thể, không phải như từ khóa cho một giá trị hay giá trị khác. Điều đó có nghĩa là cách duy nhất để làm cho một số giá trị cụ thể được kế thừa là sử dụng longhand property với từ khóa inherit.

Thứ tự thuộc tính

Shorthand properties cố gắng không bắt buộc một thứ tự cụ thể cho các giá trị của các thuộc tính chúng thay thế. Điều này hoạt động tốt khi các thuộc tính này sử dụng các giá trị thuộc các kiểu khác nhau, vì thứ tự không quan trọng, nhưng điều này không hoạt động dễ dàng khi một số thuộc tính có thể có giá trị giống nhau.

Hai trường hợp quan trọng ở đây là:

Các cạnh của box

Shorthand xử lý các thuộc tính liên quan đến các cạnh của box, như border-style, margin hoặc padding, luôn sử dụng cú pháp nhất quán từ 1 đến 4 giá trị đại diện cho các cạnh đó:

  • Cú pháp 1 giá trị: border-width: 1em — Giá trị đơn đại diện cho tất cả các cạnh: Box edges with one-value syntax

  • Cú pháp 2 giá trị: border-width: 1em 2em — Giá trị đầu tiên đại diện cho các cạnh dọc, tức là trên và dưới, giá trị thứ hai đại diện cho các cạnh ngang, tức là trái và phải: Box edges with two-value syntax

  • Cú pháp 3 giá trị: border-width: 1em 2em 3em — Giá trị đầu tiên đại diện cho cạnh trên, giá trị thứ hai đại diện cho các cạnh ngang, tức là trái và phải, và giá trị thứ ba đại diện cho cạnh dưới: Box edges with three-value syntax

  • Cú pháp 4 giá trị: border-width: 1em 2em 3em 4em — Bốn giá trị đại diện lần lượt cho cạnh trên, phải, dưới và trái, luôn theo thứ tự đó, tức là theo chiều kim đồng hồ bắt đầu từ trên: Box edges with four-value syntax Chữ cái đầu của Top-Right-Bottom-Left khớp với thứ tự phụ âm của từ trouble: TRBL. Bạn cũng có thể nhớ nó theo thứ tự tay quay của đồng hồ: 1em bắt đầu ở vị trí 12 giờ, sau đó 2em ở vị trí 3 giờ, sau đó 3em ở vị trí 6 giờ, và 4em ở vị trí 9 giờ.

Các góc của box

Tương tự, shorthand xử lý các thuộc tính liên quan đến các góc của box, như border-radius, luôn sử dụng cú pháp nhất quán từ 1 đến 4 giá trị đại diện cho các góc đó:

  • Cú pháp 1 giá trị: border-radius: 1em — Giá trị đơn đại diện cho tất cả các góc: Box corners with one-value syntax

  • Cú pháp 2 giá trị: border-radius: 1em 2em — Giá trị đầu tiên đại diện cho góc trên trái và dưới phải, giá trị thứ hai đại diện cho góc trên phải và dưới trái: Box corners with two-value syntax

  • Cú pháp 3 giá trị: border-radius: 1em 2em 3em — Giá trị đầu tiên đại diện cho góc trên trái, giá trị thứ hai đại diện cho góc trên phải và dưới trái, và giá trị thứ ba đại diện cho góc dưới phải: Box corners with three-value syntax

  • Cú pháp 4 giá trị: border-radius: 1em 2em 3em 4em — Bốn giá trị đại diện lần lượt cho các góc trên trái, trên phải, dưới phải và dưới trái, luôn theo thứ tự đó, tức là theo chiều kim đồng hồ bắt đầu từ trên trái: Box corners with four-value syntax

Thuộc tính background

Hãy xem xét một background với các thuộc tính sau

css
background-color: black;
background-image: url("images/bg.gif");
background-repeat: no-repeat;
background-position: left top;

Bốn khai báo này có thể được rút ngắn thành chỉ một:

css
background: black url("images/bg.gif") no-repeat left top;

(Dạng shorthand thực sự tương đương với các longhand properties ở trên cộng với background-attachment: scroll và, trong CSS3, một số thuộc tính bổ sung.)

Xem background để biết thêm thông tin chi tiết, bao gồm cả các thuộc tính CSS3.

Thuộc tính font

Hãy xem xét các khai báo sau:

css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: "Arial", sans-serif;

5 khai báo này có thể được rút ngắn thành như sau:

css
font:
  italic bold 0.8em/1.2 "Arial",
  sans-serif;

Khai báo shorthand này thực sự tương đương với các longhand declarations ở trên cộng với font-variant: normal, font-size-adjust: none và font-stretch: normal.

Thuộc tính border

Với borders, chiều rộng, màu sắc và kiểu có thể được đơn giản hóa thành một khai báo. Ví dụ, hãy xem xét CSS sau:

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

Nó có thể được đơn giản hóa thành:

css
border: 1px solid black;

Thuộc tính margin và padding

Các phiên bản shorthand của giá trị margin và padding hoạt động tương tự; thuộc tính margin cho phép các giá trị shorthand được chỉ định bằng một, hai, ba hoặc bốn giá trị. Hãy xem xét các khai báo CSS sau:

css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Chúng giống với khai báo sau sử dụng shorthand bốn giá trị. Lưu ý rằng các giá trị theo thứ tự chiều kim đồng hồ, bắt đầu từ trên: trên, phải, dưới, rồi trái (TRBL, các phụ âm trong "trouble").

css
margin: 10px 5px 10px 5px;

Quy tắc shorthand margin cho một, hai, ba và bốn giá trị khai báo là:

  • Khi chỉ định một giá trị, nó áp dụng cùng margin cho tất cả bốn cạnh.
  • Khi chỉ định hai giá trị, margin đầu tiên áp dụng cho trên và dưới, cái thứ hai cho trái và phải.
  • Khi chỉ định ba giá trị, margin đầu tiên áp dụng cho trên, cái thứ hai cho trái và phải, cái thứ ba cho dưới.
  • Khi chỉ định bốn giá trị, các margin áp dụng cho trên, phải, dưới và trái theo thứ tự đó (theo chiều kim đồng hồ).

Thuộc tính position

Với position, các phiên bản shorthand của top, right, bottom và left có thể được đơn giản hóa thành một khai báo. Ví dụ, hãy xem xét CSS sau:

css
top: 0;
right: 20px;
bottom: 0;
left: 20px;

Nó có thể được đơn giản hóa thành:

css
inset: 0 20px 0 20px;

Giống như margins và paddings, các giá trị inset được sắp xếp theo chiều kim đồng hồ — trên, phải, dưới, rồi trái (TRBL).

Shorthand property phổ quát

CSS cung cấp một shorthand property phổ quát, all, áp dụng giá trị của nó cho mỗi thuộc tính trong tài liệu. Mục đích của nó là thay đổi mô hình inheritance của các thuộc tính.

Xem Handling conflicts hoặc Giới thiệu về CSS Cascade để biết thêm thông tin về cách inheritance hoạt động trong CSS.

Shorthand properties

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content