Thuộc tính tốc ký là thuộc tính CSS cho phép bạn đặt đồng thời giá trị của nhiều thuộc tính CSS khác. Sử dụng thuộc tính tốc ký, bạn có thể viết biểu định kiểu ngắn gọn hơn [và thường dễ đọc hơn], tiết kiệm thời gian và năng lượng
Đặc tả CSS xác định các thuộc tính tốc ký để nhóm định nghĩa các thuộc tính chung hoạt động trên cùng một chủ đề. Chẳng hạn, thuộc tính CSS
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
4 là thuộc tính tốc ký có thể xác định các giá trị của background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
0, background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
1, background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
2 và background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
3. Tương tự, các thuộc tính liên quan đến phông chữ phổ biến nhất có thể được xác định bằng cách sử dụng tốc ký background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
4 và các lề khác nhau xung quanh hộp có thể được xác định bằng cách sử dụng tốc ký background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
5trường hợp cạnh khó khăn
Có một vài trường hợp cạnh cần lưu ý khi sử dụng thuộc tính tốc ký
Bỏ qua thuộc tính
Một giá trị không được chỉ định được đặt thành giá trị ban đầu của nó. Điều đó có nghĩa là nó sẽ ghi đè các giá trị đã đặt trước đó. Ví dụ
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
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
6 mà thành giá trị mặc định cho background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
0, là background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
8Chỉ các giá trị thuộc tính riêng lẻ mới có thể kế thừa. Vì các giá trị bị thiếu được thay thế bằng giá trị ban đầu của chúng nên 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
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
9 có thể được áp dụng cho một thuộc tính, nhưng chỉ là toàn bộ, không phải là từ khóa cho giá trị này 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 thuộc tính longhand với từ khóa background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
9đặt hàng tài sản
Thuộc tính tốc ký cố gắng không áp đặt một thứ tự cụ thể cho các giá trị của thuộc tính mà 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 loại 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ó các giá trị giống hệt nhau
Hai trường hợp quan trọng ở đây là
- các thuộc tính liên quan đến các cạnh của hộp, như
21,background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
5 hoặcbackground-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
23background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- thuộc tính liên quan đến các góc của hộp, như
24background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
Các cạnh của hộp
Các thuộc tính xử lý tốc ký liên quan đến các cạnh của hộp, như
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
21, background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
5 hoặc background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
23, 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ị.
28 — Giá trị duy nhất đại diện cho tất cả các cạnh.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- cú pháp 2 giá trị.
29 — Giá trị đầu tiên đại diện cho chiều dọc, nghĩa là trên và dưới, các cạnh, giá trị thứ hai là chiều ngang, nghĩa là bên trái và bên phải.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- cú pháp 3 giá trị.
10 — Giá trị đầu tiên đại diện cho cạnh trên, giá trị thứ hai, ngang, trái và phải, đơn vị và giá trị thứ ba là cạnh dưới.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- cú pháp 4 giá trị. chiều rộng biên giới. 1em 2em 3em 4em — Bốn giá trị lần lượt đại diện cho các cạnh trên, phải, dưới và trái, luôn theo thứ tự đó, theo chiều kim đồng hồ bắt đầu từ trên cùng. Chữ cái đầu tiên của Trên-Phải-Dưới-Trái khớp với thứ tự phụ âm của từ rắc rối. TRBL. Bạn cũng có thể nhớ nó là thứ tự mà các kim sẽ quay trên đồng hồ.
11 bắt đầu ở vị trí 12 giờ, sau đó làbackground-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
12 ở vị trí 3 giờ, sau đó làbackground-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
13 ở vị trí 6 giờ vàbackground-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
14 ở vị trí 9 giờ.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
Các góc của hộp
Tương tự, các thuộc tính xử lý tốc ký liên quan đến các góc của hộp, như
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
24, luôn sử dụng cú pháp giá trị 1 đến 4 nhất quán đại diện cho các góc đó- cú pháp 1 giá trị.
16 — Giá trị duy nhất đại diện cho tất cả các góc.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- cú pháp 2 giá trị.
17 — Giá trị đầu tiên đại diện cho góc trên cùng bên trái và dưới cùng bên phải, giá trị thứ hai đại diện cho góc trên cùng bên phải và dưới cùng bên trái.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- cú pháp 3 giá trị.
18 — Giá trị đầu tiên đại diện cho góc trên cùng bên trái, giá trị thứ hai đại diện cho góc trên cùng bên phải và dưới cùng bên trái và giá trị thứ ba đại diện cho góc dưới cùng bên phải.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
- cú pháp 4 giá trị.
19 — Bốn giá trị tương ứng đại diện cho các góc trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải và dưới cùng bên trái, luôn theo thứ tự đó, theo chiều kim đồng hồ bắt đầu từ trên cùng bên trái.background-color: #000; background-image: url[images/bg.gif]; background-repeat: no-repeat; background-position: left top;
Thuộc tính nền
Hãy xem xét một nền với các thuộc tính sau
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
Bốn tuyên bố này có thể được rút gọn thành một
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
2[Dạng tốc ký thực sự tương đương với các thuộc tính tốc ký ở trên cộng với
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
30 và, trong CSS3, một số thuộc tính bổ sung. ]Xem
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
4 để biết thêm thông tin chi tiết, bao gồm các thuộc tính CSS3Thuộc tính phông chữ
Xét các khai báo sau
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
15 tuyên bố này có thể được rút ngắn thành như sau
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
3Khai báo tốc ký này thực sự tương đương với các khai báo tốc ký ở trên cộng với
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
32, background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
33 và background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
34Thuộc tính đường viền
Với đường viền, chiều rộng, màu sắc và kiểu dáng có thể được đơn giản hóa thành một khai báo. Ví dụ: hãy xem xét CSS sau
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
9Nó có thể được đơn giản hóa như
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
0Thuộc tính ký quỹ và đệm
Các phiên bản tốc ký của giá trị lề và phần đệm hoạt động tương tự nhau; . Xem xét các khai báo CSS sau
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
1Chúng giống như khai báo sau sử dụng tốc ký bốn giá trị. Lưu ý rằng các giá trị theo thứ tự theo chiều kim đồng hồ, bắt đầu từ trên cùng. trên, phải, dưới, rồi trái [TRBL, các phụ âm trong từ "rắc rối"]
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
2Quy tắc viết tắt lề cho một, hai, ba và bốn khai báo giá trị là
- Khi một giá trị được chỉ định, nó sẽ áp dụng cùng một lề cho cả bốn cạnh
- Khi hai giá trị được chỉ định, lề đầu tiên áp dụng cho trên cùng và dưới cùng, lề thứ hai áp dụng cho bên trái và bên phải
- Khi ba giá trị được chỉ định, lề đầu tiên áp dụng cho trên cùng, lề thứ hai ở bên trái và bên phải, lề thứ ba ở dưới cùng
- Khi bốn giá trị được chỉ định, các lề sẽ áp dụng cho trên cùng, bên phải, dưới cùng và bên trái theo thứ tự đó [theo chiều kim đồng hồ]
Thuộc tính tốc ký chung
CSS cung cấp một thuộc tính tốc ký chung,
background-color: #000;
background-image: url[images/bg.gif];
background-repeat: no-repeat;
background-position: left top;
35, á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 kế thừa của thuộc tínhXem Cascade và kế thừa hoặc Giới thiệu CSS Cascade để biết thêm thông tin về cách thức hoạt động của tính kế thừa trong CSS