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

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

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

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 מוחלים:

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

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

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

הקשר בין HTML ו-CSS

HTML

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

CSS

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

JavaScript

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

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

סיכום

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

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