कोड की पुनरावृत्ति से बचने के लिए, हम HTML और CSS में कई कक्षाओं का उपयोग करते हैं। CSS के साथ, हम दोनों वर्गों को एक साथ परिभाषित और स्टाइल भी कर सकते हैं और एक तत्व में कई वर्गों को अलग-अलग वर्ग आईडी निर्दिष्ट करके उपयोग कर सकते हैं। एक HTML तत्व में कई वर्गों को जोड़ने के लिए अंतरिक्ष से अलग किए गए सिंटैक्स का उपयोग करके इस दृष्टिकोण का पालन किया जा सकता है।
इस लेख में, हम सीखेंगे कि एक तत्व में कई वर्गों को कैसे जोड़ा जाए।
CSS में मल्टीपल क्लासेस का उपयोग कैसे करें?
एक तत्व में दो या दो से अधिक वर्गों का उपयोग करने के लिए, प्रत्येक वर्ग आईडी को एक स्थान से अलग किया जाएगा।
एक तत्व में कई वर्गों का उपयोग करने के लिए आपको निम्नलिखित सिंटैक्स का पालन करना होगा:
< h1 वर्ग = 'कक्षा_1 कक्षा_2 कक्षा_3' > सौंपना... एच >
एक HTML तत्व में, आप एक से अधिक वर्गों को एक स्थान से अलग करके शामिल कर सकते हैं। आपकी सुविधा के लिए, यहाँ एक उदाहरण है।
उदाहरण: CSS में एकाधिक कक्षाओं का उपयोग करना
नीचे दिए गए उदाहरण में, हम बनाएंगे:
-
टैग का उपयोग करते हुए एक शीर्षक और वर्ग का नाम निर्दिष्ट करें ' शीर्षक '
- इसके बाद, हम एक और शीर्षक बनाएंगे और इसे दो अलग-अलग वर्गों को सौंपेंगे: “ शीर्षक ' तथा ' रेखा ' इन वर्ग आईडी को एक स्थान से अलग किया जाता है:
एचटीएमएल
एच 1 >
< एच 1 कक्षा = 'शीर्षक पंक्ति' >
एकाधिक वर्ग में एक तत्व
एच 1 >
अब, CSS फ़ाइल पर चलते हैं और नीचे सूचीबद्ध कुछ CSS गुणों को लागू करते हैं:
- आरजीबी () फ़ंक्शन का उपयोग करके शीर्षक के लिए पृष्ठभूमि का रंग सेट करें ' (69, 51, 151) '
- फ़ॉन्ट शैली सेट करें ' तिरछा 'शीर्षक के लिए।
HTML कक्षा में, पहला शीर्षक वर्ग के नाम का उपयोग करता है “ शीर्षक ' तो, निर्दिष्ट वर्ग में निर्दिष्ट शैली को पहले शीर्षक पर लागू किया जाएगा:
.शीर्षक {
पृष्ठभूमि-रंग: आरजीबी ( 69 , 51 , 151 ) ;
फ़ॉन्ट-शैली: इटैलिक
}
के लिए ' रेखा 'वर्ग, हमारे पास है:
- आरजीबी () फ़ंक्शन का उपयोग करके शीर्षक का रंग सेट करें ' (255, 0, 0) '
- टेक्स्ट-डेकोरेशन-लाइन को “के रूप में लागू करें” रेखांकन '
दूसरा शीर्षक दोनों वर्गों की शैलियों का उपयोग करेगा: ' शीर्षक ' तथा ' रेखा ' कक्षा:
।रेखा {रंग: आरजीबी ( 255 , 0 , 0 ) ;
टेक्स्ट-डेकोरेशन-लाइन: अंडरलाइन;
}
कार्यान्वयन के बाद, परिणाम की जाँच करें:
आउटपुट से, आप देख सकते हैं कि दूसरा शीर्षक दोनों CSS वर्गों का उपयोग करता है।
निष्कर्ष
एक ही तत्व पर एकाधिक वर्गों का उपयोग करने के लिए, सफेद रिक्त स्थान द्वारा अलग किए गए विभिन्न वर्ग आईडी का उपयोग करें। इसका इस्तेमाल करके हम अलग-अलग CSS properties को एक साथ अप्लाई कर सकते हैं। यह हमें उस वर्ग का पुन: उपयोग करने की अनुमति देता है जहां समान तत्व मौजूद हैं। इस आलेख में समझाया गया है कि एक ही तत्व में एकाधिक वर्गों का उपयोग कैसे करें और इसे एक उदाहरण के साथ शैलीबद्ध करें।