Với việc giới thiệu các thuộc tính trang trí văn bản sau đây, giờ đây chúng ta có thể tạo kiểu cho văn bản theo nhiều cách hơn trước đây. văn bản-trang trí là cách viết tắt của văn bản-trang trí-độ dày, văn bản-trang trí-màu sắc, văn bản-trang trí-dòng và văn bản-phong cách trang trí. văn bản-trang trí-bỏ qua, văn bản-trang trí-bỏ qua-mực, văn bản-trang trí, văn bản-gạch dưới-bù đắp và văn bản-gạch dưới-vị trí cần phải được chỉ định rõ ràng.
Cú pháp
Cú pháp của CSS text-decoration như sau -
Selector {
text-decoration: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính trang trí văn bản CSS.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
text-decoration-style: double;
text-decoration-skip-ink: auto;
}
p {
padding: 2%;
text-decoration-line: underline overline;
text-decoration-style: wavy;
}
p:nth-of-type(even) {
text-decoration: overline;
}
span {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
<p>Random Demo Text</p>
<p>Random <span>Demo</span> Text</p>
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
text-decoration-thickness: 4px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html> Điều này cho kết quả sau
