فهم أساسيات CSS: تنسيق النصوص، العناصر الدلالية، وأدوات المطور - الدرس #14

التحكم في وزن الخط باستخدام font-weight

خاصية font-weight تُستخدم لتحديد مدى سمك الخط في النصوص. على سبيل المثال:

• font-weight: bold تجعل النص يظهر بخط عريض، لكنها لا تضيف أي معنى دلالي للنص. أي أنها مجرد تنسيق بصري.
• font-weight: normal تعيد النص إلى الوزن الطبيعي، أي بدون تنسيق عريض.

من المهم أن نستخدم هذه الخاصية فقط عندما نريد تغيير مظهر النص، وليس عندما نريد التعبير عن أهمية أو تأكيد معنوي.

عنصر <strong>: المعنى قبل الشكل

عنصر <strong> في HTML يُستخدم لإبراز أهمية أو تأكيد معنوي لمحتوى النص، وليس فقط لجعله عريضًا. صحيح أن المتصفحات تعرضه عادةً بخط عريض، لكن هذا يمكن تغييره باستخدام CSS:

لذلك، لا ينبغي استخدام <strong> فقط لجعل النص عريضًا. استخدمه عندما تريد أن توصل معنى "مهم" أو "بارز" للمستخدم أو لمحركات البحث.

كتابة الكود بشكل صحيح: الفاصلة المنقوطة والأقواس

عند كتابة تعليمات CSS، من الضروري اتباع القواعد النحوية الصحيحة:

• دائمًا أنهِ كل تعليمة بفاصلة منقوطة ;. هذا يمنع الأخطاء ويساعد المتصفح على تفسير الكود بشكل صحيح.
• لا تنسَ إغلاق القوس {} بعد الانتهاء من مجموعة التعليمات داخل الكلاس أو العنصر.

مثال صحيح:

فهم الـ Cascade في CSS

الـ Cascade هو نظام في CSS يحدد أي تعليمة يتم تطبيقها عندما يكون هناك أكثر من تعليمة لنفس الخاصية على نفس العنصر. القاعدة الأساسية هي:

• آخر تعليمة يتم قراءتها هي التي تُطبق، ما لم تكن هناك عوامل أخرى تؤثر مثل الخصوصية (specificity) أو الأهمية (importance).

مثال:

في هذا المثال، سيكون لون النص في الفقرة هو الأحمر، لأن هذه التعليمة جاءت لاحقًا.

الخصوصية (Specificity): سنتعلمها لاحقًا

الخصوصية هي مبدأ مهم في CSS يحدد أي تعليمة لها الأولوية عندما تتعارض عدة تعليمات. سنتناول هذا الموضوع لاحقًا، لكنه يلعب دورًا كبيرًا في كيفية تطبيق التنسيقات.

استخدام أدوات المطور (DevTools)

عندما لا يعمل شيء كما هو متوقع في صفحة الويب، فإن أدوات المطور (DevTools) هي صديقك الأفضل. يمكنك الوصول إليها بسهولة:

• انقر بزر الفأرة الأيمن على أي جزء من الصفحة، ثم اختر "Inspect" أو "Inspect Element".

هذه الأدوات تتيح لك:

• رؤية الكود المصدري للصفحة.
• تعديل CSS مباشرة وتجربة التغييرات.
• معرفة سبب عدم تطبيق تنسيق معين.
• تتبع الأخطاء في JavaScript أو الشبكة.