ألوان RGB

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 27 من 76.

في CSS، تُعد ألوان RGB طريقة لتحديد الألوان باستخدام الصيغة الوظيفية rgb(). يرمز RGB إلى الأحمر (Red)، والأخضر (Green)، والأزرق (Blue)، ويتم تمثيل كل لون بقيمة تتراوح من 0 إلى 255. من خلال دمج شدات مختلفة من هذه الألوان الأساسية الثلاثة، يمكنك إنشاء طيف واسع من الألوان.

إليك الصيغة الأساسية لاستخدام ألوان RGB في CSS:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

على سبيل المثال:

p {
    color: rgb(255, 0, 0); /* أحمر */
    background-color: rgb(0, 255, 0); /* أخضر */
}

h1 {
    color: rgb(0, 0, 255); /* أزرق */
}

.highlight {
    background-color: rgb(255, 255, 0); /* أصفر */
}

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>)، وفقرة (<p>)، وقسم (<div>). قم بتعيين لون خلفية ولون نص من اختيارك لجميع العناصر الموجودة في الصفحة، واستخدم rgb() للقيام بذلك.

لن يتم قبول الألوان الافتراضية!

ورقة مرجعية

تستخدم ألوان RGB التدوين الوظيفي rgb() بقيم من 0 إلى 255 للأحمر والأخضر والأزرق:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

أمثلة:

p {
    color: rgb(255, 0, 0); /* أحمر */
    background-color: rgb(0, 255, 0); /* أخضر */
}

h1 {
    color: rgb(0, 0, 255); /* أزرق */
}

.highlight {
    background-color: rgb(255, 255, 0); /* أصفر */
}

جرّب بنفسك

<html>
<head>
    <title>RGB Colors</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>