सीएसएस ऑल कैप्स:एक चरण-दर-चरण मार्गदर्शिका

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

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

सीएसएस ऑल कैप्स

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

टेक्स्ट का एक ब्लॉक बनाने के लिए सभी बड़े अक्षर हैं, टेक्स्ट-ट्रांसफॉर्म:अपरकेस . का उपयोग करें आपके CSS चयनकर्ता में:

टेक्स्ट-ट्रांसफ़ॉर्म:अपरकेस;

टेक्स्ट-ट्रांसफ़ॉर्म प्रॉपर्टी तीन संभावित मान स्वीकार करती है:

अपरकेस:टेक्स्ट एलिमेंट में प्रत्येक शब्द को अपरकेस में सेट करता है।
लोअरकेस:टेक्स्ट को लोअरकेस में सेट करता है।
कैपिटलाइज़:प्रत्येक शब्द को कैपिटलाइज़ करता है, जिसे टाइटल केस भी कहा जाता है।

आइए कार्रवाई में टेक्स्ट-ट्रांसफ़ॉर्म विधि का एक उदाहरण देखें।

सभी Caps CSS उदाहरण

हम एक वेब पेज बनाने जा रहे हैं जो "यह पेज मौजूद नहीं है" प्रदर्शित करता है। सभी बड़े अक्षरों में।

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

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

ऐसा करने के लिए, हम अपने सभी अक्षरों को अपरकेस में टाइप कर सकते हैं। इस दृष्टिकोण का नकारात्मक पक्ष यह है कि हमें अपने पाठ को मैन्युअल रूप से फिर से लिखना होगा। इतने छोटे वाक्य के लिए यह कोई समस्या नहीं है। लेकिन, यदि आप टेक्स्ट की लंबी स्ट्रिंग के मामले को बदल रहे थे, तो मैन्युअल रूप से अक्षरों को बदलना अधिक परेशानी वाला हो जाएगा।

हम सुरक्षित रहने के लिए टेक्स्ट-ट्रांसफ़ॉर्म विधि का उपयोग करने जा रहे हैं।

आइए अपने टेक्स्ट और टेक्स्ट-ट्रांसफॉर्म नियम के साथ एक HTML दस्तावेज़ को परिभाषित करें:

<html>
 
 <head>
   <style>
     p {
       text-transform: uppercase;
     }
   </style>
 </head>
 <body>
 
   <p>this is in all caps</p>
 </body>
</html>

चयनित टेक्स्ट के सभी अक्षर अपरकेस में दिखाई देते हैं।

सबसे पहले, हम एक टैग को परिभाषित करते हैं। इस टैग में