Thuộc tính text-decoration định dạng trang trí phần tử HTML
Thuộc tính text-decoration trong CSS đưa thêm các định dạng trang trí cho chữ [các dòng kẻ qua chữ, gạch chân css], thực chất text-decoration trong css nó là dạng viết tổng hợp cho ba thuộc tính CSS riêng lẻ là:text-decoration trong CSS đưa thêm các định dạng trang trí cho chữ [các dòng kẻ qua chữ, gạch chân css], thực chất text-decoration trong css nó là dạng viết tổng hợp cho ba thuộc tính CSS riêng lẻ là:
text-decoration-line | thiết lập có đường kẻ qua chữ, nó có thể nhận các giá trị:
|
text-decoration-color | Đặt màu đường trang trí mà loại đường thì thiết lập ở text-decoration-line, nó nhận giá trị là các mã màu CSS |
text-decoration-style | thuộc tính thiết lập kiểu đường trang trí, nhận các giá trị:
|
Bằng cách dùng text-decoration bạn có thể viết gộp ba thuộc tính trên cùng một dòng, với cú pháp dạng:text-decoration bạn có thể viết gộp ba thuộc tính trên cùng một dòng, với cú pháp dạng:
text-decoration: line color style;
Trong đó bạn có thể không cần chỉ ra cả ba tham số, ví dụ thiếu
.vidu1 { text-decoration: underline red wavy; }7, thiếuKết quả ví dụ 1
.vidu1 { text-decoration: underline red wavy; }8 ..., thành phần thiếu sẽ sử dụng thiết lập mặc định của trình duyệt.Kết quả ví dụ 1
Ví dụ 1: trang trí bằng text-decoration yêu cầu gạch chân dòng chữ, màu đường gạch chân là đỏ [red], kiểu đường lượn sóng.: trang trí bằng text-decoration yêu cầu gạch chân dòng chữ, màu đường gạch chân là đỏ [red], kiểu đường lượn sóng.
.vidu1 { text-decoration: underline red wavy; }Kết quả ví dụ 1
Kết quả ví dụ 1
Ví dụ 2: Trang trí kẻ qua giữa dòng chữ, kiểu đường kẻ và màu để mặc định => chỉ cần tham số line: Trang trí kẻ qua giữa dòng chữ, kiểu đường kẻ và màu để mặc định => chỉ cần tham số line
.vidu2 { text-decoration: line-through; }Kết quả ví dụ 2
Kết quả ví dụ 2
Ví dụ 3: Một số trường hợp hay dùng với text-decoration: Một số trường hợp hay dùng với text-decoration
p.none { text-decoration: none; } p.inherit { text-decoration: inherit; } p.overline { text-decoration: overline; } p.underline { text-decoration: underline; } p.line-through { text-decoration: line-through; }Hủy text-decoration [none].
Văn bản này hiệu ứng trang trí theo phần tử cha.
Gạch trên.
Gạch dưới.
Gạch giữa.
Hủy text-decoration [none].
Văn bản này hiệu ứng trang trí theo phần tử 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 này hiệu ứng trang trí theo phần tử cha.
Gạch trên.
Gạch dưới.
Gạch giữa.
Kết quảtext-decoration: line-through underline; vừa gạch chân vừa gạch giữa
Bạn có thể kết hợp nhiều giá trị lại với nhau để có nhiều hiệu ứng trang trí trong một dòng CSS. Ví dụ: text-decoration: line-through underline; vừa gạch chân vừa gạch giữa
Thụt đầu dòng text-indent
p.indent { text-indent: 100px; }Thuộc tính text-indent chỉ ra khoảng thụt đầu dòng [chiều ngang] của văn bản. Thuộc tính này nhận các giá trị theo đơn vị [px, pt, cm, em ...], % và inherit.
Kết quả
Bạn có thể kết hợp nhiều giá trị lại với nhau để có nhiều hiệu ứng trang trí trong một dòng CSS. Ví dụ: text-decoration: line-through underline; vừa gạch chân vừa gạch giữatext-indent chỉ ra khoảng thụt đầu dòng [chiều ngang] của văn bản. Thuộc tính này nhận các giá trị theo đơn vị [px, pt, cm, em ...], % và inherit.
- Xác định đường gạch bên trên văn bản.
- Tham khảo
- CSS
- Thuộc tính text-decoration
Định nghĩa và sử dụng
Thuộc tính text-decoration thiết lập các trang trí thêm cho text.
Cấu trúc
tag { text-decoration: giá trị; }
Với giá trị như sau:
text-decoration | none | text-decoration: none; | Định dạng văn bản bình thường, đây là dạng mặc định. |
underline | text-decoration: underline; | Xác định đường gạch bên dưới văn bản. | |
overline | text-decoration: overline; | Xác định đường gạch bên trên văn bản. | |
line-through | text-decoration: line-through; | Xác định đường gạch ngang văn bản. | |
blink | text-decoration: blink; | Xác định văn bản nhấp nháy. | |
inherit | text-decoration: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
Mô tả
Line under text
Line Over text
Line Over through
Line Over blink
text-decoration
none
text-decoration: none;
Định dạng văn bản bình thường, đây là dạng mặc định.
underline
text-decoration: underline;
p.lineUnder { text-decoration: underline; } p.lineOver { text-decoration: overline; } p.lineThrough { text-decoration: line-through; } p.lineBlink { text-decoration: blink; }
Xác định đường gạch bên dưới văn bản.
none
text-decoration: none;
Định dạng văn bản bình thường, đây là dạng mặc định.
underline
text-decoration: underline;
Xác định đường gạch bên dưới văn bản.
overline
text-decoration: overline;