طرق الربط، المحددات، الألوان، الخطوط، ونموذج الصندوق Box Model
إذا كانت لغة HTML5 تمثل الهيكل العظمي لصفحة الويب، فإن لغة صفحات الأنماط الانسيابية CSS3 تمثل المظهر الجمالي والأناقة البصرية لكافة عناصر الموقع. في هذا الدرس، نستكشف أساليب ربط قواعد CSS بمستند الويب، ونتعرف على أنواع المحددات المختلفة (العناصر، الفئات، والمعرفات)، ونتعمق في فهم نموذج الصندوق Box Model للتحكم في الهوامش والحدود والمساحات الداخلية بدقة متناهية.
1. مفهوم لغة CSS3 وطرق ربطها بصفحة الويب
لغة CSS (Cascading Style Sheets) مسؤولة عن فصل التصميم والمظهر الخارجي عن بنية المحتوى النصي. تتوفر ثلاث طرق قياسية لتطبيق أنماط CSS :
| طريقة التطبيق | مكان الكتابة | الأفضلية والاستخدام |
|---|---|---|
| الأنماط الخارجية (External CSS) | ملف منفصل بامتداد .css يُربط بالوسم <link rel="stylesheet" href="style.css"> داخل <head> |
الأفضل والأكثر احترافية؛ لأن تعديل ملف واحد ينعكس على مئات الصفحات بموقع الويب بالكامل. |
| الأنماط الداخلية (Internal CSS) | تُكتب داخل الوسم <style> ... </style> داخل وسم الرأس <head> |
تُستخدم لتنسيق صفحة واحدة محددة دون غيرها. |
| الأنماط المضمنة (Inline CSS) | تُكتب مباشرة داخل الوسم باستخدام الخاصية style="..." |
تُستخدم لتنسيق عنصر وحيد منفرد، ولا يُنصح بها في المشاريع الكبرى لأنها تعقد صيانة الكود. |
2. محددات CSS الأساسية (CSS Selectors)
المحدد (Selector) هو الجزء الذي يوجه المتصفح لاستهداف العنصر المراد تطبيق التنسيق عليه :
- محدد العنصر (Element Selector) : يستهدف كل وسوم نوع معين في الصفحة مباشرة :
p { color: #1e3a8a; font-size: 16px; }(يطبق على جميع الفقرات). - محدد الفئة (Class Selector) : يبدأ بنقطة
.ويُستخدم لتطبيق تنسيق مشترك على عدة عناصر مختلفة :
.highlight { background-color: #fef08a; font-weight: bold; } - محدد المعرف (ID Selector) : يبدأ بعلامة الشباك
#ويُستخدم لاستهداف عنصر وحيد فريد لا يتكرر في الصفحة :
#main-nav { background-color: #0f172a; height: 60px; }
3. نموذج الصندوق في CSS (The Box Model)
يتعامل متصفح الويب مع كل عنصر HTML على أنه صندوق مستطيل يتكون من أربع طبقات متداخلة من الداخل إلى الخارج :
1. المحتوى (Content)
النص أو الصورة أو المكون الفعلي وتُحدد أبعاده بـ width وheight.
2. الحشوة الداخلية (Padding)
المساحة الشفافة الفاصلة بين المحتوى والحد الخارجي للعنصر.
3. الإطار أو الحد (Border)
الخط المحيط بالحشوة والمحتوى، ويحدد بـ width وstyle وcolor.
4. الهامش الخارجي (Margin)
المسافة الفارغة التي تفصل الصندوق الحالي عن العناصر المجاورة المحيطة به.
أنشطة تطبيقية على CSS3
.class يمكن تكرار استخدامه على عدد غير محدود من العناصر المختلفة في نفس الصفحة لمشاركتها نفس التصميم، بينما محدد المعرف #id يجب أن يكون فريداً تماماً ومخصصاً لعنصر واحد فقط في الصفحة بأكملها.
margin، بينما إذا أردنا إبعاد النص عن إطار الصندوق من الداخل نعدل الحشوة padding.
اضغط على أي بطاقة لاكتشاف المعنى الدقيق، واضغط على أيقونة الصوت للاستماع للنطق:
اضغط على الإجابة لتتحقق من فهمك وتكتشف التفسير النموذجي فورياً: