27 KiB

Raw Blame History Unescape Escape

פרויקט הטרריום חלק 2: מבוא ל-CSS

איור מאת Tomomi Imura

זוכרים איך הטרריום שלכם ב-HTML נראה די בסיסי? CSS הוא המקום שבו אנו הופכים את המבנה הפשוט הזה למשהו מושך מבחינה חזותית.

אם HTML הוא כמו בניית מסגרת של בית, אז CSS הוא כל מה שגורם לו להרגיש כמו בית - צבעי הקירות, סידור הרהיטים, התאורה, ואיך החדרים משתלבים יחד. תחשבו איך ארמון ורסאי התחיל כבית ציד פשוט, אבל תשומת לב מדוקדקת לעיצוב ולפריסה הפכה אותו לאחד המבנים המפוארים בעולם.

היום, נהפוך את הטרריום שלכם מפונקציונלי למלוטש. תלמדו איך למקם אלמנטים בדיוק, ליצור פריסות שמגיבות לגדלים שונים של מסכים, וליצור את המשיכה החזותית שהופכת אתרים למרתקים.

בסוף השיעור הזה, תראו איך עיצוב CSS אסטרטגי יכול לשפר באופן דרמטי את הפרויקט שלכם. בואו נוסיף קצת סטייל לטרריום שלכם.

שאלון לפני השיעור

התחלת עבודה עם CSS

CSS נתפס לעיתים קרובות כ"משהו שעושה דברים יפים", אבל הוא משרת מטרה רחבה הרבה יותר. CSS הוא כמו להיות במאי של סרט - אתם שולטים לא רק איך הכל נראה, אלא גם איך זה זז, מגיב לאינטראקציה, ומסתגל למצבים שונים.

CSS מודרני הוא בעל יכולות מרשימות. אתם יכולים לכתוב קוד שמותאם אוטומטית לפריסות של טלפונים, טאבלטים ומחשבים שולחניים. אתם יכולים ליצור אנימציות חלקות שמכוונות את תשומת הלב של המשתמשים למקום הנכון. התוצאות יכולות להיות מרשימות מאוד כשהכל עובד יחד.

💡 טיפ מקצועי: CSS מתפתח כל הזמן עם תכונות ויכולות חדשות. תמיד בדקו את CanIUse.com כדי לוודא תמיכה בדפדפנים עבור תכונות CSS חדשות לפני השימוש בהן בפרויקטים.

הנה מה שנשיג בשיעור הזה:

ניצור עיצוב חזותי מלא לטרריום שלכם באמצעות טכניקות CSS מודרניות
נחקור מושגים בסיסיים כמו cascade, ירושה ובוחרי CSS
ניישם אסטרטגיות מיקום ופריסה רספונסיביות
נבנה את מיכל הטרריום באמצעות צורות ועיצוב ב-CSS

דרישות מוקדמות

עליכם להשלים את מבנה ה-HTML של הטרריום שלכם מהשיעור הקודם ולהכין אותו לעיצוב.

📺 משאב וידאו: צפו בסרטון ההדרכה המועיל הזה

הגדרת קובץ ה-CSS שלכם

לפני שנוכל להתחיל לעצב, עלינו לחבר את CSS ל-HTML שלנו. החיבור הזה אומר לדפדפן איפה למצוא את הוראות העיצוב לטרריום שלנו.

בתיקיית הטרריום שלכם, צרו קובץ חדש בשם style.css, ואז קשרו אותו למסמך ה-HTML שלכם בתוך החלק <head>:

<link rel="stylesheet" href="./style.css" />

הנה מה שהקוד הזה עושה:

יוצר חיבור בין קבצי ה-HTML וה-CSS שלכם
אומר לדפדפן לטעון וליישם את העיצובים מתוך style.css
משתמש בתכונה rel="stylesheet" כדי לציין שזהו קובץ CSS
מתייחס לנתיב הקובץ עם href="./style.css"

הבנת ה-CSS Cascade

אי פעם תהיתם למה קוראים ל-CSS "Cascading Style Sheets"? סגנונות מתגלגלים כמו מפל, ולפעמים הם מתנגשים זה עם זה.

תחשבו איך מבנה פיקוד צבאי עובד - פקודה כללית עשויה לומר "כל החיילים לובשים ירוק", אבל פקודה ספציפית ליחידה שלכם עשויה לומר "ללבוש כחול טקסי לטקס". ההוראה הספציפית יותר מקבלת עדיפות. CSS פועל לפי לוגיקה דומה, והבנת ההיררכיה הזו הופכת את פתרון הבעיות להרבה יותר קל.

ניסוי בעדיפות ה-Cascade

בואו נראה את ה-Cascade בפעולה על ידי יצירת סתירה בסגנון. קודם כל, הוסיפו סגנון inline לתג <h1> שלכם:

<h1 style="color: red">My Terrarium</h1>

מה הקוד הזה עושה:

מיישם צבע אדום ישירות על אלמנט <h1> באמצעות סגנון inline
משתמש בתכונה style כדי להטמיע CSS ישירות ב-HTML
יוצר את חוק הסגנון בעל העדיפות הגבוהה ביותר עבור אלמנט ספציפי זה

לאחר מכן, הוסיפו את החוק הזה לקובץ style.css שלכם:

h1 {
  color: blue;
}

במקרה הזה, עשינו:

הגדרנו חוק CSS שמכוון לכל אלמנטי <h1>
קבענו את צבע הטקסט לכחול באמצעות גיליון סגנונות חיצוני
יצרנו חוק בעדיפות נמוכה יותר בהשוואה לסגנונות inline

✅ בדיקת ידע: איזה צבע מוצג באפליקציית האינטרנט שלכם? למה הצבע הזה מנצח? האם אתם יכולים לחשוב על תרחישים שבהם תרצו לעקוף סגנונות?

💡 סדר עדיפות CSS (מהגבוה לנמוך):

סגנונות inline (תכונת style)

IDs (#myId)

Classes (.myClass) ותכונות

בוחרי אלמנטים (h1, div, p)

ברירת מחדל של הדפדפן

ירושה ב-CSS בפעולה

ירושה ב-CSS עובדת כמו גנטיקה - אלמנטים יורשים תכונות מסוימות מהאלמנטים ההורים שלהם. אם תגדירו את משפחת הגופן על אלמנט ה-body, כל הטקסט שבתוכו ישתמש אוטומטית באותו גופן. זה דומה לאיך שהלסת הייחודית של משפחת הבסבורג הופיעה לאורך דורות מבלי שהוגדרה לכל פרט בנפרד.

עם זאת, לא הכל עובר בירושה. סגנונות טקסט כמו גופנים וצבעים כן עוברים בירושה, אבל תכונות פריסה כמו שוליים וגבולות לא. בדיוק כמו שילדים עשויים לרשת תכונות פיזיות אבל לא את בחירות האופנה של הוריהם.

צפייה בירושת גופן

בואו נראה ירושה בפעולה על ידי הגדרת משפחת גופן על אלמנט <body>:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

פירוט מה קורה כאן:

מגדיר את משפחת הגופן לכל הדף על ידי מיקוד אלמנט <body>
משתמש בערימת גופנים עם אפשרויות גיבוי לתאימות טובה יותר עם דפדפנים
מיישם גופנים מערכתיים מודרניים שנראים נהדר על פני מערכות הפעלה שונות
מבטיח שכל האלמנטים הילדיים יורשים את הגופן הזה אלא אם כן הוגדר אחרת

פתחו את כלי המפתחים של הדפדפן שלכם (F12), עברו ללשונית Elements, ובדקו את אלמנט <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 לפי שם התג שלהם. הם מושלמים להגדרת סגנונות בסיסיים שמיושמים באופן רחב על פני הדף שלכם:

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 ספציפיות. מכיוון ש-ID חייב להיות ייחודי בדף, הם מושלמים לעיצוב אלמנטים בודדים ומיוחדים כמו מיכלי הצמחים השמאלי והימני שלנו.

בואו ניצור את העיצוב למיכלי הצד של הטרריום שלנו, שם הצמחים יימצאו:

#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 וגם class?

גישה משופרת:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.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;
}

בוחרי Class לסגנונות חוזרים

בוחרי Class משתמשים בסמל . והם מושלמים כשאתם רוצים ליישם את אותם סגנונות על מספר אלמנטים. בניגוד ל-ID, ניתן להשתמש ב-Class שוב ושוב לאורך ה-HTML שלכם, מה שהופך אותם לאידיאליים לדפוסי עיצוב עקביים.

בטרריום שלנו, כל צמח זקוק לעיצוב דומה אבל גם למיקום אישי. נשתמש בשילוב של Class לעיצוב משותף ו-ID למיקום ייחודי.

הנה מבנה ה-HTML לכל צמח:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.he.png" />
</div>

הסבר על האלמנטים המרכזיים:

משתמש ב-class="plant-holder" לעיצוב מיכל עקבי לכל הצמחים
מיישם class="plant" לעיצוב והתנהגות תמונה משותפים
כולל id="plant1" ייחודי למיקום אישי ואינטראקציה עם JavaScript
מספק טקסט alt תיאורי לנגישות עבור קוראי מסך

עכשיו הוסיפו את הסגנונות האלה לקובץ style.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);
}

פירוט הסגנונות האלה:

יוצר מיקום יחסי למחזיק הצמח כדי ליצור הקשר מיקום
מגדיר כל מחזיק צמח לגובה של 13%, ומבטיח שכל הצמחים יתאימו אנכית ללא גלילה
מזיז את המחזיקים מעט שמאלה כדי למרכז טוב יותר את הצמחים בתוך המיכלים שלהם
מאפשר לצמחים להתאים את עצמם באופן רספונסיבי עם תכונות max-width ו-max-height
משתמש ב-z-index כדי למקם את הצמחים מעל אלמנטים אחרים בטרריום
מוסיף אפקט ריחוף עדין עם מעברי CSS לאינטראקציה טובה יותר עם המשתמש

✅ חשיבה ביקורתית: למה אנחנו צריכים גם בוחרי .plant-holder וגם .plant? מה היה קורה אם היינו מנסים להשתמש רק באחד מהם?

💡 תבנית עיצוב: המיכל (.plant-holder) שולט בפריסה ובמיקום, בעוד שהתוכן (.plant) שולט במראה ובסקיילינג. ההפרדה הזו הופכת את הקוד ליותר ניתן לתחזוקה וגמיש.

הבנת מיקום ב-CSS

מיקום ב-CSS הוא כמו להיות במאי במה - אתם מכוונים איפה כל שחקן עומד ואיך הוא זז על הבמה. חלק מהשחקנים עוקבים אחרי הפריסה הסטנדרטית, בעוד שאחרים זקוקים למיקום ספציפי לאפקט דרמטי.

ברגע שתבינו מיקום, הרבה אתגרי פריסה יהפכו לניתנים לניהול. צריכים סרגל ניווט שנשאר בראש בזמן שהמשתמשים גוללים? מיקום מטפל בזה. רוצים תיבת טקסט שמופיעה במיקום ספציפי? גם זה מיקום.

חמשת ערכי המיקום

ערך מיקום	התנהגות	מקרה שימוש
`static`	זרימה ברירת מחדל, מתעלם מ-top/left/right/bottom	פריסת מסמך רגילה
`relative`	ממוקם יחסית למיקומו הרגיל	התאמות קטנות, יצירת הקשר מיקום
`absolute`	ממוקם יחסית לאב הממוקם הקרוב ביותר	מיקום מדויק, שכבות
`fixed`	ממוקם יחסית לחלון התצוגה	סרגלי ניווט, אלמנטים צפים
`sticky`	עובר בין יחסית לקבוע בהתאם לגלילה	כותרות שנצמדות בזמן גלילה

מיקום בטרריום שלנו

הטרריום שלנו משתמש בשילוב אסטרטגי של סוגי מיקום כדי ליצור את הפריסה הרצויה:

/* 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 ... */
}

הבנת אסטרטגיית המיקום:

מיכלים מוחלטים מוסרים מזרימת המסמך הרגילה ומוצמדים לקצוות המסך
מחזיקי צמחים יחסיים יוצרים הקשר מיקום תוך שמירה על זרימת המסמך
צמחים מוחלטים יכולים להיות ממוקמים בדיוק בתוך המיכלים היחסיים שלהם
השילוב הזה מאפשר לצמחים להיערם אנכית תוך שהם ניתנים למיקום אישי

🎯 למה זה חשוב: אלמנטי plant צריכים מיקום מוחלט כדי להיות ניתנים לגרירה בשיעור הבא. מיקום מוחלט מסיר אותם מזרימת הפריסה הרגילה, מה שהופך אינטראקציות גרירה ושחרור לאפשריות.

✅ זמן ניסוי: נסו לשנות את ערכי המיקום וצפו בתוצאות:

מה קורה אם תשנו את .container מ-absolute ל-relative?
איך הפריסה משתנה אם .plant-holder משתמש ב-absolute במקום ב-relative?
מה קורה כשאתם משנים את .plant למיקום relative?

בניית הטרריום עם CSS

עכשיו נבנה צנצנת זכוכית באמצעות CSS בלבד - ללא תמונות או תוכנות גרפיות.

יצירת זכוכית מציאותית, צללים ואפקטים של עומק באמצעות מיקום ושקיפות מדגימה את יכולות ה-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;
  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 במפרט הרשמי.

✅ ניסוי ויזואלי: נסו לשנות את הערכים הללו וצפו בהשפעות:

שנו את אטימות הצנצנת מ-0.5 ל-0.8 – איך זה משפיע על מראה הזכוכית?
התאימו את צבע האדמה מ-#3a241d ל-#8B4513 – מה ההשפעה הוויזואלית של זה?
שנו את ה-z-index של האדמה ל-2 – מה קורה לשכבות?

אתגר סוכן GitHub Copilot 🚀

השתמשו במצב סוכן כדי להשלים את האתגר הבא:

תיאור: צרו אנימציית CSS שגורמת לצמחים בטרריום להתנדנד בעדינות מצד לצד, המדמה אפקט של רוח טבעית. זה יעזור לכם לתרגל אנימציות CSS, טרנספורמציות ו-keyframes תוך שיפור האטרקטיביות הוויזואלית של הטרריום.

הנחיה: הוסיפו אנימציות keyframe ב-CSS כדי לגרום לצמחים בטרריום להתנדנד בעדינות מצד לצד. צרו אנימציית נדנוד שמסובבת כל צמח מעט (2-3 מעלות) שמאלה וימינה עם משך זמן של 3-4 שניות, ויישמו אותה על מחלקת .plant. ודאו שהאנימציה חוזרת על עצמה ללא סוף ויש לה פונקציית easing לתנועה טבעית.

למדו עוד על מצב סוכן כאן.

🚀 אתגר: הוספת השתקפויות זכוכית

מוכנים לשדרג את הטרריום שלכם עם השתקפויות זכוכית מציאותיות? טכניקה זו תוסיף עומק וריאליזם לעיצוב.

תיצרו הדגשות עדינות שמדמות כיצד אור משתקף על פני זכוכית. גישה זו דומה לאופן שבו ציירים מתקופת הרנסנס כמו יאן ואן אייק השתמשו באור והשתקפות כדי לגרום לזכוכית מצוירת להיראות תלת-ממדית. הנה מה שאתם שואפים להשיג:

האתגר שלכם:

צרו צורות אליפטיות לבנות או בהירות עבור השתקפויות הזכוכית
מקמו אותן באופן אסטרטגי בצד השמאלי של הצנצנת
יישמו אפקטי אטימות וטשטוש מתאימים להשתקפות אור מציאותית
השתמשו ב-border-radius ליצירת צורות אורגניות, דמויות בועות
נסו גרדיאנטים או צללים לתוספת ריאליזם

שאלון לאחר ההרצאה

הרחיבו את הידע שלכם ב-CSS

CSS יכול להרגיש מורכב בהתחלה, אבל הבנת מושגים מרכזיים אלו מספקת בסיס מוצק לטכניקות מתקדמות יותר.

תחומי הלמידה הבאים שלכם ב-CSS:

Flexbox - מפשט יישור והפצה של אלמנטים
CSS Grid - מספק כלים חזקים ליצירת פריסות מורכבות
CSS Variables - מפחית חזרות ומשפר תחזוקה
עיצוב רספונסיבי - מבטיח שאתרים יעבדו היטב בכל גדלי המסכים

משאבי למידה אינטראקטיביים

תרגלו את המושגים הללו עם משחקים מהנים ומעשיים:

🐸 Flexbox Froggy - שלטו ב-Flexbox דרך אתגרים מהנים
🌱 Grid Garden - למדו CSS Grid על ידי גידול גזרים וירטואליים
🎯 CSS Battle - בדקו את כישורי ה-CSS שלכם עם אתגרי קוד

למידה נוספת

ליסודות CSS מקיפים, השלימו את המודול של Microsoft Learn: עצבו את אפליקציית ה-HTML שלכם עם CSS

משימה

שיפור CSS

הצהרת אחריות:
מסמך זה תורגם באמצעות שירות תרגום AI Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

27 KiB Raw Blame History Unescape Escape