|
|
|
عند تطوير صفحات الويب، نحتاج أحيانًا إلى التحكم في أجزاء صغيرة من النص داخل عنصر أكبر، وهنا يأتي دور عنصر <span>، إلى جانب مجموعة من خصائص CSS التي تضبط مظهر النصوص بدقة.
|
|
عنصر <span>: غير دلالي لكنه مفيد
|
|
|
عنصر <span> هو عنصر غير دلالي (non-semantic)، أي أنه لا يحمل أي معنى خاص للمحتوى الذي يحتويه، ولا يضيف أي نمط افتراضي.\
المتصفح لا يفهم محتوى <span> على أنه عنوان أو فقرة أو اقتباس، بل يراه مجرد حاوية للنص.
|
|
|
لذلك، يُفضل استخدام العناصر الدلالية (semantic) مثل <strong>, <em>, <mark> عندما يكون المحتوى له معنى واضح.\
لكن إن لم تجد عنصرًا دلاليًا مناسبًا، فإن <span> هو الخيار الأمثل لتطبيق أنماط CSS على جزء معين من النص.
|
|
|
ومن المهم عند استخدام <span> أن تُرفقه بـ أسماء أصناف (class names) واضحة ومفيدة، لتسهيل فهم الكود وصيانته لاحقًا.
|
|
خصائص CSS المرتبطة بالنصوص
|
|
1. text-transform: التحكم في حالة الأحرف
|
|
|
تُستخدم خاصية text-transform لتغيير شكل الأحرف في النص:
|
|
- uppercase: تحويل كل الأحرف إلى أحرف كبيرة.
- lowercase: تحويلها إلى أحرف صغيرة.
- capitalize: جعل الحرف الأول من كل كلمة كبيرًا.
|
|
|
هذه الخاصية مفيدة جدًا في التحكم بمظهر العناوين أو الأزرار.
|
|
2. border-radius: تدوير الزوايا
|
|
|
خاصية border-radius تُستخدم لتدوير زوايا العناصر، مما يمنحها مظهرًا أكثر نعومة.\
مثال:
|
|
|
|
|
3. تنظيم الأنماط المشتركة
|
|
|
عند وجود عناصر تشترك في أنماط معينة، من الأفضل تخزين هذه الأنماط في صنف عام (generic class)، ثم تخصيص الفروقات في أصناف فرعية.
|
|
|
مثال:
|
|
|
|
|
|
هذا الأسلوب يُسهل إعادة استخدام الأنماط ويجعل الكود أكثر تنظيمًا.
|
|
خلاصة
|
|
|
عنصر <span> هو أداة قوية لتطبيق أنماط CSS على أجزاء محددة من النص، رغم أنه لا يحمل معنى دلاليًا. وعند استخدامه مع خصائص مثل text-transform, border-radius, وclass المنظمة، يمكنك بناء واجهات أنيقة وسهلة القراءة.
|
|
التعليقات