Trang trí văn bản CSS
Trang trí văn bản
Trong chương này bạn sẽ tìm hiểu về các thuộc tính sau:
-
text-decoration-line
-
text-decoration-color
-
text-decoration-style
-
text-decoration-thickness
-
text-decoration
Thêm dòng trang trí vào văn bản
Thuộc tính text-decoration-line
được sử dụng để thêm dòng trang trí vào văn bản.
Mẹo: Bạn có thể kết hợp nhiều giá trị, chẳng hạn như gạch chân và gạch chân để hiển thị cả dòng trên và dưới văn bản.
Ví dụ
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line:
overline underline;
}
Hãy tự mình thử »Lưu ý: Không nên gạch chân văn bản không phải là liên kết vì điều này thường gây nhầm lẫn cho người đọc.
Chỉ định màu cho đường trang trí
Thuộc tính text-decoration-color
được sử dụng để đặt màu cho đường trang trí.
Ví dụ
h1 {
text-decoration-line: overline;
text-decoration-color:
red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color:
blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color:
green;
}
p {
text-decoration-line:
overline underline;
text-decoration-color: purple;
}
Hãy tự mình thử » Chỉ định kiểu cho đường trang trí
Thuộc tính text-decoration-style
được sử dụng để thiết lập kiểu của đường trang trí.
Ví dụ
h1 {
text-decoration-line: underline;
text-decoration-style:
solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line:
underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Hãy tự mình thử »Chỉ định độ dày cho đường trang trí
Thuộc tính text-decoration-thickness
được sử dụng để thiết lập độ dày của đường trang trí.
Ví dụ
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line:
underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
Hãy tự mình thử »Thuộc tính viết tắt
Thuộc tính text-decoration
là thuộc tính viết tắt của:
-
text-decoration-line
(bắt buộc) -
text-decoration-color
(tùy chọn) -
text-decoration-style
(tùy chọn) -
text-decoration-thickness
(tùy chọn)
Ví dụ
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline
red double;
}
p {
text-decoration: underline red double 5px;
}
Hãy tự mình thử »Một mẹo nhỏ
Tất cả các liên kết trong HTML đều được gạch chân theo mặc định. Đôi khi bạn thấy rằng các liên kết được tạo kiểu không có gạch chân. text-decoration: none;
được sử dụng để xóa phần gạch chân khỏi các liên kết, như thế này:
Tất cả thuộc tính trang trí văn bản CSS
Property | Description |
---|---|
text-decoration | Sets all the text-decoration properties in one declaration |
text-decoration-color | Specifies the color of the text-decoration |
text-decoration-line | Specifies the kind of text decoration to be used (underline, overline, etc.) |
text-decoration-style | Specifies the style of the text decoration (solid, dotted, etc.) |
text-decoration-thickness | Specifies the thickness of the text decoration line |