🎨 التحكم الكامل في ألوان النصوص باستخدام CSS

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

📝 ما هي خاصية color في CSS؟

خاصية color هي الوسيلة الأساسية لتحديد لون النص في صفحات الويب. تُستخدم هذه الخاصية لتغيير لون أي نص داخل عناصر HTML مثل الفقرات، العناوين، الروابط، وغيرها.

p {
    color: blue; /* تغيير لون النص إلى الأزرق */
}

في المثال أعلاه، جميع النصوص داخل عناصر <p> ستظهر باللون الأزرق.

🎯 الطرق المختلفة لتحديد الألوان في CSS

هناك عدة طرق شائعة لتحديد الألوان في CSS، سنتعرف على أهمها:

1. الألوان المسماة (Named Colors)

هي ألوان محددة مسبقاً بأسماء إنجليزية مثل red، blue، green، black، white.

h1 {
    color: red; /* اللون الأحمر */
}

h2 {
    color: darkblue; /* الأزرق الداكن */
}

2. ألوان HEX (Hexadecimal Colors)

تستخدم رموز سداسية عشرية تبدأ بعلامة # تليها 6 أحرف/أرقام.

p {
    color: #ff0000; /* أحمر */
}

span {
    color: #0000ff; /* أزرق */
}

3. ألوان RGB (Red, Green, Blue)

تحدد اللون باستخدام قيم الأحمر، الأخضر، والأزرق من 0 إلى 255.

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

li {
    color: rgb(0, 255, 0); /* أخضر */
}

💡 أمثلة عملية على استخدام ألوان النصوص

لنطبق ما تعلمناه على أمثلة واقعية:

<!DOCTYPE html>
<html>
<head>
    <style>
        .title {
            color: #2c3e50; /* لون أزرق رمادي داكن */
        }
        
        .important {
            color: rgb(231, 76, 60); /* لون أحمر برتقالي */
        }
        
        .success {
            color: green; /* لون أخضر */
        }
    </style>
</head>
<body>
    <h1 class="title">عنوان رئيسي جميل</h1>
    <p class="important">هذه رسالة مهمة يجب الانتباه إليها</p>
    <p class="success">تمت العملية بنجاح!</p>
</body>
</html>

🚀 نصائح عملية لاختيار الألوان

  1. التناسق: اختر ألواناً تتناسب مع تصميم موقعك بالكامل
  2. التباين: تأكد من أن لون النص يظهر بوضوح على خلفيته
  3. البساطة: لا تستخدم الكثير من الألوان المختلفة في صفحة واحدة
/* مثال على تنسيق متوازن */
body {
    color: #333333; /* رمادي داكن - مناسب للقراءة */
}

.alert {
    color: #e74c3c; /* أحمر - للتنبيهات المهمة */
}

.highlight {
    color: #2980b9; /* أزرق - للنصوص المميزة */
}