الألوان CSS

تحدد الخاصية لون colorالنص (لون المقدمة بشكل عام) للعنصر.

على سبيل المثال ، colorتحدد الخاصية المحددة في bodyالمحدد لون النص الافتراضي للصفحة بأكملها. لنجرب المثال التالي لنرى كيف يعمل:

body {
    color: #ff5722;
}

تحديد قيم اللون

غالبًا ما يتم تحديد الألوان في CSS بالتنسيقات التالية:

• كلمة رئيسية ملونة - مثل "أحمر" ، "أخضر" ، "أزرق" ، "شفاف" ، إلخ.
• قيمة HEX - مثل "# ff0000" ، "# 00ff00" ، إلخ.
• قيمة RGB - مثل "rgb (255 ، 0 ، 0)"

قدم CSS3 العديد من تنسيقات الألوان الأخرى مثل HSL و HSLA و RGBA التي تدعم أيضًا شفافية ألفا. سنتعرف عليها بمزيد من التفصيل في فصل ألوان CSS3 .

في الوقت الحالي ، دعنا نلتزم بالطرق الأساسية لتحديد قيم اللون:

الكلمات الأساسية الملونة

تحدد CSS الكلمات الأساسية القليلة للألوان التي تتيح لك تحديد قيم اللون بطريقة سهلة.

الكلمات الأساسية للألوان الأساسية هي: أكوا ، أسود ، أزرق ، فوشيا ، رمادي ، أخضر ، ليموني ، كستنائي ، بحري ، زيتوني ، أرجواني ، أحمر ، فضي ، أزرق مخضر ، أبيض ، أصفر. أسماء الألوان غير حساسة لحالة الأحرف.

h1 {
    color: red;
}
p {
    color: purple;
}

ومع ذلك ، فإن متصفحات الويب الحديثة تدعم عمليا العديد من أسماء الألوان أكثر مما تم تحديده في معيار CSS ، ولكن لكي تكون في الجانب الأكثر أمانًا ، يجب عليك استخدام قيم الألوان السداسية بدلاً من ذلك.

راجع المرجع الخاص بأسماء ألوان CSS ، للحصول على قائمة كاملة بأسماء الألوان المحتملة.

قيم لون HEX

تعد Hex (اختصار لـ Hexadecimal) هي الطريقة الأكثر استخدامًا لتحديد اللون على الويب.

تمثل Hex الألوان باستخدام رمز مكون من ستة أرقام ، مسبوقًا برمز تجزئة ، مثل #rrggbb، فيه rr، ggويمثل bbالمكون الأحمر والأخضر والأزرق للون على التوالي.

يمكن أن تختلف قيمة كل مكون من 00 (بدون لون) و FF (لون كامل) بالتدوين السداسي العشري ، أو 0 و 255 في التدوين المكافئ العشري. وهكذا #ffffffيمثل اللون الأبيض #000000ويمثل اللون الأسود. دعنا نلقي نظرة على المثال التالي:

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

قيم ألوان RGB

يمكن تحديد الألوان في نموذج RGB (الأحمر والأخضر والأزرق) باستخدام rgb()التدوين الوظيفي.

تقبل الوظيفة rgb()ثلاث قيم مفصولة بفواصل ، والتي تحدد مقدار مكون اللون الأحمر والأخضر والأزرق. يتم تحديد هذه القيم بشكل عام كأعداد صحيحة بين 0 إلى 255 ، حيث لا يمثل 0 أي لون ويمثل 255 اللون الكامل أو الأقصى .

يحدد المثال التالي نفس اللون كما في المثال السابق ولكن في تدوين RGB.

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

تأثير خاصية اللون على الحدود وا

لمخططات التفصيلية

colorالخاصية ليست فقط لمحتوى النص ، ولكن لأي شيء في المقدمة يأخذ قيمة لونية . على سبيل المثال ، إذا لم يتم تحديد border-colorأو outline-colorالقيمة بشكل صريح للعنصر ، فسيتم استخدام قيمة اللون بدلاً من ذلك. دعنا نتحقق من مثال:

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}