Thuộc tính text-decoration trong CSS để tạo hiệu ứng trang trí phần tử HTML
Thuộc tính text-decoration trong CSS được sử dụng để tạo hiệu ứng trang trí cho chữ (như gạch chân, gạch ngang), text-decoration trong CSS thực chất là viết tắt cho ba thuộc tính CSS riêng biệt:
| Thuộc tính CSS | Diễn giải |
|---|---|
| text-decoration-line | Thiết lập hiệu ứng gạch kẻ trên chữ, nó có thể nhận các giá trị: |
| – none: không có gạch chân | |
| – underline: gạch chân | |
| – overline: gạch trên đầu chữ | |
| – line-through: gạch ngang qua chữ | |
| text-decoration-color | Đặt màu của hiệu ứng trang trí dựa trên tổng hợp các giá trị của text-decoration-line. Nó có thể nhận giá trị là các mã màu CSS |
| text-decoration-style | Thiết lập kiểu hiệu ứng trang trí, có thể nhận các giá trị: |
| – solid: hiệu ứng trang trí liền mạch | |
| – double: hiệu ứng trang trí đôi | |
| – dotted: hiệu ứng trang trí chấm chấm | |
| – dashed: hiệu ứng trang trí gạch gạch | |
| – wavy: hiệu ứng trang trí sóng |
Bằng cách sử dụng thuộc tính text-decoration, bạn có thể kết hợp ba thuộc tính trên thành một dòng duy nhất, với cú pháp như sau:
Bạn đang xem: Thuộc tính text-decoration và text-indent CSS
text-decoration: line color style;
Bạn có thể không cần chỉ định ba tham số, ví dụ nếu thiếu kiểu hiệu ứng, màu hiệu ứng…, các thiếu thông số sẽ được sử dụng giá trị mặc định của trình duyệt.
Ví dụ 1: Tạo hiệu ứng gạch chân dòng chữ, màu gạch chân là đỏ (red), kiểu hiệu ứng là sóng.
Kết quả ví dụ 1
Xem thêm : Giao thoa – giao thoa văn hóa là gì?
Ví dụ 2: Tạo hiệu ứng gạch ngang giữa dòng chữ, kiểu gạch ngang và màu sẽ sử dụng giá trị mặc định
Kết quả ví dụ 2
Ví dụ 3: Một số trường hợp sử dụng text-decoration phổ biến
Hủy hiệu ứng trang trí (none).
Văn bản này sẽ kế thừa hiệu ứng trang trí từ phần tử cha.
Gạch trên chữ.
Xem thêm : ống thép sch40 là gì
Gạch dưới chữ.
Gạch ngang giữa chữ.
Kết quả
Bạn có thể kết hợp nhiều giá trị để có nhiều hiệu ứng trang trí khác nhau trong cùng một dòng CSS. Ví dụ: text-decoration: line-through underline; sẽ tạo hiệu ứng gạch chân và gạch ngang giữa chữ.
Thuộc tính text-indent để tạo thụt đầu dòng
Thuộc tính text-indent trong CSS được sử dụng để chỉ định khoảng cách thụt đầu dòng (theo chiều ngang) trong văn bản. Thuộc tính này có thể nhận giá trị bằng các đơn vị (px, pt, cm, em…), % và inherit.
Thuộc tính text-indent chỉ định khoảng cách thụt đầu dòng (theo chiều ngang) trong văn bản. Thuộc tính này có thể nhận giá trị bằng các đơn vị (px, pt, cm, em…), % và inherit.
Kết quả
Nguồn: https://stamboom-boden.com
Danh mục: Là Gì
