22 KiB
टेरारियम प्रोजेक्ट भाग 2: CSS का परिचय
स्केच नोट Tomomi Imura द्वारा
प्री-लेक्चर क्विज़
परिचय
CSS, या Cascading Style Sheets, वेब विकास की एक महत्वपूर्ण समस्या को हल करता है: आपकी वेबसाइट को सुंदर कैसे बनाया जाए। अपने ऐप्स को स्टाइल करना उन्हें अधिक उपयोगी और आकर्षक बनाता है; आप CSS का उपयोग Responsive Web Design (RWD) बनाने के लिए भी कर सकते हैं - जिससे आपके ऐप्स किसी भी स्क्रीन आकार पर अच्छे दिखें। CSS केवल आपके ऐप को सुंदर बनाने के लिए नहीं है; इसके स्पेसिफिकेशन में एनिमेशन और ट्रांसफॉर्म्स भी शामिल हैं, जो आपके ऐप्स के लिए उन्नत इंटरैक्शन सक्षम कर सकते हैं। CSS वर्किंग ग्रुप वर्तमान CSS स्पेसिफिकेशन को बनाए रखने में मदद करता है; आप उनके काम को World Wide Web Consortium की साइट पर देख सकते हैं।
ध्यान दें, 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;
}
अपने ब्राउज़र के कंसोल में 'Elements' टैब खोलें और H1 के फॉन्ट को देखें। यह अपने फॉन्ट को बॉडी से इनहेरिट करता है, जैसा कि ब्राउज़र में बताया गया है:
✅ क्या आप नेस्टेड स्टाइल को एक अलग प्रॉपर्टी इनहेरिट करा सकते हैं?
CSS सेलेक्टर्स
टैग्स
अब तक, आपकी style.css फाइल में केवल कुछ टैग्स स्टाइल किए गए हैं, और ऐप काफी अजीब दिखता है:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
इस तरीके से टैग को स्टाइल करना आपको यूनिक एलिमेंट्स पर नियंत्रण देता है, लेकिन आपको अपने टेरारियम में कई पौधों के स्टाइल्स को नियंत्रित करने की आवश्यकता है। ऐसा करने के लिए, आपको CSS सेलेक्टर्स का उपयोग करना होगा।
Ids
बाएं और दाएं कंटेनर्स को लेआउट करने के लिए कुछ स्टाइल जोड़ें। चूंकि केवल एक बायां कंटेनर और केवल एक दायां कंटेनर है, उन्हें मार्कअप में ids दिए गए हैं। उन्हें स्टाइल करने के लिए, # का उपयोग करें:
#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) नहीं है; क्या आप इन ids को स्टाइल करने का एक बेहतर तरीका ढूंढ सकते हैं, शायद एक id और एक class के साथ? आपको मार्कअप बदलने और CSS को रिफैक्टर करने की आवश्यकता होगी:
<div id="left-container" class="container"></div>
क्लासेस
ऊपर के उदाहरण में, आपने स्क्रीन पर दो यूनिक एलिमेंट्स को स्टाइल किया। यदि आप स्क्रीन पर कई एलिमेंट्स पर स्टाइल लागू करना चाहते हैं, तो आप CSS क्लासेस का उपयोग कर सकते हैं। ऐसा करें ताकि बाएं और दाएं कंटेनर्स में पौधों को लेआउट किया जा सके।
ध्यान दें कि HTML मार्कअप में प्रत्येक पौधे में ids और क्लासेस का संयोजन है। यहां ids का उपयोग बाद में जोड़े जाने वाले जावास्क्रिप्ट द्वारा टेरारियम पौधे की प्लेसमेंट को मैनिपुलेट करने के लिए किया जाता है। हालांकि, क्लासेस सभी पौधों को एक दिया गया स्टाइल प्रदान करती हैं।
<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 पोजिशनिंग
पोजिशन प्रॉपर्टीज (जैसे static, relative, fixed, absolute, और sticky पोजिशन) को मिलाना थोड़ा मुश्किल हो सकता है, लेकिन जब सही तरीके से किया जाता है तो यह आपके पेज पर एलिमेंट्स पर अच्छा नियंत्रण देता है।
एब्सोल्यूट पोजिशन किए गए एलिमेंट्स को उनके निकटतम पोजिशन किए गए पूर्वजों के सापेक्ष पोजिशन किया जाता है, और यदि कोई नहीं है, तो इसे डॉक्यूमेंट बॉडी के अनुसार पोजिशन किया जाता है।
रिलेटिव पोजिशन किए गए एलिमेंट्स को उनके प्रारंभिक पोजिशन से दूर उनकी प्लेसमेंट को समायोजित करने के लिए CSS के निर्देशों के आधार पर पोजिशन किया जाता है।
हमारे उदाहरण में, plant-holder एक रिलेटिव-पोजिशन किया गया एलिमेंट है जो एक एब्सोल्यूट-पोजिशन किए गए कंटेनर के भीतर पोजिशन किया गया है। परिणामी व्यवहार यह है कि साइड बार कंटेनर्स बाएं और दाएं पिन किए गए हैं, और plant-holder नेस्टेड है, साइड बार्स के भीतर समायोजित हो रहा है, पौधों को एक वर्टिकल रो में रखने के लिए जगह दे रहा है।
plantस्वयं भी एब्सोल्यूट पोजिशनिंग का उपयोग करता है, इसे ड्रैग करने योग्य बनाने के लिए आवश्यक है, जैसा कि आप अगले पाठ में खोजेंगे।
✅ साइड कंटेनर्स और plant-holder के पोजिशनिंग प्रकारों को स्विच करने के साथ प्रयोग करें। क्या होता है?
CSS लेआउट्स
अब आप जो सीखा है उसका उपयोग करके टेरारियम को पूरी तरह से CSS का उपयोग करके बनाएंगे!
पहले, .terrarium div बच्चों को 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 को एक प्रतिबिंबित चमक जैसा दिखाने के लिए स्टाइल करेंगे। यह इस तरह दिखेगा:
पोस्ट-लेक्चर क्विज़ पूरा करने के लिए, इस Learn मॉड्यूल से गुजरें: CSS के साथ अपने HTML ऐप को स्टाइल करें
पोस्ट-लेक्चर क्विज़
समीक्षा और स्व-अध्ययन
CSS दिखने में सरल लगता है, लेकिन सभी ब्राउज़र्स और सभी स्क्रीन साइज के लिए ऐप को पूरी तरह से स्टाइल करने में कई चुनौतियां होती हैं। CSS-Grid और Flexbox ऐसे टूल्स हैं जो काम को थोड़ा अधिक संरचित और अधिक विश्वसनीय बनाने के लिए विकसित किए गए हैं। इन टूल्स के बारे में जानने के लिए Flexbox Froggy और Grid Garden खेलें।
असाइनमेंट
अस्वीकरण:
यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।