1step2learn

מבוא לעיצוב עם CSS

/ טכנולוגיה
תוכנה
הנהלת האתר
·
דק' קריאה
Thumbnail
 
 
 
 
הבסיס של CSS: איך לשנות צבעים, גדלים, גופנים, ולהוסיף עיצוב לדף HTML.

קורס טכנולוגיות אינטרנט

נושא מספר 6 ב-קורס תכנות לילדים.

תיאור השיעור:

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

מטרות השיעור:

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

1. מה זה CSS?

נתחיל בהבנה בסיסית של CSS.

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

CSS מאפשרת לנו לקבוע:

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

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

2. איך CSS עובד עם HTML?

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

דוגמה פשוטה:

ניקח דף HTML פשוט:

<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי עם CSS</title>
</head>
<body>
   <h1>שלום, עולם!</h1>
   <p>זהו הדף הראשון שלי שבו אני לומד על CSS.</p>
</body>
</html>

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

עכשיו נוכל להוסיף CSS כדי לשפר את הנראות!

3. איך מוסיפים CSS לדף HTML?

יש שלוש דרכים עיקריות להוסיף CSS לדף HTML:

  1. עיצוב בתוך תגית (Inline CSS):
    כאשר אנחנו מוסיפים עיצוב ישירות בתוך תגית ה-HTML באמצעות המאפיין style.

    לדוגמה, נוכל להוסיף צבע לכותרת כך:

    <h1 style="color: blue;">שלום, עולם!</h1>

  2. עיצוב בתוך התגית <style> בתוך <head> (Internal CSS):
    נכתוב את חוקי ה-CSS בתוך תגית <style> בראש העמוד, תחת <head>.

    לדוגמה:

    <style>
    h1 {
        color: blue;
    }
    p {
        font-size: 18px;
    }
</style>

  3. עיצוב בקובץ חיצוני (External CSS):
    ניצור קובץ CSS נפרד (לדוגמה, style.css), ונקשר אותו לדף HTML באמצעות התגית <link> בתוך <head>.

    לדוגמה:

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

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

תרגול 1:

בואו ניצור דף HTML עם עיצוב פשוט. נתחיל עם עיצוב בצורת Internal CSS בתוך התגית <style>.

משימה:

  • כתבו דף HTML שמכיל כותרת <h1> וטקסט <p>.
  • השתמשו בתגית <style> כדי לשנות את צבע הכותרת ואת גודל הטקסט של הפסקה.
<!DOCTYPE html>
<html>
<head>
   <title>הדף הראשון שלי עם CSS</title>
   <style>
       h1 {
           color: green;
       }
       p {
           font-size: 20px;
       }
   </style>
</head>
<body>
   <h1>שלום, עולם!</h1>
   <p>זהו הדף הראשון שלי שבו אני לומד על CSS.</p>
</body>
</html>

4. איך לשנות צבעים עם CSS?

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

שינוי צבע טקסט:

הדרך הפשוטה ביותר לשנות צבע של טקסט היא באמצעות המאפיין color.

h1 {
    color: blue;
}

שינוי צבע רקע:

כדי לשנות את צבע הרקע של אלמנט, נשתמש במאפיין background-color.

body {
    background-color: lightgray;
}

איך בוחרים צבעים?

יש כמה דרכים להגדיר צבעים ב-CSS:

  • שמות צבעים באנגלית: כמו blue, red, green.
  • קוד צבע הקסדצימלי (Hex Code): צבע מוגדר במבנה של #RRGGBB. לדוגמה, #FF0000 הוא אדום.
  • RGB: מוגדר במבנה של rgb(255, 0, 0) לצבע אדום.

תרגול 2:

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

משימה:

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

5. שינוי גודל טקסט

כדי לשנות את גודל הטקסט, נשתמש במאפיין font-size. נוכל לקבוע את גודל הטקסט ביחידות שונות, כגון פיקסלים (px), אחוזים (%), או ems.

דוגמה:

p {
    font-size: 20px;
}

המשמעות היא שהטקסט שבפסקה יהיה בגודל 20 פיקסלים.

תרגול 3:

  • שנו את גודל הטקסט של הפסקה בדף שלכם ל-24px.

6. שינוי גופנים (Fonts)

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

דוגמה לשינוי גופן:

p {
    font-family: Arial, sans-serif;
}

במקרה זה, הגופן שנבחר לפסקה הוא Arial. אם הגופן הזה לא קיים במחשב, המחשב יבחר את הגופן החלופי הבא ברשימה, במקרה זה sans-serif.

שימוש בגופנים מותאמים אישית:

ניתן גם להשתמש בגופנים מאתרים חיצוניים כמו Google Fonts. לדוגמה:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

לאחר שהוספנו את הקישור הזה לקובץ ה-HTML, נוכל להשתמש בגופן החדש כך:

p {
    font-family: 'Roboto', sans-serif;
}

תרגול 4:

  • בחרו גופן חדש לשימוש בטקסטים שלכם, ונסו להוסיף אותו ל-HTML באמצעות Google Fonts.

7. מרווחים פנימיים וחיצוניים (Padding ו-Margin)

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

  1. Padding – המרווח הפנימי, כלומר, המרחק בין התוכן של האלמנט לגבולות שלו.
  2. Margin – המרווח החיצוני, כלומר, המרחק בין האלמנט לגבולות של אלמנטים אחרים בדף.

דוגמה:

p {
    padding: 20px;
    margin: 10px;
}

במקרה הזה:

  • ה-padding של הפסקה יהיה 20 פיקסלים, כך שיהיה רווח פנימי של 20 פיקסלים בין התוכן לגבולות האלמנט.
  • ה-margin יהיה 10 פיקסלים, כך שיהיה רווח חיצוני של 10 פיקסלים מסביב לאלמנט.

תרגול 5:

  • הוסיפו מרווחים פנימיים (padding) ומרווחים חיצוניים (margin) לכותרת ולפסקה בדף שלכם.

סיכום השיעור:

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

המשך תרגול:

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

קישורים

  1. בחלק מהתמונות נעשה שימוש בטכנולוגיית בינה מלאכותית.