निम्नलिखित पाठ-सजावट गुणों की शुरूआत के साथ, अब हम पाठ को पहले की तुलना में अधिक तरीकों से शैलीबद्ध कर सकते हैं। टेक्स्ट-डेकोरेशन टेक्स्ट-डेकोरेशन-थिकनेस, टेक्स्ट-डेकोरेशन-कलर, टेक्स्ट-डेकोरेशन-लाइन और टेक्स्ट-डेकोरेशन-स्टाइल का शॉर्टहैंड है। टेक्स्ट-डेकोरेशन-स्किप, टेक्स्ट-डेकोरेशन-स्किप-इंक, टेक्स्ट-डेकोरेशन, टेक्स्ट-अंडरलाइन-ऑफसेट और टेक्स्ट-अंडरलाइन-पोजिशन को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता है।
सिंटैक्स
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> यह निम्न आउटपुट देता है
