คุณสมบัติการตกแต่งข้อความ CSS ใช้สำหรับการตกแต่งข้อความขององค์ประกอบที่เลือก เราสามารถเพิ่มเส้นผ่าน ขีดเส้นใต้ ขีดเส้นใต้ ฯลฯ เป็นค่าได้ เป็นชวเลขสำหรับ text-decoration-line text-decoration-color และ text-decoration-style
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติการตกแต่งข้อความมีดังนี้ −
Selector {
text-decoration: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติการตกแต่งข้อความ CSS -
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
content: " We will reach the destination ";
background-color: lightgreen;
text-decoration: overline blue;
font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
span {
background: rgb(204,22,50);
text-decoration: blue line-through;
font-style: italic;
color: white;
}
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
