CSS Text Decoration: टेक्स्ट पर अंडरलाइन, ओवरलाइन और स्ट्राइकथ्रू का गाइड

CSS Text Decoration क्या है?

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

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

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

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

• text-decoration-line (आवश्यक)
• text-decoration-color (वैकल्पिक)
• text-decoration-style (वैकल्पिक)

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

text-decoration: line color style;

text-decoration प्रॉपर्टी के लिए स्टाइल्स में कोई विशिष्ट क्रम नहीं है जिसमें उन्हें प्रकट होना चाहिए।

CSS Text Decoration उदाहरण

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

उदाहरण के लिए, About पेज पर, टाइटल About Us में एक अंडरलाइन होनी चाहिए, ताकि यूज़र का ध्यान टाइटल की ओर आकर्षित हो। प्रत्येक टाइटल में हल्के नीले रंग की सिंगल अंडरलाइन होनी चाहिए, और प्रत्येक लाइन 2px चौड़ी होनी चाहिए। हम निम्न कोड का उपयोग करके ऐसा टाइटल बना सकते हैं:

<html>
  <h1>About Us</h1>
<style>
  h1 { text-decoration: lightblue solid underline; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे HTML कोड में, हमने <h1> टैग का उपयोग करके एक हेडर परिभाषित किया जो वेब पेज पर About Us टेक्स्ट दिखाता है। फिर, हमारे CSS कोड में, हमने एक नियम बनाया जो हमारे वेब पेज पर सभी <h1> एलिमेंट्स पर लागू होता है। यह नियम text-decoration प्रॉपर्टी का उपयोग करके एक अंडरलाइन बनाता है जो:

• हल्के नीले रंग में दिखाई देता है (lightblue द्वारा दर्शाया गया)
• सिंगल लाइन है (solid द्वारा दर्शाया गया)
• अंडरलाइन स्टाइल का उपयोग करता है (underline द्वारा दर्शाया गया)

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

Text Decoration Line (text-decoration-line)

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

• underline: टेक्स्ट के ब्लॉक के नीचे दिखाई देने वाली लाइन बनाता है।
• overline: टेक्स्ट के ब्लॉक के ऊपर दिखाई देने वाली लाइन बनाता है।
• line-through: टेक्स्ट के ब्लॉक के मध्य से गुजरने वाली स्ट्राइक-थ्रू लाइन बनाता है।
• blink: उस टेक्स्ट को ब्लिंक करता है जिस पर स्टाइल लागू होता है (यह स्टाइल डिप्रिकेटेड है)।

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

उदाहरण: बेकरी टेक्स्ट में अंडरलाइन

मान लीजिए बेकरी, जिसे Jefferson's Family Bakery कहा जाता है, ने हमें उनके About Us पेज पर टेक्स्ट स्टाइल करने के लिए कहा है। उन्होंने हमें उनके टेक्स्ट के कुछ हिस्सों को अंडरलाइन करने के लिए कहा है।

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

<html>
  <p>
    Jefferson's Family Bakery, 1899 में स्थापित, एक पारिवारिक बेकरी है जो 
    सिएटल, वाशिंगटन के लोगों को स्वादिष्ट बेक्ड गुड्स परोसती है। 
    हमारी बेकरी <span class="underline">अपने बैगल्स के लिए सबसे प्रसिद्ध है</span>, 
    जिनकी 1950 में बेचना शुरू करने के बाद से कई स्थानीय प्रकाशनों द्वारा अत्यधिक समीक्षा की गई है। 
    आज, Jeffersons दस लोगों को रोजगार देता है जो हमारे ग्राहकों द्वारा आनंदित ब्रेड, रोल्स, 
    और विभिन्न बेक्ड गुड्स बनाने के लिए अथक परिश्रम करते हैं। 
    अगर आप एक अच्छे बैगल, ब्रेड, या बेक्ड केक के मूड में हैं, 
    <span class="underline">Jeffersons आएं</span>!
  </p>
<style>
  .underline { text-decoration-line: underline; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

आइए हमारे कोड को तोड़कर देखें। हमारे HTML कोड में, हमने <p> टैग्स के भीतर संलग्न टेक्स्ट का एक पैराग्राफ बनाया है।

इस पैराग्राफ के अंदर Jefferson's Family Bakery का विवरण है। इसके अलावा, दो शब्द - अपने बैगल्स के लिए सबसे प्रसिद्ध है और Jeffersons आएं - <span> टैग्स के भीतर संलग्न हैं, जिनका उपयोग टैग्स के भीतर संलग्न टेक्स्ट को पैराग्राफ के बाकी हिस्से से अलग करने के लिए किया जाता है।

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

Text Decoration Color (text-decoration-color)

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

<html>
  <p>
    Jefferson's Family Bakery, 1899 में स्थापित, एक पारिवारिक बेकरी है...
    हमारी बेकरी <span class="underline">अपने बैगल्स के लिए सबसे प्रसिद्ध है</span>...
    अगर आप एक अच्छे बैगल, ब्रेड, या बेक्ड केक के मूड में हैं, 
    <span class="underline">Jeffersons आएं</span>!
  </p>
<style>
  .underline { 
    text-decoration-line: underline; 
    text-decoration-color: green; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

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

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

Text Decoration Style (text-decoration-style)

text-decoration-style प्रॉपर्टी आपको टेक्स्ट के ब्लॉक में टेक्स्ट डेकोरेशन की स्टाइल सेट करने की अनुमति देती है। text-decoration-style प्रॉपर्टी निम्न में से किसी एक वैल्यू को स्वीकार करती है:

• solid: सिंगल लाइन बनाता है।
• double: डबल लाइन बनाता है।
• dashed: डैश्ड लाइन बनाता है।
• dotted: डॉटेड लाइन बनाता है।
• wavy: वेवी लाइन बनाता है।

उदाहरण: डॉटेड अंडरलाइन

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

<html>
  <h2>About the Jeffersons</h2>
<style>
  h2 { 
    text-decoration-line: underline; 
    text-decoration-color: lightblue; 
    text-decoration-style: dotted; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

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

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

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

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

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

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

जब हम इस कंपोनेंट को रेंडर करते हैं, तो निम्न प्रतिक्रिया वापस आती है:

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

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

<html>
  <a href="/contact.html">Contact Us</a>
<style>
  a { text-decoration: none; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

जैसा कि आप देख सकते हैं, हमारे दूसरे उदाहरण में हमारे लिंक के नीचे की अंडरलाइन्स हटा दी गई हैं। हमारे CSS कोड में, हमने text-decoration: none नियम का उपयोग किया और इसे हर <a> टैग पर लागू किया। यह उन एलिमेंट्स से किसी भी टेक्स्ट डेकोरेशन को हटा देता है जिस पर यह लागू होता है, जो इस मामले में हर <a> टैग है।

निष्कर्ष

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

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

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