|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "e375c2aeb94e2407f2667633d39580bd",
|
|
|
"translation_date": "2025-08-27T20:11:06+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/README.md",
|
|
|
"language_code": "he"
|
|
|
}
|
|
|
-->
|
|
|
# פרויקט הטרריום חלק 2: מבוא ל-CSS
|
|
|
|
|
|
|
|
|
> איור מאת [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## חידון לפני ההרצאה
|
|
|
|
|
|
[חידון לפני ההרצאה](https://ff-quizzes.netlify.app/web/quiz/17)
|
|
|
|
|
|
### מבוא
|
|
|
|
|
|
CSS, או Cascading Style Sheets, פותר בעיה חשובה בפיתוח אתרים: איך לגרום לאתר שלך להיראות טוב. עיצוב האפליקציות שלך הופך אותן לשימושיות ונעימות יותר למראה; ניתן גם להשתמש ב-CSS ליצירת עיצוב רספונסיבי (Responsive Web Design - RWD) - כך שהאפליקציות שלך ייראו טוב בכל גודל מסך שבו הן מוצגות. CSS אינו עוסק רק בשיפור המראה של האפליקציה שלך; המפרט שלו כולל גם אנימציות ושינויים שיכולים לאפשר אינטראקציות מתקדמות באפליקציות שלך. קבוצת העבודה של CSS מסייעת בתחזוקת המפרטים הנוכחיים של CSS; ניתן לעקוב אחר עבודתם באתר [World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
|
|
|
|
|
|
> שים לב, CSS היא שפה שמתפתחת, כמו כל דבר באינטרנט, ולא כל הדפדפנים תומכים בחלקים החדשים של המפרט. תמיד בדוק את היישומים שלך באמצעות [CanIUse.com](https://caniuse.com).
|
|
|
|
|
|
בשיעור זה, נוסיף עיצובים לטרריום המקוון שלנו ונלמד יותר על מספר מושגים ב-CSS: הקסקדה, ירושה, שימוש בבוחרים (selectors), מיקום ושימוש ב-CSS לבניית פריסות. במהלך התהליך נפרוס את הטרריום וניצור את הטרריום עצמו.
|
|
|
|
|
|
### דרישות מקדימות
|
|
|
|
|
|
עליך לבנות את ה-HTML של הטרריום שלך ולהכין אותו לעיצוב.
|
|
|
|
|
|
> צפה בסרטון
|
|
|
|
|
|
>
|
|
|
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
|
|
|
|
|
|
### משימה
|
|
|
|
|
|
בתיקיית הטרריום שלך, צור קובץ חדש בשם `style.css`. ייבא את הקובץ הזה בתוך החלק `<head>`:
|
|
|
|
|
|
```html
|
|
|
<link rel="stylesheet" href="./style.css" />
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
## הקסקדה
|
|
|
|
|
|
Cascading Style Sheets משלבות את הרעיון שהעיצובים 'נשפכים' כך שיישום של עיצוב מונחה לפי סדר העדיפות שלו. עיצובים שנקבעו על ידי מחבר האתר מקבלים עדיפות על פני אלו שנקבעו על ידי הדפדפן. עיצובים שנקבעו 'inline' מקבלים עדיפות על פני אלו שנקבעו בקובץ עיצוב חיצוני.
|
|
|
|
|
|
### משימה
|
|
|
|
|
|
הוסף את העיצוב inline "color: red" לתג `<h1>` שלך:
|
|
|
|
|
|
```HTML
|
|
|
<h1 style="color: red">My Terrarium</h1>
|
|
|
```
|
|
|
|
|
|
לאחר מכן, הוסף את הקוד הבא לקובץ `style.css` שלך:
|
|
|
|
|
|
```CSS
|
|
|
h1 {
|
|
|
color: blue;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
✅ איזה צבע מוצג באפליקציה שלך? מדוע? האם תוכל למצוא דרך לעקוף עיצובים? מתי תרצה לעשות זאת, או מדוע לא?
|
|
|
|
|
|
---
|
|
|
|
|
|
## ירושה
|
|
|
|
|
|
עיצובים מועברים מסגנון של אב לסגנון של צאצא, כך שאלמנטים מקוננים יורשים את העיצובים של ההורים שלהם.
|
|
|
|
|
|
### משימה
|
|
|
|
|
|
הגדר את הגופן של ה-body לגופן מסוים, ובדוק אם אלמנט מקונן יורש את הגופן:
|
|
|
|
|
|
```CSS
|
|
|
body {
|
|
|
font-family: helvetica, arial, sans-serif;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
פתח את הקונסולה של הדפדפן בלשונית 'Elements' וצפה בגופן של ה-H1. הוא יורש את הגופן מה-body, כפי שמצוין בדפדפן:
|
|
|
|
|
|
|
|
|
|
|
|
✅ האם תוכל לגרום לסגנון מקונן לרשת תכונה שונה?
|
|
|
|
|
|
---
|
|
|
|
|
|
## בוחרי CSS
|
|
|
|
|
|
### תגיות
|
|
|
|
|
|
עד כה, בקובץ `style.css` שלך יש רק כמה תגיות מעוצבות, והאפליקציה נראית די מוזרה:
|
|
|
|
|
|
```CSS
|
|
|
body {
|
|
|
font-family: helvetica, arial, sans-serif;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
color: #3a241d;
|
|
|
text-align: center;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
דרך זו של עיצוב תגית נותנת לך שליטה על אלמנטים ייחודיים, אך עליך לשלוט בעיצובים של צמחים רבים בטרריום שלך. כדי לעשות זאת, עליך להשתמש בבוחרי CSS.
|
|
|
|
|
|
### מזהים (Ids)
|
|
|
|
|
|
הוסף עיצוב לפריסת המכולות השמאלית והימנית. מכיוון שיש רק מכולה שמאלית אחת ורק מכולה ימנית אחת, הן קיבלו מזהים ב-HTML. כדי לעצב אותן, השתמש ב-`#`:
|
|
|
|
|
|
```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); האם תוכל למצוא דרך טובה יותר לעצב את המזהים הללו, אולי עם מזהה ומחלקה? תצטרך לשנות את ה-HTML ולבצע רפקטור ל-CSS:
|
|
|
|
|
|
```html
|
|
|
<div id="left-container" class="container"></div>
|
|
|
```
|
|
|
|
|
|
### מחלקות (Classes)
|
|
|
|
|
|
בדוגמה לעיל, עיצבת שני אלמנטים ייחודיים על המסך. אם ברצונך שעיצובים יחולו על אלמנטים רבים על המסך, תוכל להשתמש במחלקות CSS. עשה זאת כדי לפרוס את הצמחים במכולות השמאלית והימנית.
|
|
|
|
|
|
שים לב שכל צמח ב-HTML מכיל שילוב של מזהים ומחלקות. המזהים כאן משמשים את ה-JavaScript שתוסיף מאוחר יותר כדי לשלוט במיקום הצמחים בטרריום. המחלקות, לעומת זאת, מעניקות לכל הצמחים סגנון מסוים.
|
|
|
|
|
|
```html
|
|
|
<div class="plant-holder">
|
|
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
הוסף את הקוד הבא לקובץ `style.css` שלך:
|
|
|
|
|
|
```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-holder` מקונן, מתאים את עצמו בתוך מכולות הצד, ויוצר מקום לצמחים להיות ממוקמים בשורה אנכית.
|
|
|
|
|
|
> ה-`plant` עצמו גם במיקום מוחלט, דבר הכרחי כדי להפוך אותו לניתן לגרירה, כפי שתלמד בשיעור הבא.
|
|
|
|
|
|
✅ נסה לשנות את סוגי המיקום של מכולות הצד ושל ה-`plant-holder`. מה קורה?
|
|
|
|
|
|
## פריסות ב-CSS
|
|
|
|
|
|
עכשיו תשתמש במה שלמדת כדי לבנות את הטרריום עצמו, הכל באמצעות CSS!
|
|
|
|
|
|
ראשית, עצב את הילדים של ה-div `.terrarium` כמלבן מעוגל באמצעות CSS:
|
|
|
|
|
|
```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` עבור ה-border-radius, יחידת מידה יחסית לגופן. קרא עוד על סוג זה של מידה יחסית במפרט [CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
|
|
|
|
|
|
✅ נסה לשנות את צבעי הצנצנת והאטימות לעומת אלו של האדמה. מה קורה? מדוע?
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀אתגר
|
|
|
|
|
|
הוסף ברק 'בועה' לאזור השמאלי התחתון של הצנצנת כדי לגרום לה להיראות יותר כמו זכוכית. תעצב את ה-`.jar-glossy-long` וה-`.jar-glossy-short` כך שייראו כמו ברק משתקף. כך זה ייראה:
|
|
|
|
|
|
|
|
|
|
|
|
כדי להשלים את החידון לאחר ההרצאה, עבור על מודול הלמידה הזה: [עצב את אפליקציית ה-HTML שלך עם CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
|
|
|
|
|
|
## חידון לאחר ההרצאה
|
|
|
|
|
|
[חידון לאחר ההרצאה](https://ff-quizzes.netlify.app/web/quiz/18)
|
|
|
|
|
|
## סקירה ולמידה עצמית
|
|
|
|
|
|
CSS נראה פשוט למדי, אך ישנם אתגרים רבים כאשר מנסים לעצב אפליקציה בצורה מושלמת לכל הדפדפנים ולכל גדלי המסכים. CSS-Grid ו-Flexbox הם כלים שפותחו כדי להפוך את העבודה למובנית ואמינה יותר. למד על הכלים הללו על ידי משחק ב-[Flexbox Froggy](https://flexboxfroggy.com/) וב-[Grid Garden](https://codepip.com/games/grid-garden/).
|
|
|
|
|
|
## משימה
|
|
|
|
|
|
[רפקטורינג ל-CSS](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**כתב ויתור**:
|
|
|
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לאי-הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה. |
