לדלג לתוכן

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

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

פתרון תרגיל 1

קובץ index.html:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>My First CSS Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS works!</h1>
    <p>This page is styled with an external CSS file.</p>
</body>
</html>

קובץ style.css:

body {
    background-color: #f0f0f0;
    color: #333;
}

פתרון תרגיל 2

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Element Selectors</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Main Title</h1>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
    <p>Third paragraph.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <h2>Subtitle</h2>
    <p>Fourth paragraph.</p>
    <p>Fifth paragraph.</p>
</body>
</html>

h1, h2 {
    color: darkgreen;
}

p {
    font-size: 18px;
}

li {
    background-color: #f5f5f5;
}

פתרון תרגיל 3

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Class Selectors</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p class="important">This is important text.</p>
    <p>Regular paragraph.</p>
    <p class="warning">Warning! Be careful.</p>
    <p class="important">Another important paragraph.</p>
    <p class="important warning">This is both important and a warning.</p>
    <p>Another regular paragraph.</p>
</body>
</html>

.important {
    font-weight: bold;
    background-color: lightyellow;
}

.warning {
    border: 2px solid red;
    color: red;
    padding: 10px;
}

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

פתרון תרגיל 5

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Business Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="card-header">
            <h1 class="card-name">Israel Israeli</h1>
            <p class="card-title">Frontend Developer</p>
        </div>
        <div class="card-body">
            <p class="card-phone">054-1234567</p>
            <p class="card-email">israel@example.com</p>
            <a class="card-link" href="https://mywebsite.com">mywebsite.com</a>
        </div>
    </div>
</body>
</html>

.card {
    width: 350px;
    border: 2px solid #333;
    border-radius: 10px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.card-header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

.card-name {
    font-size: 24px;
}

.card-title {
    font-size: 14px;
    color: #bdc3c7;
}

.card-body {
    padding: 20px;
    background-color: #ecf0f1;
}

.card-phone,
.card-email {
    font-size: 16px;
    color: #333;
    padding: 5px 0;
}

.card-link {
    color: #2980b9;
    font-size: 16px;
}

פתרון תרגיל 6

/* 1. all links inside sidebar - white, no underline */
.sidebar a {
    color: white;
    text-decoration: none;
}

/* 2. only direct li children links in sidebar - 18px */
.sidebar > ul > li > a {
    font-size: 18px;
}

/* 3. links starting with https - orange */
[href^="https"] {
    color: orange;
}

/* 4. first p after h1 - larger font */
h1 + p {
    font-size: 22px;
}

/* 5. all p after h2 - gray */
h2 ~ p {
    color: gray;
}

/* 6. caption immediately after img - italic */
img + .caption {
    font-style: italic;
}

פתרון תרגיל 7

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Attribute Selectors Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>
        <label>Name:</label>
        <input type="text" required><br><br>

        <label>Email:</label>
        <input type="email" required><br><br>

        <label>Password:</label>
        <input type="password" required><br><br>

        <label>Age:</label>
        <input type="number"><br><br>

        <label>Nickname:</label>
        <input type="text" disabled value="N/A"><br><br>

        <label>
            <input type="checkbox"> I agree to terms
        </label><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

/* blue border for text inputs */
[type="text"] {
    border: 2px solid blue;
    padding: 8px;
}

/* green border for email input */
[type="email"] {
    border: 2px solid green;
    padding: 8px;
}

/* gray background for disabled inputs */
[disabled] {
    background-color: #ddd;
    cursor: not-allowed;
}

/* blue background, white text for submit button */
[type="submit"] {
    background-color: #2980b9;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

/* red border for required fields */
[required] {
    border-right: 4px solid red;
}

תשובות לשאלות

  1. class מול ID - ל-class אפשר להשתמש על כמה אלמנטים, ל-ID רק על אלמנט אחד. ID יוצר ספציפיות גבוהה יותר שמקשה על דריסת סגנונות. עדיף class כמעט תמיד. ID שימושי יותר ב-JavaScript.

  2. סלקטור צאצא מול ילד ישיר - סלקטור צאצא (רווח) בוחר אלמנטים בכל עומק קינון. סלקטור ילד ישיר (>) בוחר רק ילדים ברמה אחת. למשל div p בוחר כל p בתוך div, אבל div > p בוחר רק p שהוא ילד ישיר של div.

  3. h1 + p מול h1 ~ p - הסלקטור + בוחר רק את האלמנט הראשון שמופיע מיד אחרי. הסלקטור ~ בוחר את כל האלמנטים שמופיעים אחרי, באותה רמה.

  4. סלקטורי תכונות כדאי להשתמש בהם כשרוצים לעצב לפי תכונות HTML שכבר קיימות, למשל סוגי input, קישורים חיצוניים, שדות required או disabled. זה חוסך הוספה מיותרת של class-ים.

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

  6. סלקטור * בוחר את כל האלמנטים בדף. משתמשים בו בעיקר לאיפוס גלובלי (CSS reset) כמו * { margin: 0; padding: 0; box-sizing: border-box; }. לא מומלץ להשתמש בו לעיצוב ספציפי.