सीएसएस का उपयोग करके पाठ सजावट को कैसे लागू करें



यह लेख आपको उदाहरणों के साथ सीएसएस का उपयोग करके विभिन्न प्रकार के पाठ सजावट का विस्तृत और व्यापक ज्ञान प्रदान करेगा।

किसी दस्तावेज़ या पाठ को रेखांकित करना हमेशा आसान माना जाता है। लेकिन अगर हम वेबसाइटों के मामले पर विचार करें, तो क्या यह अभी तक आसान है? हम में से अधिकांश हाँ कहेंगे लेकिन कुछ कस्टम डिज़ाइन सहित एक क्षैतिज रेखा बनाना इस सरल कार्य को थकाऊ बनाते हैं। निम्नलिखित तरीके से CSS का उपयोग करके पाठ सजावट की यात्रा शुरू करें:

टेक्स्ट डेकोरेशन क्या है?

यह पाठ पर सजावटी लाइनों की उपस्थिति निर्धारित करता है। यह एक आशुलिपि संपत्ति है:





  • पाठ-सजावट-रेखा
  • पाठ-सजावट-रंग
  • पाठ-सजावट-शैली

यह लंबे हाथ वाले टी का प्रतिनिधित्व करने वाले एक या अधिक अंतरिक्ष-अलग मूल्यों के रूप में निर्दिष्ट हैxt-सजावट गुण।

वाक्य - विन्यास:



पाठ-सजावट: || ||

कहा पे,

  • पाठ-सजावट-रेखा: इसका उपयोग उस तरह की सजावट को सेट करने के लिए किया जाता है जैसे किअंडरलाइन, ओवरलाइन और लाइन-थ्रू

  • पाठ-सजावट-रंग:इसका उपयोग सजावट के रंग को निर्धारित करने के लिए किया जाता है।



  • पाठ-सजावट-शैली: इसका उपयोग रेखा की शैली को सेट करने के लिए किया जाता है जैसेठोस, लहरदार, बिंदीदार, धराशायी, दोहरा

सीएसएस में पाठ सजावट के प्रकार

  • ओवरलाइन:
# मूल्यांकन {पाठ-सजावट: ओवरलाइन}

Overline-text-decoration-using-css

  • कतार से:
# विकास {पाठ-सजावट: लाइन-थ्रू}

  • रेखांकित करें:
# मूल्यांकन {पाठ-सजावट: रेखांकित करें}

  • मेल:
# विकास {पाठ-सजावट: रेखा के माध्यम से रेखांकित करें}

आउटपुट:

CSS का उपयोग करके टेक्स्ट डेकोरेशन: कोड

कोड:

जावा में चार स्कैन कैसे करें
  

सीएसएस कोड:

#overline {टेक्स्ट-डेकोरेशन: लहराती ओवरलाइन लाइम} #underover {टेक्स्ट-डेकोरेशन: धराशाई अंडरलाइन ओवरलाइन} #dotted {टेक्स्ट-डेकोरेशन: अंडरलाइन डॉटेड रेड}} #wavy {टेक्स्ट-डेकोरेशन: लाइन-थ्रू वेवी}

आउटपुट:

पाठ सजावट छोड़ें

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

# मूल्यांकन {पाठ-सजावट-छोड़ें: स्याही}

मान जिनका उपयोग टेक्स्ट-डेकोरेशन स्किप के साथ किया जा सकता है:

  • वस्तुएं : (डिफ़ॉल्ट) रेखा चित्र, या इनलाइन-ब्लॉक तत्वों की तरह इनलाइन ऑब्जेक्ट्स को छोड़ देता है।

  • कोई नहीं : लाइन सब कुछ पार कर जाती है।

  • रिक्त स्थान : सजावट लाइन स्केच रिक्त स्थान, शब्द-विभाजक वर्ण और अक्षर-स्पेस या शब्द-स्थान के साथ किसी भी स्थान को सेट करती है।

  • स्याही : सजावट लाइन ग्लिफ़, डिस्केन्डर्स या एस्केंडर्स को छोड़ देती है।

  • किनारों : डेकोरेशन लाइन कंटेंट के शुरूआती किनारे से थोड़ा पहले शुरू होती है और कंटेंट के एंडिंग एज से थोड़ा पहले खत्म होती है।

  • बॉक्स-सजावट : वंशानुगत मार्जिन, सीमा और गद्दी पर सजावट रेखा की रेखाएं होती हैं।

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

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

हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।

कैसे एक जावा प्रोग्राम से बाहर निकलने के लिए

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'सीएसएस का उपयोग करके टेक्स्ट डेकोरेशन' ब्लॉग के कमेंट सेक्शन में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।