CSS

מפתח

ברוכים הבאים!

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

למה CSS?

🎨 שפת העיצוב של האינטרנט
🖌️ מפרידה בין תוכן (HTML) לעיצוב
📱 מאפשרת עיצוב רספונסיבי
✨ אנימציות ואפקטים ויזואליים

📚 מבנה הקורס

חלק א' - יסודות

מספר	נושא	קובץ
1	רקע והיסטוריה	01_background.md
2	תחביר בסיסי	02_syntax.md
3	סלקטורים	03_selectors.md

חלק ב' - עיצוב בסיסי

מספר	נושא	קובץ
4	צבעים ורקעים	04_colors_backgrounds.md
5	טקסט וגופנים	05_text_fonts.md
6	מודל הקופסה	06_box_model.md

חלק ג' - פריסה (Layout)

מספר	נושא	קובץ
7	פריסה בסיסית	07_layout.md
8	Flexbox	08_flexbox.md
9	CSS Grid	09_grid.md

חלק ד' - מתקדם

מספר	נושא	קובץ
10	עיצוב רספונסיבי	10_responsive.md
11	אנימציות ומעברים	11_animations.md
12	שיטות עבודה מומלצות	12_best_practices.md

📁 דוגמאות קוד

מספר	נושא	קובץ
1	תחביר בסיסי	01_basic_syntax.html
2	סלקטורים	02_selectors.html
3	צבעים ורקעים	03_colors.html
4	עיצוב טקסט	04_text_styling.html
5	מודל הקופסה	05_box_model.html
6	פריסה	06_layout.html
7	Flexbox	07_flexbox.html
8	Grid	08_grid.html
9	רספונסיבי	09_responsive.html
10	אנימציות	10_animations.html
11	דף שלם	11_complete_page.html

🚀 איך להתחיל?

צעד 1: הוספת CSS ל-HTML

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>הדף הראשון שלי עם CSS</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>שלום עולם!</h1>
</body>
</html>

צעד 2: הבנת המבנה הבסיסי

selector {
    property: value;
}

Selector - בוחר אילו אלמנטים לעצב
Property - מה לשנות (צבע, גודל, רקע...)
Value - הערך החדש

📖 סדר לימוד מומלץ

יום 1: רקע + תחביר + סלקטורים (פרקים 1-3)
יום 2: צבעים + טקסט + מודל הקופסה (פרקים 4-6)
יום 3: פריסה בסיסית (פרק 7)
יום 4: Flexbox + Grid (פרקים 8-9)
יום 5: רספונסיב + אנימציות + Best Practices (פרקים 10-12)

📋 נושאים שנכללים

✅ תחביר CSS בסיסי
✅ סלקטורים (element, class, id, pseudo)
✅ צבעים ורקעים
✅ עיצוב טקסט וגופנים
✅ מודל הקופסה (Box Model)
✅ Display ו-Position
✅ Flexbox
✅ CSS Grid
✅ Media Queries
✅ אנימציות ומעברים
✅ שיטות עבודה מומלצות

🛠️ כלים מומלצים

עורכי קוד

Visual Studio Code - חינמי ופופולרי
Sublime Text
WebStorm

תוספים מומלצים ל-VS Code

Live Server - לרענון אוטומטי
CSS Peek
IntelliSense for CSS

כלי עזר

CSS-Tricks - מדריכים ומאמרים
Can I Use - תמיכת דפדפנים
Flexbox Froggy - משחק ללימוד Flexbox

בהצלחה בלימוד CSS! 🎉

📜 רקע והיסטוריה של CSS

מהי CSS?

CSS (Cascading Style Sheets) היא שפת עיצוב המשמשת לתיאור המראה והעיצוב של מסמכי HTML.

HTML = מבנה ותוכן
CSS = עיצוב ומראה

למה צריך CSS?

לפני CSS

בימים הראשונים של האינטרנט, העיצוב היה חלק מ-HTML:

<!-- הדרך הישנה - לא מומלץ! -->
<font color="red" size="5">
    <b>כותרת</b>
</font>

עם CSS

הפרדה בין תוכן לעיצוב:

<!-- HTML - רק מבנה -->
<h1>כותרת</h1>

/* CSS - רק עיצוב */
h1 {
    color: red;
    font-size: 2em;
    font-weight: bold;
}

יתרונות ההפרדה

יתרון	הסבר
תחזוקה קלה	שינוי עיצוב במקום אחד משפיע על כל האתר
קוד נקי	HTML נשאר פשוט וקריא
שימוש חוזר	אותו קובץ CSS יכול לשרת דפים רבים
ביצועים	הדפדפן שומר את ה-CSS בזיכרון (cache)

היסטוריה קצרה

CSS1 (1996)

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

CSS2 (1998)

הוספת position ו-z-index
Media types (print, screen)
סלקטורים מתקדמים יותר

CSS2.1 (2011)

תיקון באגים וחידוד התקן
הפך לסטנדרט הבסיסי

CSS3 (2011+)

מודולרי - כל תכונה מתפתחת בנפרד
חידושים משמעותיים:
Flexbox
Grid
אנימציות
Media Queries
Gradients
Border-radius
Box-shadow

איך CSS עובדת?

תהליך הרינדור

1. הדפדפן טוען את ה-HTML
        ↓
2. הדפדפן טוען את ה-CSS
        ↓
3. נבנה DOM (Document Object Model)
        ↓
4. CSS מוחל על האלמנטים
        ↓
5. הדף מוצג על המסך

Cascading (מפל)

המילה "Cascading" מתארת איך כללי CSS מוחלים:

ירושה - חלק מהתכונות עוברות מהורה לילד
עדיפות - כללים ספציפיים יותר גוברים
סדר - כלל אחרון גובר (באותה רמת עדיפות)

/* כלל כללי */
p {
    color: black;
}

/* כלל ספציפי יותר - יגבר */
p.highlight {
    color: red;
}

הקשר בין HTML ו-CSS

HTML

מגדיר את המבנה
תגיות סמנטיות
תוכן הדף

מגדיר את המראה
צבעים, גדלים, מיקומים
אנימציות ומעברים

JavaScript

מוסיף התנהגות
אינטראקטיביות
לוגיקה דינמית

┌─────────────────────────────────────┐
│              דף אינטרנט              │
├─────────────┬───────────┬───────────┤
│    HTML     │    CSS    │    JS     │
│   (מבנה)    │  (עיצוב)  │ (התנהגות) │
└─────────────┴───────────┴───────────┘

סיכום

CSS היא שפת עיצוב להפרדת מראה ממבנה
פותחה ב-1996 והתפתחה משמעותית
CSS3 הביאה יכולות מודרניות רבות
עובדת יחד עם HTML ו-JavaScript

הבא: תחביר בסיסי ➡️

✍️ תחביר CSS בסיסי

מבנה כלל CSS

כל כלל CSS מורכב משלושה חלקים:

selector {
    property: value;
}

פירוט

חלק	תפקיד	דוגמה
Selector	בוחר אילו אלמנטים לעצב	`h1`, `.class`, `#id`
Property	התכונה שרוצים לשנות	`color`, `font-size`
Value	הערך החדש	`red`, `16px`

דוגמה מלאה

/* הסלקטור */
h1 {
    /* תכונה: ערך; */
    color: blue;
    font-size: 24px;
    text-align: center;
}

שלוש דרכים להוסיף CSS

1. Inline CSS (בתוך האלמנט)

<p style="color: red; font-size: 18px;">טקסט אדום</p>

יתרונות: - מהיר לשינויים קטנים

חסרונות: - לא ניתן לשימוש חוזר - מערבב HTML ו-CSS - קשה לתחזוקה

2. Internal CSS (בתוך ה-HTML)

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>טקסט אדום</p>
</body>
</html>

יתרונות: - אין צורך בקובץ נפרד - טוב לדפים בודדים

חסרונות: - לא ניתן לשיתוף בין דפים - מגדיל את גודל ה-HTML

3. External CSS (קובץ חיצוני) ⭐

קובץ HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>טקסט אדום</p>
</body>
</html>

קובץ styles.css:

p {
    color: red;
    font-size: 18px;
}

יתרונות: - הפרדה מלאה בין HTML ל-CSS - שימוש חוזר במספר דפים - קל לתחזוקה - הדפדפן שומר בזיכרון (cache)

💡 המלצה: השתמשו ב-External CSS לפרויקטים אמיתיים!

הערות ב-CSS

/* זו הערה בשורה אחת */

/*
   זו הערה
   במספר שורות
*/

p {
    color: red; /* הערה ליד תכונה */
}

⚠️ שימו לב: CSS תומכת רק בהערות מסוג /* */, לא //

יחידות מידה נפוצות

יחידות מוחלטות

יחידה	משמעות	דוגמה
`px`	פיקסלים	`font-size: 16px;`
`pt`	נקודות (print)	`font-size: 12pt;`
`cm`	סנטימטרים	`width: 10cm;`

יחידות יחסיות

יחידה	משמעות	דוגמה
`%`	אחוזים (מההורה)	`width: 50%;`
`em`	יחסית לגודל הגופן של ההורה	`padding: 2em;`
`rem`	יחסית לגודל הגופן של ה-root	`font-size: 1.5rem;`
`vw`	אחוז מרוחב החלון	`width: 100vw;`
`vh`	אחוז מגובה החלון	`height: 100vh;`

השוואה: px vs em vs rem

/* root element */
html {
    font-size: 16px; /* ברירת מחדל */
}

/* אלמנט הורה */
.parent {
    font-size: 20px;
}

/* אלמנט ילד */
.child {
    font-size: 16px;  /* 16 פיקסלים קבוע */
    font-size: 1em;   /* 20px (לפי ההורה) */
    font-size: 1rem;  /* 16px (לפי ה-root) */
}

💡 המלצה: השתמשו ב-rem לגופנים וב-px או % לגדלים

ערכים מיוחדים

inherit

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

.child {
    color: inherit;
}

initial

מחזיר לערך ברירת המחדל:

p {
    color: initial;
}

unset

משלב בין inherit ל-initial:

p {
    color: unset;
}

כללי כתיבה נכונה

1. עקביות בפורמט

/* טוב */
.container {
    display: flex;
    padding: 20px;
    margin: 10px;
}

/* פחות טוב */
.container{display:flex;padding:20px;margin:10px;}

2. סדר תכונות הגיוני

.element {
    /* מיקום */
    position: relative;
    top: 10px;

    /* תצוגה */
    display: flex;

    /* מידות */
    width: 100px;
    height: 50px;

    /* שוליים */
    margin: 10px;
    padding: 5px;

    /* עיצוב */
    background: white;
    border: 1px solid black;

    /* טקסט */
    color: black;
    font-size: 14px;
}

3. שמות משמעותיים

/* טוב */
.navigation { }
.header-title { }
.btn-primary { }

/* לא טוב */
.div1 { }
.red-text { }
.a { }

סיכום

נושא	נקודה חשובה
מבנה	`selector { property: value; }`
דרכים	Inline, Internal, External (מומלץ)
הערות	`/* הערה */`
יחידות	`px`, `%`, `em`, `rem`, `vw`, `vh`

הבא: סלקטורים ➡️

🎯 סלקטורים ב-CSS

מהו סלקטור?

סלקטור הוא הדרך לבחור אילו אלמנטי HTML יקבלו את העיצוב.

סלקטור {
    תכונה: ערך;
}

סלקטורים בסיסיים

1. סלקטור אלמנט (Element Selector)

בוחר את כל האלמנטים מסוג מסוים:

/* כל הפסקאות */
p {
    color: blue;
}

/* כל הכותרות מסוג h1 */
h1 {
    font-size: 32px;
}

2. סלקטור מחלקה (Class Selector)

בוחר אלמנטים לפי שם מחלקה (מתחיל בנקודה):

<p class="highlight">טקסט מודגש</p>
<p class="highlight important">טקסט חשוב</p>

/* כל האלמנטים עם class="highlight" */
.highlight {
    background-color: yellow;
}

/* אלמנט עם שתי מחלקות */
.highlight.important {
    font-weight: bold;
}

3. סלקטור מזהה (ID Selector)

בוחר אלמנט לפי ID ייחודי (מתחיל בסולמית):

<div id="header">כותרת</div>

/* אלמנט עם id="header" */
#header {
    background-color: navy;
    color: white;
}

⚠️ חשוב: ID צריך להיות ייחודי - רק אלמנט אחד עם אותו ID בדף!

4. סלקטור אוניברסלי (Universal Selector)

בוחר את כל האלמנטים:

/* כל האלמנטים בדף */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

רשימת סלקטורים (Grouping)

אותו עיצוב למספר סלקטורים:

/* במקום לכתוב שלוש פעמים */
h1 {
    color: blue;
}
h2 {
    color: blue;
}
h3 {
    color: blue;
}

/* אפשר לקצר */
h1, h2, h3 {
    color: blue;
}

סלקטור צאצא (Descendant)

רווח בין סלקטורים:

/* כל ה-p שבתוך div (בכל רמת עומק) */
div p {
    color: green;
}

<div>
    <p>ירוק</p>           <!-- נבחר -->
    <section>
        <p>גם ירוק</p>     <!-- נבחר -->
    </section>
</div>
<p>לא ירוק</p>            <!-- לא נבחר -->

סלקטור ילד ישיר (Child)

סימן גדול מ-:

/* רק p שהם ילדים ישירים של div */
div > p {
    color: red;
}

<div>
    <p>אדום</p>           <!-- נבחר -->
    <section>
        <p>לא אדום</p>    <!-- לא נבחר -->
    </section>
</div>

סלקטור אח סמוך (Adjacent Sibling)

סימן פלוס:

/* p שמגיע מיד אחרי h1 */
h1 + p {
    font-size: 18px;
}

סלקטור אחים כלליים (General Sibling)

סימן טילדה:

/* כל ה-p שמגיעים אחרי h1 (באותה רמה) */
h1 ~ p {
    color: gray;
}

סלקטורי תכונה (Attribute Selectors)

בסיסי

/* כל האלמנטים עם התכונה title */
[title] {
    border-bottom: 1px dotted;
}

/* כל האלמנטים עם type="text" */
[type="text"] {
    border: 1px solid gray;
}

התאמות מתקדמות

/* מתחיל ב- */
[href^="https"] {
    color: green;
}

/* מסתיים ב- */
[href$=".pdf"] {
    color: red;
}

/* מכיל */
[class*="btn"] {
    padding: 10px;
}

Pseudo-classes

מצבים מיוחדים של אלמנטים:

מצבי עכבר

/* כשהעכבר מעל */
a:hover {
    color: red;
}

/* כשלוחצים */
button:active {
    background-color: darkblue;
}

/* כשהאלמנט בפוקוס */
input:focus {
    border-color: blue;
    outline: none;
}

מצב קישורים

/* קישור שלא ביקרו בו */
a:link {
    color: blue;
}

/* קישור שביקרו בו */
a:visited {
    color: purple;
}

מיקום ברשימה

/* ילד ראשון */
li:first-child {
    font-weight: bold;
}

/* ילד אחרון */
li:last-child {
    border-bottom: none;
}

/* ילד לפי מספר */
li:nth-child(2) {
    color: red;
}

/* ילדים זוגיים/אי-זוגיים */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:nth-child(odd) {
    background-color: white;
}

/* כל שלישי */
li:nth-child(3n) {
    color: blue;
}

מצבי טפסים

/* שדה מושבת */
input:disabled {
    background-color: #eee;
}

/* שדה נדרש */
input:required {
    border-left: 3px solid red;
}

/* checkbox מסומן */
input:checked + label {
    font-weight: bold;
}

:not() - שלילה

/* כל ה-p חוץ מאלה עם class="special" */
p:not(.special) {
    color: gray;
}

Pseudo-elements

חלקים וירטואליים של אלמנטים:

/* לפני האלמנט */
.quote::before {
    content: '"';
    font-size: 2em;
    color: gray;
}

/* אחרי האלמנט */
.quote::after {
    content: '"';
    font-size: 2em;
    color: gray;
}

/* האות הראשונה */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* השורה הראשונה */
p::first-line {
    font-style: italic;
}

/* טקסט מסומן */
::selection {
    background-color: yellow;
    color: black;
}

📝 הערה: pseudo-elements משתמשים בשני נקודותיים (::) לעומת pseudo-classes שמשתמשים באחד (:)

Specificity (עדיפות)

כשיש התנגשות בין כללים, מי מנצח?

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

Element - p, div, h1 (משקל: 0,0,0,1)
Class / Pseudo-class / Attribute - .class, :hover, [type] (משקל: 0,0,1,0)
ID - #id (משקל: 0,1,0,0)
Inline style - style="" (משקל: 1,0,0,0)
!important - גובר על הכל (הימנעו משימוש!)

חישוב דוגמה

/* Specificity: 0,0,0,1 */
p {
    color: black;
}

/* Specificity: 0,0,1,0 */
.text {
    color: blue;
}

/* Specificity: 0,0,1,1 */
p.text {
    color: green;
}

/* Specificity: 0,1,0,0 */
#content {
    color: red;
}

/* Specificity: 0,1,1,1 */
#content p.text {
    color: purple; /* מנצח! */
}

טבלת השוואה

סלקטור	ID	Class	Element	סה"כ
`p`	0	0	1	0,0,0,1
`.btn`	0	1	0	0,0,1,0
`p.btn`	0	1	1	0,0,1,1
`#nav`	1	0	0	0,1,0,0
`#nav .btn`	1	1	0	0,1,1,0

⚠️ טיפ: הימנעו משימוש ב-!important. אם צריכים אותו - כנראה יש בעיה במבנה הסלקטורים.

סיכום

סוג סלקטור	תחביר	דוגמה
Element	`element`	`p`, `div`
Class	`.class`	`.highlight`
ID	`#id`	`#header`
Universal	`*`	`*`
צאצא	`a b`	`div p`
ילד	`a > b`	`ul > li`
אח	`a + b`, `a ~ b`	`h1 + p`
תכונה	`[attr]`	`[type="text"]`
Pseudo-class	`:state`	`:hover`
Pseudo-element	`::part`	`::before`

הבא: צבעים ורקעים ➡️

🎨 צבעים ורקעים

ערכי צבע ב-CSS

שם צבע (Color Name)

CSS תומכת ב-140+ שמות צבעים באנגלית:

p {
    color: red;
    background-color: lightblue;
}

צבעים נפוצים: red, blue, green, yellow, orange, purple, pink, black, white, gray

Hexadecimal (הקסדצימלי)

קוד בן 6 תווים (או 3 מקוצר):

p {
    color: #ff0000;      /* אדום מלא */
    color: #f00;         /* קיצור לאדום */
    color: #336699;      /* כחול-אפור */
    color: #369;         /* קיצור */
}

מבנה: #RRGGBB (Red, Green, Blue) - כל זוג: 00-FF (0-255) - #000000 = שחור - #ffffff = לבן

RGB / RGBA

ערכים מ-0 עד 255:

p {
    /* RGB - אדום, ירוק, כחול */
    color: rgb(255, 0, 0);       /* אדום */
    color: rgb(0, 128, 255);     /* כחול בהיר */

    /* RGBA - עם שקיפות (alpha) */
    color: rgba(0, 0, 0, 0.5);   /* שחור 50% שקוף */
    color: rgba(255, 255, 255, 0.8); /* לבן 80% */
}

Alpha: 0 = שקוף לחלוטין, 1 = אטום לחלוטין

HSL / HSLA

Hue (גוון), Saturation (רוויה), Lightness (בהירות):

p {
    /* HSL */
    color: hsl(0, 100%, 50%);    /* אדום */
    color: hsl(120, 100%, 50%);  /* ירוק */
    color: hsl(240, 100%, 50%);  /* כחול */

    /* HSLA - עם שקיפות */
    color: hsla(200, 80%, 50%, 0.7);
}

Hue: 0-360 (גלגל צבעים) - 0/360 = אדום - 120 = ירוק - 240 = כחול

תכונות רקע

background-color

.box {
    background-color: #f5f5f5;
    background-color: rgba(0, 0, 0, 0.1);
}

background-image

.box {
    background-image: url('image.jpg');
    background-image: url('../images/bg.png');
}

background-repeat

.box {
    background-repeat: repeat;      /* ברירת מחדל */
    background-repeat: no-repeat;   /* פעם אחת */
    background-repeat: repeat-x;    /* רק אופקית */
    background-repeat: repeat-y;    /* רק אנכית */
}

background-position

.box {
    background-position: center;
    background-position: top right;
    background-position: 50% 50%;
    background-position: 20px 30px;
}

background-size

.box {
    background-size: auto;          /* גודל מקורי */
    background-size: cover;         /* מכסה הכל (חותך) */
    background-size: contain;       /* מכיל הכל (לא חותך) */
    background-size: 100px 200px;   /* רוחב, גובה */
    background-size: 50% auto;
}

background-attachment

.box {
    background-attachment: scroll;  /* גולל עם הדף */
    background-attachment: fixed;   /* קבוע במקום */
}

קיצור (Shorthand)

.box {
    /* color image repeat position/size attachment */
    background: #f5f5f5 url('bg.jpg') no-repeat center/cover fixed;
}

Gradients (מעברי צבע)

Linear Gradient

.box {
    /* כיוון ברירת מחדל - מלמעלה למטה */
    background: linear-gradient(red, blue);

    /* עם כיוון */
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(to bottom right, red, blue);
    background: linear-gradient(45deg, red, blue);

    /* מספר צבעים */
    background: linear-gradient(to right, red, yellow, green, blue);

    /* עם עצירות */
    background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

Radial Gradient

.box {
    /* מעגלי מהמרכז */
    background: radial-gradient(red, blue);

    /* צורה */
    background: radial-gradient(circle, red, blue);
    background: radial-gradient(ellipse, red, blue);

    /* מיקום */
    background: radial-gradient(circle at top left, red, blue);
}

Conic Gradient

.box {
    background: conic-gradient(red, yellow, green, blue, red);

    /* טוב לגרפי עוגה */
    background: conic-gradient(
        red 0deg 90deg,
        green 90deg 180deg,
        blue 180deg 270deg,
        yellow 270deg 360deg
    );
}

צללים

box-shadow

צל לקופסה:

.box {
    /* x-offset y-offset blur color */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

    /* עם spread */
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);

    /* צל פנימי */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

    /* מספר צללים */
    box-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.2),
        -2px -2px 5px rgba(255, 255, 255, 0.5);
}

text-shadow

צל לטקסט:

.title {
    /* x-offset y-offset blur color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    /* אפקט זוהר */
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff00;
}

Opacity (שקיפות)

.box {
    opacity: 1;    /* אטום לחלוטין */
    opacity: 0.5;  /* 50% שקוף */
    opacity: 0;    /* שקוף לחלוטין */
}

⚠️ הבדל: opacity משפיע על כל האלמנט כולל הילדים, rgba משפיע רק על הצבע הספציפי.

דוגמה מעשית

/* כרטיס עם גרדיאנט וצל */
.card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 30px;
    color: white;
}

/* כפתור עם אפקט hover */
.button {
    background: linear-gradient(to bottom, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 12px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

סיכום

נושא	תכונות
צבעים	`color`, שמות, hex, rgb, hsl
רקע	`background-color`, `background-image`, `background-size`
גרדיאנטים	`linear-gradient`, `radial-gradient`, `conic-gradient`
צללים	`box-shadow`, `text-shadow`
שקיפות	`opacity`, `rgba`, `hsla`

הבא: טקסט וגופנים ➡️

✏️ טקסט וגופנים

משפחת גופנים (font-family)

גופנים כלליים (Generic)

p {
    font-family: serif;        /* עם סריפים (זנבות) */
    font-family: sans-serif;   /* בלי סריפים */
    font-family: monospace;    /* רוחב קבוע */
    font-family: cursive;      /* כתב יד */
    font-family: fantasy;      /* דקורטיבי */
}

Font Stack (רשימת גופנים)

body {
    /* הדפדפן ינסה לפי הסדר */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* לעברית */
    font-family: "Heebo", "Rubik", Arial, sans-serif;
}

💡 תמיד סיימו עם גופן כללי כגיבוי!

Google Fonts

<!-- בתוך ה-head -->
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap" rel="stylesheet">

body {
    font-family: 'Heebo', sans-serif;
}

גודל גופן (font-size)

p {
    font-size: 16px;     /* פיקסלים */
    font-size: 1em;      /* יחסי להורה */
    font-size: 1rem;     /* יחסי ל-root */
    font-size: 100%;     /* אחוזים */
    font-size: larger;   /* מילות מפתח */
}

יחידות מומלצות

יחידה	שימוש
`rem`	גופנים - עקבי בכל האתר
`em`	ריווחים יחסיים לגופן
`px`	כשצריך שליטה מדויקת
`%`	יחסי להורה

html {
    font-size: 16px; /* בסיס */
}

h1 { font-size: 2rem; }    /* 32px */
h2 { font-size: 1.5rem; }  /* 24px */
p { font-size: 1rem; }     /* 16px */
small { font-size: 0.875rem; } /* 14px */

עובי גופן (font-weight)

p {
    font-weight: normal;   /* 400 */
    font-weight: bold;     /* 700 */
    font-weight: lighter;
    font-weight: bolder;

    /* ערכים מספריים */
    font-weight: 100; /* Thin */
    font-weight: 300; /* Light */
    font-weight: 400; /* Regular */
    font-weight: 500; /* Medium */
    font-weight: 600; /* Semi-Bold */
    font-weight: 700; /* Bold */
    font-weight: 900; /* Black */
}

סגנון גופן (font-style)

p {
    font-style: normal;
    font-style: italic;   /* נטוי */
    font-style: oblique;  /* משופע */
}

צבע טקסט (color)

p {
    color: black;
    color: #333333;
    color: rgb(51, 51, 51);
    color: hsl(0, 0%, 20%);
}

יישור טקסט (text-align)

p {
    text-align: left;      /* ברירת מחדל ב-LTR */
    text-align: right;     /* ברירת מחדל ב-RTL */
    text-align: center;    /* מרכז */
    text-align: justify;   /* מיושר לשני הצדדים */
}

💡 לעברית: השתמשו ב-text-align: start ו-text-align: end במקום left/right

גובה שורה (line-height)

p {
    line-height: normal;
    line-height: 1.5;      /* ללא יחידה - מומלץ! */
    line-height: 150%;
    line-height: 24px;
}

💡 המלצה: line-height: 1.5 עד 1.7 לקריאות טובה

רווח אותיות ומילים

p {
    /* רווח בין אותיות */
    letter-spacing: 1px;
    letter-spacing: 0.1em;
    letter-spacing: -0.5px; /* קרוב יותר */

    /* רווח בין מילים */
    word-spacing: 5px;
}

קישוט טקסט (text-decoration)

a {
    text-decoration: none;         /* ללא */
    text-decoration: underline;    /* קו תחתון */
    text-decoration: overline;     /* קו עליון */
    text-decoration: line-through; /* קו חוצה */
}

/* סגנון מתקדם */
a {
    text-decoration: underline wavy red;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

טרנספורמציית טקסט (text-transform)

p {
    text-transform: none;
    text-transform: uppercase;    /* אותיות גדולות */
    text-transform: lowercase;    /* אותיות קטנות */
    text-transform: capitalize;   /* אות ראשונה גדולה */
}

הזחת טקסט (text-indent)

p {
    text-indent: 40px;    /* הזחה של השורה הראשונה */
    text-indent: 2em;
}

צל טקסט (text-shadow)

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    /* מספר צללים */
    text-shadow: 
        1px 1px 0 white,
        2px 2px 0 gray;
}

גלישת טקסט

word-break

p {
    word-break: normal;
    word-break: break-all;  /* שובר מילים בכל מקום */
    word-break: keep-all;   /* לא שובר מילים */
}

overflow-wrap

p {
    overflow-wrap: normal;
    overflow-wrap: break-word; /* שובר מילים ארוכות */
}

white-space

p {
    white-space: normal;     /* ברירת מחדל */
    white-space: nowrap;     /* שורה אחת */
    white-space: pre;        /* שומר רווחים */
    white-space: pre-wrap;   /* שומר רווחים + גולש */
}

text-overflow

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... בסוף */
}

קיצור font

p {
    /* style weight size/line-height family */
    font: italic bold 16px/1.5 Arial, sans-serif;

    /* או */
    font: 700 1rem/1.6 "Heebo", sans-serif;
}

⚠️ חובה לכלול font-size ו-font-family!

דוגמה מעשית

/* טיפוגרפיה בסיסית */
body {
    font-family: 'Heebo', 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

h1 {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1em;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
    color: #666;
}

סיכום

תכונה	שימוש
`font-family`	בחירת גופן
`font-size`	גודל
`font-weight`	עובי
`font-style`	נטוי
`color`	צבע
`text-align`	יישור
`line-height`	גובה שורה
`letter-spacing`	רווח אותיות
`text-decoration`	קו תחתון/חוצה
`text-transform`	אותיות גדולות/קטנות

הבא: מודל הקופסה ➡️

📦 מודל הקופסה (Box Model)

מהו Box Model?

כל אלמנט ב-HTML הוא "קופסה" המורכבת מארבעה חלקים:

┌─────────────────────────────────────────┐
│                MARGIN                   │
│   ┌─────────────────────────────────┐   │
│   │            BORDER               │   │
│   │   ┌─────────────────────────┐   │   │
│   │   │        PADDING          │   │   │
│   │   │   ┌─────────────────┐   │   │   │
│   │   │   │    CONTENT      │   │   │   │
│   │   │   │   (תוכן)        │   │   │   │
│   │   │   └─────────────────┘   │   │   │
│   │   │                         │   │   │
│   │   └─────────────────────────┘   │   │
│   │                                 │   │
│   └─────────────────────────────────┘   │
│                                         │
└─────────────────────────────────────────┘

חלק	תפקיד
Content	התוכן עצמו (טקסט, תמונות)
Padding	ריווח פנימי בין התוכן לגבול
Border	הגבול/מסגרת
Margin	ריווח חיצוני בין הקופסה לאלמנטים אחרים

Width & Height (רוחב וגובה)

הגדרה בסיסית

.box {
    width: 300px;
    height: 200px;
}

יחידות

.box {
    width: 300px;        /* פיקסלים */
    width: 50%;          /* אחוז מההורה */
    width: 100vw;        /* רוחב החלון */
    width: auto;         /* אוטומטי (ברירת מחדל) */
}

min/max

.box {
    width: 100%;
    min-width: 200px;    /* לא יקטן מזה */
    max-width: 800px;    /* לא יגדל מזה */

    height: auto;
    min-height: 100px;
    max-height: 500px;
}

Padding (ריווח פנימי)

ארבע צדדים בנפרד

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

קיצור (shorthand)

.box {
    /* כל הצדדים */
    padding: 20px;

    /* אנכי | אופקי */
    padding: 10px 20px;

    /* למעלה | אופקי | למטה */
    padding: 10px 20px 15px;

    /* למעלה | ימין | למטה | שמאל (כיוון השעון) */
    padding: 10px 20px 15px 25px;
}

Border (גבול)

תכונות נפרדות

.box {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

סגנונות גבול

.box {
    border-style: solid;   /* קו רציף */
    border-style: dashed;  /* מקווקו */
    border-style: dotted;  /* נקודות */
    border-style: double;  /* כפול */
    border-style: groove;  /* חריץ */
    border-style: ridge;   /* בליטה */
    border-style: inset;   /* שקוע */
    border-style: outset;  /* בולט */
    border-style: none;    /* ללא */
}

קיצור

.box {
    /* width style color */
    border: 2px solid #333;
}

צד ספציפי

.box {
    border-top: 2px solid red;
    border-right: 1px dashed blue;
    border-bottom: 3px double green;
    border-left: none;
}

border-radius (פינות מעוגלות)

.box {
    border-radius: 10px;           /* כל הפינות */
    border-radius: 50%;            /* עיגול מושלם */
    border-radius: 10px 20px;      /* אלכסוני */
    border-radius: 10px 20px 30px 40px; /* כל פינה */
}

/* פינות ספציפיות */
.box {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 20px;
}

Margin (ריווח חיצוני)

תחביר זהה ל-padding

.box {
    margin: 20px;
    margin: 10px 20px;
    margin: 10px 20px 15px 25px;

    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

מרכוז אופקי

.box {
    width: 600px;
    margin: 0 auto; /* מרכז אופקית */
}

Margin Collapse

כשיש שני margins אנכיים סמוכים, הם מתמזגים (הגדול גובר):

.box1 {
    margin-bottom: 30px;
}
.box2 {
    margin-top: 20px;
}
/* המרווח ביניהם יהיה 30px, לא 50px! */

ערכים שליליים

.box {
    margin-top: -10px; /* מזיז למעלה */
    margin-left: -20px; /* מזיז שמאלה */
}

box-sizing

content-box (ברירת מחדל)

.box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* רוחב סה"כ: 300 + 40 + 10 = 350px */

border-box (מומלץ!)

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}
/* רוחב סה"כ: 300px (padding ו-border בפנים) */

ריסט גלובלי מומלץ

*, *::before, *::after {
    box-sizing: border-box;
}

Overflow (גלישה)

מה קורה כשהתוכן גדול מהקופסה?

.box {
    width: 200px;
    height: 100px;
    overflow: visible;  /* ברירת מחדל - גולש */
    overflow: hidden;   /* מוסתר */
    overflow: scroll;   /* תמיד סרגל גלילה */
    overflow: auto;     /* סרגל גלילה רק כשצריך */
}

/* התנהגות נפרדת לכל ציר */
.box {
    overflow-x: hidden;
    overflow-y: auto;
}

Outline

דומה ל-border אבל לא תופס מקום:

.button {
    outline: none; /* להסרה (למשל על כפתורים) */
}

.button:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

💡 בניגוד ל-border, outline לא משפיע על ה-box model

דוגמה מעשית

/* ריסט בסיסי */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* כרטיס */
.card {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.card-content {
    overflow: auto;
    max-height: 300px;
}

סיכום

תכונה	תפקיד
`width` / `height`	גודל התוכן
`min-` / `max-`	גבולות גודל
`padding`	ריווח פנימי
`border`	גבול
`border-radius`	פינות מעוגלות
`margin`	ריווח חיצוני
`box-sizing`	אופן חישוב הגודל
`overflow`	התנהגות גלישה

הבא: פריסה ➡️

📐 פריסה בסיסית (Layout)

Display

התכונה הבסיסית ביותר לשליטה בפריסה:

block

.block {
    display: block;
}

תופס את כל הרוחב הזמין
מתחיל בשורה חדשה
אפשר להגדיר width/height
דוגמאות: <div>, <p>, <h1>

inline

.inline {
    display: inline;
}

לא שובר שורה
לא ניתן להגדיר width/height
margin/padding אופקי עובד, אנכי - חלקית
דוגמאות: <span>, <a>, <strong>

inline-block

.inline-block {
    display: inline-block;
}

לא שובר שורה (כמו inline)
כן ניתן להגדיר width/height (כמו block)
שימושי לכפתורים, תפריטים

none

.hidden {
    display: none;
}

מסתיר את האלמנט לחלוטין
לא תופס מקום בדף

השוואה

תכונה	block	inline	inline-block
שורה חדשה	✅	❌	❌
width/height	✅	❌	✅
margin/padding	✅	אופקי בלבד	✅
רוחב מלא	✅	❌	❌

Position

static (ברירת מחדל)

.element {
    position: static;
}

האלמנט בזרימה הרגילה
top/right/bottom/left לא עובדים

relative

.element {
    position: relative;
    top: 20px;
    left: 10px;
}

האלמנט בזרימה הרגילה
אפשר להזיז יחסית למיקום המקורי
המקום המקורי נשמר (אלמנטים אחרים לא זזים)

absolute

.parent {
    position: relative; /* ההורה חייב להיות positioned */
}

.element {
    position: absolute;
    top: 0;
    right: 0;
}

יוצא מהזרימה הרגילה
ממוקם יחסית להורה הממוקם הקרוב
אם אין הורה ממוקם - יחסית ל-viewport

fixed

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

יוצא מהזרימה הרגילה
ממוקם יחסית ל-viewport
לא זז בגלילה
שימושי לתפריטים, כפתורים צפים

sticky

.header {
    position: sticky;
    top: 0;
}

שילוב של relative ו-fixed
מתנהג כ-relative עד שמגיעים לנקודה מסוימת
אז "נדבק" (כמו fixed)

המאפיינים: top, right, bottom, left

.element {
    position: absolute;
    top: 20px;      /* מרחק מלמעלה */
    right: 10px;    /* מרחק מימין */
    bottom: 20px;   /* מרחק מלמטה */
    left: 10px;     /* מרחק משמאל */
}

מילוי מלא

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* או בקיצור: */
    inset: 0;
}

z-index

שליטה בסדר השכבות (מי מעל מי):

.layer1 {
    position: relative;
    z-index: 1;
}

.layer2 {
    position: relative;
    z-index: 2; /* מעל layer1 */
}

.layer3 {
    position: relative;
    z-index: 10; /* הכי למעלה */
}

⚠️ z-index עובד רק על אלמנטים positioned (לא static)

ערכי z-index נפוצים

:root {
    --z-dropdown: 100;
    --z-modal: 200;
    --z-overlay: 300;
    --z-tooltip: 400;
}

Float

שיטה ישנה יותר לפריסה (עדיין שימושית לטקסט עם תמונות):

.image {
    float: left;   /* צף שמאלה */
    float: right;  /* צף ימינה */
    float: none;   /* ברירת מחדל */
}

Clear

מניעת הצפה לצד האלמנטים הצפים:

.clear {
    clear: left;   /* לא ליד צפים משמאל */
    clear: right;  /* לא ליד צפים מימין */
    clear: both;   /* לא ליד אף צף */
}

Clearfix

פתרון קלאסי לקןנטיינר עם ילדים צפים:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

💡 היום עדיף להשתמש ב-Flexbox או Grid במקום float לפריסה!

Visibility

.element {
    visibility: visible;  /* ברירת מחדל */
    visibility: hidden;   /* מוסתר אבל תופס מקום */
}

הבדל מ-display: none

תכונה	`display: none`	`visibility: hidden`
מוסתר	✅	✅
תופס מקום	❌	✅
ניתן לאנימציה	❌	✅

<header class="header">
    <nav class="nav">
        <a href="#" class="logo">לוגו</a>
        <ul class="nav-links">
            <li><a href="#">בית</a></li>
            <li><a href="#">אודות</a></li>
            <li><a href="#">צור קשר</a></li>
        </ul>
    </nav>
</header>
<main class="main-content">
    <!-- תוכן הדף -->
</main>

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-content {
    margin-top: 70px; /* גובה ה-header */
}

<div class="modal-overlay">
    <div class="modal">
        <h2>כותרת</h2>
        <p>תוכן המודל</p>
        <button class="close-btn">×</button>
    </div>
</div>

.modal-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.modal {
    position: relative;
    background: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

סיכום

תכונה	ערך	שימוש
`display`	block, inline, inline-block, none	סוג התצוגה
`position`	static, relative, absolute, fixed, sticky	מיקום
`top/right/bottom/left`	px, %, auto	מיקום מדויק
`z-index`	מספר	סדר שכבות
`float`	left, right, none	הצפה (לטקסט)
`visibility`	visible, hidden	נראות

הבא: Flexbox ➡️

📏 Flexbox

מהו Flexbox?

Flexbox (Flexible Box) היא שיטת פריסה חד-ממדית (שורה או עמודה) שמקלה מאוד על סידור אלמנטים.

.container {
    display: flex;
}

מושגי יסוד

┌─────────────────────────────────────────────────────────────┐
│ Flex Container                                              │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━main axis━━━━━━━━━━━━━━━━━━━▶  │
│  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐            │
│ ▲│  Item  │  │  Item  │  │  Item  │  │  Item  │            │
│ ┃│   1    │  │   2    │  │   3    │  │   4    │            │
│ ┃└────────┘  └────────┘  └────────┘  └────────┘            │
│cross                                                        │
│axis                                                         │
│ ▼                                                           │
└─────────────────────────────────────────────────────────────┘

מונח	הסבר
Flex Container	האלמנט ההורה עם `display: flex`
Flex Items	הילדים הישירים של ה-container
Main Axis	הציר הראשי (ברירת מחדל: אופקי)
Cross Axis	הציר המשני (ניצב לראשי)

תכונות Container

flex-direction

כיוון הציר הראשי:

.container {
    flex-direction: row;           /* ברירת מחדל: שמאל לימין */
    flex-direction: row-reverse;   /* ימין לשמאל */
    flex-direction: column;        /* למעלה למטה */
    flex-direction: column-reverse; /* למטה למעלה */
}

justify-content

יישור על הציר הראשי:

.container {
    justify-content: flex-start;   /* התחלה (ברירת מחדל) */
    justify-content: flex-end;     /* סוף */
    justify-content: center;       /* מרכז */
    justify-content: space-between; /* רווחים בין הפריטים */
    justify-content: space-around;  /* רווחים מסביב */
    justify-content: space-evenly;  /* רווחים שווים */
}

flex-start:    [1][2][3]           
flex-end:                 [1][2][3]
center:           [1][2][3]        
space-between: [1]    [2]    [3]  
space-around:   [1]  [2]  [3]     
space-evenly:   [1]   [2]   [3]

align-items

יישור על הציר המשני:

.container {
    align-items: stretch;     /* מותח (ברירת מחדל) */
    align-items: flex-start;  /* התחלה */
    align-items: flex-end;    /* סוף */
    align-items: center;      /* מרכז */
    align-items: baseline;    /* לפי קו הבסיס של הטקסט */
}

flex-wrap

גלישה לשורה הבאה:

.container {
    flex-wrap: nowrap;        /* ברירת מחדל: הכל בשורה אחת */
    flex-wrap: wrap;          /* גולש לשורות נוספות */
    flex-wrap: wrap-reverse;  /* גולש למעלה */
}

gap

רווח בין פריטים:

.container {
    gap: 20px;              /* רווח בין כל הפריטים */
    gap: 20px 10px;         /* שורה, עמודה */
    row-gap: 20px;          /* רק שורות */
    column-gap: 10px;       /* רק עמודות */
}

align-content

יישור שורות (כשיש wrap):

.container {
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: stretch;
}

תכונות Item

flex-grow

כמה האלמנט גדל יחסית לאחרים:

.item {
    flex-grow: 0; /* ברירת מחדל: לא גדל */
    flex-grow: 1; /* לוקח מקום זמין */
}

.item-1 { flex-grow: 1; } /* 25% */
.item-2 { flex-grow: 2; } /* 50% */
.item-3 { flex-grow: 1; } /* 25% */

flex-shrink

כמה האלמנט מתכווץ:

.item {
    flex-shrink: 1; /* ברירת מחדל: מתכווץ */
    flex-shrink: 0; /* לא מתכווץ! */
}

flex-basis

גודל התחלתי לפני grow/shrink:

.item {
    flex-basis: auto;   /* ברירת מחדל */
    flex-basis: 200px;  /* גודל התחלתי */
    flex-basis: 30%;
}

קיצור flex

.item {
    /* flex-grow flex-shrink flex-basis */
    flex: 0 1 auto;    /* ברירת מחדל */
    flex: 1;           /* flex: 1 1 0% */
    flex: auto;        /* flex: 1 1 auto */
    flex: none;        /* flex: 0 0 auto */
    flex: 1 0 200px;   /* גדל, לא מתכווץ, בסיס 200px */
}

align-self

דריסת align-items לפריט בודד:

.item {
    align-self: auto;       /* לפי ה-container */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
}

order

שינוי סדר הפריטים:

.item-1 { order: 3; } /* יופיע שלישי */
.item-2 { order: 1; } /* יופיע ראשון */
.item-3 { order: 2; } /* יופיע שני */

דוגמאות מעשיות

מרכוז מושלם

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

תפריט ניווט

<nav class="navbar">
    <a class="logo" href="#">לוגו</a>
    <ul class="nav-links">
        <li><a href="#">בית</a></li>
        <li><a href="#">אודות</a></li>
        <li><a href="#">שירותים</a></li>
        <li><a href="#">צור קשר</a></li>
    </ul>
</nav>

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

גריד כרטיסים

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px; /* גדל, מתכווץ, מינימום 300px */
    max-width: 400px;
}

<body>
    <main>תוכן</main>
    <footer>פוטר</footer>
</body>

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* לוקח את כל המקום הזמין */
}

footer {
    /* תמיד למטה */
}

Holy Grail Layout

<div class="layout">
    <header>Header</header>
    <div class="content">
        <nav>Sidebar</nav>
        <main>Main Content</main>
        <aside>Sidebar</aside>
    </div>
    <footer>Footer</footer>
</div>

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    display: flex;
    flex: 1;
}

nav, aside {
    flex: 0 0 200px; /* רוחב קבוע */
}

main {
    flex: 1; /* לוקח את השאר */
}

סיכום

תכונות Container

תכונה	ערכים נפוצים
`display`	`flex`
`flex-direction`	row, column
`justify-content`	center, space-between
`align-items`	center, stretch
`flex-wrap`	wrap, nowrap
`gap`	10px, 20px

תכונות Item

תכונה	ערכים נפוצים
`flex`	1, 0 0 auto
`flex-grow`	0, 1
`flex-shrink`	0, 1
`flex-basis`	auto, 200px
`align-self`	center
`order`	מספר

הבא: CSS Grid ➡️

🔲 CSS Grid

מהו CSS Grid?

Grid היא שיטת פריסה דו-ממדית (שורות ועמודות) - הכלי החזק ביותר לפריסת דפים.

.container {
    display: grid;
}

מושגי יסוד

┌───────────────────────────────────────────────────────┐
│ Grid Container                                        │
├─────────────┬─────────────┬─────────────┬────────────┤
│   Cell      │    Cell     │    Cell     │   Cell     │ ← Row (Track)
│             │             │             │            │
├─────────────┼─────────────┼─────────────┼────────────┤
│   Cell      │    Cell     │    Cell     │   Cell     │
│             │             │             │            │
├─────────────┼─────────────┼─────────────┼────────────┤
│   Cell      │    Cell     │    Cell     │   Cell     │
│             │             │             │            │
└─────────────┴─────────────┴─────────────┴────────────┘
       ↑              ↑            ↑            ↑
    Column         Column      Column       Column
    (Track)        (Track)     (Track)      (Track)

מונח	הסבר
Grid Container	האלמנט עם `display: grid`
Grid Item	הילדים הישירים
Grid Line	הקווים היוצרים את הגריד
Grid Track	שורה או עמודה
Grid Cell	תא בודד
Grid Area	אזור של תאים

הגדרת עמודות ושורות

grid-template-columns

.container {
    display: grid;

    /* עמודות קבועות */
    grid-template-columns: 200px 200px 200px;

    /* יחידת fr (fraction) */
    grid-template-columns: 1fr 1fr 1fr;    /* 3 שווים */
    grid-template-columns: 1fr 2fr 1fr;    /* אמצע כפול */

    /* שילוב */
    grid-template-columns: 250px 1fr 250px; /* sidebars קבועים */

    /* repeat() */
    grid-template-columns: repeat(3, 1fr);  /* 3 שווים */
    grid-template-columns: repeat(4, 100px);

    /* minmax() */
    grid-template-columns: repeat(3, minmax(200px, 1fr));

    /* auto-fill / auto-fit */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

grid-template-rows

.container {
    grid-template-rows: 100px 1fr 50px;    /* header, content, footer */
    grid-template-rows: repeat(3, 200px);
    grid-template-rows: auto 1fr auto;
}

הבדל בין auto-fill ו-auto-fit

/* auto-fill: משאיר עמודות ריקות */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

/* auto-fit: ממלא את כל הרוחב */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Gap (רווחים)

.container {
    gap: 20px;              /* שורות ועמודות */
    gap: 20px 10px;         /* שורות, עמודות */
    row-gap: 20px;
    column-gap: 10px;
}

מיקום Items

לפי קווים (Lines)

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    /* קיצור */
    grid-column: 1 / 3;     /* מקו 1 עד קו 3 */
    grid-row: 1 / 2;

    /* span */
    grid-column: span 2;    /* תופס 2 עמודות */
    grid-row: span 3;       /* תופס 3 שורות */

    /* מקו מסוים עם span */
    grid-column: 2 / span 2; /* מקו 2, תופס 2 */
}

grid-area (קיצור מלא)

.item {
    /* row-start / column-start / row-end / column-end */
    grid-area: 1 / 1 / 3 / 4;
}

Grid Template Areas

שיטה ויזואלית להגדרת פריסה:

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

תא ריק

grid-template-areas:
    "header header header"
    "sidebar main ."       /* נקודה = תא ריק */
    "footer footer footer";

יישור בתוך הגריד

justify-items (אופקי)

.container {
    justify-items: stretch;   /* ברירת מחדל */
    justify-items: start;
    justify-items: end;
    justify-items: center;
}

align-items (אנכי)

.container {
    align-items: stretch;     /* ברירת מחדל */
    align-items: start;
    align-items: end;
    align-items: center;
}

place-items (קיצור)

.container {
    place-items: center;      /* שניהם center */
    place-items: center start; /* align, justify */
}

יישור פריט בודד

.item {
    justify-self: center;
    align-self: end;
    place-self: center end;
}

יישור התוכן כולו

justify-content

.container {
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
}

align-content

.container {
    align-content: start;
    align-content: end;
    align-content: center;
    align-content: space-between;
}

place-content

.container {
    place-content: center;
}

דוגמאות מעשיות

גריד כרטיסים רספונסיבי

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

פריסת דף מלא (Holy Grail)

<div class="page-layout">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</div>

.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    min-height: 100vh;
    gap: 10px;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

גלריית תמונות

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* תמונה גדולה */
.gallery .featured {
    grid-column: span 2;
    grid-row: span 2;
}

Dashboard

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr 1fr;
    gap: 20px;
}

.widget-large {
    grid-column: span 2;
    grid-row: span 2;
}

.widget-wide {
    grid-column: span 2;
}

.widget-tall {
    grid-row: span 2;
}

Flexbox vs Grid

קריטריון	Flexbox	Grid
ממדים	חד-ממדי	דו-ממדי
כיוון	שורה או עמודה	שורות ועמודות
שימוש	רכיבים בודדים, ניווט	פריסת דפים, גלריות
יישור	מעולה	מעולה
תוכן ראשון	✅	לא
פריסה ראשונה	לא	✅

💡 טיפ: השתמשו בשניהם יחד! Grid לפריסה כללית, Flexbox לרכיבים פנימיים.

סיכום

תכונה	תפקיד
`grid-template-columns`	הגדרת עמודות
`grid-template-rows`	הגדרת שורות
`grid-template-areas`	פריסה ויזואלית
`gap`	רווחים
`grid-column` / `grid-row`	מיקום item
`justify-items` / `align-items`	יישור items
`justify-content` / `align-content`	יישור תוכן
`repeat()`, `minmax()`, `fr`	פונקציות שימושיות

הבא: עיצוב רספונסיבי ➡️

📱 עיצוב רספונסיבי

מהו עיצוב רספונסיבי?

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

📱 Mobile  →  📱 Tablet  →  💻 Laptop  →  🖥️ Desktop

Viewport Meta Tag

חובה! הוסיפו לכל דף HTML:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

מאפיין	משמעות
`width=device-width`	רוחב הדף = רוחב המכשיר
`initial-scale=1.0`	זום התחלתי 100%

יחידות יחסיות

אחוזים (%)

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.sidebar {
    width: 25%;
}

.main-content {
    width: 75%;
}

Viewport Units

.hero {
    height: 100vh;     /* 100% גובה החלון */
    width: 100vw;      /* 100% רוחב החלון */
}

.section {
    min-height: 50vh;
}

.text {
    font-size: 5vw;    /* 5% מרוחב החלון */
}

יחידה	משמעות
`vw`	1% מרוחב ה-viewport
`vh`	1% מגובה ה-viewport
`vmin`	הקטן מבין vw ו-vh
`vmax`	הגדול מבין vw ו-vh

rem ו-em

html {
    font-size: 16px; /* בסיס */
}

h1 {
    font-size: 2rem;    /* 32px */
}

.card {
    padding: 1.5em;     /* יחסי לגופן של האלמנט */
}

Media Queries

הכלי העיקרי לרספונסיביות:

תחביר בסיסי

@media (condition) {
    /* סגנונות שמופעלים כאשר התנאי מתקיים */
}

לפי רוחב

/* מסכים עד 768px (טלפונים וטאבלטים) */
@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

/* מסכים מעל 768px */
@media (min-width: 768px) {
    .container {
        display: flex;
    }
}

/* טווח ספציפי */
@media (min-width: 768px) and (max-width: 1024px) {
    /* טאבלטים */
}

Breakpoints נפוצים

/* Mobile First Approach */

/* ברירת מחדל - מובייל */
.container {
    padding: 15px;
}

/* טאבלט */
@media (min-width: 768px) {
    .container {
        padding: 30px;
    }
}

/* לפטופ */
@media (min-width: 1024px) {
    .container {
        padding: 40px;
        max-width: 1200px;
    }
}

/* דסקטופ גדול */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

טבלת Breakpoints

שם	רוחב	מכשירים
xs	< 576px	טלפונים קטנים
sm	≥ 576px	טלפונים
md	≥ 768px	טאבלטים
lg	≥ 1024px	לפטופים
xl	≥ 1200px	דסקטופ
xxl	≥ 1400px	מסכים גדולים

Mobile-First vs Desktop-First

Mobile-First (מומלץ) ✅

/* ברירת מחדל: מובייל */
.nav {
    flex-direction: column;
}

/* מסכים גדולים יותר */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
    }
}

Desktop-First

/* ברירת מחדל: דסקטופ */
.nav {
    flex-direction: row;
}

/* מסכים קטנים יותר */
@media (max-width: 767px) {
    .nav {
        flex-direction: column;
    }
}

תמונות רספונסיביות

תמונה גמישה

img {
    max-width: 100%;
    height: auto;
}

object-fit

.cover-image {
    width: 100%;
    height: 300px;
    object-fit: cover;      /* חותך בצורה יפה */
    object-position: center;
}

srcset ב-HTML

<img 
    src="image-400.jpg"
    srcset="
        image-400.jpg 400w,
        image-800.jpg 800w,
        image-1200.jpg 1200w
    "
    sizes="
        (max-width: 600px) 100vw,
        (max-width: 1200px) 50vw,
        33vw
    "
    alt="תמונה רספונסיבית"
>

Flexbox רספונסיבי

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 100%; /* מובייל: רוחב מלא */
}

@media (min-width: 600px) {
    .card {
        flex: 1 1 calc(50% - 10px); /* 2 בשורה */
    }
}

@media (min-width: 900px) {
    .card {
        flex: 1 1 calc(33.333% - 14px); /* 3 בשורה */
    }
}

Grid רספונסיבי

אוטומטי עם auto-fit

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

עם Media Queries

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 600px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

טיפוגרפיה רספונסיבית

clamp()

h1 {
    /* min, preferred, max */
    font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
}

עם Media Queries

h1 {
    font-size: 1.75rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 3rem;
    }
}

דוגמה מלאה: דף רספונסיבי

/* ===== BASE STYLES (Mobile First) ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Heebo', sans-serif;
    line-height: 1.6;
}

.container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

/* ===== HEADER ===== */
.header {
    padding: 15px 0;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-links {
    display: none; /* מוסתר במובייל */
}

.menu-toggle {
    display: block;
}

/* ===== HERO ===== */
.hero {
    padding: 40px 0;
    text-align: center;
}

.hero h1 {
    font-size: 1.75rem;
    margin-bottom: 15px;
}

/* ===== CARDS ===== */
.cards {
    display: grid;
    gap: 20px;
}

/* ===== TABLET (768px+) ===== */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 20px;
    }

    .nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links {
        display: flex;
        gap: 20px;
    }

    .menu-toggle {
        display: none;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .hero {
        padding: 80px 0;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== LARGE DESKTOP (1200px+) ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

Media Queries נוספים

לפי כיוון מסך

@media (orientation: portrait) {
    /* מסך אנכי */
}

@media (orientation: landscape) {
    /* מסך רוחבי */
}

לפי יכולות

/* מסכים עם hover (לא מובייל) */
@media (hover: hover) {
    .button:hover {
        background: blue;
    }
}

/* מסכי רטינה */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* תמונות ברזולוציה גבוהה */
}

הדפסה

@media print {
    .no-print {
        display: none;
    }

    body {
        font-size: 12pt;
    }
}

סיכום

נושא	כלי
Viewport	`<meta name="viewport">`
יחידות	`%`, `vw`, `vh`, `rem`, `em`
התאמה	`@media` queries
גישה	Mobile-First
תמונות	`max-width: 100%`, `srcset`
פריסה	Flexbox, Grid עם `auto-fit`
טיפוגרפיה	`clamp()`

הבא: אנימציות ומעברים ➡️

✨ אנימציות ומעברים

Transition (מעברים)

מעבר חלק בין מצבים:

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

תכונות transition

.element {
    transition: all 0.3s ease 0s;
    /* property duration timing-function delay */
}

Timing Functions

פונקציה	התנהגות
`linear`	קבוע
`ease`	ברירת מחדל
`ease-in`	מתחיל איטי
`ease-out`	מסיים איטי
`ease-in-out`	איטי בהתחלה ובסוף

Transform

translate (הזזה)

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

rotate (סיבוב)

transform: rotate(45deg);
transform: rotate(-90deg);

scale (גודל)

transform: scale(1.5);
transform: scale(0.5);

skew (הטיה)

transform: skew(10deg, 5deg);

Animation

תחביר בסיסי

@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.element {
    animation: slide-in 0.5s ease forwards;
}

עם אחוזים

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}

.ball {
    animation: bounce 1s ease infinite;
}

תכונות animation

תכונה	ערכים
`animation-name`	שם keyframe
`animation-duration`	1s, 300ms
`animation-iteration-count`	infinite, 3
`animation-direction`	normal, alternate
`animation-fill-mode`	forwards, backwards

דוגמאות

Loading Spinner

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

Hover Effect

.button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

הבא: שיטות עבודה מומלצות ➡️

📋 שיטות עבודה מומלצות

ארגון קוד CSS

סדר הגיוני

.element {
    /* 1. מיקום */
    position: relative;
    top: 0;
    z-index: 1;

    /* 2. תצוגה */
    display: flex;

    /* 3. מידות */
    width: 100%;
    height: auto;

    /* 4. Box Model */
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;

    /* 5. רקע */
    background: white;

    /* 6. טיפוגרפיה */
    font-size: 16px;
    color: #333;

    /* 7. אנימציות */
    transition: all 0.3s ease;
}

קבצים נפרדים

styles/
├── base/
│   ├── reset.css
│   └── typography.css
├── components/
│   ├── buttons.css
│   ├── cards.css
│   └── forms.css
├── layout/
│   ├── header.css
│   ├── footer.css
│   └── grid.css
└── main.css

מתודולוגיית BEM

Block Element Modifier - שמות מחלקות ברורים:

/* Block */
.card { }

/* Element (עם __) */
.card__header { }
.card__body { }
.card__footer { }

/* Modifier (עם --) */
.card--featured { }
.card--small { }
.card__button--primary { }

<div class="card card--featured">
    <div class="card__header">כותרת</div>
    <div class="card__body">תוכן</div>
    <button class="card__button card__button--primary">לחץ</button>
</div>

CSS Variables

:root {
    /* צבעים */
    --color-primary: #3498db;
    --color-secondary: #2ecc71;
    --color-text: #333;
    --color-bg: #fff;

    /* גדלים */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;

    /* גופנים */
    --font-family: 'Heebo', sans-serif;
    --font-size-base: 16px;

    /* צללים */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
}

.button {
    background: var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

ביצועים

תכונות לאנימציה

/* מהיר (GPU) */
transform: translateX(100px);
opacity: 0.5;

/* איטי (הימנעו) */
left: 100px;
width: 200px;

הימנעו מ-!important

/* לא מומלץ */
.text { color: red !important; }

/* מומלץ - סלקטור ספציפי יותר */
.section .text { color: red; }

נגישות

/* פוקוס ברור */
:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* כיבוד העדפות משתמש */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* קונטרסט מספיק */
.text {
    color: #333; /* לא אפור בהיר מדי על לבן */
}

Reset בסיסי

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-text);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}

ul, ol {
    list-style: none;
}

כללי זהב

כלל	הסבר
Mobile First	התחילו ממובייל והרחיבו
DRY	Don't Repeat Yourself
Specificity נמוכה	השתמשו במחלקות, לא ID
שמות משמעותיים	`.nav-link` לא `.blue-text`
הערות	תעדו קוד מורכב
Variables	לצבעים וגדלים חוזרים

🎉 סיום הקורס! חזרו ל-README