जब आप किसी वेब पेज के लिए टेक्स्ट डिज़ाइन कर रहे हों, तो आप टेक्स्ट में डेकोरेशन जोड़ना चाह सकते हैं। उदाहरण के लिए, आप महत्वपूर्ण कार्य के लिए एक रेखांकन या पुराने पाठ के माध्यम से एक पंक्ति जोड़ना चाह सकते हैं।

यहीं पर CSS टेक्स्ट-डेकोरेशन प्रॉपर्टी आती है। टेक्स्ट-डेकोरेशन प्रॉपर्टी आपको टेक्स्ट के एक ब्लॉक के माध्यम से दिखाई देने वाली अंडरलाइन, ओवरलाइन और लाइन जोड़ने की अनुमति देती है।

यह ट्यूटोरियल, उदाहरणों के साथ, CSS में टेक्स्ट के एक ब्लॉक में डेकोरेशन जोड़ने के लिए टेक्स्ट-डेकोरेशन प्रॉपर्टी और इसके तीन उप-प्रॉपर्टी का उपयोग कैसे करें, इस पर चर्चा करेगा। इस ट्यूटोरियल को पढ़ने के अंत तक, आप टेक्स्ट-डेकोरेशन प्रॉपर्टी का उपयोग करके टेक्स्ट को सजाने के विशेषज्ञ होंगे।

CSS टेक्स्ट डेकोरेशन

अंडरलाइन, टेक्स्ट के माध्यम से दिखाई देने वाली लाइनें और ओवरलाइन जोड़कर टेक्स्ट को सजाना एक महत्वपूर्ण तरीका है जिससे आप वेब पेज पर मुख्य सामग्री पर ध्यान आकर्षित कर सकते हैं।

जब टेक्स्ट को रेखांकित किया जाता है, तो यह उपयोगकर्ता को इंगित करता है कि जो रेखांकित किया गया है वह पढ़ने योग्य है, उदाहरण के लिए। इसके अलावा, टेक्स्ट डेकोरेशन वेब पेज पर सुलभ अनुभव को डिजाइन करने का एक महत्वपूर्ण हिस्सा है।

इसका कारण यह है कि केवल रंगों जैसे दृश्य संकेतकों पर निर्भर रहने से सभी उपयोगकर्ताओं के लिए सुलभ नहीं होगा, जैसे कि वे जो रंगहीन हैं या समान दृश्य हानि वाले हैं। एक अंडरलाइन, स्ट्राइकथ्रू, या ओवरलाइन जोड़ने से यह अधिक संभावना हो जाएगी कि उपयोगकर्ता यह नोटिस करने में सक्षम है कि टेक्स्ट का एक हिस्सा हाइलाइट किया गया है।

CSS में, टेक्स्ट-डेकोरेशन शॉर्टहैंड प्रॉपर्टी आपको टेक्स्ट में जोड़े गए डेकोरेशन को निर्दिष्ट करने की अनुमति देती है। यह संपत्ति तीन अन्य संपत्तियों के लिए आशुलिपि है, जो हैं:

पाठ-सजावट-पंक्ति (आवश्यक)
पाठ-सजावट-रंग (वैकल्पिक)
पाठ-सजावट-शैली (वैकल्पिक)

आपके कोड को अधिक कुशल बनाने के लिए टेक्स्ट-डेकोरेशन प्रॉपर्टी का उपयोग करते समय इन गुणों को जोड़ा जा सकता है। प्रत्येक को अलग-अलग निर्दिष्ट करने के बजाय, आप टेक्स्ट डेकोरेशन शैली को परिभाषित करने के लिए निम्न सिंटैक्स का उपयोग कर सकते हैं:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

text-decoration: line color style;

कोई विशिष्ट क्रम नहीं है जिसमें टेक्स्ट-डेकोरेशन प्रॉपर्टी के लिए शैलियाँ दिखाई दें।

अब जब हम टेक्स्ट-डेकोरेशन शॉर्टहैंड प्रॉपर्टी की मूल बातें जानते हैं, तो आइए एक उदाहरण देखें कि यह कैसे काम करता है। इस ट्यूटोरियल के लिए, हम एक स्थानीय बेकरी के उदाहरण का उपयोग करने जा रहे हैं जो अपनी वेबसाइट बनाना चाहता है।

CSS टेक्स्ट डेकोरेशन उदाहरण

जिस स्थानीय बेकरी के लिए हम एक साइट विकसित कर रहे हैं, उसने कहा है कि हम प्रत्येक पृष्ठ पर शीर्षकों को हाइलाइट करें।

उदाहरण के लिए, About Us . पर पृष्ठ, शीर्षक About Us शीर्षक पर उपयोगकर्ता का ध्यान आकर्षित करने के लिए एक रेखांकन होना चाहिए। प्रत्येक शीर्षक में एक हल्का नीला एकल रेखांकन होना चाहिए, और प्रत्येक पंक्ति 2px चौड़ी होनी चाहिए। हम निम्नलिखित कोड का उपयोग करके ऐसा शीर्षक बना सकते हैं:

<html>

<h1>About Us</h1>

<style>

h1 {
	text-decoration: lightblue solid underline;
}

सीएसएस पाठ सजावट हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

हमारे HTML कोड में, हमने

टैग का उपयोग करके एक हेडर परिभाषित किया है जो `About Us` टेक्स्ट दिखाता है वेब पेज पर। फिर, हमारे सीएसएस कोड में, हमने एक नियम बनाया जो हमारे वेब पेज पर सभी

तत्वों पर लागू होता है। यह नियम टेक्स्ट-डेकोरेशन प्रॉपर्टी का उपयोग एक अंडरलाइन बनाने के लिए करता है:

हल्के नीले रंग में दिखाई देता है (`lightblue` द्वारा दर्शाया गया है )

एक ही पंक्ति है (`solid` . द्वारा निरूपित) )

अंडरलाइन शैली का उपयोग करता है (`underline` द्वारा दर्शाया जाता है )

यह टेक्स्ट-डेकोरेशन प्रॉपर्टी का उपयोग करके बनाई गई अंडरलाइन का एक सरल उदाहरण है। अब, टेक्स्ट-सजावट संपत्ति बनाने वाले प्रत्येक गुण का पता लगाएं।

टेक्स्ट डेकोरेशन लाइन (टेक्स्ट-डेकोरेशन-लाइन)

टेक्स्ट-डेकोरेशन-लाइन प्रॉपर्टी आपको उस टेक्स्ट पर दिखाई देने वाली लाइन के प्रकार को सेट करने की अनुमति देती है जिस पर प्रॉपर्टी लागू होती है। यह संपत्ति जिन मूल्यों को स्वीकार करती है वे हैं:

अंडरलाइन:एक लाइन बनाता है जो टेक्स्ट के एक ब्लॉक के नीचे दिखाई देता है।
ओवरलाइन:एक लाइन बनाता है जो टेक्स्ट के ब्लॉक के ऊपर दिखाई देता है।
लाइन-थ्रू:एक स्ट्राइक-थ्रू लाइन बनाता है जो टेक्स्ट के एक ब्लॉक के बीच में दिखाई देती है।
ब्लिंक:जिस टेक्स्ट पर शैली लागू की गई है उसे ब्लिंक करता है (यह शैली बहिष्कृत है)।

यदि इस गुण का उपयोग किसी अन्य पाठ सजावट के बिना किया जाता है, तो एक ठोस, एकल काली रेखांकन दिखाई देगी।

आइए बेकरी के उदाहरण पर लौटते हैं कि यह संपत्ति कैसे काम करती है। मान लीजिए कि बेकरी, जिसे जेफरसन की फैमिली बेकरी कहा जाता है, ने हमें उनके About Us पर टेक्स्ट को स्टाइल करने के लिए कहा है। पृष्ठ। उन्होंने हमें अपने पाठ के कुछ हिस्सों को रेखांकित करने के लिए कहा है।

हम इस कार्य को पूरा करने के लिए टेक्स्ट-डेकोरेशन-लाइन प्रॉपर्टी का उपयोग कर सकते हैं। यहां वह कोड है जिसका हम उपयोग करेंगे:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

आइए हमारे कोड को तोड़ दें। हमारे HTML कोड में, हमने

टैग के भीतर संलग्न टेक्स्ट का एक पैराग्राफ बनाया है।

इस पैराग्राफ के अंदर जेफरसन की फैमिली बेकरी का विवरण है। इसके अलावा, दो शब्द —most well-known for our bagels और come to Jeffersons —ये टैग्स के अंदर संलग्न होते हैं, जिनका उपयोग अंदर संलग्न टेक्स्ट को शेष पैराग्राफ से अलग करने के लिए किया जाता है।

हमारे CSS कोड में, हम एक नियम को परिभाषित करते हैं जो underline . वर्ग के सभी तत्वों पर लागू होता है . इसलिए, हमारे मामले में, हमारे सभी टैग हमारे द्वारा परिभाषित शैली का उपयोग करते हैं, क्योंकि प्रत्येक टैग को underline वर्ग को भी असाइन किया जाता है। . हमारे द्वारा परिभाषित नियम टेक्स्ट-डेकोरेशन-लाइन का उपयोग उस टेक्स्ट में एक ब्लैक अंडरलाइन जोड़ने के लिए करता है जिसे हम हाइलाइट करना चाहते थे।

टेक्स्ट डेकोरेशन कलर (टेक्स्ट-डेकोरेशन-कलर)

टेक्स्ट-डेकोरेशन-कलर प्रॉपर्टी आपको स्टाइल पर लागू टेक्स्ट डेकोरेशन के रंग को परिभाषित करने की अनुमति देती है। मान लीजिए कि हम अपने पिछले उदाहरण में परिभाषित अंडरलाइन को हरे रंग में दिखाना चाहते हैं। हम निम्नलिखित शैली का उपयोग करके ऐसा कर सकते हैं:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

हमारे CSS कोड में, हमने एक टेक्स्ट-डेकोरेशन-कलर स्टाइल रूल जोड़ा है जिसका मान green है . यह टेक्स्ट-डेकोरेशन-लाइन का उपयोग करके हमारे द्वारा परिभाषित अंडरलाइन का रंग हरे रंग में सेट करता है।

हमने टेक्स्ट-डेकोरेशन-लाइन के लिए एक मान भी निर्दिष्ट किया है, जो हमारी लाइन स्टाइल बनाने के लिए आवश्यक है।

पाठ्य सजावट शैली (पाठ-सजावट-शैली)

टेक्स्ट-डेकोरेशन-स्टाइल प्रॉपर्टी आपको उस स्टाइल को सेट करने की अनुमति देती है जिसमें टेक्स्ट डेकोरेशन टेक्स्ट के ब्लॉक में दिखाई देगा। टेक्स्ट-डेकोरेशन-स्टाइल प्रॉपर्टी निम्न में से किसी एक मान को स्वीकार करती है:

सॉलिड:सिंगल लाइन बनाता है।
डबल:डबल लाइन बनाता है।
धराशायी:एक धराशायी रेखा बनाता है।
बिंदीदार:एक बिंदीदार रेखा बनाता है।
लहराती:एक लहरदार रेखा बनाता है।

आइए बेकरी के उदाहरण पर लौटते हैं। मान लीजिए कि बेकरी ने हमें About the Jeffersons शीर्षक में एक डॉटेड अंडरलाइन जोड़ने के लिए कहा है About Us . पर पृष्ठ। यह रेखांकन हल्के नीले रंग में दिखाई देना चाहिए और बिंदीदार शैली का उपयोग करना चाहिए। हम निम्नलिखित कोड का उपयोग करके इस रेखांकन को बना सकते हैं:

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

हमारे कोड में, हमने अपनी अंडरलाइन को परिभाषित करने के लिए टेक्स्ट-डेकोरेशन-लाइन और टेक्स्ट-डेकोरेशन-कलर स्टाइल का इस्तेमाल किया और अंडरलाइन का रंग क्रमशः हल्का नीला सेट किया। फिर, हमने अपने अंडरलाइन की शैली को डॉटेड पर सेट करने के लिए टेक्स्ट-डेकोरेशन-स्टाइल प्रॉपर्टी का इस्तेमाल किया।

हाइपरलिंक से अंडरलाइन हटाना

टेक्स्ट-डेकोरेशन प्रॉपर्टी का इस्तेमाल आमतौर पर पारंपरिक HTML लिंक में दिखाई देने वाले अंडरलाइन को हटाने के लिए किया जाता है। ऐसा इसलिए है क्योंकि टेक्स्ट-डेकोरेशन प्रॉपर्टी मान को स्वीकार करती है none , जिसका उपयोग किसी तत्व पर लागू डिफ़ॉल्ट पाठ शैलियों को हटाने के लिए किया जाता है।

डिफ़ॉल्ट रूप से, जब आप टैग का उपयोग करके किसी लिंक को परिभाषित करते हैं, तो एक रेखांकन दिखाई देगा। हालांकि, सभी वेबसाइटें अपने लिंक के नीचे अंडरलाइन नहीं दिखाना चाहती हैं।

मान लीजिए कि जेफरसन की फैमिली बेकरी वेबसाइट पर Contact Us लेबल वाला हाइपरलिंक है , जो पेज से लिंक होता है /contact.html उनकी साइट पर। यहाँ हाइपरलिंक के लिए HTML कोड है:

<a href="/contact.html">Contact Us</a>

जब हम इस घटक को प्रस्तुत करते हैं, तो निम्नलिखित प्रतिक्रिया दी जाती है: हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

जैसा कि आप देख सकते हैं, लिंक नीले रंग में और एक रेखांकन के साथ दिखाई देता है। अगर हम इस अंडरलाइन को हटाना चाहते हैं, तो हम निम्नलिखित कोड का उपयोग कर सकते हैं:

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

जैसा कि आप देख सकते हैं, हमारे दूसरे उदाहरण में हमारे लिंक के नीचे के रेखांकन हटा दिए गए हैं। हमारे सीएसएस कोड में, हमने टेक्स्ट-डेकोरेशन:नो रूल का इस्तेमाल किया और इसे हर टैग पर लागू किया। यह किसी भी पाठ सजावट को उन तत्वों से हटा देता है जिन पर इसे लागू किया जाता है, जो इस मामले में प्रत्येक टैग है।

निष्कर्ष

टेक्स्ट डेकोरेशन एक तरीका है जिससे आप वेब पेज पर विशिष्ट टेक्स्ट पर ध्यान आकर्षित कर सकते हैं, और टेक्स्ट को अधिक सौंदर्यपूर्ण रूप से आकर्षक तरीके से प्रदर्शित कर सकते हैं।

CSS टेक्स्ट-डेकोरेशन प्रॉपर्टी, और इससे जुड़े गुण, आपको वेब पेज पर टेक्स्ट के ब्लॉक द्वारा उपयोग की जाने वाली सजावट को परिभाषित करने की अनुमति देते हैं।

इस ट्यूटोरियल ने उदाहरणों के संदर्भ में, वेब पेज पर टेक्स्ट को सजाने के लिए टेक्स्ट-डेकोरेशन प्रॉपर्टी और उससे जुड़े गुणों का उपयोग कैसे करें, इस पर चर्चा की। अब आप एक पेशेवर वेब डिज़ाइनर की तरह टेक्स्ट को सजाने के लिए आवश्यक ज्ञान से लैस हैं!