ด้วยการแนะนำคุณสมบัติการตกแต่งข้อความต่อไปนี้ เราสามารถจัดรูปแบบข้อความได้หลากหลายรูปแบบมากกว่าเดิม text-decoration เป็นชวเลขสำหรับ text-decoration-thickness, text-decoration-color, text-decoration-line และ text-decoration-style ต้องระบุ text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset และ text-underline-position อย่างชัดเจน
ไวยากรณ์
ไวยากรณ์ของการตกแต่งข้อความ CSS มีดังต่อไปนี้ -
Selector {
text-decoration: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติการตกแต่งข้อความ 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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
ตัวอย่าง
<!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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
