CSS

תחביר בסיסי

מבנה כלל CSS

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

selector {
    property: value;
}

פירוט

דוגמה מלאה

/* הסלקטור */
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 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 { }

סיכום

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