ألوان HEX

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

ألوان HEX هي طريقة لتحديد الألوان باستخدام القيم السداسية عشرية. رمز اللون السداسي عشري هو رمز مكوّن من ستة أرقام يسبقه رمز الهاشتاج (#) ويمثّل مقدار الضوء الأحمر والأخضر والأزرق الذي يتكوّن منه اللون.

يمثّل كل زوج من الأرقام في الرمز شدة أحد هذه الألوان الأساسية، وتتراوح من 00 (من دون شدة) إلى FF (الشدة الكاملة). توفّر ألوان Hex مجموعة واسعة من خيارات الألوان، وتُستخدم على نطاق واسع في تصميم الويب.

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

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

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

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

يمكنك أيضًا استخدام الصيغة المختصرة لألوان HEX عندما يكون الرقمان في كل زوج متماثلين. على سبيل المثال:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

التحدي

سهل

أُعطيت مستند HTML يحتوي على عنوانين (<h1> و<h2>) وفقرة (<p>). مهمتك هي استخدام رموز ألوان سداسية عشرية من أجل background colors. اتبع الخطوات أدناه:

اكتب قاعدة CSS للعنصر <h1>. عيّن background color إلى electric purple باستخدام اللون السداسي عشري #BF00FF.
اكتب قاعدة CSS للعنصر <h2>. عيّن background color إلى neon green باستخدام #39FF14.
اكتب قاعدة CSS لجميع العناصر <p>. عيّن background color إلى light gray باستخدام #D3D3D3.

التنسيق المطلوب للإخراج: [المحتوى المترجم هنا]

جرّب بنفسك

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>