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