Trang trí chiếc chữ với text-decoration CSS để gạch chân, gạch giữa với thụt đầu dòng với text-indent, tìm hiểu thuộc tính text-decoration-line, text-decoration-color, text-decoration-style


Định dạng thêm với text-decoration

Thuộc tính text-decoration gửi thêm những định dạng trang trí cho chữ (các chiếc kẻ qua chữ),thực chất nó là dạng viết tổng hợp cho cha thuộc tính CSS trơ thổ địa là:

thuộc tính Diễn giải
text-decoration-line thiết lập tất cả đường kẻ qua chữ, nó có thể nhận các giá trị: none : hủy kẻ qua chữ underline: gạch ốp chân overline: gạch men trên đầu chữ line-through: gạch qua chữ
text-decoration-color Đặt màu đường trang trí mà loại đường thì tùy chỉnh ở text-decoration-line, nó nhận giá trị là các mã color CSS
text-decoration-style thuộc tính cấu hình thiết lập kiểu con đường trang trí, nhận các giá trị: solid : con đường liền double: đường đôi dotted: đường chấm chấm dashed: mặt đường gạch gạch wavy: lượn sóng

Bằng bí quyết dùng text-decoration bạn cũng có thể viết bố thuộc tính trên và một dòng, cùng với cú pháp dạng:

text-decoration: line color style;Trong đó bạn cũng có thể không yêu cầu chỉ ra cả tía tham số, lấy một ví dụ thiếu line, thiếu màu sắc ..., thành phầnthiếu sẽ sử dụng thiết lập cấu hình mặc định của trình duyệt.

Bạn đang xem: Text-decoration là gì

Ví dụ 1: trang trí bằng text-decoration yêu mong gạch chân dòng chữ, màu con đường gạch chân là đỏ (red), kiểu mặt đường lượn sóng.

.vidu1 text-decoration: underline red wavy;Kết quả lấy ví dụ như 1

Ví dụ 2: trang trí kẻ qua mẫu chữ, kiểu đường kẻ với màu để mặc định => chỉ việc tham số line

.vidu2 text-decoration: line-through; kết quả ví dụ 2

Ví dụ 3: một trong những trường thích hợp hay dùng với text-decoration

Hủy text-decoration (none).

Văn bản này cảm giác trang trí theo bộ phận cha.

Gạch trên.

Gạch dưới.

Gạch giữa.

Kết quả


Hủy text-decoration (none).

Văn bạn dạng này cảm giác trang trí theo bộ phận cha.

Gạch trên.

Gạch dưới.

Gạch giữa.


Bạn có thể kết hợp những giá trị lại với nhau để có tương đối nhiều hiệu ứng trang trí trong một chiếc CSS. Ví dụ: text-decoration: line-through underline; vừa gạch ốp chân vừa gạch giữa

Thụt đầu cái text-indent

Thuộc tính text-indent chỉ ra khoảng tầm thụt đầu loại (chiều ngang) của văn bản. Nằm trong tính này nhận những giá trị theo đơn vị (px, pt, cm, em ...), % cùng inherit.

Thuộc tính text-indent chỉ ra khoảng tầm thụt đầu dòng (chiều ngang) của văn bản. ở trong tính này nhận các giá trị theo đơn vị chức năng (px, pt, cm, em ...), % với inherit.

Xem thêm: Xếp Hạng Linh Hoạt Là Gì, Và Những Điều Thú Vị Xung Quanh, Thông Tin Mới Về Xếp Hạng Linh Hoạt

Kết quả


Thuộc tính text-indent chỉ ra khoảng chừng thụt đầu dòng (chiều ngang) của văn bản. Thuộc tính này nhận những giá trị theo đơn vị (px, pt, cm, em ...), % với inherit.