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

यह पोस्ट आपको सिखाएगी कि हम CSS के साथ टेक्स्ट केस कैसे बदल सकते हैं। चलिए, शुरू करते हैं!

CSS का उपयोग करके अपरकेस और लोअरकेस टेक्स्ट कैसे करें?

सीएसएस में, ' पाठ बदलना ” संपत्ति पाठ के पूंजीकरण को नियंत्रित करती है। इसका उपयोग टेक्स्ट को अपरकेस या लोअरकेस में बदलने के लिए भी किया जाता है।

पाठ-रूपांतरण गुण मान

CSS टेक्स्ट-ट्रांसफ़ॉर्म गुण के संभावित मान नीचे सूचीबद्ध हैं:

• • ' अपरकेस ”: यह मान तत्व के पाठ में सभी वर्णों को कैपिटलाइज़ करता है।
  • ' लोअरकेस ”: यह मान तत्व के पाठ को लोअरकेस में बदल देता है।
  • ' मूल बनाना ”: यह मान प्रत्येक शब्द के पहले अक्षर को बड़े अक्षरों में बदल देता है।
  • ' कोई भी नहीं ': यह मान तत्व के पाठ को संशोधन के लिए प्रतिबंधित करता है।
  • ' शुरुआती ”: यह मान डिफ़ॉल्ट मान सेट करता है।
  • ' तुम्हें विरासत मिली ”: यह मान इसके मान को इसके मूल तत्व से सेट करता है।

नीचे दिए गए उदाहरण का विश्लेषण करें!

उदाहरण: टेक्स्ट को अपरकेस और लोअरकेस में बदलना

सबसे पहले, वर्ग नाम के साथ एक दिव्य तत्व जोड़ें ' डिब्बा ”। बॉडी के अंदर, तीन हेडिंग टैग

,

, और

जोड़ें, जहां

हेडिंग का टेक्स्ट अपरकेस में है,

लोअरकेस में है, और तीसरा भी लोअरकेस में है।

नीचे एचटीएमएल कोड है:

< डिव कक्षा = 'डिब्बा' >
< एच 1 > लोअरकेस: LINUXHINT में आपका स्वागत है एच 1 >
< एच 2 > अपरकेस: linuxhint में आपका स्वागत है एच 2 >
< h3 > पूंजीकरण: linuxhint में आपका स्वागत है h3 >
डिव >

स्टाइल बॉक्स डिव

।डिब्बा {
ऊंचाई: 200 पीएक्स;
चौड़ाई: 80 % ;
सीमा: 4px ठोस #e4cfcf;
पृष्ठभूमि-रंग: कैडेटनीला;
मार्जिन: 1 पीएक्स ऑटो;
पैडिंग: 10 पीएक्स;
}

उपरोक्त HTML फ़ाइल में बनाए गए div को अब CSS गुणों के साथ स्टाइल किया गया है जिन्हें नीचे समझाया गया है:

• • ' ऊंचाई ' का उपयोग div की ऊंचाई निर्धारित करने के लिए किया जाता है।
  • ' चौड़ाई ' का उपयोग div की चौड़ाई निर्धारित करने के लिए किया जाता है।
  • ' सीमा ” संपत्ति का उपयोग तत्व के चारों ओर बॉर्डर लगाने के लिए किया जाता है, जो 4px चौड़ाई, ठोस रेखा प्रकार और #e4cfcf रंग का होता है।
  • ' पीछे का रंग ' तत्व की पृष्ठभूमि का रंग निर्दिष्ट करता है।
  • ' अंतर ” संपत्ति तत्व के हर तरफ जगह समायोजित करती है।
  • ' गद्दी 'संपत्ति का उपयोग div तत्व की सामग्री के आसपास या तत्व की सीमा के भीतर स्थान बनाने के लिए किया जाता है।

नीचे दिए गए कोड ब्लॉक इंगित करते हैं कि सभी शीर्षक तत्वों को टेक्स्ट-ट्रांसफ़ॉर्म गुणों के विभिन्न मानों के साथ स्टाइल किया गया है।

तत्व text-transform विशेषता के साथ लागू किया जाता है, जिसका मान '' के रूप में सेट होता है। लोअरकेस ':

एच 1 {
टेक्स्ट-ट्रांसफ़ॉर्म: लोअरकेस;
}

तत्व को टेक्स्ट-ट्रांसफ़ॉर्म गुण के साथ लागू किया जाता है, जिसका मान '' के रूप में सेट होता है। अपरकेस ':

एच 2 {
टेक्स्ट-ट्रांसफ़ॉर्म: अपरकेस;
}

तत्व के लिए, टेक्स्ट-ट्रांसफ़ॉर्म गुण का मान 'के रूप में सेट किया गया है' मूल बनाना ':

h3 {
टेक्स्ट-ट्रांसफ़ॉर्म: कैपिटलाइज़;
}

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

महान! हमने सफलतापूर्वक सीख लिया है कि टेक्स्ट को अपरकेस, लोअरकेस और सभी कैपिटलाइज़ में कैसे बदलना है।

निष्कर्ष

CSS का टेक्स्ट-ट्रांसफ़ॉर्म गुण टेक्स्ट के कैपिटलाइज़ेशन को नियंत्रित करता है और इसका उपयोग दस्तावेज़ के टेक्स्ट के मामलों को बदलने के लिए किया जाता है। यह संपत्ति सभी तत्वों पर लागू होती है, जहां इस संपत्ति के मान अपरकेस, लोअरकेस, कैपिटलाइज़ या कोई नहीं हो सकते हैं। इस ब्लॉग में CSS text-transform प्रॉपर्टी का उपयोग करके टेक्स्ट को अपरकेस और लोअरकेस में बदलने की प्रक्रिया को समझाया गया है।