22 KiB
टेरारियम प्रोजेक्ट भाग 2: CSS का परिचय
स्केच नोट टोमोमी इमुरा द्वारा
प्री-लेक्चर क्विज़
परिचय
CSS, या Cascading Style Sheets, वेब विकास की एक महत्वपूर्ण समस्या को हल करता है: आपकी वेबसाइट को सुंदर कैसे बनाया जाए। अपने ऐप्स को स्टाइल करना उन्हें अधिक उपयोगी और आकर्षक बनाता है; आप CSS का उपयोग Responsive Web Design (RWD) बनाने के लिए भी कर सकते हैं - जिससे आपके ऐप्स किसी भी स्क्रीन आकार पर अच्छे दिखें। CSS केवल आपके ऐप को सुंदर बनाने के लिए नहीं है; इसके स्पेसिफिकेशन में एनिमेशन और ट्रांसफॉर्म्स भी शामिल हैं, जो आपके ऐप्स के लिए उन्नत इंटरैक्शन सक्षम कर सकते हैं। CSS वर्किंग ग्रुप वर्तमान CSS स्पेसिफिकेशन को बनाए रखने में मदद करता है; आप उनके काम को वर्ल्ड वाइड वेब कंसोर्टियम की साइट पर देख सकते हैं।
ध्यान दें, CSS एक ऐसी भाषा है जो वेब की तरह विकसित होती रहती है, और सभी ब्राउज़र्स नए स्पेसिफिकेशन के हिस्सों का समर्थन नहीं करते। हमेशा CanIUse.com पर जाकर अपने इम्प्लीमेंटेशन की जांच करें।
इस पाठ में, हम अपने ऑनलाइन टेरारियम में स्टाइल जोड़ेंगे और CSS की कई अवधारणाओं के बारे में जानेंगे: कैस्केड, इनहेरिटेंस, और सेलेक्टर्स, पोजिशनिंग, और लेआउट बनाने के लिए CSS का उपयोग। इस प्रक्रिया में, हम टेरारियम का लेआउट बनाएंगे और वास्तविक टेरारियम तैयार करेंगे।
पूर्वापेक्षा
आपके टेरारियम के लिए HTML तैयार होना चाहिए और स्टाइलिंग के लिए तैयार होना चाहिए।
वीडियो देखें
कार्य
अपने टेरारियम फोल्डर में, style.css नामक एक नई फाइल बनाएं। उस फाइल को <head> सेक्शन में इम्पोर्ट करें:
<link rel="stylesheet" href="./style.css" />
कैस्केड
Cascading Style Sheets इस विचार को शामिल करता है कि स्टाइल 'कैस्केड' करते हैं, जिससे स्टाइल का अनुप्रयोग उसकी प्राथमिकता द्वारा निर्देशित होता है। एक वेबसाइट लेखक द्वारा सेट किए गए स्टाइल ब्राउज़र द्वारा सेट किए गए स्टाइल पर प्राथमिकता लेते हैं। 'इनलाइन' सेट किए गए स्टाइल बाहरी स्टाइल शीट में सेट किए गए स्टाइल पर प्राथमिकता लेते हैं।
कार्य
अपने <h1> टैग में "color: red" इनलाइन स्टाइल जोड़ें:
<h1 style="color: red">My Terrarium</h1>
फिर, अपने style.css फाइल में निम्न कोड जोड़ें:
h1 {
color: blue;
}
✅ आपकी वेब ऐप में कौन सा रंग प्रदर्शित होता है? क्यों? क्या आप स्टाइल्स को ओवरराइड करने का कोई तरीका ढूंढ सकते हैं? आप ऐसा कब करना चाहेंगे, या क्यों नहीं?
इनहेरिटेंस
स्टाइल्स एक पूर्वज से वंशज तक इनहेरिट होते हैं, जिससे नेस्टेड एलिमेंट्स अपने पैरेंट्स के स्टाइल्स को इनहेरिट करते हैं।
कार्य
बॉडी के फॉन्ट को एक दिए गए फॉन्ट पर सेट करें, और जांचें कि नेस्टेड एलिमेंट का फॉन्ट क्या है:
body {
font-family: helvetica, arial, sans-serif;
}
अपने ब्राउज़र के कंसोल में 'एलिमेंट्स' टैब खोलें और H1 के फॉन्ट को देखें। यह अपने फॉन्ट को बॉडी से इनहेरिट करता है, जैसा कि ब्राउज़र में बताया गया है:
✅ क्या आप नेस्टेड स्टाइल को किसी अलग प्रॉपर्टी को इनहेरिट करने के लिए बना सकते हैं?
CSS सेलेक्टर्स
टैग्स
अब तक, आपकी style.css फाइल में केवल कुछ टैग्स स्टाइल किए गए हैं, और ऐप काफी अजीब दिखता है:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
इस तरह से किसी टैग को स्टाइल करना आपको यूनिक एलिमेंट्स पर नियंत्रण देता है, लेकिन आपको अपने टेरारियम में कई पौधों के स्टाइल्स को नियंत्रित करने की आवश्यकता है। ऐसा करने के लिए, आपको CSS सेलेक्टर्स का उपयोग करना होगा।
आईडीज़
लेफ्ट और राइट कंटेनर्स को लेआउट करने के लिए कुछ स्टाइल जोड़ें। चूंकि मार्कअप में केवल एक लेफ्ट कंटेनर और केवल एक राइट कंटेनर है, उन्हें आईडीज़ दी गई हैं। उन्हें स्टाइल करने के लिए, # का उपयोग करें:
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
यहां, आपने इन कंटेनर्स को स्क्रीन के बाईं और दाईं ओर बिल्कुल पोजिशनिंग के साथ रखा है, और उनकी चौड़ाई के लिए प्रतिशत का उपयोग किया है ताकि वे छोटे मोबाइल स्क्रीन के लिए स्केल कर सकें।
✅ यह कोड काफी दोहराव वाला है, इसलिए यह "DRY" (Don't Repeat Yourself) नहीं है; क्या आप इन आईडीज़ को स्टाइल करने का कोई बेहतर तरीका ढूंढ सकते हैं, शायद एक आईडी और एक क्लास के साथ? आपको मार्कअप बदलने और CSS को रिफैक्टर करने की आवश्यकता होगी:
<div id="left-container" class="container"></div>
क्लासेस
ऊपर के उदाहरण में, आपने स्क्रीन पर दो यूनिक एलिमेंट्स को स्टाइल किया। यदि आप चाहते हैं कि स्टाइल्स स्क्रीन पर कई एलिमेंट्स पर लागू हों, तो आप CSS क्लासेस का उपयोग कर सकते हैं। ऐसा करें ताकि लेफ्ट और राइट कंटेनर्स में पौधों को लेआउट किया जा सके।
ध्यान दें कि HTML मार्कअप में प्रत्येक पौधे में आईडीज़ और क्लासेस का संयोजन है। यहां आईडीज़ का उपयोग उस जावास्क्रिप्ट द्वारा किया जाता है जिसे आप बाद में जोड़ेंगे ताकि टेरारियम पौधों की प्लेसमेंट को मैनिपुलेट किया जा सके। हालांकि, क्लासेस सभी पौधों को एक दिया गया स्टाइल प्रदान करती हैं।
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
अपने style.css फाइल में निम्नलिखित जोड़ें:
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
इस स्निपेट में उल्लेखनीय है रिलेटिव और एब्सोल्यूट पोजिशनिंग का मिश्रण, जिसे हम अगले सेक्शन में कवर करेंगे। ऊंचाई को प्रतिशत द्वारा संभालने के तरीके पर ध्यान दें:
आपने पौधे के होल्डर की ऊंचाई को 13% पर सेट किया है, जो यह सुनिश्चित करने के लिए एक अच्छा नंबर है कि सभी पौधे प्रत्येक वर्टिकल कंटेनर में बिना स्क्रॉलिंग की आवश्यकता के प्रदर्शित हों।
आपने पौधे के होल्डर को बाईं ओर स्थानांतरित कर दिया है ताकि पौधे अपने कंटेनर के भीतर अधिक केंद्रित हो सकें। छवियों में एक बड़ा पारदर्शी बैकग्राउंड है ताकि उन्हें अधिक ड्रैगेबल बनाया जा सके, इसलिए उन्हें स्क्रीन पर बेहतर फिट होने के लिए बाईं ओर धकेलने की आवश्यकता है।
फिर, पौधे को 150% की अधिकतम चौड़ाई दी गई है। यह ब्राउज़र के स्केल डाउन होने पर इसे स्केल डाउन करने की अनुमति देता है। अपने ब्राउज़र का आकार बदलकर देखें; पौधे अपने कंटेनर्स में रहते हैं लेकिन फिट होने के लिए स्केल डाउन हो जाते हैं।
इसके अलावा उल्लेखनीय है z-index का उपयोग, जो किसी एलिमेंट की सापेक्ष ऊंचाई को नियंत्रित करता है (ताकि पौधे कंटेनर के ऊपर बैठें और टेरारियम के अंदर दिखाई दें)।
✅ आपको पौधे के होल्डर और पौधे के CSS सेलेक्टर दोनों की आवश्यकता क्यों है?
CSS पोजिशनिंग
पोजिशन प्रॉपर्टीज़ (जैसे स्टैटिक, रिलेटिव, फिक्स्ड, एब्सोल्यूट, और स्टिकी पोजिशन) को मिलाना थोड़ा मुश्किल हो सकता है, लेकिन जब सही तरीके से किया जाता है तो यह आपके पेज पर एलिमेंट्स पर अच्छा नियंत्रण देता है।
एब्सोल्यूट पोजिशन वाले एलिमेंट्स को उनके निकटतम पोजिशन किए गए पूर्वजों के सापेक्ष पोजिशन किया जाता है, और यदि कोई नहीं है, तो यह डॉक्यूमेंट बॉडी के अनुसार पोजिशन किया जाता है।
रिलेटिव पोजिशन वाले एलिमेंट्स को उनके प्रारंभिक पोजिशन से दूर करने के लिए CSS के निर्देशों के आधार पर पोजिशन किया जाता है।
हमारे उदाहरण में, plant-holder एक रिलेटिव-पोजिशन वाला एलिमेंट है जो एक एब्सोल्यूट-पोजिशन वाले कंटेनर के भीतर पोजिशन किया गया है। परिणामी व्यवहार यह है कि साइड बार कंटेनर्स बाईं और दाईं ओर पिन किए गए हैं, और प्लांट-होल्डर नेस्टेड है, साइड बार्स के भीतर खुद को समायोजित करता है, पौधों को वर्टिकल रो में रखने के लिए जगह देता है।
plantस्वयं भी एब्सोल्यूट पोजिशनिंग का उपयोग करता है, जो इसे ड्रैगेबल बनाने के लिए आवश्यक है, जैसा कि आप अगले पाठ में खोजेंगे।
✅ साइड कंटेनर्स और प्लांट-होल्डर के पोजिशनिंग प्रकारों को स्विच करने के साथ प्रयोग करें। क्या होता है?
CSS लेआउट्स
अब आप जो कुछ सीखा है उसका उपयोग करके टेरारियम को CSS का उपयोग करके बनाएंगे!
सबसे पहले, .terrarium डिव के बच्चों को CSS का उपयोग करके एक गोल आयत के रूप में स्टाइल करें:
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
यहां प्रतिशत के उपयोग पर ध्यान दें। यदि आप अपने ब्राउज़र को स्केल डाउन करते हैं, तो आप देख सकते हैं कि जार भी स्केल करता है। जार एलिमेंट्स की चौड़ाई और ऊंचाई प्रतिशत और प्रत्येक एलिमेंट को बिल्कुल केंद्र में पोजिशन किया गया है, जो व्यू पोर्ट के नीचे पिन किया गया है।
हम rem का उपयोग भी कर रहे हैं बॉर्डर-रेडियस के लिए, जो एक फॉन्ट-रिलेटिव लंबाई है। इस प्रकार के रिलेटिव माप के बारे में अधिक पढ़ें CSS स्पेसिफिकेशन में।
✅ जार के रंग और अपारदर्शिता को गंदगी के मुकाबले बदलने की कोशिश करें। क्या होता है? क्यों?
🚀चुनौती
जार के बाईं निचली जगह में 'बबल' चमक जोड़ें ताकि यह अधिक कांच जैसा दिखे। आप .jar-glossy-long और .jar-glossy-short को स्टाइल करेंगे ताकि यह एक परावर्तित चमक जैसा दिखे। यह इस तरह दिखेगा:
पोस्ट-लेक्चर क्विज़ पूरा करने के लिए, इस लर्न मॉड्यूल से गुजरें: अपने HTML ऐप को CSS के साथ स्टाइल करें
पोस्ट-लेक्चर क्विज़
समीक्षा और स्व-अध्ययन
CSS देखने में सरल लग सकता है, लेकिन सभी ब्राउज़र्स और सभी स्क्रीन साइज के लिए ऐप को पूरी तरह से स्टाइल करने में कई चुनौतियां होती हैं। CSS-ग्रिड और फ्लेक्सबॉक्स ऐसे टूल्स हैं जो इस काम को थोड़ा अधिक संरचित और अधिक विश्वसनीय बनाते हैं। इन टूल्स के बारे में जानने के लिए Flexbox Froggy और Grid Garden खेलें।
असाइनमेंट
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।