مقدمة الدرس

أهلاً بك عزيزي الطالب في الدرس الرابع من دورة تعلم لغة CSS للمستوى المبتدئ. في الدروس السابقة، تعلمت كيفية ربط ملف CSS بصفحة HTML وكيفية كتابة المحددات الأساسية. اليوم، سننتقل إلى جانب ممتع جداً وبصري في تصميم المواقع، ألا وهو الألوان وكيفية استخدامها باحترافية لتلوين النصوص والخلفيات.

طرق كتابة الألوان في CSS

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

• أسماء الألوان (Color Names): استخدام أسماء مباشرة مثل red, blue, green. وهي مفيدة للتجارب السريعة ولكنها محدودة.
• النظام السداسي عشر (Hex Code): وهو الأكثر استخداماً في تطوير الويب، ويتكون من رمز الهاش (#) متبوعاً بستة رموز تعبر عن درجات الأحمر والأخضر والأزرق (RGB).
• نظام (RGB): ويعتمد على تحديد قيم صريحة للألوان الأساسية (Red, Green, Blue) بأرقام تتراوح بين 0 و 255.

تطبيق عملي: تلوين النصوص والخلفيات

دعنا نطبق ما تعلمناه عملياً. الخاصية color تستخدم لتغيير لون النص، بينما الخاصية background-color تستخدم لتغيير لون خلفية العنصر.

إليك مثال برمجي يوضح كيفية استخدام هذه الخصائص:

<style>
  /* تلوين عنوان رئيسي بلون HEX */
  h1 {
    color: #ff5733;
  }

  /* تلوين فقرة بنظام RGB وتحديد خلفية */
  p {
    color: rgb(44, 62, 80);
    background-color: #ecf0f1;
    padding: 10px;
  }
</style>

<h1>عنوان ملون بطريقة احترافية</h1>
<p>هذه فقرة نصية تحتوي على لون مميز وخلفية هادئة.</p>

مصادر إضافية للتعلم

للحصول على قائمة كاملة بجميع أسماء الألوان المتاحة وكيفية توليد درجات الألوان بدقة، يمكنك زيارة التوثيق الرسمي والموثوق عبر موقع MDN Web Docs للتعرف على قيم الألوان في CSS.