مرحباً بك في الدرس الثالث من دورة CSS للمستوى المبتدئ

في الدرسين السابقين، تعلمنا كيف نربط ملف الـ CSS بصفحة HTML وكيف نتحكم في حجم ونوع الخطوط. اليوم، سننتقل إلى خطوة تجعل موقعك أكثر جاذبية وحيوية: الألوان والخلفيات (Colors and Backgrounds). الألوان هي أول ما يلاحظه المستخدم، لذا فإن فهم كيفية استخدامها بشكل صحيح يعد مهارة أساسية لكل مطور واجهات أمامية.

1. تخصيص ألوان النصوص (Color)

في لغة CSS، الخاصية المسؤولة عن تلوين النصوص هي ببساطة color. يمكنك كتابة اسم اللون مباشرة (مثل red أو blue)، أو استخدام قيم الـ Hex (الست عشرية)، أو نظام الـ RGB.

دعنا نرى مثالاً عملياً يوضح كيفية تطبيق ألوان مختلفة على عناوين ونصوص الصفحة:

<style>
  h1 {
    color: #ff5733; /* استخدام نظام الـ Hex لتلوين العنوان برتقالي مائل للحرارة */
  }
  
  p {
    color: rgb(46, 139, 87); /* استخدام نظام الـ RGB لتلوين الفقرة بالأخضر البحري */
  }
</style>

<h1>أهلاً بكم في عالم الألوان</h1>
<p>هذا النص ملون باستخدام نظام الألوان البرمجي في CSS.</p>

2. التحكم في خلفيات العناصر (Backgrounds)

لا يقتصر الأمر على النصوص فقط، بل يمكنك أيضاً تغيير خلفية أي عنصر في صفحتك (سواء كان فقرة، أو زر، أو حتى الصفحة كاملة) باستخدام خاصية background-color.

إليك كيف يمكنك جعل خلفية الصفحة بالكامل بلون فاتح، وخلفية الزر بلون مميز لجذب انتباه المستخدم:

<style>
  body {
    background-color: #f4f4f4; /* خلفية رمادية فاتحة لراحة العين */
  }
  
  .my-button {
    background-color: #007bff; /* خلفية زرقاء للزر */
    color: white;             /* نص أبيض ليكون واضحاً على الخلفية الزرقاء */
    padding: 10px 20px;
    border: none;
  }
</style>

<button class="my-button">اضغط هنا</button>

خلاصة الدرس ومصادر إضافية

تعلمنا اليوم كيف نضفي الحياة على مواقعنا باستخدام خاصية color للنصوص و background-color للخلفيات. يمكنك تجربة آلاف الألوان المتاحة عبر الإنترنت ومزجها بحرية.

لمزيد من التفاصيل والتعرف على خيارات التلوين المتقدمة مثل التدرجات اللونية (Gradients)، يُمكنك زيارة التوثيق الرسمي عبر موقع MDN Web Docs.