Mã ngắn CSS

Question

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

Nội dung chính Show

trường hợp cạnh khó khăn
Bỏ qua thuộc tính
đặt hàng tài sản
Thuộc tính nền
Thuộc tính phông chữ
Thuộc tính đường viền
Thuộc tính ký quỹ và đệm
Thuộc tính tốc ký chung
Tôi có thể thêm CSS vào mã ngắn không?
Mã ngắn là gì?

Đặ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;

5

trườ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;

8

Chỉ 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ư

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

thuộc tính 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

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ị.

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

28 — Giá trị duy nhất đại diện cho tất cả các cạnh.

cú pháp 2 giá trị.
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```
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.
cú pháp 3 giá trị.
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```
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.
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ồ.
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```
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ờ.

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ị.

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

16 — Giá trị duy nhất đại diện cho tất cả các góc.

cú pháp 2 giá trị.
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```
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.
cú pháp 3 giá trị.
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```
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.
cú pháp 4 giá trị.
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```
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.

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 CSS3

Thuộ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;

1

5 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;

3

Khai 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;

34

Thuộ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;

9

Nó 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;

0

Thuộ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;

1

Chú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;

2

Quy 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ính

Xem 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

Tôi có thể thêm CSS vào mã ngắn không?

Cách thêm CSS và shortcode. Truy cập Trang web của tôi → Thiết kế → Tùy chỉnh → CSS, sao chép và dán mã CSS có trong bài đăng theo phong cách hiển thị. tài liệu css trên trang này. Thao tác này sẽ thêm thiết kế vào các bài đăng hoặc trang mà mã ngắn thêm vào trang của bạn.

Mã ngắn là gì?

Mã ngắn là số điện thoại đặc biệt được thiết kế để nhắn tin hai chiều, thông lượng cao . Mã ngắn được sử dụng để gửi và nhận tin nhắn SMS và MMS đến và đi từ điện thoại di động. Twilio hiện cung cấp mã ngắn ở nhiều quốc gia.

programming css

Mã ngắn CSS

trường hợp cạnh khó khăn

Bỏ qua thuộc tính

đặt hàng tài sản

Các cạnh của hộp

Các góc của hộp

Thuộc tính nền

Thuộc tính phông chữ

Thuộc tính đường viền

Thuộc tính ký quỹ và đệm

Thuộc tính tốc ký chung

Tôi có thể thêm CSS vào mã ngắn không?

Mã ngắn là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội