الدرس 17 · الوحدة 6: تنسيق صفحات الويب باستخدام CSS
الألوان والخلفيات
نلوّن النصوص والخلفيات، ونضع الصور خلف المحتوى بطريقة مقروءة. ⏱ نحو 20 دقيقة.
بعد هذا الدرس ستستطيع أن:
- تكتب اللون بالاسم و
HEXوRGBوRGBA. - تغيّر لون النص ولون الخلفية مع مراعاة التباين.
- تضع صورة خلفية تغطي المساحة.
- تضيف طبقة تعتيم، وتستخدم
opacity.
١أربع طرق لكتابة اللون
<p class="a">اسم اللون</p><p class="b">شفرة HEX</p><p class="c">قيمة RGB</p><p class="d">RGBA: شفاف قليلًا</p>
.a { color: white; background-color: teal; }.b { color: white; background-color: #1D5FB4; }.c { color: white; background-color: rgb(46, 139, 58); }.d { color: white; background-color: rgba(224, 122, 31, 0.5); }
| الطريقة | مثال | ملاحظة |
|---|---|---|
| اسم | red، teal | نحو 140 اسمًا جاهزًا. سهلة لكنها محدودة. |
| HEX | #1D5FB4 | الأشهر؛ تنسخها من أدوات التصميم مثل Figma. |
| RGB | rgb(29, 95, 180) | أحمر وأخضر وأزرق، كل منها من 0 إلى 255. |
| RGBA | rgba(29, 95, 180, 0.5) | الرقم الرابع الشفافية: 0 شفاف تمامًا و 1 معتم. |
٢لون النص ولون الخلفية
color للون النص، و background-color للون الخلفية. وتذكّر قاعدة التباين من الدرس 2: نص فاتح على خلفية غامقة أو العكس.
<div class="alert">تم حفظ طلبك بنجاح</div><div class="error">رقم الجوال غير صحيح</div>
.alert { color: #145A2C; background-color: #DFF0E6; padding: 10px;}.error { color: #AE2E2E; background-color: #F8E0E0; padding: 10px;}
رسائل النجاح والخطأ في أغلب المواقع بهذا الأسلوب: نص غامق على خلفية فاتحة من اللون نفسه.
٣صورة في الخلفية
<div class="hero"> <h2>صباحك قهوة</h2></div>
.hero { background-image: url(images/coffee.svg); background-size: cover; background-position: center; height: 200px; color: white; padding: 20px;}
| الخاصية | قيمها الشائعة |
|---|---|
background-image | url(images/x.jpg): مسار الصورة. |
background-size | cover: تغطي المساحة كلها (قد يُقص جزء)، contain: تظهر كاملة. |
background-position | center أو top أو right. |
background-repeat | no-repeat لمنع تكرار الصورة الصغيرة. |
النص الأبيض على صورة فاتحة غير واضح! الحل في القسم التالي.
٤طبقة تعتيم فوق الصورة
نضع تدرّجًا شفافًا فوق الصورة، فيبقى النص واضحًا على أي صورة. نكتب الطبقتين في background واحدة مفصولتين بفاصلة، والأولى تكون في الأعلى:
<div class="hero"> <h2>صباحك قهوة</h2> <p>اطلب الآن واستلم خلال 20 دقيقة.</p></div>
.hero { background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(images/coffee.svg) center / cover; height: 200px; color: white; padding: 20px;}
٥الشفافية opacity
opacity تجعل العنصر كله شفافًا (نصه وخلفيته)، بخلاف rgba التي تجعل اللون فقط شفافًا:
<button class="off">غير متاح</button><button class="on">متاح</button>
button { background: #1D5FB4; color: white; padding: 8px 16px; border: 0; }.off { opacity: 0.4; }
توقّع وتحقّق
أي خاصية تغيّر لون النص؟
color للنص.في rgba(0, 0, 0, 0.5) ماذا يعني 0.5؟
الرقم الرابع للشفافية.
صورة خلفية تغطي المساحة كلها:
cover.الفرق بين opacity و rgba:
opacity على كل شيء.الخلاصة
- اللون: اسم، أو #
HEX، أوrgb()، أوrgba()مع شفافية. colorللنص، وbackground-colorللخلفية.background-image: url()معbackground-size: cover.- طبقة تعتيم: تدرّج
rgbaقبل الصورة فيbackground. opacityتشف العنصر كله.
تحدٍّ برمجي: واجهة رئيسية بصورة
متوسطنسّق القسم الرئيسي hero في صفحة المقهى: صورة خلفية مع طبقة تعتيم ونص أبيض، ثم صندوق تنبيه.
المطلوب:
- .hero خلفيته الصورة
images/coffee.svgوتغطي المساحة(cover). - طبقة تعتيم بتدرّج شفاف rgba فوق الصورة.
- لون نص .hero أبيض.
- ارتفاع .hero 220px.
- صندوق .note نصه #145A2C وخلفيته #DFF0E6.
👀 اعرض شكل الناتج المطلوب
✓ التحقق الآلي من حلّك:
- خلفية .hero فيها صورة.
- الصورة تغطي المساحة
(cover). - طبقة تعتيم بتدرّج rgba.
- نص .hero أبيض.
- ارتفاع .hero 220px.
- صندوق .note بالألوان المطلوبة.
💡 تلميح 1
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/coffee.svg) center / cover;💡 تلميح 2
الطبقة الأولى في القائمة هي العليا.
حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<div class="hero"> <h1>مقهى بُنّ</h1> <p>قهوة مختصة تُحمَّص كل صباح</p></div><p class="note">جديد: قهوة باردة بالهيل!</p>
.hero { padding: 20px; height: 220px; color: white; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/coffee.svg) center / cover;}.note { color: #145A2C; background-color: #DFF0E6; padding: 10px;}