22 KiB
टेरारियम प्रोजेक्ट भाग २: 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;
}
यहाँ, तपाईंले यी कन्टेनरहरूलाई स्क्रिनको टाढा बायाँ र दायाँमा राख्न absolute पोजिसनिङ प्रयोग गर्नुभएको छ, र तिनीहरूको चौडाइलाई प्रतिशतमा प्रयोग गर्नुभएको छ ताकि तिनीहरू साना मोबाइल स्क्रिनहरूको लागि स्केल गर्न सकून्।
✅ यो कोड धेरै दोहोरिएको छ, जसले "DRY" (Don't Repeat Yourself) सिद्धान्तलाई उल्लङ्घन गर्छ; के तपाईं Id र क्लासको संयोजन प्रयोग गरेर यी Ids लाई स्टाइल गर्ने राम्रो तरिका पत्ता लगाउन सक्नुहुन्छ? तपाईंले मार्कअप परिवर्तन गर्न र CSSलाई पुनःफारम गर्न आवश्यक हुनेछ:
<div id="left-container" class="container"></div>
क्लासहरू
माथिको उदाहरणमा, तपाईंले स्क्रिनमा दुई अनौठो तत्वहरू स्टाइल गर्नुभएको छ। यदि तपाईं चाहनुहुन्छ कि धेरै तत्वहरूमा एकै स्टाइल लागू होस्, तपाईं CSS क्लासहरू प्रयोग गर्न सक्नुहुन्छ। बायाँ र दायाँ कन्टेनरहरूमा बोटहरूको लेआउट गर्न यसलाई गर्नुहोस्।
ध्यान दिनुहोस् कि HTML मार्कअपमा प्रत्येक बोटमा Ids र क्लासहरूको संयोजन छ। यहाँ Ids तपाईंले पछि टेरारियम बोटको प्लेसमेन्टलाई म्यानिपुलेट गर्न थप्ने JavaScript द्वारा प्रयोग गरिन्छ। क्लासहरू, यद्यपि, सबै बोटहरूलाई एक निश्चित स्टाइल दिन्छ।
<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;
}
यस स्निपेटमा उल्लेखनीय कुरा भनेको relative र absolute पोजिसनिङको मिश्रण हो, जसलाई हामी अर्को सेक्सनमा कभर गर्नेछौं। उचाइहरू प्रतिशतद्वारा कसरी ह्यान्डल गरिएको छ हेर्नुहोस्:
तपाईंले बोट होल्डरको उचाइलाई १३% मा सेट गर्नुभएको छ, एउटा राम्रो संख्या जसले सुनिश्चित गर्छ कि सबै बोटहरू प्रत्येक vertical कन्टेनरमा स्क्रोलिङको आवश्यकता बिना प्रदर्शन हुन्छन्।
तपाईंले बोट होल्डरलाई बायाँतिर सार्न सेट गर्नुभएको छ ताकि बोटहरू आफ्नो कन्टेनरभित्र बढी केन्द्रित देखिन्छन्। छविहरूमा ठूलो मात्रामा पारदर्शी पृष्ठभूमि छ जसले तिनीहरूलाई बढी ड्र्याग गर्न योग्य बनाउँछ, त्यसैले स्क्रिनमा राम्रोसँग फिट गर्न तिनीहरूलाई बायाँतिर धकेल्न आवश्यक छ।
त्यसपछि, बोटलाई १५०% को अधिकतम चौडाइ दिइएको छ। यसले ब्राउजर स्केल गर्दा बोटलाई स्केल डाउन गर्न अनुमति दिन्छ। तपाईंको ब्राउजरलाई रिसाइज गरेर प्रयास गर्नुहोस्; बोटहरू आफ्नो कन्टेनरमा रहन्छन् तर स्केल डाउन गरेर फिट हुन्छन्।
त्यसपछि, z-index को प्रयोग उल्लेखनीय छ, जसले तत्वको सापेक्ष उचाइलाई नियन्त्रण गर्छ (ताकि बोटहरू कन्टेनरको माथि बस्छन् र टेरारियमभित्र बसेको देखिन्छन्)।
✅ तपाईंलाई किन बोट होल्डर र बोट CSS सिलेक्टर दुवै आवश्यक छ?
CSS पोजिसनिङ
पोजिसन प्रोपर्टीहरूको मिश्रण (जस्तै static, relative, fixed, absolute, र sticky पोजिसनहरू) अलि जटिल हुन सक्छ, तर सही तरिकाले गर्दा यसले तपाईंलाई पृष्ठका तत्वहरूमा राम्रो नियन्त्रण दिन्छ।
Absolute पोजिसन गरिएको तत्वहरू नजिकको पोजिसन गरिएको पूर्वजहरू सापेक्ष पोजिसन गरिन्छ, र यदि कुनै छैन भने, यो डकुमेन्ट बडी अनुसार पोजिसन गरिन्छ।
Relative पोजिसन गरिएको तत्वहरू CSS को निर्देशनहरू अनुसार यसको प्रारम्भिक पोजिसनबाट टाढा समायोजन गरेर पोजिसन गरिन्छ।
हाम्रो नमूनामा, plant-holder एक relative-पोजिसन गरिएको तत्व हो जुन absolute-पोजिसन गरिएको कन्टेनरभित्र पोजिसन गरिएको छ। परिणामस्वरूप व्यवहार भनेको साइड बार कन्टेनरहरू बायाँ र दायाँमा पिन गरिन्छन्, र plant-holder नेस्ट गरिन्छ, साइड बारभित्र समायोजन गर्दै, बोटहरूलाई vertical पङ्क्तिमा राख्न ठाउँ दिन्छ।
plantआफैं absolute पोजिसनिङमा छ, जसले यसलाई ड्र्याग गर्न योग्य बनाउँछ, जस्तो तपाईंले अर्को पाठमा पत्ता लगाउनुहुनेछ।
✅ साइड कन्टेनरहरू र 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 प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।