17. مقدمة في خصائص الألوان

اللون أساسي في تنسيق CSS. نتحكم في اللون بشكل أساسي في منطقتين: المقدمة (النص) وخلفية العنصر.

1. لون المقدمة (color)

تحدد خاصية color لون محتوى النص الخاص بالعنصر.

css p { /* يضبط لون نص كل الفقرات إلى الأخضر */ color: green; }

h1 { color: rgb(255, 0, 0); /* أحمر صريح */ }

2. لون الخلفية (background-color)

تحدد خاصية background-color اللون المصمت المرئي تحت محتوى العنصر وحشوته.

css .alert { background-color: #f0f0f0; /* خلفية رمادية فاتحة */ border: 1px solid black; padding: 15px; }

قيم الألوان (التنسيقات)

يدعم CSS عدة طرق لتعريف قيم الألوان. يجب أن تكون على دراية بالثلاثة الرئيسية:

أ. الكلمات المحجوزة (Keywords)

أسماء بسيطة ومحددة مسبقاً (حوالي 140 اسماً). css color: blue; /* أو tomato، aquamarine، إلخ. */

ب. الألوان السداسية عشرية (Hex Codes)

تستخدم رمز الهاش (#) متبوعاً بستة أحرف (0-9، A-F)، تمثل الأحمر والأخضر والأزرق (RRGGBB). css color: #FF0000; /* أحمر صريح / background-color: #333333; / رمادي غامق */

ج. RGB و RGBA

قيم الأحمر والأخضر والأزرق، تتراوح كل منها من 0 إلى 255. RGBA تضيف قناة رابعة: Alpha (الشفافية)، تتراوح من 0 (شفاف تماماً) إلى 1 (معتم تماماً).

css /* أسود قياسي */ color: rgb(0, 0, 0);

/* أسود بشفافية 50% */ background-color: rgba(0, 0, 0, 0.5);