class विशेषता

class विशेषता एलिमेंट (एलिमेंट से तात्पर्य टैग से है) के लिए एक या अधिक कक्षाएं निर्दिष्ट करती है।

यह इसलिए किया जाता है ताकि बाद में CSS के माध्यम से उन एलिमेंट्स के समूह को एक्सेस किया जा सके, जिनके लिए एक ही कक्षा निर्दिष्ट की गई है, और उसके लिए विशिष्ट गुण लागू किए जा सकें (उदाहरण के लिए, टेक्स्ट का रंग बदलें, फ़ॉन्ट का आकार इत्यादि)।

id विशेषता भी मौजूद है, जो class विशेषता के समान HTML पेज पर एलिमेंट्स को चुनने की अनुमति देती है।

class विशेषता और id विशेषता के बीच अंतर यह है कि class एलिमेंट्स के समूह को चुनता है (भले ही यह एक एलिमेंट को दिया गया हो - बाद में इसे किसी अन्य को भी दिया जा सकता है), जबकि id एक अद्वितीय एलिमेंट को चुनता है (वेबसाइट के पेज पर इस तरह के id वाला कोई अन्य एलिमेंट नहीं होना चाहिए, अन्यथा संघर्ष होगा)।

कैसे समझें कि एलिमेंट को क्या देना है - कक्षा या id? कक्षा उन एलिमेंट्स को दी जाती है जो वेबसाइट के पेजों पर दोहराए जाते हैं (ताकि एक ही CSS कोड कई बार न लिखना पड़े)। भले ही आपके पास वर्तमान में यह एलिमेंट एक ही है, लेकिन आपको लगता है कि ऐसे ही अन्य एलिमेंट भविष्य में आ सकते हैं - इस एलिमेंट को कक्षा दें। यदि आप आश्वस्त हैं कि ऐसा एलिमेंट अद्वितीय है - तो उसे id दें। हालाँकि वर्तमान में यह प्रवृत्ति है कि सभी एलिमेंट्स को कक्षा दी जाए, और id को JavaScript के लिए छोड़ दिया जाए, लेकिन यह सर्वमान्य नहीं है।

एक एलिमेंट को कई कक्षाएं दी जा सकती हैं, इस स्थिति में उन्हें स्पेस से अलग करके सूचीबद्ध किया जाना चाहिए।

कक्षाओं के नाम अंग्रेजी के अक्षरों, अंकों में टाइप किए जाने चाहिए, बिना स्पेस के (स्पेस कक्षाओं को एक-दूसरे से अलग करता है, इसके बजाय अंडरस्कोर या हाइफन का उपयोग किया जा सकता है)। कक्षाएं अंक से शुरू नहीं होनी चाहिए (HTML5 में अब संभव है, लेकिन पुराने ब्राउज़रों में काम नहीं करेगा)।

कक्षाओं के नाम अंग्रेजी भाषा में दिए जाने चाहिए (रूसी में नहीं, बस अंग्रेजी के अक्षरों में!)। नाम सार्थक होने चाहिए, कक्षा का सार प्रतिबिंबित करने वाले।

उदाहरण

आइए test कक्षा वाले सभी पैराग्राफ को टेक्स्ट का लाल रंग दें:

html<p class="test">test कक्षा वाला पैराग्राफ।</p>
<p>बिना कक्षा वाला नियंत्रण पैराग्राफ।</p>

css.test {
  color: red;
}

Результат:

उदाहरण . एलिमेंट के लिए कई कक्षाएं

और यहाँ आइए पहले पैराग्राफ को कई कक्षाएं दें - test1 और test2 (उन्हें स्पेस से अलग करके लिखें)। कक्षा test1 टेक्स्ट का लाल रंग निर्धारित करती है, और कक्षा test2 फ़ॉन्ट का आकार 20px में निर्धारित करती है। दूसरे पैराग्राफ को केवल test1 कक्षा दी गई है (यह पैराग्राफ लाल हो जाएगा), और तीसरे पैराग्राफ को - test2 कक्षा (इस पैराग्राफ का फ़ॉन्ट आकार 20px होगा)। पहला पैराग्राफ, जिसमें दो कक्षाएं हैं, एक साथ लाल रंग और 20px फ़ॉन्ट आकार दोनों रखेगा:

html<p class="test1 test2">test1 और test2 दो कक्षाओं वाला पैराग्राफ।</p>
<p class="test1">test1 कक्षा वाला पैराग्राफ।</p>
<p class="test2">test2 कक्षा वाला पैराग्राफ।</p>
<p>बिना कक्षा वाला नियंत्रण पैराग्राफ।</p>

css.test1 {
  color: red;
}
.test2 {
  font-size: 20px;
}

Результат:

यह भी देखें