الفصل 4: الألوان والخلفيات في CSS

هنتكلم عن: ألوان HEX وRGB وخاصية background-color و background-image

---

🔸 الأول كده… ليه بنستخدم ألوان في CSS؟

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

---

✅ أنواع الألوان اللي بنستخدمها في CSS:

---

1. 🟥 ألوان الـ HEX

دي عبارة عن كود بيتكون من 6 أرقام أو حروف، وكل كود بيمثّل لون.

بيبدأ الكود بعلامة # زي كده:

cssCopy codecolor: #ff0000; /* أحمر */
color: #00ff00; /* أخضر */
color: #0000ff; /* أزرق */

🔹 الكود ده بيتقسم 3 أجزاء:

• أول جزء للون الأحمر
• التاني للأخضر
• التالت للأزرق

مثال:

• #ffffff = أبيض
• #000000 = أسود
• #cccccc = رمادي فاتح

---

2. 🟦 ألوان RGB

دي طريقة تانية نكتب بيها الألوان، بدل الأكواد بنحدد النسب بالأرقام.

cssCopy codecolor: rgb(255, 0, 0);   /* أحمر */
color: rgb(0, 255, 0);   /* أخضر */
color: rgb(0, 0, 255);   /* أزرق */

كل رقم بيبدأ من 0 لحد 255، واللي بيزيد أكتر هو اللي بيسيطر على اللون.

ولو عايز تعمل لون شفاف شوية، استخدم rgba:

cssCopy codecolor: rgba(0, 0, 0, 0.5); /* أسود بنص شفافية */

---

3. 🎨 أسماء الألوان الجاهزة

في CSS فيه ألوان متسمية وجاهزة، تقدر تستخدمها على طول من غير أكواد:

cssCopy codecolor: red;
color: blue;
color: green;
color: darkgray;
color: lightblue;

بس الأفضل تشتغل بـ HEX أو RGB علشان الدقة وبتكون مرنة أكتر.

---

🧱 الخلفيات في CSS

---

🟡 background-color

دي بتغيرلك لون الخلفية لأي عنصر.

cssCopy codebody {
  background-color: #f5f5f5;
}

.card {
  background-color: lightblue;
}

---

🖼️ background-image

لو حابب تحط صورة كخلفية لعنصر معين:

cssCopy codebody {
  background-image: url("background.jpg");
}

تقدر تتحكم كمان في:

• حجم الصورة
• هل تكرر ولا لأ
• مكانها فين

مثال:

cssCopy codebody {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

---

🧪 تمرين بسيط

اعمل صفحة فيها عنصر div وخلي لونه رمادي، وجواه عنوان بلون أزرق، وخلفية فيها صورة:

htmlCopy code<div class="box">
  <h1>عنوان</h1>
</div>

cssCopy code.box {
  background-color: #eee;
  background-image: url("bg.jpg");
  background-size: cover;
  padding: 40px;
}

h1 {
  color: #0066cc;
}