لون الخلفية

جزء من قسم Styling with 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> إلى lightblue، وجميع عناوين <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) (الأرجواني).

ورقة مرجعية

تحدد خاصية background-color لون الخلفية لعنصر HTML:

selector {
    background-color: color-value;
}

يمكن تحديد قيم الألوان باستخدام:

الألوان المسماة: red، blue، green، black، white
القيم الست عشرية (Hexadecimal): #FF0000 (أحمر)
قيم RGB: rgb(255, 0, 0) (أحمر)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 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>