الألوان في CSS
تعرف الاستهداف. الآن لوّن. مهارة اللون الأولى بسيطة: اضبط لون النص بخاصية color. الخلفيات والتدرجات ورياضيات اللون الكاملة تأتي لاحقاً — اليوم لون المقدّمة المقروء والقابل لإعادة الاستخدام.
ماذا تفعل color؟
خاصية color تضبط لون المقدّمة — أساساً لون الحروف. يستخدم المتصفح اللون المحسوب أيضاً لما يتبع currentColor (الحدود وبعض SVG والزخارف). لا تملأ الصندوق خلف النص؛ ذلك background-color (وحدات لاحقة).
الألوان المسمّاة بنظرة
تأتي CSS بكثير من الألوان المسمّاة — كلمات مثل teal وnavy. احفظ مجموعة يومية صغيرة أولاً. الـ hex الدقيق وrgb() في درس قيم الألوان.
📊 ألوان مسمّاة يومية
| الاسم | الإحساس | استخدام شائع |
|---|---|---|
black / white |
أقصى تباين | نص الجسم أو لوحة الصفحة (بحذر) |
navy / teal |
لمسات هادئة للعلامة | روابط، عناوين، ملاحظات |
maroon / crimson |
تحذير أو تأكيد قوي | أخطاء، ملصقات بيع (بقلة) |
gray / silver |
نص ثانوي هادئ | تعليقات، تسميات باهتة |
transparent |
شفاف تماماً | إخفاء حد دون حذف الخاصية |
لون النص باسم
اكتب تصريحاً عادياً: الخاصية color، والقيمة لون مسمّى. ابدأ بنص الفقرات لتشعر الصفحة بالقصد.
لون مسمّى على نص الفقرة
cssp {
color: teal;
}كيف تقرأ النتيجة؟
كل <p> مطابق يرسم حروفه بـ teal. اسم الخاصية دائماً color — لا text-color ولا font-color.
العناوين قد تختلف عن الجسم
غالباً تريد عنواناً أغمق وفقرة أهدأ. محددات منفصلة، ألوان منفصلة.
لمسة عنوان مقابل نص الجسم
cssh1 {
color: navy;
}
.lead {
color: gray;
}عادة تصميم
العناوين عالية التباين تسهّل المسح. النص الثانوي الناعم يمنع صراخ التعليقات. ومع ذلك أبقِ تبايناً كافياً للقراءة.
اللون يُورَث
الأبناء يأخذون color الأب ما لم يضبطوا لونهم. لذلك لون على حاوية يمكن أن يوحّد مظهر كتلة نص كاملة.
لون موروث على كتلة ملاحظة
css.note {
color: maroon;
}ماذا يُورَث؟
داخل <div class="note">…</div> تبقى الفقرات وspan بلون maroon حتى يغيّرها قاعدة أقوى. الوراثة ميزة — ليست خطأ.
currentColor يطابق النص
currentColor تعني «استخدم color المحسوب للعنصر.» مفيدة حين يجب أن يبقى حد أو أيقونة متزامناً مع النص.
الحد يتبع النص عبر currentColor
css.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}لماذا الجهد؟
غيّر color مرة — الحد يتبع. لا تحتاج نسختين من teal للمزامنة.
بطاقة موحّدة المظهر (جمع)
اجمع لون الحاوية، وتجاوز أهدأ على الابن، ولمسة currentColor.
سمة بطاقة مع تجاوز وcurrentColor
css.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}
.card .muted {
color: gray;
}color ليست الخلفية
المبتدئون غالباً يكتبون color وهم يقصدون التعبئة خلف النص. افصل من اليوم الأول:
color→ النص (المقدّمة)background-color→ الصندوق الملوّن خلف المحتوى (قريباً)
جرّبها بنفسك
- صفحة بعناوين و
<p class="lead">و<div class="note">بفقرة قصيرة. - ضع
h1 { color: navy; }وp { color: teal; }و.note { color: maroon; }— تحقق من كل منطقة. - أضف
.badge { color: teal; border: 2px solid currentColor; }على span صغير — يجب أن يطابق الحد النص. - داخل
.cardاجعل navy على البطاقة وcolor: grayعلى.muted— تجاوز الابن يفوز لذلك السطر. - اختياري: جرّب
color: transparentعلى ملصق زخرفي — يختفي النص ويبقى مكان التخطيط.
أخطاء شائعة
- تلوين خلفية الصندوق بـ
color— استخدمbackground-colorلاحقاً - اختراع أسماء (
lightishblue) — التزم بكلمات CSS الحقيقية أو انتظر hex/rgb - توقع أن كل خاصية تورّث مثل
color— كثير منها لا يفعل - القفز مباشرة إلى سلاسل hex طويلة قبل أن تعتاد الألوان المسمّاة
- تجاهل التباين (رمادي باهت على أبيض) — جميل لكنه غير مقروء
باختصار
colorتضبط لون نص المقدّمة- الألوان المسمّاة (
teal،navy،maroon، …) كافية للبداية - الأبناء يرثون
colorحتى يتجاوزوه currentColorيعيد استخدام لون النص المحسوب للحدود وأشباهها- الصيغ العميقة (hex، rgb، hsl) لقيم الألوان؛ الخلفيات لدروس لاحقة
- تمرّن بعناوين / lead / note حتى تصبح الخاصية تلقائية
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى