צבע רקע

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 25 מתוך 76.

ב-CSS, המאפיין background-color משמש להגדרת צבע הרקע של רכיב HTML. המאפיין הזה מאפשר לך לציין ערך צבע.

הנה התחביר הבסיסי לשימוש במאפיין background-color:

selector {
    background-color: color-value;
}

הנה כמה דרכים נפוצות לציון ערכי צבע ב-CSS:

צבעים בעלי שם: שמות צבעים מוגדרים מראש, כגון red, blue, green, black, white וכו'.

ערכים הקסדצימליים: קודי צבע בני שש ספרות שמופיע לפניהם סמל סולמית (#), כמו #FF0000 עבור אדום.

ערכי RGB: מציינים את רכיבי האדום, הירוק והכחול של צבע באמצעות הפונקציה rgb(), עם ערכים בטווח שבין 0 ל־255, כגון rgb(255, 0, 0) עבור אדום.

לדוגמה:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

בדוגמה הזאת, צבע הרקע של רכיב <body> מוגדר לכחול בהיר, לכל הכותרות <h1> יש רקע אדום (#FF0000), ולכל רכיבי <p> (פסקה) יש רקע כחול (rgb(0, 0, 255)).

אתגר

קל

נתון לך מסמך HTML עם כותרת (<h1>), פסקה (<p>) ואזור (<div>). המשימה שלך היא לעצב את הרכיבים האלה באמצעות המאפיין background-color. בצע את השלבים הבאים:

כתוב כלל CSS שיחול על הרכיב <h1>. הגדר את background-color לערך yellow.
כתוב כלל CSS שיחול על הרכיב <p>. הגדר את background-color לערך #00FF00 (ירוק).
כתוב כלל CSS שיחול על הרכיב <div>. הגדר את background-color לערך rgb(255, 0, 255) (מג'נטה).

נסו בעצמכם

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>