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