Các text-decoration-thicknessbất động sản trong CSS đặt độ dày đột quỵ của dòng trang trí được sử dụng trên văn bản trong một phần tử. Các text-decoration-linenhu cầu giá trị là một trong hai underline, line-throughhoặc overlineđể phản ánh các tài sản có độ dày.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Cú pháp
auto | from-font | | Giá trị
auto: (Mặc định) Cho phép trình duyệt chỉ định độ dày thích hợp cho đường trang trí văn bản.from-font: Nếu phông chữ có sẵn đầu tiên có số liệu chỉ định độ dày ưa thích, thì phông chữ đó sẽ sử dụng độ dày đó; nếu không, nó hoạt động giống như giá trị tự động.: Bất kỳ độ dài hợp lệ nào có đơn vị chỉ định độ dày của các đường trang trí văn bản là độ dài cố định. Điều này thay thế bất kỳ thông tin nào trong phông chữ và mặc định của trình duyệt.percentage: Chỉ định độ dày của các dòng trang trí văn bản theo tỷ lệ phần trăm của 1em trong phông chữ của phần tử.initial: Cài đặt mặc định của thuộc tính là tự động.inherit: Thông qua giá trị độ dày trang trí của phụ huynh.unset: Loại bỏ độ dày hiện tại khỏi phần tử.
Bản giới thiệu
Thay đổi giá trị của text-decoration-thicknesstrong bản trình diễn sau để xem thuộc tính ảnh hưởng như thế nào đến trang trí văn bản của phần tử:
Nó không đổi cho con cháu
Sau khi thiết lập trang trí cho một phần tử, tất cả các phần tử con của nó cũng sẽ có trang trí đó. Bây giờ hãy tưởng tượng chúng ta muốn thay đổi độ dày của trang trí cho một trong những đứa trẻ:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Điều này không hoạt động vì không thể ghi đè độ dày trang trí được chỉ định bởi các phần tử tổ tiên. Để điều này hoạt động, một đặc điểm trang trí cần phải được đặt cho chính phần tử:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Tỷ lệ phần trăm và tầng
Đối với thuộc tính này, độ dài sẽ kế thừa như một giá trị cố định và sẽ không thay đổi tỷ lệ theo phông chữ. Mặt khác, một tỷ lệ phần trăm sẽ kế thừa như một giá trị tương đối và do đó, tỷ lệ với những thay đổi trong phông chữ khi nó kế thừa.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Bản trình diễn sau đây cho thấy sự so sánh giữa việc sử dụng em và giá trị phần trăm trong trường hợp kế thừa và như bạn có thể thấy, ở phía bên trái (trong đó chúng tôi đang sử dụng em) giá trị được thừa kế là một độ dài cố định. Điều đó có nghĩa là nó không thay đổi tỷ lệ với sự thay đổi trong phông chữ. Tuy nhiên, ở phía bên phải, văn bản kế thừa một giá trị tương đối (trong trường hợp này là 20%); do đó độ dày quy mô theo sự thay đổi trong phông chữ.
Mặc dù bản nháp làm việc hiện tại của đặc tả tham chiếu đến các giá trị phần trăm cho text-decoration-thickness, hỗ trợ thực tế hiện chỉ giới hạn cho Firefox.
Sử dụng với text-decoration
Bản thảo làm việc hiện tại của đặc tả mô-đun trang trí văn bản CSS cấp 4 bao gồm text-decoration-thicknessdưới dạng một giá trị trong thuộc tính tốc text-decorationký.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Mặc dù text-decorationđược hỗ trợ tốt, hỗ trợ cho việc đưa vào text-decoration-thicknesshiện chỉ giới hạn ở Firefox.
Hỗ trợ trình duyệt
| Đặc tính | I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Bất động sản | Không | Không | 70 | Không | 12.1 | Không |
| Phần trăm | Không | Không | 76 | Không | Không | Không |
| Tốc ký | Không | Không | 70 | Không | Không | Không |
| Đặc tính | Chrome dành cho Android | Android Firefox | Trình duyệt Android | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Bất động sản | Không | Không | Không | 12,2 | Không |
| Phần trăm | Không | Không | Không | Không | Không |
| Tốc ký | Không | Không | Không | Không | Không |
Ghi chú
- Thuộc tính từng được gọi
text-decoration-width, nhưng đã được cập nhật trong bản nháp làm việc năm 2019 của đặc tả Mô-đun trang trí văn bản CSS cấp 4. - Trình duyệt phải sử dụng độ dày tối thiểu là 1 pixel thiết bị.