شرح المفهوم
يقدم هذا الدرس الفكرتين اللتين يعتمد عليهما كل ملف CSS: المحددات (selectors) والتتالي (cascade). سترى كيف تصل القاعدة إلى عنصر، ولماذا تفوز إحدى التصريحات على الأخرى، وكيف يمكن لتغييرات الأنماط الصغيرة أن تؤثر على صفحة بأكملها. بدلاً من حفظ النظرية بمعزل عن التطبيق، ستقوم بتنسيق صفحة صغيرة وتلاحظ النتيجة بعد كل تعديل. بحلول النهاية، ستكون مرتاحًا لقراءة مجموعة قواعد بسيطة، والتنبؤ بالأنماط التي سيتم تطبيقها، وإجراء تغييرات صغيرة دون تخمين.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع قواعد الأنماط في محددات الفئات القابلة لإعادة الاستخدام.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- غيّر خاصية واحدة في قاعدة `body` ولاحظ الأجزاء التي تتحدث تلقائيًا في الصفحة.
- أضف قاعدة لـ `h1` أو `p`، ثم قارنها بالأنماط الموروثة من `body`.
- أنشئ قاعدة ثانية تستهدف نفس العنصر ولاحظ أي تصريح يفوز.
- دوّن مثالًا واحدًا متى تجعل الأنماط الأساسية المشتركة الصفحة أسهل في الصيانة.
دليل خطوة بخطوة
- ابدأ بصفحة تحتوي على عنوان وفقرة، ثم طبق CSS المبدئي تمامًا كما هو مكتوب.
- لاحظ أي الخصائص موروثة من `body` وأيها يجب التصريح بها مباشرة على كل عنصر.
- أضف قاعدة جديدة للعنوان وتوقع النتيجة قبل تحديث الصفحة.
- أنشئ تصريحًا متعارضًا عمدًا لترى كيف يقرر التتالي النمط النهائي.
- اختتم بتلخيص أي قاعدة كانت عامة، وأي قاعدة كانت محددة، ولماذا يهم هذا التمييز.
تمارين تطبيقية
- نسّق مقالًا قصيرًا يحتوي على عنوان وفقرة ورابط باستخدام محددات العناصر فقط.
- أنشئ نسخة ثانية حيث يحدد `body` الطباعة الأساسية وتتعامل القواعد الفردية مع التركيز.
- أنشئ مثالًا صغيرًا يثبت الوراثة عن طريق تغيير لون النص في مكان واحد.
تحديات برمجية
- اكتب قاعدتين متنافستين لنفس العنصر واشرح لماذا النتيجة النهائية صحيحة.
- أعد هيكلة ورقة أنماط مبدئية فوضوية إلى أنماط أساسية أوضح بالإضافة إلى بعض التجاوزات المركزة.
مهام تمرين صغيرة
- أضف قاعدة واحدة تغير التباعد، لا اللون.
- اكتب ملاحظة من سطر واحد تشرح ما يفعله التتالي.
- اختبر تعديلًا صغيرًا واحدًا وتأكد من العناصر التي تغيرت.
خطأ شائع
Skipping input validation or mixing logic/output in one unstructured block.
تحدٍ مصغّر من الواقع
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.