خاصية لون النص
آخر تحديث: 2026-09-13
color خاصية لون النص
تحدد الخاصية color لون المقدمة لنص العنصر، وهي إحدى أكثر خصائص CSS استخداماً. تقبل كلمات مفتاحية للألوان وقيماً ست عشرية وRGB وHSL وصيغ ألوان أخرى كثيرة. تُورَّث الخاصية للعناصر الفرعية، لذا تُعيَّن عادةً على الأصل لتوحيد لون كتلة نصية كاملة.
| الفئة | |
|---|---|
| القيمة الأولية | canvastext |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | color |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
color: <color>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<color> | النوع | لون مقدمة النص |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تُورَّث الخاصية color للعناصر الفرعية، لذا تعيينها على body يوحّد لون النص الافتراضي في الموقع بأكمله.
تحذير： لا تنقل المعلومات باللون وحده أبداً — فقد لا يتمكن مستخدمو عمى الألوان من التمييز بينها. ادمج اللون مع نص أو أيقونات.
❓ الأسئلة الشائعة
Qما صيغ الألوان التي تدعمها الخاصية color في CSS؟
Aتدعم كلمات مفتاحية للألوان (red وtransparent) وقيماً ست عشرية (#ff0000 و#f00) وrgb()/rgba() وhsl()/hsla(). ويضيف CSS Color 4 كل من lch() وoklch() والصيغة المفصولة بمسافات مثل rgb(255 0 0 / 50%). تُعد القيم الست عشرية وrgb() الأكثر شيوعاً في العمل اليومي، بينما تيسّر hsl() ضبط اللون والإضاءة.
Qما الفرق بين color وbackground-color؟
Aتضبط color لون النص (المقدمة)، وتُورَّث للعناصر الفرعية، وتعمل كـ currentcolor للعناصر التي لم يُعيَّن لونها صراحةً مثل الحدود والخطوط السفلية. أما background-color فتضبط خلفية العنصر ولا تُورَّث. معاً تحددان سهولة قراءة النص، لذا تأكد من تباين كافٍ — يُشترط معيار WCAG AA تبايناً لا يقل عن 4.5:1 للنص العادي.
Qهل هناك فرق بين #f00 و#ff0000؟
Aلا. #f00 هو الشكل المختصر من #ff0000: عندما يكون الرقمان الست عشريان في قناة ما متطابقين (مثل 00 وff وaa)، يمكن ضغطهما إلى رقم واحد. تضيف الأشكال المكونة من 4 و8 أرقام قناة ألفا — على سبيل المثال، يعني #ff000080 أحمر بـ 50% تعتيم، حيث الأرقام الثلاثة/الستة الأولى للون والرقم/الرقمان الأخيران للألفا.
Qكيف أدير سمة ألوان الموقع باستخدام متغيرات CSS؟
Aعرّف المتغيرات في :root، مثل --primary: #2c7be5; --text: #333;، ثم اقتبسها بـ color: var(--primary);. يسهّل تركيزها إدارة السمات، ويمكن لـ color-mix() (المدعومة في المتصفحات الحديثة) اشتقاق درجات أفتح وأغمق من متغير. وفر قيماً احتياطية للمتصفحات القديمة التي تفتقر إلى color-mix().
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
