आप प्रति तत्व एक सीएसएस वर्ग तक ही सीमित नहीं हैं।
कैस्केडिंग स्टाइल शीट्स (सीएसएस) आपको उस तत्व पर लागू विशेषताओं में हुक करके तत्व की उपस्थिति को परिभाषित करने की अनुमति देता है। ये गुण या तो आईडी और एक वर्ग हो सकते हैं और, सभी विशेषताओं की तरह, वे उन तत्वों के लिए उपयोगी जानकारी जोड़ते हैं जिन्हें वे संलग्न करते हैं। आप जिस तत्व को किसी तत्व में जोड़ते हैं उसके आधार पर, आप उस तत्व और वेबसाइट के रूप में देखने और महसूस करने के लिए जरूरी आवश्यक दृश्य शैलियों को लागू करने के लिए एक सीएसएस चयनकर्ता लिख सकते हैं।
जबकि आईडी या कक्षाएं सीएसएस नियमों के साथ उन्हें जोड़ने के उद्देश्य से काम करती हैं, आधुनिक वेब डिज़ाइन विधियां आईडी पर कक्षाओं का पक्ष लेती हैं, क्योंकि वे कुल मिलाकर काम करने के लिए कम विशिष्ट और आसान होती हैं। हां, आपको अभी भी कई साइटें मिलेंगी जो आईडी का उपयोग करती हैं, लेकिन उन विशेषताओं को अतीत की तुलना में अधिक कम किया जा रहा है जबकि कक्षाएं आधुनिक वेब पृष्ठों पर ली गई हैं।
सीएसएस में सिंगल या एकाधिक क्लासेस?
ज्यादातर मामलों में आप किसी तत्व को एकल वर्ग विशेषता असाइन करेंगे, लेकिन आप वास्तव में केवल एक वर्ग तक सीमित नहीं हैं, जिस तरह से आप आईडी के साथ हैं। जबकि एक तत्व में केवल एक आईडी विशेषता हो सकती है, आप पूरी तरह से एक तत्व एकाधिक कक्षाएं दे सकते हैं और, कुछ मामलों में, ऐसा करने से आपके पृष्ठ को स्टाइल और अधिक लचीला बनाना आसान हो जाएगा!
यदि आपको किसी तत्व को एकाधिक कक्षाएं असाइन करने की आवश्यकता है, तो आप अतिरिक्त कक्षाएं जोड़ सकते हैं और उन्हें अपनी विशेषता में किसी स्थान से अलग कर सकते हैं।
उदाहरण के लिए, इस अनुच्छेद में तीन वर्ग हैं:
pullquote featured left "> यह अनुच्छेद का पाठ होगा
यह अनुच्छेद टैग पर निम्नलिखित तीन वर्ग सेट करता है:
- Pullquote
- विशेष रुप से प्रदर्शित
- बाएं
इन वर्ग मूल्यों में से प्रत्येक के बीच की जगहों पर ध्यान दें। उन रिक्त स्थानों को अलग-अलग, अलग-अलग वर्गों के रूप में सेट किया जाता है। यही कारण है कि कक्षा के नामों में रिक्त स्थान नहीं हो सकते हैं, क्योंकि ऐसा करने से उन्हें अलग-अलग वर्गों के रूप में सेट किया जाएगा।
उदाहरण के लिए, यदि आपने अंतरिक्ष के बिना "पुलक्वॉट-फीचर्ड-बाएं" का उपयोग किया है, तो यह एक वर्ग मान होगा, लेकिन ऊपर दिया गया उदाहरण, जहां इन तीन शब्दों को एक स्थान से अलग किया गया है, उन्हें व्यक्तिगत मान के रूप में सेट करता है। इस अवधारणा को समझना महत्वपूर्ण है क्योंकि आप तय करते हैं कि आपके वेबपृष्ठों पर कौन से वर्ग मूल्यों का उपयोग करना है।
एक बार जब आपके एचटीएमएल में क्लास वैल्यू हो जाए, तो आप इन्हें अपने सीएसएस में कक्षाओं के रूप में असाइन कर सकते हैं और उन शैलियों को लागू कर सकते हैं जिन्हें आप जोड़ना चाहते हैं। उदाहरण के लिए।
.pullquote {...}
.featured {...}
पी.के. {...}
इन उदाहरणों में, सीएसएस घोषणाएं और मूल्य जोड़े घुंघराले ब्रेसिज़ के अंदर होंगे, इस प्रकार उन शैलियों को उपयुक्त चयनकर्ता पर लागू किया जाएगा।
नोट - यदि आप एक विशिष्ट तत्व (उदाहरण के लिए, पी। बाएं) में कक्षा निर्धारित करते हैं , तो भी आप कक्षाओं की सूची के हिस्से के रूप में इसका उपयोग कर सकते हैं; हालांकि, ध्यान रखें कि यह केवल उन तत्वों को प्रभावित करेगा जो सीएसएस में निर्दिष्ट हैं। दूसरे शब्दों में, पी.ए.ए. स्टाइल केवल इस वर्ग के अनुच्छेदों पर लागू होगी क्योंकि आपका चयनकर्ता वास्तव में इसे "बाएं वर्ग के वर्ग मान वाले पैराग्राफ" पर लागू करने के लिए कह रहा है। इसके विपरीत, उदाहरण में अन्य दो चयनकर्ता एक निश्चित तत्व निर्दिष्ट नहीं करते हैं, इसलिए वे उन वर्ग मानों का उपयोग करने वाले किसी भी तत्व पर लागू होंगे।
एकाधिक वर्गों के लाभ
एकाधिक कक्षाएं उस तत्व के लिए पूरी नई शैली बनाने के बिना तत्वों पर विशेष प्रभाव जोड़ने में आसान बना सकती हैं।
उदाहरण के लिए, हो सकता है कि आप बाएं या दाएं तत्वों को तेज़ी से फ़्लोट करने की क्षमता प्राप्त कर सकें। आप बस दो फ्लोट के साथ बाएं और दाएं लिख सकते हैं: बाएं; और फ्लोट: दाएं; उनमे। फिर, जब भी आपके पास कोई तत्व होता है तो आपको बाईं ओर तैरने की आवश्यकता होती है, तो आप बस अपनी कक्षा सूची में "बाएं" वर्ग जोड़ देंगे।
हालांकि, यहां चलने के लिए एक अच्छी लाइन है। याद रखें कि वेब मानकों शैली और संरचना को अलग करने का निर्देश देते हैं। संरचना एचटीएमएल के माध्यम से संभाली जाती है जबकि शैली सीएसएस में होती है।
यदि आपका एचटीएमएल दस्तावेज़ तत्वों से भरा है जिसमें सभी के पास "लाल" या "बाएं" जैसे वर्ग नाम हैं, जो नाम हैं जो यह निर्धारित करते हैं कि तत्वों की तुलना में तत्वों को कैसे दिखाना चाहिए, आप संरचना और शैली के बीच उस रेखा को पार कर रहे हैं। मैं इस कारण से जितना संभव हो सके अपने गैर-अर्थात् वर्ग नामों को सीमित करने की कोशिश करता हूं।
एकाधिक वर्ग, सेमेन्टिक्स, और जावास्क्रिप्ट
कई वर्गों का उपयोग करने का एक अन्य लाभ यह है कि यह आपको कई और अंतःक्रियाशीलता की संभावनाएं देता है।
आप प्रारंभिक कक्षाओं को हटाए बिना जावास्क्रिप्ट का उपयोग कर मौजूदा तत्वों में नए वर्गों को लागू कर सकते हैं। आप किसी तत्व के अर्थशास्त्र को परिभाषित करने के लिए कक्षाओं का भी उपयोग कर सकते हैं। इसका अर्थ यह है कि आप यह निर्धारित करने के लिए अतिरिक्त कक्षाओं में जोड़ सकते हैं कि उस तत्व का अर्थ अर्थात् अर्थपूर्ण है। इस प्रकार माइक्रोफॉर्मैट काम करता है।
एकाधिक वर्गों के नुकसान
आपके तत्वों पर एकाधिक कक्षाओं का उपयोग करने का सबसे बड़ा नुकसान यह है कि यह समय के साथ देखने और प्रबंधित करने के लिए उन्हें थोड़ा अनावश्यक बना सकता है। यह निर्धारित करना मुश्किल हो सकता है कि कौन सी शैलियों तत्व को प्रभावित कर रही हैं और यदि कोई स्क्रिप्ट इसे प्रभावित कर रही है। बूटस्ट्रैप की तरह आज उपलब्ध कई ढांचे, कई वर्गों वाले तत्वों का भारी उपयोग करते हैं। यदि आप सावधान नहीं हैं तो वह कोड हाथ से बाहर निकल सकता है और बहुत तेज़ी से काम करने में मुश्किल हो सकता है।
जब आप कई कक्षाओं का उपयोग करते हैं, तो आप एक वर्ग की शैली को दूसरे की शैली को ओवरराइड करने का जोखिम भी चलाते हैं, भले ही आप इसका इरादा नहीं रखते। इसके बाद यह पता लगाना मुश्किल हो सकता है कि आपकी शैलियों को क्यों लागू नहीं किया जा रहा है, भले ही ऐसा लगता है कि उन्हें चाहिए।
आपको उस तत्व पर लागू विशेषताओं के साथ भी विशिष्टता से अवगत होना चाहिए!
क्रोम में वेबमास्टर टूल्स जैसे टूल का उपयोग करके, आप आसानी से देख सकते हैं कि आपकी कक्षाएं आपकी शैलियों को कैसे प्रभावित कर रही हैं और विरोधाभासी शैलियों और विशेषताओं की इस समस्या से बचें।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 8/7/17 को संपादित किया गया