|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "92c4431eac70670b0450b02c1d11279a",
|
|
|
"translation_date": "2025-10-22T16:59:29+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/README.md",
|
|
|
"language_code": "ne"
|
|
|
}
|
|
|
-->
|
|
|
# टेरारियम परियोजना भाग २: CSS को परिचय
|
|
|
|
|
|
|
|
|
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
|
|
|
|
|
|
तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहोस्? CSS नै हो जसले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउँछ।
|
|
|
|
|
|
यदि HTML घरको फ्रेम बनाउने जस्तै हो भने, CSS भनेको घरलाई घरजस्तो बनाउने सबै कुरा हो - रंग, फर्निचरको व्यवस्था, बत्तीको सेटअप, र कोठाहरू कसरी एकअर्कासँग जोडिन्छन्। सोच्नुहोस् कि कसरी भर्सायको दरबार एक साधारण शिकारको कुटीबाट सुरु भयो, तर सजावट र लेआउटमा ध्यान दिएर यसलाई संसारको सबैभन्दा भव्य भवनहरू मध्ये एकमा परिणत गरियो।
|
|
|
|
|
|
आज, हामी तपाईंको टेरारियमलाई कार्यात्मकबाट परिष्कृतमा रूपान्तरण गर्नेछौं। तपाईंले तत्वहरूलाई ठ्याक्कै स्थान दिन, विभिन्न स्क्रिन साइजहरूमा लेआउटहरू अनुकूल बनाउने, र वेबसाइटहरूलाई आकर्षक बनाउने दृश्यात्मक आकर्षण सिर्जना गर्न सिक्नुहुनेछ।
|
|
|
|
|
|
यस पाठको अन्त्यमा, तपाईंले देख्नुहुनेछ कि रणनीतिक CSS शैलीले तपाईंको परियोजनालाई नाटकीय रूपमा कसरी सुधार गर्न सक्छ। अब तपाईंको टेरारियममा केही शैली थपौं।
|
|
|
|
|
|
## प्रि-लेक्चर क्विज
|
|
|
|
|
|
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/17)
|
|
|
|
|
|
## CSS को साथ सुरु गर्दै
|
|
|
|
|
|
CSS लाई प्रायः "चिजहरू सुन्दर बनाउने" मात्र मानिन्छ, तर यसले धेरै व्यापक उद्देश्य पूरा गर्दछ। CSS फिल्मको निर्देशक जस्तै हो - तपाईंले केवल सबै कुरा कस्तो देखिन्छ भन्ने मात्र होइन, तर कसरी यो चल्छ, अन्तरक्रियामा प्रतिक्रिया दिन्छ, र विभिन्न परिस्थितिहरूमा अनुकूल हुन्छ भन्ने पनि नियन्त्रण गर्नुहुन्छ।
|
|
|
|
|
|
आधुनिक CSS उल्लेखनीय रूपमा सक्षम छ। तपाईंले फोन, ट्याब्लेट, र डेस्कटप कम्प्युटरहरूको लागि लेआउटहरू स्वतः समायोजन गर्ने कोड लेख्न सक्नुहुन्छ। तपाईंले प्रयोगकर्ताको ध्यान आवश्यक ठाउँमा लैजाने स्मूथ एनिमेसनहरू सिर्जना गर्न सक्नुहुन्छ। जब सबै कुरा सँगै काम गर्छ, परिणाम निकै प्रभावशाली हुन सक्छ।
|
|
|
|
|
|
> 💡 **प्रो टिप**: CSS नयाँ सुविधाहरू र क्षमताहरूको साथ निरन्तर विकसित हुँदैछ। उत्पादन परियोजनाहरूमा प्रयोग गर्नु अघि नयाँ CSS सुविधाहरूको लागि ब्राउजर समर्थन प्रमाणित गर्न सधैं [CanIUse.com](https://caniuse.com) जाँच गर्नुहोस्।
|
|
|
|
|
|
**यस पाठमा हामीले के हासिल गर्नेछौं:**
|
|
|
- **पूरा गर्नेछौं** आधुनिक CSS प्रविधिहरू प्रयोग गरेर तपाईंको टेरारियमको पूर्ण दृश्यात्मक डिजाइन
|
|
|
- **अनुसन्धान गर्नेछौं** क्यास्केड, इनहेरिटेन्स, र CSS सेलेक्टरहरू जस्ता आधारभूत अवधारणाहरू
|
|
|
- **लागू गर्नेछौं** उत्तरदायी पोजिसनिङ र लेआउट रणनीतिहरू
|
|
|
- **निर्माण गर्नेछौं** CSS आकारहरू र शैली प्रयोग गरेर टेरारियम कन्टेनर
|
|
|
|
|
|
### पूर्वापेक्षा
|
|
|
|
|
|
तपाईंले अघिल्लो पाठबाट तपाईंको टेरारियमको HTML संरचना पूरा गर्नुपर्छ र यसलाई शैली दिन तयार हुनुपर्छ।
|
|
|
|
|
|
> 📺 **भिडियो स्रोत**: यो उपयोगी भिडियो वाकथ्रु हेर्नुहोस्
|
|
|
>
|
|
|
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
|
|
|
|
|
|
### तपाईंको CSS फाइल सेट अप गर्दै
|
|
|
|
|
|
शैली सुरु गर्नुअघि, हामीले CSS लाई HTML सँग जडान गर्न आवश्यक छ। यस जडानले ब्राउजरलाई हाम्रो टेरारियमको लागि शैली निर्देशनहरू कहाँ फेला पार्ने भनेर बताउँछ।
|
|
|
|
|
|
तपाईंको टेरारियम फोल्डरमा, `style.css` नामको नयाँ फाइल बनाउनुहोस्, त्यसपछि यसलाई तपाईंको HTML डकुमेन्टको `<head>` सेक्सनमा लिंक गर्नुहोस्:
|
|
|
|
|
|
```html
|
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
```
|
|
|
|
|
|
**यस कोडले के गर्छ:**
|
|
|
- **HTML र CSS फाइलहरू बीच जडान बनाउँछ**
|
|
|
- **ब्राउजरलाई `style.css` बाट शैलीहरू लोड र लागू गर्न भन्छ**
|
|
|
- **यो CSS फाइल हो भनेर निर्दिष्ट गर्न `rel="stylesheet"` एट्रिब्युट प्रयोग गर्दछ**
|
|
|
- **फाइल पथलाई `href="./style.css"` द्वारा सन्दर्भित गर्दछ**
|
|
|
|
|
|
## CSS क्यास्केडको समझ
|
|
|
|
|
|
कहिल्यै सोच्नुभएको छ किन CSS लाई "क्यास्केडिङ" स्टाइल शीट्स भनिन्छ? शैलीहरू झरनाको जस्तै तल झर्छन्, र कहिलेकाहीं तिनीहरू एकअर्कासँग विरोध गर्छन्।
|
|
|
|
|
|
सोच्नुहोस् कि कसरी सैन्य आदेश संरचनाहरू काम गर्छन् - एक सामान्य आदेशले "सबै सैनिकहरूले हरियो लगाउनुहोस्" भन्न सक्छ, तर तपाईंको युनिटलाई विशिष्ट आदेशले "समारोहको लागि निलो पोशाक लगाउनुहोस्" भन्न सक्छ। थप विशिष्ट निर्देशनले प्राथमिकता लिन्छ। CSS ले यस्तै तर्क अनुसरण गर्छ, र यो पदानुक्रमको समझले डिबगिङलाई धेरै प्रबन्धनीय बनाउँछ।
|
|
|
|
|
|
### क्यास्केड प्राथमिकतामा प्रयोग
|
|
|
|
|
|
क्यास्केडलाई कार्यमा देखौं र शैलीको द्वन्द्व सिर्जना गरौं। पहिलो, तपाईंको `<h1>` ट्यागमा इनलाइन शैली थप्नुहोस्:
|
|
|
|
|
|
```html
|
|
|
<h1 style="color: red">My Terrarium</h1>
|
|
|
```
|
|
|
|
|
|
**यस कोडले के गर्छ:**
|
|
|
- **इनलाइन स्टाइलिङ प्रयोग गरेर `<h1>` एलिमेन्टमा सीधा रातो रंग लागू गर्छ**
|
|
|
- **HTML मा CSS इनलाइन रूपमा एम्बेड गर्न `style` एट्रिब्युट प्रयोग गर्दछ**
|
|
|
- **यो विशिष्ट एलिमेन्टको लागि उच्च प्राथमिकता शैली नियम सिर्जना गर्छ**
|
|
|
|
|
|
अब, तपाईंको `style.css` फाइलमा यो नियम थप्नुहोस्:
|
|
|
|
|
|
```css
|
|
|
h1 {
|
|
|
color: blue;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**माथिको कोडमा हामीले:**
|
|
|
- **सबै `<h1>` एलिमेन्टहरूलाई लक्षित गर्ने CSS नियम परिभाषित गरेका छौं**
|
|
|
- **एक्स्टर्नल स्टाइलशीट प्रयोग गरेर टेक्स्ट रंग निलो सेट गरेका छौं**
|
|
|
- **इनलाइन शैलीहरूको तुलनामा कम प्राथमिकता नियम सिर्जना गरेका छौं**
|
|
|
|
|
|
✅ **ज्ञान जाँच**: तपाईंको वेब एपमा कुन रंग देखिन्छ? किन त्यो रंग जित्छ? तपाईंले शैलीहरू ओभरराइड गर्न चाहनुहुने परिदृश्यहरू सोच्न सक्नुहुन्छ?
|
|
|
|
|
|
> 💡 **CSS प्राथमिकता क्रम (उच्चतमदेखि न्यूनतम):**
|
|
|
> 1. **इनलाइन शैलीहरू** (style attribute)
|
|
|
> 2. **IDs** (#myId)
|
|
|
> 3. **क्लासहरू** (.myClass) र एट्रिब्युटहरू
|
|
|
> 4. **एलिमेन्ट सेलेक्टरहरू** (h1, div, p)
|
|
|
> 5. **ब्राउजर डिफल्टहरू**
|
|
|
|
|
|
## CSS इनहेरिटेन्सको प्रयोग
|
|
|
|
|
|
CSS इनहेरिटेन्स आनुवंशिकता जस्तै काम गर्छ - एलिमेन्टहरूले तिनीहरूको अभिभावक एलिमेन्टहरूबाट निश्चित गुणहरू प्राप्त गर्छन्। यदि तपाईंले `body` एलिमेन्टमा फन्ट परिवार सेट गर्नुभयो भने, भित्रको सबै टेक्स्टले स्वचालित रूपमा त्यही फन्ट प्रयोग गर्छ। यो Habsburg परिवारको विशिष्ट जबडा रेखा पीढीहरूमा देखा परे जस्तै हो।
|
|
|
|
|
|
तर, सबै कुरा इनहेरिट हुँदैन। फन्ट र रंग जस्ता टेक्स्ट शैलीहरू इनहेरिट हुन्छन्, तर मार्जिन र बोर्डर जस्ता लेआउट गुणहरू इनहेरिट हुँदैनन्। जस्तै बच्चाहरूले शारीरिक विशेषताहरू इनहेरिट गर्न सक्छन् तर तिनीहरूको अभिभावकको फेसन छनोटहरू होइन।
|
|
|
|
|
|
### फन्ट इनहेरिटेन्सको अवलोकन
|
|
|
|
|
|
आउनुहोस् `<body>` एलिमेन्टमा फन्ट परिवार सेट गरेर इनहेरिटेन्सलाई कार्यमा देखौं:
|
|
|
|
|
|
```css
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**यहाँ के हुन्छ भन्ने कुरा तोड्दै:**
|
|
|
- **पूरा पृष्ठको लागि फन्ट परिवार सेट गर्दछ `body` एलिमेन्टलाई लक्षित गरेर**
|
|
|
- **बेहतर ब्राउजर अनुकूलताको लागि फन्ट स्ट्याक प्रयोग गर्दछ**
|
|
|
- **विभिन्न अपरेटिङ सिस्टमहरूमा राम्रो देखिने आधुनिक सिस्टम फन्टहरू लागू गर्दछ**
|
|
|
- **सबै बच्चा एलिमेन्टहरूले यो फन्ट इनहेरिट गर्छन् जबसम्म विशेष रूपमा ओभरराइड गरिएको छैन**
|
|
|
|
|
|
तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `<h1>` एलिमेन्टलाई निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले `body` बाट फन्ट परिवार इनहेरिट गर्छ:
|
|
|
|
|
|
|
|
|
|
|
|
✅ **प्रयोग समय**: `<body>` मा `color`, `line-height`, वा `text-align` जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य एलिमेन्टहरूमा के हुन्छ?
|
|
|
|
|
|
> 📝 **इनहेरिटेबल गुणहरू समावेश छन्**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
|
|
|
>
|
|
|
> **गैर-इनहेरिटेबल गुणहरू समावेश छन्**: `margin`, `padding`, `border`, `width`, `height`, `position`
|
|
|
|
|
|
## CSS सेलेक्टरहरूको मास्टरी
|
|
|
|
|
|
CSS सेलेक्टरहरू तपाईंको शैलीको लागि विशिष्ट एलिमेन्टहरूलाई लक्षित गर्ने तरिका हो। यो ठ्याक्कै निर्देशन दिने जस्तै काम गर्छ - "घर" भन्नुको सट्टा, तपाईं "निलो घर जसको रातो ढोका छ म्यापल स्ट्रीटमा" भन्न सक्नुहुन्छ।
|
|
|
|
|
|
CSS ले विभिन्न तरिकाहरू प्रदान गर्दछ विशिष्ट हुन, र सही सेलेक्टर चयन गर्नु भनेको कार्यको लागि उपयुक्त उपकरण चयन गर्नु जस्तै हो। कहिलेकाहीं तपाईंले छिमेकका सबै ढोकाहरूलाई शैली दिनुपर्छ, र कहिलेकाहीं केवल एक विशिष्ट ढोकालाई।
|
|
|
|
|
|
### एलिमेन्ट सेलेक्टरहरू (ट्यागहरू)
|
|
|
|
|
|
एलिमेन्ट सेलेक्टरहरूले HTML एलिमेन्टहरूलाई तिनीहरूको ट्याग नामद्वारा लक्षित गर्छ। तिनीहरू आधारभूत शैली सेट गर्नका लागि उपयुक्त छन् जुन तपाईंको पृष्ठभरि व्यापक रूपमा लागू हुन्छ:
|
|
|
|
|
|
```css
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: #3a241d;
|
|
|
text-align: center;
|
|
|
font-size: 2.5rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**यी शैलीहरू बुझ्दै:**
|
|
|
- **`body` सेलेक्टरले सम्पूर्ण पृष्ठमा सुसंगत टाइपोग्राफी सेट गर्दछ**
|
|
|
- **डिफल्ट ब्राउजर मार्जिन र प्याडिङ हटाउँछ राम्रो नियन्त्रणको लागि**
|
|
|
- **सबै हेडिङ एलिमेन्टहरूलाई रंग, एलाइनमेन्ट, र स्पेसिङको साथ शैली दिन्छ**
|
|
|
- **स्केलेबल, पहुँचयोग्य फन्ट साइजिङको लागि `rem` युनिटहरू प्रयोग गर्दछ**
|
|
|
|
|
|
एलिमेन्ट सेलेक्टरहरूले सामान्य शैलीका लागि राम्रो काम गर्छन्, तर तपाईंलाई टेरारियममा बोटबिरुवाहरू जस्ता व्यक्तिगत कम्पोनेन्टहरूलाई शैली दिन थप विशिष्ट सेलेक्टरहरू चाहिन्छ।
|
|
|
|
|
|
### अद्वितीय एलिमेन्टहरूको लागि ID सेलेक्टरहरू
|
|
|
|
|
|
ID सेलेक्टरहरूले `#` प्रतीक प्रयोग गर्छन् र विशिष्ट `id` एट्रिब्युट भएका एलिमेन्टहरूलाई लक्षित गर्छन्। IDs पृष्ठमा अद्वितीय हुनुपर्छ, त्यसैले तिनीहरू व्यक्तिगत, विशेष एलिमेन्टहरू जस्तै हाम्रो बायाँ र दायाँ बोट कन्टेनरहरूलाई शैली दिनका लागि उपयुक्त छन्।
|
|
|
|
|
|
आउनुहोस् हाम्रो टेरारियमको साइड कन्टेनरहरूको लागि शैली सिर्जना गरौं जहाँ बोटहरू रहनेछन्:
|
|
|
|
|
|
```css
|
|
|
#left-container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#right-container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**यस कोडले के गर्छ:**
|
|
|
- **कन्टेनरहरूलाई `absolute` पोजिसनिङ प्रयोग गरेर बायाँ र दायाँ किनारमा राख्छ**
|
|
|
- **स्क्रिन साइजमा अनुकूल हुने उत्तरदायी उचाइको लागि `vh` युनिटहरू प्रयोग गर्दछ**
|
|
|
- **`box-sizing: border-box` लागू गर्दछ ताकि प्याडिङ कुल चौडाइमा समावेश होस्**
|
|
|
- **शून्य मानहरूबाट अनावश्यक `px` युनिटहरू हटाउँछ सफा कोडको लागि**
|
|
|
- **स्टार्क ग्रे भन्दा सजिलो पृष्ठभूमि रंग सेट गर्दछ**
|
|
|
|
|
|
✅ **कोड गुणस्तर चुनौती**: ध्यान दिनुहोस् कि यो CSS ले DRY (Don't Repeat Yourself) सिद्धान्तको उल्लङ्घन गर्छ। तपाईं यसलाई ID र क्लास दुवै प्रयोग गरेर कसरी सुधार गर्न सक्नुहुन्छ?
|
|
|
|
|
|
**सुधार गरिएको दृष्टिकोण:**
|
|
|
```html
|
|
|
<div id="left-container" class="container"></div>
|
|
|
<div id="right-container" class="container"></div>
|
|
|
```
|
|
|
|
|
|
```css
|
|
|
.container {
|
|
|
background-color: #f5f5f5;
|
|
|
width: 15%;
|
|
|
top: 0;
|
|
|
position: absolute;
|
|
|
height: 100vh;
|
|
|
padding: 1rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
#left-container {
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
#right-container {
|
|
|
right: 0;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### पुन: प्रयोगयोग्य शैलीहरूको लागि क्लास सेलेक्टरहरू
|
|
|
|
|
|
क्लास सेलेक्टरहरूले `.` प्रतीक प्रयोग गर्छन् र तपाईंले एउटै शैलीहरू धेरै एलिमेन्टहरूमा लागू गर्न चाहनुहुन्छ भने उपयुक्त छन्। IDs भन्दा फरक, क्लासहरू तपाईंको HTML भरि पुन: प्रयोग गर्न सकिन्छ, जसले तिनीहरूलाई सुसंगत शैलीका ढाँचाहरूका लागि आदर्श बनाउँछ।
|
|
|
|
|
|
हाम्रो टेरारियममा, प्रत्येक बोटलाई समान शैली चाहिन्छ तर व्यक्तिगत पोजिसनिङ पनि चाहिन्छ। हामीले साझा शैलीहरूको लागि क्लासहरूको संयोजन र अद्वितीय पोजिसनिङ र जाभास्क्रिप्ट अन्तरक्रियाको लागि IDs प्रयोग गर्नेछौं।
|
|
|
|
|
|
**प्रत्येक बोटको लागि HTML संरचना यहाँ छ:**
|
|
|
```html
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ne.png" />
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
**मुख्य तत्वहरू व्याख्या गरिएको:**
|
|
|
- **सुसंगत कन्टेनर शैलीको लागि `class="plant-holder"` प्रयोग गर्दछ**
|
|
|
- **साझा छवि शैली र व्यवहारको लागि `class="plant"` लागू गर्दछ**
|
|
|
- **अद्वितीय पोजिसनिङ र जाभास्क्रिप्ट अन्तरक्रियाको लागि `id="plant1"` समावेश गर्दछ**
|
|
|
- **स्क्रिन रिडर पहुँचयोग्यताको लागि वर्णनात्मक alt टेक्स्ट प्रदान गर्दछ**
|
|
|
|
|
|
अब यी शैलीहरू तपाईंको `style.css` फाइलमा थप्नुहोस्:
|
|
|
|
|
|
```css
|
|
|
.plant-holder {
|
|
|
position: relative;
|
|
|
height: 13%;
|
|
|
left: -0.6rem;
|
|
|
}
|
|
|
|
|
|
.plant {
|
|
|
position: absolute;
|
|
|
max-width: 150%;
|
|
|
max-height: 150%;
|
|
|
z-index: 2;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.plant:hover {
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**यी शैलीहरूलाई तोड्दै:**
|
|
|
- **पोजिसनिङ सन्दर्भ स्थापना गर्न प्लान्ट होल्डरको लागि सापेक्ष पोजिसनिङ सिर्जना गर्दछ**
|
|
|
- **प्रत्येक प्लान्ट होल्डरलाई १३% उचाइ सेट गर्दछ, सुनिश्चित गर्दै सबै बोटहरू स्क्रोल बिना ठडिन्छन्**
|
|
|
- **कन्टेनरहरू भित्र बोटहरूलाई राम्रोसँग केन्द्रित गर्न हल्का बायाँ सिफ्ट गर्दछ**
|
|
|
- **`max-width` र `max-height` गुणहरू प्रयोग गरेर बोटहरूलाई उत्तरदायी रूपमा स्केल गर्न अनुमति दिन्छ**
|
|
|
- **टेरारियममा अन्य एलिमेन्टहरू भन्दा माथि बोटहरू तहबद्ध गर्न `z-index` प्रयोग गर्दछ**
|
|
|
- **CSS ट्रान्जिसनहरू सहित सानो होभर प्रभाव थप्छ राम्रो प्रयोगकर्ता अन्तरक्रियाको लागि**
|
|
|
|
|
|
✅ **महत्वपूर्ण सोचाइ**: किन हामीलाई `.plant-holder` र `.plant` दुवै सेलेक्टरहरू चाहिन्छ? यदि हामीले केवल एउटा प्रयोग गर्ने प्रयास गर्यौं भने के हुन्छ?
|
|
|
|
|
|
> 💡 **डिजाइन ढाँचा**: कन्टेनर (`.plant-holder`) ले लेआउट र पोजिसनिङ नियन्त्रण गर्छ, जबकि सामग्री (`.plant`) ले उपस्थिति र स्केलिङ नियन्त्रण गर्छ। यस विभाजनले कोडलाई अझ बढी मर्मतयोग्य र लचिलो बनाउँछ।
|
|
|
|
|
|
## CSS पोजिसनिङको समझ
|
|
|
|
|
|
CSS पोजिसनिङ भनेको नाटकको लागि स्टेज निर्देशक हुनु जस्तै हो - तपाईंले प्रत्येक पात्र कहाँ उभिन्छ र कसरी स्टेज वरिपरि सर्छ भन्ने निर्देशन दिनुहुन्छ। केही पात्रहरूले मानक संरचना अनुसरण गर्छन्, जबकि अन्यलाई नाटकीय प्रभावका लागि विशिष्ट पोजिसनिङ चाहिन्छ।
|
|
|
|
|
|
पोजिसनिङ बुझिसकेपछि, धेरै लेआउट चुनौतीहरू प्रबन्धनीय हुन्छन्। तपाईंलाई नेभिगेसन बार चाहिन्छ जुन स्क्रोल गर्दा शीर्षमा रहन्छ? पोजिसनिङले त्यो सम्भव बनाउँछ। तपाईंलाई टूलटिप चाहिन्छ जुन विशिष्ट स्थानमा देखा पर्छ? त्यो पनि पोजिसनिङले सम्भव बनाउँछ।
|
|
|
|
|
|
### पाँच पोजिसन मानहरू
|
|
|
|
|
|
| पोजिसन मान | व्यवहार | प्रयोग केस |
|
|
|
|----------------|----------|----------|
|
|
|
| `static` | डिफल्ट फ्लो, top/left/right/bottom लाई बेवास्ता गर्छ | सामान्य डकुमेन्ट लेआउट |
|
|
|
| `relative` | यसको सामान्य स्थितिको सापेक्ष पोजिसन गरिएको | साना समायोजनहरू, पोजिसनिङ सन्दर्भ सिर्जना गर्दै |
|
|
|
| `absolute` | नजिकको पोजिसन गरिएको पूर्वजको सापेक्ष पोजिसन गरिएको | ठ्याक्कै प्लेसमेन्ट, ओभरलेहरू |
|
|
|
| `fixed` | viewport को सापेक्ष पोजिसन गरिएको | नेभिगेसन बारहरू, फ्लोटिङ एलिमेन्टहरू |
|
|
|
| `sticky` | स्क्रोलको आधारमा relative र fixed बीच स्विच गर्छ | स्क्रोल गर्दा टाँसिने हेडरहरू |
|
|
|
|
|
|
### हाम्रो टेरारियममा पोजिसनिङ
|
|
|
|
|
|
हाम्रो टेरारियमले चाहिएको लेआउट सिर्जना गर्न पोजिसनिङ प्रकारहरूको रणनीतिक संयोजन प्रयोग गर्दछ:
|
|
|
|
|
|
```css
|
|
|
/* Container positioning */
|
|
|
.container {
|
|
|
position: absolute; /* Removes from normal flow */
|
|
|
/* ... other styles ... */
|
|
|
}
|
|
|
|
|
|
/* Plant holder positioning */
|
|
|
.plant-holder {
|
|
|
position: relative; /* Creates positioning context */
|
|
|
/* ... other styles ... */
|
|
|
}
|
|
|
|
|
|
/* Plant positioning */
|
|
|
.plant {
|
|
|
position: absolute; /* Allows precise placement within holder */
|
|
|
/* ... other styles ... */
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**पोजिसनिङ रणनीति बुझ्दै:**
|
|
|
- **Absolute कन्टेनरहरू** सामान्य डकुमेन्ट फ्लोबाट हटाइन्छन् र स्क्रिन किनारमा पिन गरिन्छन्
|
|
|
- **Relative प्लान्ट होल
|
|
|
आउनुहोस्, टेरारियम जारलाई टुक्रा-टुक्रामा निर्माण गरौं। प्रत्येक भागले उत्तरदायी डिजाइनको लागि पूर्ण स्थिति र प्रतिशत-आधारित आकार प्रयोग गर्दछ:
|
|
|
|
|
|
```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;
|
|
|
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.jar-top {
|
|
|
width: 50%;
|
|
|
height: 5%;
|
|
|
background: #d1e1df;
|
|
|
position: absolute;
|
|
|
bottom: 80.5%;
|
|
|
left: 25%;
|
|
|
opacity: 0.7;
|
|
|
z-index: 1;
|
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
|
}
|
|
|
|
|
|
.jar-bottom {
|
|
|
width: 50%;
|
|
|
height: 1%;
|
|
|
background: #d1e1df;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 25%;
|
|
|
opacity: 0.7;
|
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**टेरारियम निर्माणको समझ:**
|
|
|
- **प्रयोग गर्दछ** प्रतिशत-आधारित आयामहरू सबै स्क्रिन आकारहरूमा उत्तरदायी स्केलिङको लागि
|
|
|
- **तत्वहरूलाई** पूर्ण रूपमा स्थिति दिन्छ ताकि तिनीहरूलाई ठीकसँग मिलाउन र सँगै राख्न सकियोस्
|
|
|
- **विभिन्न अपारदर्शिता मानहरू लागू गर्दछ** ताकि गिलासको पारदर्शिता प्रभाव सिर्जना गर्न सकियोस्
|
|
|
- **`z-index` लेयरिङ लागू गर्दछ** ताकि बिरुवाहरू जारभित्र देखिन्छन्
|
|
|
- **सजिलो बक्स-छायाँ र परिष्कृत सीमा-व्यास लागू गर्दछ** ताकि थप वास्तविक देखावट प्रदान गर्न सकियोस्
|
|
|
|
|
|
### प्रतिशतको साथ उत्तरदायी डिजाइन
|
|
|
|
|
|
ध्यान दिनुहोस् कि सबै आयामहरूले निश्चित पिक्सेल मानहरू भन्दा प्रतिशत प्रयोग गर्छन्:
|
|
|
|
|
|
**यसको महत्त्व किन छ:**
|
|
|
- **सुनिश्चित गर्दछ** कि टेरारियम कुनै पनि स्क्रिन आकारमा अनुपातिक रूपमा स्केल हुन्छ
|
|
|
- **जारका घटकहरू बीचको दृश्य सम्बन्ध कायम राख्छ**
|
|
|
- **मोबाइल फोनदेखि ठूला डेस्कटप मोनिटरसम्मको अनुभवलाई स्थिर बनाउँछ**
|
|
|
- **डिजाइनलाई भाँच्न नदिई अनुकूलन गर्न अनुमति दिन्छ**
|
|
|
|
|
|
### CSS इकाइहरूको प्रयोग
|
|
|
|
|
|
हामी सीमा-व्यासको लागि `rem` इकाइहरू प्रयोग गर्दैछौं, जसले मूल फन्ट आकारको सापेक्ष स्केल गर्दछ। यसले प्रयोगकर्ताको फन्ट प्राथमिकताहरूलाई सम्मान गर्ने थप पहुँचयोग्य डिजाइनहरू सिर्जना गर्दछ। [CSS सापेक्ष इकाइहरू](https://www.w3.org/TR/css-values-3/#font-relative-lengths) को आधिकारिक विशिष्टतामा थप जान्नुहोस्।
|
|
|
|
|
|
✅ **दृश्य प्रयोग:** यी मानहरू परिवर्तन गरेर प्रभावहरू अवलोकन गर्नुहोस्:
|
|
|
- जारको अपारदर्शिता 0.5 बाट 0.8 मा परिवर्तन गर्नुहोस् – यसले गिलासको देखावटलाई कसरी असर गर्छ?
|
|
|
- माटोको रंग `#3a241d` बाट `#8B4513` मा समायोजन गर्नुहोस् – यसले के दृश्य प्रभाव पार्छ?
|
|
|
- माटोको `z-index` लाई 2 मा परिवर्तन गर्नुहोस् – लेयरिङमा के हुन्छ?
|
|
|
|
|
|
---
|
|
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
|
|
Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
|
|
|
|
|
|
**विवरण:** CSS एनिमेशन सिर्जना गर्नुहोस् जसले टेरारियमका बिरुवाहरूलाई प्राकृतिक हावा प्रभावको अनुकरण गर्दै हल्का हल्ला गराउँछ। यसले CSS एनिमेशन, ट्रान्सफर्म्स, र कीफ्रेमहरू अभ्यास गर्न मद्दत गर्नेछ र टेरारियमको दृश्य आकर्षण बढाउनेछ।
|
|
|
|
|
|
**प्रेरणा:** CSS कीफ्रेम एनिमेशनहरू थपेर टेरारियमका बिरुवाहरूलाई हल्का हल्ला गराउनुहोस्। एक हल्ला गर्ने एनिमेशन सिर्जना गर्नुहोस् जसले प्रत्येक बिरुवालाई हल्का (2-3 डिग्री) बायाँ र दायाँ घुमाउँछ, 3-4 सेकेन्डको अवधि सहित। यसलाई `.plant` वर्गमा लागू गर्नुहोस्। सुनिश्चित गर्नुहोस् कि एनिमेशन अनन्त रूपमा लूप हुन्छ र प्राकृतिक गतिका लागि इजिङ फङ्सन छ।
|
|
|
|
|
|
[Agent मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्।
|
|
|
|
|
|
## 🚀 चुनौती: गिलासको प्रतिबिम्ब थप्दै
|
|
|
|
|
|
तपाईंको टेरारियमलाई यथार्थपरक गिलास प्रतिबिम्बहरूद्वारा सुधार गर्न तयार हुनुहुन्छ? यो प्रविधिले डिजाइनमा गहिराई र यथार्थता थप्नेछ।
|
|
|
|
|
|
तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले गिलासको सतहमा प्रकाशको प्रतिबिम्बलाई अनुकरण गर्दछ। यो प्रविधि पुनर्जागरणका चित्रकारहरू जस्तै Jan van Eyck ले चित्रित गिलासलाई तीन-आयामीय देखाउन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नु भएको छ:
|
|
|
|
|
|
|
|
|
|
|
|
**तपाईंको चुनौती:**
|
|
|
- **सिर्जना गर्नुहोस्** गिलास प्रतिबिम्बहरूको लागि हल्का सेतो वा हल्का रंगका अण्डाकार आकारहरू
|
|
|
- **तिनीहरूलाई रणनीतिक रूपमा जारको बायाँ पक्षमा स्थिति दिनुहोस्**
|
|
|
- **उपयुक्त अपारदर्शिता र ब्लर प्रभावहरू लागू गर्नुहोस्** ताकि यथार्थपरक प्रकाश प्रतिबिम्ब सिर्जना गर्न सकियोस्
|
|
|
- **`border-radius` प्रयोग गर्नुहोस्** ताकि जैविक, बबल-जस्ता आकारहरू सिर्जना गर्न सकियोस्
|
|
|
- **ग्रेडियन्ट वा बक्स-छायाँसँग प्रयोग गर्नुहोस्** ताकि सुधारिएको यथार्थता प्रदान गर्न सकियोस्
|
|
|
|
|
|
## पोस्ट-व्याख्यान क्विज
|
|
|
|
|
|
[पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/18)
|
|
|
|
|
|
## CSS ज्ञान विस्तार गर्नुहोस्
|
|
|
|
|
|
CSS सुरुमा जटिल लाग्न सक्छ, तर यी मुख्य अवधारणाहरूको समझले उन्नत प्रविधिहरूको लागि बलियो आधार प्रदान गर्दछ।
|
|
|
|
|
|
**तपाईंको CSS सिक्ने अर्को क्षेत्रहरू:**
|
|
|
- **Flexbox** - तत्वहरूको मिलान र वितरणलाई सरल बनाउँछ
|
|
|
- **CSS Grid** - जटिल लेआउटहरू सिर्जना गर्न शक्तिशाली उपकरणहरू प्रदान गर्दछ
|
|
|
- **CSS Variables** - पुनरावृत्ति घटाउँछ र मर्मतयोग्यता सुधार गर्दछ
|
|
|
- **उत्तरदायी डिजाइन** - साइटहरू विभिन्न स्क्रिन आकारहरूमा राम्रोसँग काम गर्न सुनिश्चित गर्दछ
|
|
|
|
|
|
### अन्तरक्रियात्मक सिकाइ स्रोतहरू
|
|
|
|
|
|
यी आकर्षक, व्यावहारिक खेलहरूसँग अवधारणाहरू अभ्यास गर्नुहोस्:
|
|
|
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - रमाइलो चुनौतीहरू मार्फत Flexbox सिक्नुहोस्
|
|
|
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS Grid सिक्दै भर्चुअल गाजरहरू उमार्नुहोस्
|
|
|
- 🎯 [CSS Battle](https://cssbattle.dev/) - कोडिङ चुनौतीहरूसँग तपाईंको CSS कौशल परीक्षण गर्नुहोस्
|
|
|
|
|
|
### थप सिकाइ
|
|
|
|
|
|
CSS को आधारभूत ज्ञानको लागि, यो Microsoft Learn मोड्युल पूरा गर्नुहोस्: [तपाईंको HTML एपलाई CSS द्वारा शैली दिनुहोस्](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
|
|
|
|
|
## असाइनमेन्ट
|
|
|
|
|
|
[CSS Refactoring](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**अस्वीकरण**:
|
|
|
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं। |
