text-transform: uppercase CSS प्रॉपर्टी एक टेक्स्ट एलिमेंट के कंटेंट को ऑल कैप्स पर सेट करती है। आप इस प्रॉपर्टी का उपयोग टेक्स्ट एलिमेंट के कंटेंट को लोअरकेस या टाइटल केस पर सेट करने के लिए भी कर सकते हैं। text-transform पैराग्राफ, हेडिंग्स, या किसी अन्य टेक्स्ट एलिमेंट पर लागू हो सकता है।
वेबसाइट लिखते और विकसित करते समय, डेवलपर्स CSS प्रॉपर्टीज का उपयोग करके टेक्स्ट फॉन्ट के केस को एडजस्ट कर सकते हैं यदि उन्हें आवश्यकता हो। इस लेख में हम जिन दो तरीकों के बारे में बात करेंगे वे text-transform का उपयोग करके और font-variant का उपयोग करके हैं। आइए दोनों के सिंटैक्स पर एक नज़र डालते हैं।
CSS ऑल कैप्स
आप CSS text-transform प्रॉपर्टी का उपयोग करके एक टेक्स्ट एलिमेंट के कंटेंट को ऑल कैप्स में बदल सकते हैं। यह प्रॉपर्टी सेट करती है कि वेब पेज पर टेक्स्ट कैसे कैपिटलाइज़ किया जाता है। आप इस प्रॉपर्टी का उपयोग टेक्स्ट एलिमेंट के कंटेंट को लोअरकेस पर सेट करने के लिए भी कर सकते हैं।
टेक्स्ट के एक ब्लॉक को सभी कैपिटल लेटर्स में बनाने के लिए, अपने CSS सेलेक्टर में text-transform: uppercase उपयोग करें:
text-transform: uppercase;
text-transform प्रॉपर्टी तीन संभावित मान स्वीकार करती है:
- uppercase: एक टेक्स्ट एलिमेंट में प्रत्येक शब्द को अपरकेस पर सेट करता है।
- lowercase: टेक्स्ट को लोअरकेस पर सेट करता है।
- capitalize: प्रत्येक शब्द को कैपिटलाइज़ करता है, जिसे टाइटल केस के रूप में भी जाना जाता है।
आइए text-transform मेथड को एक्शन में देखते हैं।
ऑल कैप्स CSS उदाहरण
हम एक वेब पेज बनाने जा रहे हैं जो "This page does not exist." को सभी कैपिटल लेटर्स में प्रदर्शित करता है।
ऐसा करने के लिए, हम अपने सभी लेटर्स को अपरकेस में टाइप कर सकते हैं। इस दृष्टिकोण का नकारात्मक पक्ष यह है कि हमें अपने टेक्स्ट को मैन्युअली रीराइट करना होगा। इतने छोटे वाक्य के लिए यह कोई समस्या नहीं है। लेकिन, मैन्युअली लेटर्स बदलना तेजी से परेशानी भरा हो जाएगा यदि आप लंबी टेक्स्ट स्ट्रिंग का केस बदल रहे थे।
हम सुरक्षित पक्ष में रहने के लिए text-transform मेथड का उपयोग करने जा रहे हैं।
आइए अपने टेक्स्ट और text-transform नियम के साथ एक HTML डॉक्यूमेंट परिभाषित करते हैं:
<html> <head> <style> p { text-transform: uppercase; } </style> </head> <body> <p>this is in all caps</p> </body> </html>
चयनित टेक्स्ट में सभी लेटर्स अपरकेस में दिखाई देते हैं।
सबसे पहले, हम एक <head> टैग परिभाषित करते हैं। इस टैग में एक <style> टैग शामिल है। हम इस स्टाइल टैग का उपयोग अपने text-transform नियम को पेज पर जोड़ने के लिए करते हैं। हम एक एक्सटर्नल CSS स्टाइल शीट का उपयोग कर सकते थे लेकिन क्योंकि यह उदाहरण इतना छोटा है हमें अनिवार्य रूप से एक की आवश्यकता नहीं है।
<body> टैग में, हम एक पैराग्राफ परिभाषित करते हैं। यह पैराग्राफ सभी कैपिटल लेटर्स में दिखाई देगा भले ही हमने वाक्य को सेंटेंस केस में लिखा हो। हम यह जानते हैं क्योंकि text-transform प्रॉपर्टी हमारे वेब पेज पर सभी HTML <p> टैग्स पर लागू होती है।
font-variant: small-caps; पर एक शब्द
यदि आप टाइटल केस की विशेषताएं चाहते हैं लेकिन लोअरकेस का भी उपयोग करना चाहते हैं, तो आप font-variant: small-caps का उपयोग कर सकते हैं। टाइटल केस एक वाक्य को संदर्भित करता है जहां प्रत्येक शब्द का पहला लेटर कैपिटल लेटर्स में दिखाई देता है।
यहां font-variant नियम का एक उदाहरण है:
<head> <style> p { font-variant: small-caps; } </style> </head> <body> <p>this is in all caps</p> </body> </html>
निष्कर्ष
text-transform प्रॉपर्टी हमें एलिमेंट में सभी टेक्स्ट को अपरकेस बनाने का विकल्प देती है। font-variant प्रॉपर्टी हमें सभी स्मॉल केस टेक्स्ट को अपरकेस में दिखाने का विकल्प देती है लेकिन स्मॉल केस लेटर्स की लेटर हाइट के साथ।
ये नियम HTML में टेक्स्ट फॉर्मेटिंग के लिए आपके टूल बॉक्स में दो और टूल हैं।
क्या आप HTML में कोडिंग के बारे में अधिक जानना चाहते हैं? हमारा HTML सीखने का गाइड पढ़ें। आपको शीर्ष कोर्सेज, किताबें, और शिक्षण संसाधनों पर सलाह मिलेगी, साथ ही अपनी सीखने की यात्रा जारी रखने के टिप्स भी।
