leestott
816d692e61
|
1 week ago | |
|---|---|---|
| .. | ||
| README.md | 1 week ago | |
| assignment.md | 2 weeks ago | |
README.md
टेरॅरियम प्रकल्प भाग २: CSS ची ओळख
स्केच नोट टोमोमी इमुरा यांच्याकडून
व्याख्यानपूर्व प्रश्नमंजुषा
परिचय
CSS, म्हणजेच Cascading Style Sheets, वेब डेव्हलपमेंटमधील एक महत्त्वाचा प्रश्न सोडवते: तुमच्या वेबसाइटला आकर्षक कसे बनवायचे. अॅप्सला स्टाइलिंग केल्याने ते अधिक वापरण्यास सोपे आणि सुंदर दिसतात; तसेच, CSS चा वापर करून तुम्ही Responsive Web Design (RWD) तयार करू शकता - ज्यामुळे तुमचे अॅप कोणत्याही स्क्रीन साइजवर चांगले दिसेल. CSS फक्त अॅपला सुंदर बनवण्यासाठीच नाही, तर त्याच्या स्पेसिफिकेशनमध्ये अॅनिमेशन आणि ट्रान्सफॉर्म्सचा समावेश आहे, ज्यामुळे तुमच्या अॅप्ससाठी प्रगत इंटरॅक्शन शक्य होतात. CSS Working Group सध्याच्या CSS स्पेसिफिकेशन्सचे व्यवस्थापन करते; त्यांचे काम World Wide Web Consortium च्या साइटवर पाहू शकता.
लक्षात ठेवा, CSS ही एक अशी भाषा आहे जी सतत विकसित होत असते, जसे की वेबवरील इतर गोष्टी. सर्व ब्राउझर नवीन स्पेसिफिकेशनला सपोर्ट करत नाहीत. नेहमी CanIUse.com वर तुमच्या अंमलबजावणीची तपासणी करा.
या धड्यात, आपण आपल्या ऑनलाइन टेरॅरियमला स्टाइल देणार आहोत आणि CSS चे काही महत्त्वाचे संकल्पना शिकणार आहोत: कॅस्केड, वारसा (inheritance), सिलेक्टर्सचा वापर, पोझिशनिंग, आणि 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;
}
✅ तुमच्या वेब अॅपमध्ये कोणता रंग दिसतो? का? स्टाइल्स ओव्हरराईड करण्याचा मार्ग शोधू शकता का? तुम्हाला हे कधी करायचे असेल, किंवा का नाही?
वारसा (Inheritance)
स्टाइल्स एका पूर्वजाच्या स्टाइल्सपासून वंशजाकडे जातात, ज्यामुळे नेस्टेड घटक त्यांच्या पालकांच्या स्टाइल्स वारसा घेतात.
कार्य
बॉडीचा फॉन्ट एका विशिष्ट फॉन्टवर सेट करा आणि नेस्टेड घटकाचा फॉन्ट तपासा:
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 सिलेक्टर्सचा उपयोग करावा लागेल.
आयडीज
डाव्या आणि उजव्या कंटेनर्सचे लेआउट तयार करण्यासाठी काही स्टाइल जोडा. मार्कअपमध्ये फक्त एक डावा कंटेनर आणि एक उजवा कंटेनर असल्याने त्यांना आयडीज दिले आहेत. त्यांना स्टाइल करण्यासाठी # वापरा:
#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 पोझिशनिंग
पोझिशन प्रॉपर्टीज (static, relative, fixed, absolute, आणि sticky पोझिशन्स) मिक्स करणे थोडे कठीण असू शकते, पण योग्य प्रकारे केल्यास ते तुमच्या पृष्ठांवरील घटकांवर चांगले नियंत्रण देते.
अॅब्सोल्यूट पोझिशन केलेले घटक त्यांच्या जवळच्या पोझिशन केलेल्या पूर्वजांच्या संदर्भात पोझिशन केले जातात, आणि जर असे काही नसेल, तर ते डॉक्युमेंट बॉडीच्या संदर्भात पोझिशन केले जाते.
रिलेटिव्ह पोझिशन केलेले घटक त्यांच्या सुरुवातीच्या पोझिशनपासून 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 ला स्टाइल करून परावर्तित शाइनसारखे बनवाल. असे दिसेल:
पोस्ट-व्याख्यान प्रश्नमंजुषा पूर्ण करण्यासाठी, हा Learn मॉड्यूल पहा: तुमच्या HTML अॅपला CSS ने स्टाइल करा
व्याख्यानानंतरची प्रश्नमंजुषा
पुनरावलोकन आणि स्व-अभ्यास
CSS वरकरणी सोपी वाटते, पण सर्व ब्राउझर आणि सर्व स्क्रीन साइजसाठी अॅप परिपूर्णपणे स्टाइल करताना अनेक आव्हाने येतात. CSS-Grid आणि Flexbox ही साधने आहेत जी ही प्रक्रिया अधिक संरचित आणि विश्वासार्ह बनवण्यासाठी विकसित केली गेली आहेत. Flexbox Froggy आणि Grid Garden खेळून या साधनांबद्दल शिका.
असाइनमेंट
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.