1.1 הקדמה ל CSS וסלקטורים תרגול

תרגול - הקדמה ל-CSS וסלקטורים

תרגיל 1 - חיבור CSS ל-HTML

צרו קובץ HTML בשם index.html וקובץ CSS בשם style.css.
- חברו את קובץ ה-CSS ל-HTML באמצעות תגית <link>
- שנו את צבע הרקע של הדף לצבע כלשהו
- שנו את צבע הטקסט של כל הדף לצבע אחר
- ודאו שהחיבור עובד ושאתם רואים את השינויים בדפדפן

תרגיל 2 - סלקטורי אלמנט

צרו דף HTML עם התוכן הבא: כותרת h1, שלוש פסקאות p, רשימה לא מסודרת ul עם 4 פריטים, וכותרת משנה h2 עם עוד שתי פסקאות.

בקובץ ה-CSS:
- הגדירו צבע ירוק כהה לכל הכותרות (h1 ו-h2)
- הגדירו גודל פונט 18px לכל הפסקאות
- הגדירו רקע בהיר לכל פריטי הרשימה

תרגיל 3 - סלקטורי class

צרו דף HTML עם 6 פסקאות. הוסיפו class-ים כך:
- שתי פסקאות עם class="important"
- פסקה אחת עם class="warning"
- פסקה אחת עם class="important warning" (שני class-ים)
- שתי פסקאות בלי class

בקובץ ה-CSS:
- עצבו את class "important" עם טקסט מודגש ורקע צהוב בהיר
- עצבו את class "warning" עם גבול אדום וצבע טקסט אדום
- שימו לב מה קורה לפסקה שיש לה את שני ה-class-ים

תרגיל 4 - CSS Diner

היכנסו למשחק CSS Diner בכתובת:
https://flukeout.github.io

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

תרגיל 5 - עיצוב עם class-ים בלבד

צרו דף HTML של "כרטיס ביקור" דיגיטלי עם:
- שם מלא
- תפקיד
- מספר טלפון
- כתובת אימייל
- קישור לאתר

הכלל: כל העיצוב בCSS צריך להשתמש בסלקטורי class בלבד (בלי סלקטורי אלמנט, בלי ID)

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

תרגיל 6 - סלקטורים מורכבים

צרו דף HTML עם המבנה הבא:

<div class="sidebar">
    <h3>Menu</h3>
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li>
            <a href="/products">Products</a>
            <ul>
                <li><a href="/products/1">Product 1</a></li>
                <li><a href="/products/2">Product 2</a></li>
            </ul>
        </li>
        <li><a href="https://external.com">External Link</a></li>
    </ul>
</div>

<div class="content">
    <h1>Welcome</h1>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
    <img src="photo.jpg" alt="photo">
    <p class="caption">Photo caption.</p>
    <h2>Section</h2>
    <p>Another paragraph.</p>
</div>

כתבו CSS שעושה את הדברים הבאים (כל אחד בסלקטור אחר):
1. כל הקישורים בתוך ה-sidebar יהיו בצבע לבן בלי קו תחתון
2. רק הקישורים שהם ילדים ישירים של li ב-sidebar יהיו בגודל 18px
3. קישורים שמתחילים ב-https יקבלו צבע כתום
4. הפסקה הראשונה אחרי ה-h1 תהיה בגודל גדול יותר
5. כל הפסקאות אחרי ה-h2 יהיו באפור
6. הפסקה עם class "caption" שמופיעה מיד אחרי img תהיה באיטליק

תרגיל 7 - סלקטורי תכונות

צרו טופס HTML עם שדות מסוגים שונים:
- שדה טקסט (text)
- שדה אימייל (email)
- שדה סיסמה (password)
- שדה מספר (number)
- תיבת סימון (checkbox)
- כפתור שליחה (submit)

בקובץ ה-CSS, השתמשו רק בסלקטורי תכונות (בלי class-ים) כדי:
- לתת גבול כחול לכל שדות הטקסט
- לתת גבול ירוק לשדה האימייל
- לתת רקע אפור בהיר לשדות disabled (הוסיפו תכונת disabled לשדה אחד)
- לתת רקע כחול וטקסט לבן לכפתור השליחה
- לתת גבול אדום לשדות שהם required (הוסיפו תכונת required לכמה שדות)

שאלות

1. מה ההבדל בין סלקטור class (.) לסלקטור ID (#)? מתי עדיף להשתמש בכל אחד?
2. מה ההבדל בין סלקטור צאצא (רווח) לסלקטור ילד ישיר (>)?
3. מה ההבדל בין h1 + p לבין h1 ~ p?
4. מתי כדאי להשתמש בסלקטורי תכונות במקום class-ים?
5. למה עדיף להשתמש בקובץ CSS חיצוני ולא inline styles?
6. מה עושה הסלקטור * ומתי משתמשים בו?