מבוא ל-CSS: ההרצאה המלאה למתחילים¶

הקדמה¶

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

פרק 1: מה זה CSS?¶

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

דוגמה לקובץ HTML עם CSS:¶

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>אתר מעוצב</title>
</head>
<body>
    <h1>שלום עולם!</h1>
    <p>זהו עמוד שמעוצב באמצעות CSS.</p>
</body>
</html>

שימו לב לאלמנט הlink, שבו אנחנו מגדירים קובץ styles.css שנמצא בשרת הhttp שלנו שמגדיר את כל הcss שאנחנו מוסיפים לאתר.

צרו קובץ כזה.
בקובץ styles.css נכתוב:

body {
    background-color: lightblue;
}

h1 {
    color: darkblue;
    text-align: center;
}

p {
    font-size: 18px;
}

והריצו.

מגניב נכון? בגדול בcss למעלה הגדרנו את התגיות שאותם אנחנו רוצים לעצב, למשל תגית p- ואז את השינויים בעיצוב שאנחנו רוצים לעשות להן, למשל font-size: 18px שזה משנה את גודל הפונט ל18 פיקסלים.

פרק 2: שלוש דרכים לשימוש ב-CSS¶

CSS פנימי (Internal CSS) - נכתב בתוך תגית <style> בקובץ ה-HTML.

<style>
    p {
        color: red;
    }
</style>

CSS חיצוני (External CSS) - מוגדר בקובץ .css נפרד.

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

CSS בתוך התגית (Inline CSS) - נכתב ישירות בתגיות HTML.

<p style="color: red;">טקסט אדום</p>

פרק 3: סלקטורים (Selectors)¶

חוץ מלתת css לפי סוג האלמנטים (כמו שעשינו למעלה), אפשר לבחור את האלמנטים שעליהם נכיל css על פי מאפיינים אחרים.
סלקטורים מאפשרים לנו לבחור אלמנטים ולהחיל עליהם עיצובים.

סלקטורים נפוצים:¶

/* סלקטור לפי שם תגית */
h1 { color: blue; }

כלומר רק אלמנטים מסוג h1.
לדוגמה:

<h1>hello!</h1>

/* סלקטור לפי מזהה (ID) */
#main-title { font-size: 30px; }

רק אלמנטים שהID שלהם הוא main-title
לדוגמה:

<p id="main-title">hello!</p>

/* סלקטור לפי מחלקה (Class) */
.highlight { background-color: yellow; }

רק אלמנטים שהclass שלהם הוא highlight
לדוגמה:

<p class="highlight">hello!</p>

/* סלקטור לפי צאצאים */
div p { color: green; }

רק אלמנטים שהp שלהם הוא בן של אלמנט div
לדוגמה:

<div>
    <p>hello!</p>
</div>
``````


---

## פרק 4: צבעים ורקעים

### צבעים ב-CSS

```css
p {
    color: red; /* שם צבע */
    color: #ff0000; /* קוד הקסדצימלי */
    color: rgb(255, 0, 0); /* ערכי RGB */
}

רקעים¶

body {
    background-color: lightgray;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
}

פרק 5: טיפוגרפיה¶

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    text-decoration: underline;
}

סוג פונט, גודל, עד כמה כהה וכו.

פרק 6: מודל הקופסה (Box Model)¶

ב-CSS כל אלמנט הוא קופסה שמורכבת מ:

content – התוכן.
padding – מרווח פנימי.
border – מסגרת.
margin – מרווח חיצוני.

ובאמצעות css נוכל לשנות את ההגדרות האלו.

div {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

פרק 7: תצוגה (Display) ומיקום (Position)¶

1. תצוגה (Display)¶

התכונה display קובעת איך אלמנטים מוצגים בדף ואיך הם מתנהגים ביחס לאלמנטים אחרים.

סוגי Display נפוצים:¶

display: block
תופס את כל הרוחב של השורה (לדוגמה: <div>, <p>).
אפשר לקבוע לו width ו-height.
display: inline
תופס רק כמה מקום שהוא צריך (לדוגמה: <span>, <a>).
לא מקבל width ו-height.
display: flex
הופך את האלמנט ל-מיכל גמיש (Flex Container).
מאפשר שליטה קלה על יישור ופיזור האלמנטים הפנימיים.

דוגמה מעשית:¶

<p class="block">פסקה (block) - תופסת את כל השורה</p>
<span class="inline">טקסט (inline) - תופס רק מקום לפי התוכן</span>
<div class="flex">מיכל גמיש (flex) - מאפשר סידור פנימי מתקדם</div>

⚠️ הערה חשובה:¶

לא ניתן לשלב display: block ו-display: inline באותו אלמנט – הערך האחרון ב-CSS הוא זה שקובע.
לדוגמה, אם תכתבו:
```
.test {
  display: block;
  display: inline;
}
```
התוצאה תהיה inline בלבד.

2. מיקום (Position)¶

התכונה position קובעת איך אלמנט ממוקם ביחס לדף או לאלמנטים אחרים.

סוגי Position:¶

position: static (ברירת מחדל) – האלמנט ממוקם לפי הזרימה הרגילה של הדף.
position: relative – מאפשר הזזה ביחס למיקום המקורי שלו (משתמש ב-top, left וכו').
position: absolute – יוצא מהזרימה הרגילה וממוקם ביחס ל-אלמנט ההורה הקרוב עם position: relative.
position: fixed – נשאר במקום קבוע ביחס לחלון הדפדפן (גם בגלילה).
position: sticky – "נדבק" כאשר מגיעים אליו בגלילה.

דוגמה:¶

.box {
  position: absolute; /* ממוקם ביחס ל-parent עם position: relative */
  left: 50px; /* הזזה 50 פיקסלים ימינה */
  top: 100px; /* הזזה 100 פיקסלים למטה */
}

פרק 8: Flexbox ו-Grid¶

1. Flexbox (גמישות)¶

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

מאפיינים עיקריים:¶

display: flex – הופך את האלמנט ל-Flex Container.
justify-content – שולט על יישור אופקי (לדוגמה: space-between, center).
align-items – שולט על יישור אנכי (לדוגמה: center, flex-start).

דוגמה:¶

.container {
  display: flex;
  justify-content: space-between; /* מרווח שווה בין האלמנטים */
  align-items: center; /* ממרכז אנכית */
}

2. Grid (רשת)¶

Grid מאפשר יצירת טבלאות/רשתות מורכבות עם עמודות ושורות.

מאפיינים עיקריים:¶

display: grid – הופך את האלמנט ל-Grid Container.
grid-template-columns – מגדיר את רוחב העמודות (לדוגמה: 1fr 2fr = עמודה אחת קטנה ושתיים גדולות).
grid-gap – קובע מרווח בין תאים.

דוגמה:¶

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* שתי עמודות ביחס 1:2 */
}

פרק 9: אנימציות והנפשות¶

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

איך יוצרים אנימציה?¶

מגדירים @keyframes – קובעים את שלבי האנימציה.
מחילים את האנימציה עם animation.

דוגמה:¶

@keyframes fade-in {
  from { opacity: 0; } /* התחלה - שקוף */
  to { opacity: 1; } /* סוף - נראה */
}

.box {
  animation: fade-in 2s ease-in-out; /* 2 שניות, אפקט הדרגתי */
}

מאפיינים נוספים:¶

animation-delay – דחיית תחילת האנימציה.
animation-iteration-count – כמה פעמים האנימציה תרוץ (למשל: infinite).

סיכום¶

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

תרגול:¶

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

בהצלחה!