ألوان 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>). مهمتك هي استخدام رموز الألوان السداسية عشرية من أجل ألوان الخلفية. اتبع الخطوات أدناه:

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

REQUIRED OUTPUT FORMAT: [Your translated content here]

جرّب بنفسك

<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>