شرح المفهوم
هذا الدرس هو تدريب عملي على كتابة قواعد CSS الأساسية بوضوح واتساق. الهدف ليس بناء مكون كامل بعد، بل التعود على بنية المحدد (selector) والخاصية (property) والقيمة (value). ستتدرب على إجراء تعديلات مقصودة، والتحقق من النتيجة المرئية، والحفاظ على قواعدك قابلة للقراءة. يتعلم المبتدئ الذي يستطيع كتابة قواعد صغيرة بثقة بشكل أسرع بكثير في دروس التخطيط والاستجابة اللاحقة.
أين تضع الكود
- ابدأ بالمتغيرات والمدخلات. ضع قواعد الأنماط في محددات الفئات (class selectors) القابلة لإعادة الاستخدام.
- أضف منطق المعالجة في القسم الأوسط.
- اختتم بالمخرجات والتحقق السريع.
مرجع الأوامر
- تدرب على تغيير خاصية واحدة في كل مرة ليكون تأثير كل تعديل واضحًا.
- أعد تسمية القواعد أو أعد تجميعها فقط بعد أن يعمل الإصدار الحالي كما هو متوقع.
- تحقق من المسافات والحدود وتصميم النص بشكل منفصل بدلاً من تغيير كل شيء دفعة واحدة.
- لاحظ مكانًا واحدًا حيث يحسن اسم محدد أوضح قابلية القراءة على الفور.
دليل خطوة بخطوة
- أنشئ بطاقة بسيطة في HTML وربطها بملف CSS الأولي.
- عدّل الهوامش الداخلية (padding) والحدود (border) أولاً لتتمكن من رؤية هيكل الصندوق بوضوح.
- اضبط أنماط العنوان والنص دون تغيير أسماء المحددات (selectors).
- ارتكب خطأً مقصودًا واحدًا في خاصية أو قيمة، ثم صححه بعد اكتشاف المشكلة.
- راجع ملف CSS النهائي وأزل أي شيء لا يساهم في تصميم البطاقة.
تمارين تطبيقية
- ابنِ صندوق إشعارات بعنوان ورسالة باستخدام نفس نمط كتابة القواعد.
- أنشئ نسخة ثانية من البطاقة بتغيير بعض القيم فقط، وليس الهيكل الكامل.
- أضف حالة تحويم (hover state) أو نمط تمييز دون جعل ورقة الأنماط (stylesheet) أصعب في القراءة.
تحديات برمجية
- اكتب بطاقتين مختلفتين بصريًا مع الحفاظ على سهولة تحديد القواعد المشتركة.
- حسّن ملف CSS الأولي بحيث يمكن لمبتدئ آخر مسحه ضوئيًا وفهمه بسرعة.
مهام تمرين صغيرة
- غيّر اسم محدد واحد إلى شيء أوضح.
- اختبر تعديلاً واحدًا للمسافات ولاحظ الفرق البصري.
- اكتب جملة واحدة تصف ما ينمطه ملف CSS الأولي.
خطأ شائع
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.