आज के वेब पर अच्छी तरह से स्टाइल वाली वेबसाइट बनाने के लिए. की गहरी समझ की आवश्यकता होती है व्यापक शैली पत्रक. अपने वेबपेज के रंगरूप को सूचित करने के लिए अपने HTML दस्तावेज़ में CSS शैलियों की एक श्रृंखला लागू करें।
कक्षा और आईडी गुण
डिजाइनरों को कभी-कभी केवल शैली लागू करनी चाहिए कुछ किसी दस्तावेज़ में तत्वों की, लेकिन उस तत्व के सभी उदाहरण नहीं। इन वांछित शैलियों को प्राप्त करने के लिए, का उपयोग करें कक्षा तथा ईद एचटीएमएल गुण। ये विशेषताएँ वैश्विक विशेषताएँ हैं जो लगभग सभी पर लागू होती हैं एचटीएमएल टैग—तो चाहे आप अपने दस्तावेज़ में विभाजन, पैराग्राफ, लिंक, सूचियाँ, या HTML के किसी अन्य भाग को स्टाइल करें, आप इस कार्य को पूरा करने में मदद करने के लिए वर्ग और आईडी विशेषताओं की ओर रुख कर सकते हैं!
कक्षा चयनकर्ता
वर्ग चयनकर्ता किसी दस्तावेज़ में एक ही तत्व या टैग के लिए कई शैलियाँ सेट करता है। उदाहरण के लिए, अपने पाठ के कुछ अनुभागों को एक अलग रंग में अलर्ट के रूप में कॉल करने के लिए, अपने पैराग्राफ को इस तरह की कक्षाओं के साथ असाइन करें:
पी {रंग: #0000ff; }
चेतावनी {रंग: #ff0000; }
ये शैलियाँ का रंग सेट करेंगी
सब नीले रंग के पैराग्राफ़ (#0000ff), लेकिन वर्ग विशेषता वाला कोई भी अनुच्छेद चेतावनी इसके बजाय लाल रंग में स्टाइल किया जाएगा (#ff0000)। ऐसा इसलिए है क्योंकि वर्ग विशेषता में पहले CSS नियम की तुलना में उच्च विशिष्टता है, जो केवल एक टैग चयनकर्ता का उपयोग करता है। साथ काम करते समय सीएसएस, अधिक विशिष्ट नियम कम विशिष्ट नियम को ओवरराइड कर देगा। तो इस उदाहरण में, अधिक सामान्य नियम सभी अनुच्छेदों का रंग सेट करता है, लेकिन दूसरा, अधिक विशिष्ट नियम केवल कुछ अनुच्छेदों में उस सेटिंग को ओवरराइड करता है।यहां बताया गया है कि इसका उपयोग कुछ HTML मार्कअप में कैसे किया जा सकता है:
यह अनुच्छेद नीले रंग में प्रदर्शित होगा, जो कि पृष्ठ के लिए डिफ़ॉल्ट है।
यह पैराग्राफ भी नीले रंग में होगा।
और यह पैराग्राफ लाल रंग में प्रदर्शित किया जाएगा क्योंकि वर्ग विशेषता तत्व चयनकर्ता स्टाइल से मानक नीले रंग को अधिलेखित कर देगी।
उस उदाहरण में, की शैली पी.अलर्ट केवल उन अनुच्छेद तत्वों पर लागू होगा जो इसका उपयोग करते हैं चेतावनी कक्षा। कई HTML तत्वों में उस वर्ग का उपयोग करने के लिए, HTML तत्व को स्टाइल कॉल की शुरुआत से हटा दें, जैसे:
.अलर्ट {पृष्ठभूमि-रंग: #ff0000;}
यह वर्ग अब किसी भी ऐसे तत्व के लिए उपलब्ध है जिसे इसकी आवश्यकता है। आपके HTML का कोई भी भाग जिसका वर्ग विशेषता मान है चेतावनी अब मिलेगा यह स्टाइल नीचे दिए गए HTML में, हमारे पास एक अनुच्छेद और एक स्तर-दो शीर्षक है जो. का उपयोग करता है चेतावनी कक्षा। दोनों लाल रंग का पृष्ठभूमि रंग प्रदर्शित करते हैं:
यह पैराग्राफ लाल रंग में लिखा जाएगा।
आज वेबसाइटों पर, अधिकांश तत्वों पर वर्ग विशेषताओं का अक्सर उपयोग किया जाता है क्योंकि आईडी की तुलना में विशिष्टता के दृष्टिकोण से उनके साथ काम करना आसान होता है। आप पाएंगे कि अधिकांश वर्तमान HTML पृष्ठ वर्ग विशेषताओं से भरे हुए हैं, जिनमें से कुछ एक दस्तावेज़ में बार-बार दोहराए जाते हैं और अन्य जो केवल एक बार दिखाई दे सकते हैं।
आईडी चयनकर्ता
आईडी चयनकर्ता किसी विशिष्ट शैली को टैग या अन्य से संबद्ध किए बिना नाम देता है एचटीएमएल तत्व.
अपने HTML मार्कअप में एक ऐसा विभाजन मान लें जिसमें किसी ईवेंट के बारे में जानकारी हो। आप इस विभाजन को दे सकते हैं आईडी विशेषता का प्रतिस्पर्धा, और फिर उस विभाजन को 1-पिक्सेल-चौड़ी काली सीमा के साथ रेखांकित करें:
#ईवेंट { बॉर्डर: 1px सॉलिड #000; }
के साथ चुनौती आईडी चयनकर्ता यह है कि उन्हें HTML दस्तावेज़ में दोहराया नहीं जा सकता है। वे अद्वितीय होने चाहिए (आप अपनी साइट के कई पृष्ठों पर एक ही आईडी का उपयोग कर सकते हैं, लेकिन प्रत्येक व्यक्तिगत HTML दस्तावेज़ में केवल एक बार)। तो तीन घटनाओं के लिए जिन्हें इस सीमा की आवश्यकता है, आपको आईडी विशेषताओं की पहचान करनी होगी घटना १, घटना २, तथा घटना3 और उनमें से प्रत्येक को स्टाइल करें। इसलिए, उपरोक्त वर्ग विशेषता का उपयोग करना बहुत आसान होगा प्रतिस्पर्धा और उन सभी को एक ही बार में स्टाइल करें।
आईडी विशेषताओं की जटिलताएं
आईडी विशेषताओं के साथ एक और चुनौती यह है कि उनके पास वर्ग विशेषताओं की तुलना में उच्च विशिष्टता है। पहले से स्थापित शैली को ओवरराइड करने के लिए, ऐसा करना मुश्किल हो सकता है यदि आपने आईडी पर बहुत अधिक भरोसा किया है। कई वेब डेवलपर इससे दूर चले गए हैं अपने मार्कअप में आईडी का उपयोग करना, भले ही वे केवल एक बार उस मान का उपयोग करने का इरादा रखते हों, और इसके बजाय लगभग सभी के लिए कम-विशिष्ट वर्ग विशेषताओं में बदल गए हों शैलियाँ।
एक ऐसा क्षेत्र जहां आईडी विशेषताएँ चलन में आती हैं, जब आप एक ऐसा पृष्ठ बनाना चाहते हैं जिसमें इन-पेज एंकर लिंक हों। उदाहरण के लिए, एक लंबन-शैली वाली वेबसाइट पर विचार करें जिसमें एक ही पृष्ठ पर सभी सामग्री शामिल है जो उस पृष्ठ के विभिन्न हिस्सों में "कूद" जाती है। आईडी विशेषताएँ और टेक्स्ट लिंक इन एंकर लिंक का उपयोग करते हैं। से पहले उस विशेषता का मान जोड़ेंced # प्रतीक, को to href लिंक की विशेषता, इस तरह:
यहीं वह लिंक है
जब क्लिक या स्पर्श किया जाता है, तो यह लिंक पृष्ठ के उस हिस्से पर कूद जाता है जिसमें यह आईडी विशेषता होती है। यदि पृष्ठ पर कोई तत्व इस आईडी मान का उपयोग नहीं कर रहा है, तो लिंक कुछ नहीं करेगा।
किसी साइट पर इन-पेज लिंकिंग बनाने के लिए, आईडी विशेषताओं के उपयोग की आवश्यकता होगी, लेकिन आप अभी भी सामान्य सीएसएस स्टाइलिंग उद्देश्यों के लिए कक्षाओं की ओर रुख कर सकते हैं। आज डिजाइनर इस तरह से पृष्ठों को चिह्नित करते हैं—वे जितना संभव हो सके वर्ग चयनकर्ताओं का उपयोग करते हैं और केवल आईडी की ओर रुख करते हैं, जब उन्हें न केवल सीएसएस के लिए एक हुक के रूप में बल्कि एक इन-पेज लिंक के रूप में कार्य करने के लिए विशेषता की आवश्यकता होती है।