कक्षाएं और आईडी आपकी सीएसएस बढ़ाएं
आज के वेब पर बिल्डिंग वेबसाइटों को सीएसएस (कैस्केडिंग स्टाइल शीट्स) की गहरी समझ की आवश्यकता है। ये निर्देश हैं कि आप यह निर्धारित करने के लिए वेबसाइट देते हैं कि यह ब्राउज़र विंडो में लेआउट कैसे करेगा। आप अपने एचटीएमएल दस्तावेज़ में "शैलियों" की एक श्रृंखला लागू करते हैं जो आपके वेबपृष्ठ का स्वरूप और अनुभव बनाएगा।
दस्तावेज़ में उन उपर्युक्त शैलियों को लागू करने के कई तरीके हैं, लेकिन कई बार आप किसी दस्तावेज़ में केवल कुछ तत्वों पर शैली का उपयोग करना चाहते हैं, लेकिन उस तत्व के सभी उदाहरण नहीं।
आप प्रत्येक शैली के लिए स्टाइल नियम दोहराने के बिना, एक शैली में कई तत्वों पर लागू कर सकते हैं कि एक शैली भी बनाना चाह सकते हैं। इन वांछित शैलियों को प्राप्त करने के लिए, आप कक्षा और आईडी HTML विशेषताओं का उपयोग करेंगे। ये गुण वैश्विक विशेषताएं हैं जिन्हें लगभग हर HTML टैग पर लागू किया जा सकता है। इसका मतलब यह है कि क्या आप अपने दस्तावेज़ में डिवीजन, पैराग्राफ, लिंक, सूचियां या एचटीएमएल के अन्य टुकड़ों को स्टाइल कर रहे हैं, आप कक्षा और आईडी विशेषताओं में बदल सकते हैं इस काम को पूरा करने में आपकी मदद करें!
कक्षा चयनकर्ताओं
कक्षा चयनकर्ता आपको एक ही तत्व या टैग में एक से अधिक शैलियों को सेट करने की अनुमति देता है। उदाहरण के लिए, हो सकता है कि आप अपने पाठ के कुछ हिस्सों को दस्तावेज़ में शेष पाठ से अलग रंग में बुलाएं। ये हाइलाइट किए गए अनुभाग एक "चेतावनी" हो सकते हैं जिसे आप पृष्ठ पर सेट कर रहे हैं। आप अपने अनुच्छेद इस तरह के वर्गों के साथ असाइन कर सकते हैं:
पी {रंग: # 0000 एफ; }
p.alert {रंग: # एफएफ 0000; }
ये शैलियों सभी अनुच्छेदों का रंग नीला (# 0000ff) पर सेट करेंगी, लेकिन "चेतावनी" के वर्ग विशेषता वाले किसी अनुच्छेद के बजाय लाल (# ff0000) में स्टाइल किया जाएगा। ऐसा इसलिए है क्योंकि कक्षा विशेषता पहले सीएसएस नियम की तुलना में अधिक विशिष्टता है, जो केवल टैग चयनकर्ता का उपयोग करती है।
सीएसएस के साथ काम करते समय, एक और विशिष्ट नियम कम विशिष्ट एक ओवरराइड करेगा। तो इस उदाहरण में, अधिक सामान्य नियम सभी पैराग्राफ का रंग सेट करता है, लेकिन दूसरे पैराग्राफ पर सेट करने वाले ओवरराइड की तुलना में दूसरा, अधिक विशिष्ट नियम।
यहां बताया गया है कि इसका उपयोग कुछ HTML मार्कअप में कैसे किया जा सकता है:
यह अनुच्छेद नीले रंग में प्रदर्शित किया जाएगा, जो पृष्ठ के लिए डिफ़ॉल्ट है।
यह अनुच्छेद नीले रंग में भी होगा।
<पी वर्ग = "अलर्ट">
और यह अनुच्छेद लाल रंग में प्रदर्शित किया जाएगा क्योंकि कक्षा विशेषता तत्व चयनकर्ता स्टाइल से मानक नीले रंग को ओवरराइट कर देगी।
उस उदाहरण में, "p.alert" की शैली केवल पैराग्राफ तत्वों पर लागू होगी जो "चेतावनी" वर्ग का उपयोग करती हैं। अगर आप उस वर्ग का उपयोग कई HTML तत्वों में करना चाहते हैं, तो आप बस HTML तत्व को शुरुआत से हटा देंगे स्टाइल कॉल (बस अवधि (।) को जगह में छोड़ना सुनिश्चित करें), इस तरह:
.alert {पृष्ठभूमि-रंग: # एफएफ 0000;}
यह वर्ग अब किसी भी तत्व के लिए उपलब्ध है जिसकी आवश्यकता है। आपके एचटीएमएल का कोई भी टुकड़ा जिसमें "अलर्ट" का वर्ग विशेषता मान अब इस शैली को प्राप्त करेगा। नीचे दिए गए एचटीएमएल में, हमारे पास एक पैराग्राफ और हेडिंग लेवल 2 है जो "अलर्ट" क्लास का उपयोग करता है। सीएसएस पर आधारित दोनों में लाल रंग का पृष्ठभूमि रंग होगा जो हमने अभी दिखाया है।
<पी वर्ग = "अलर्ट">
यह अनुच्छेद लाल रंग में लिखा जाएगा।
और यह h2 लाल भी होगा।
आज वेबसाइटों पर, वर्ग विशेषताओं का उपयोग अक्सर अधिकांश तत्वों पर किया जाता है क्योंकि आईडी के विशिष्टता परिप्रेक्ष्य से काम करना आसान होता है। आपको क्लास विशेषताओं से भरे जाने के लिए सबसे वर्तमान HTML पेज मिलेंगे, जिनमें से कुछ दस्तावेज़ में कई बार दोहराए जाते हैं और अन्य जो केवल एक बार दिखाई दे सकते हैं।
आईडी चयनकर्ताओं
आईडी चयनकर्ता आपको किसी टैग या अन्य HTML तत्व से संबद्ध किए बिना किसी विशिष्ट शैली का नाम देने की अनुमति देता है। मान लें कि आपके एचटीएमएल मार्कअप में एक डिवीजन था जिसमें किसी ईवेंट के बारे में जानकारी शामिल है।
आप इस प्रभाग को "घटना" की एक आईडी विशेषता दे सकते हैं, और फिर यदि आप उस विभाजन को 1-पिक्सेल चौड़ी काला सीमा के साथ रेखांकित करना चाहते हैं तो आप इस तरह एक आईडी कोड लिखते हैं:
#event {सीमा: 1 पीएक्स ठोस # 000; }
आईडी चयनकर्ताओं के साथ चुनौती यह है कि उन्हें HTML दस्तावेज़ में दोहराया नहीं जा सकता है। वे अद्वितीय होना चाहिए (आप अपनी साइट के कई पृष्ठों पर एक ही आईडी का उपयोग कर सकते हैं, लेकिन प्रत्येक व्यक्तिगत HTML दस्तावेज़ में केवल एक बार)। तो यदि आपके पास 3 घटनाएं थीं, जिन्हें सभी को इस सीमा की आवश्यकता थी, तो आपको उन्हें "event1", "event2" और "event3" के आईडी विशेषताओं और उनमें से प्रत्येक शैली की आवश्यकता होगी। इसलिए, "घटना" के उपरोक्त वर्ग विशेषता का उपयोग करना और उन्हें एक ही समय में शैली बनाना बहुत आसान होगा।
आईडी विशेषताओं के साथ एक और चुनौती यह है कि उनके पास वर्ग विशेषताओं की तुलना में उच्च विशिष्टता है। इसका अर्थ यह है कि यदि आपको पहले से स्थापित शैली को ओवरराइड करने वाले सीएसएस की आवश्यकता है, तो ऐसा करना मुश्किल हो सकता है यदि आपने आईडी पर बहुत अधिक भरोसा किया है। यही कारण है कि कई वेब डेवलपर्स अपने मार्कअप में आईडी का उपयोग करने से दूर चले गए हैं, भले ही वे केवल एक बार उस मान का उपयोग करना चाहते हैं, और इसके बजाय लगभग सभी शैलियों के लिए कम-विशिष्ट वर्ग विशेषताओं में बदल गए हैं।
एक क्षेत्र जहां आईडी विशेषताएँ खेल में आती हैं वह तब होती है जब आप एक पृष्ठ बनाना चाहते हैं जिसमें पृष्ठ एंकर लिंक हों। उदाहरण के लिए, यदि आपके पास एक लंबन शैली वेबसाइट है जिसमें एक पृष्ठ पर सभी सामग्री शामिल हैं जो लिंक के साथ "उस पृष्ठ के विभिन्न हिस्सों" कूदते हैं। यह आईडी एंटरप्राइज़ और टेक्स्ट लिंक का उपयोग करके किया जाता है जो इन एंकर लिंक का उपयोग करते हैं।
आप लिंक के href विशेषता के लिए # प्रतीक से पहले उस विशेषता का मान जोड़ देंगे, जैसे:
यह लिंक है
क्लिक या स्पर्श किए जाने पर, यह लिंक उस पृष्ठ के उस भाग पर कूद जाएगा जिसमें यह आईडी विशेषता है। यदि पृष्ठ पर कोई तत्व इस आईडी मान का उपयोग नहीं करता है, तो लिंक कुछ भी नहीं करेगा।
याद रखें, यदि आप किसी साइट पर इन-पेज लिंक करना चाहते हैं, तो आईडी विशेषताओं का उपयोग आवश्यक होगा, लेकिन आप अभी भी सामान्य सीएसएस स्टाइल उद्देश्यों के लिए कक्षाओं में बदल सकते हैं। इस प्रकार मैं आज पेजों को चिह्नित करता हूं - मैंने कक्षा चयनकर्ताओं को यथासंभव उपयोग किया और केवल आईडी पर बदल दिया जब मुझे न केवल सीएसएस के लिए एक हुक के रूप में कार्य करने की आवश्यकता होती है बल्कि इन-पेज लिंक भी होती है।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 8/9/17 को संपादित किया गया