Html और css में कक्षाओं का परिचय

यह बिना कहे चला जाता है, वेब विकास बहुत बड़ा है। इसका एक बड़ा हिस्सा यह है क्योंकि लगभग हर कोई वेब पर है। हालांकि, क्षेत्र में डेवलपर्स की कमी है, और यही कारण है कि वेब विकास पाठ्यक्रम इतनी आसानी से उपलब्ध है, और मुफ्त भी है। इसे ध्यान में रखते हुए, हम आपको थोड़ा सा दिखाने जा रहे हैं कि HTML और CSS क्या है। विशेष रूप से, हम आपको दिखाने जा रहे हैं कि "कक्षाएं" कैसे काम करती हैं।

हम आपको शुरुआत से शुरू नहीं कर रहे हैं, क्योंकि वहाँ पहले से ही मुफ्त पाठ्यक्रम के टन हैं। इसके बजाय, हम विशेष रूप से आपको दिखाते हैं कि कक्षाएं कैसे काम करती हैं, क्योंकि यह आपकी वेबसाइट को स्टाइल करने के लिए एक आवश्यक घटक है। हमने यह भी सोचा था कि ट्विटर के बूटस्ट्रैप एपीआई पर अपना नज़र डालने से पहले हम इसे कवर करने के लायक हो सकते हैं, क्योंकि इसमें भी कक्षाएं एक आवश्यक घटक हैं।

अस्वीकरण के रूप में, यदि आप HTML और CSS के लिए पूरी तरह से नए हैं, तो यह संभवतः आपके लिए एक अच्छी शुरुआत नहीं है। यदि आप इससे परिचित हैं, तो इसे उठाना बहुत कठिन नहीं होना चाहिए, हालाँकि। लेकिन, यदि आप एक पूर्ण शुरुआत ट्यूटोरियल की तलाश कर रहे हैं, तो ऑनलाइन बहुत सारे बढ़िया विकल्प हैं। कुछ का नाम रखने के लिए, फ्रीकोडकैम्प, द ओडिन प्रोजेक्ट, कोडएकैडमी, कोड स्कूल, टीम ट्रीहाउस, यूडेसिटी, और बहुत कुछ है। यदि आप उनमें से किसी एक में खुदाई शुरू करना चुनते हैं, तो मैं अत्यधिक एक (जैसे फ्री कोड कैंप) के साथ चिपके रहने और दूसरे को शुरू करने से पहले इसे खत्म करने की सलाह दूंगा, क्योंकि बहुत से "मूल" सामग्री बहुत दोहराव हो सकती है।

उस रास्ते से बाहर, चलो क्या वर्गों में खुदाई कर रहे हैं सब के बारे में।

कक्षाएँ कैसे काम करती हैं

कक्षाएं बेहद उपयोगी हैं। वे दोहराव को HTML से बाहर निकालते हैं। कक्षाओं के बिना, आप अपने मार्कअप में प्रत्येक तत्व को व्यक्तिगत रूप से स्टाइल करेंगे। और क्या होगा यदि आपके पास दो समान तत्व हैं, लेकिन उनमें से प्रत्येक को अलग तरह से स्टाइल करना चाहते हैं? यह पूरी तरह गड़बड़ होगा। इसलिए हमारे पास कक्षाएं हैं। कक्षाएं आपके HTML में कुछ संगठन संरचना जोड़ती हैं, जिससे आप अपने कोड को अपेक्षाकृत साफ रख सकते हैं। इतना ही नहीं, लेकिन कक्षाएं एक से अधिक बार उपयोग की जा सकती हैं। दूसरे शब्दों में, आपको कभी भी दो बार एक ही स्टाइलिंग नियम नहीं बनाने होंगे।

यहाँ हमारे भीतर कौन सी कक्षाएं लगती हैं टैग:

जैसा कि आप देख सकते हैं, हमारे बॉडी टैग के तहत, हमारे पास दो हैं

विभिन्न वर्गों के साथ तत्व। सबसे पहला

टैग में वर्ग "हेड 1" है, जबकि दूसरे टैग में वर्ग "हेड 2" है। इसलिए, हमारे सीएसएस में, स्टाइलिंग लागू करने के बजाय सिर्फ

तत्व, हम उन व्यक्तिगत वर्गों के लिए स्टाइल लागू कर सकते हैं। हम ऐसा क्यों करना चाहेंगे?

प्राथमिक कारण यह है कि आप अपने सभी को नहीं चाहते हैं

तत्वों को एक ही स्टाइल है। यह एक वेबसाइट बनाते समय बहुत सारे सिरदर्द पैदा करेगा, और इसके अलावा, वेबसाइट बहुत शानदार नहीं दिखेंगी। क्लासेस हमें स्टाइलिंग लागू करने की अनुमति देते हैं ताकि टैग का केवल एक उदाहरण, सभी नहीं

दस्तावेज़ में टैग। तो, आप HTML में क्लास कैसे लिखते हैं? ऐशे ही:

कुछ सामग्री

आप "वर्ग" संपत्ति को लगभग किसी भी HTML तत्व में जोड़ सकते हैं।

महान! इसलिए, हमारे पास कक्षाएं हैं, लेकिन उनकी वर्तमान स्थिति में, वे वास्तव में कुछ भी नहीं कर रहे हैं। ऐसा इसलिए है क्योंकि हमने कक्षा में अभी तक कोई स्टाइल नियम नहीं जोड़े हैं। ऐसा करने के लिए, हमें एक अलग .css दस्तावेज़ बनाने की आवश्यकता होगी। मैं अभी इसे main.css कहने जा रहा हूं। उस दस्तावेज़ में, हम एक वर्ग को इस तरह से स्टाइल करेंगे:

एक वर्ग का चयन करने के लिए जिसे हम स्टाइल करना चाहते हैं, हम यह करते हैं:

। हेड 1 {रंग: लाल; पाठ-संरेखित करें: केंद्र; }

घुंघराले ब्रेसिज़ के भीतर सभी "नियम" (या स्टाइलिंग) हैं जो हम उस वर्ग पर लागू करते हैं। बहुत सारे अलग-अलग नियम हैं जो आप उस कक्षा के अंदर रख सकते हैं। मेरे मामले में, मैंने "रंग" नियम का उपयोग करते हुए पाठ का रंग बदल दिया और मैंने "पाठ-संरेखित" नियम का उपयोग करके पाठ को केंद्रित किया। आप CSS नियमों के साथ-साथ मोज़िला के डेवलपर नेटवर्क से उनके प्रलेखन की पूरी सूची पा सकते हैं।

अब, हमारी स्टाइलिंग अभी भी हमारे HTML दस्तावेज़ में कक्षाओं में लागू नहीं है, और ऐसा इसलिए है क्योंकि हमने अभी तक दोनों फ़ाइलों को एक साथ लिंक नहीं किया है। अपनी HTML फ़ाइल पर वापस जाएं, और में टैग, आप ऐसा करके अपनी CSS फ़ाइल लिंक करना चाहेंगे:

आपका HTML दस्तावेज़ इस तरह दिखना चाहिए:

और आपके हमारे परीक्षण प्रोजेक्ट को वेब पर इस तरह दिखना चाहिए:

इन चरणों के माध्यम से चलने वाले अधिक विस्तृत वीडियो के लिए, कृपया नीचे देखें।

वीडियो

निष्कर्ष

और यह सब वहाँ कक्षाओं के लिए है! वे समझने में सरल हैं। स्पष्ट रूप से आपके द्वारा देखी जाने वाली बड़ी और लोकप्रिय वेबसाइटों पर, कक्षाओं के भीतर के नियम एक पूरी तरह से जटिल हैं जो हमने कवर किया है, लेकिन उनके सबसे बुनियादी रूप में, यह है कि वे कैसे काम करते हैं।

यदि आपके कोई प्रश्न हैं या आपको लंबे समय से परेशानी हो रही है, तो नीचे कमेंट में या PCMech Forums में हमें अवश्य बताएं! या, यदि आप PCMech पर पूर्ण HTML / CSS शुरुआत करने वाले गाइड में रुचि रखते हैं, तो हमें यह बताना सुनिश्चित करें!