فهم خاصية class في HTML واستخدامها في CSS - الدرس #22

ما هي خاصية class؟

خاصية class تُستخدم لتحديد عنصر أو مجموعة من العناصر التي تشترك في نفس السلوك أو التنسيق. على عكس خاصية id، يمكن تكرار نفس قيمة class في أكثر من عنصر داخل الصفحة، بل إن إعادة استخدام الكلاسات أمرٌ مُستحب.

قواعد استخدام خاصية class:

1. القيمة يمكن أن تتكرر: يمكن استخدام نفس اسم class في عدة عناصر.هذا يسمح بتطبيق نفس التنسيق أو السلوك على مجموعة من العناصر دفعة واحدة.
2. يمكن استخدام نفس اسم class في عدة عناصر.
3. هذا يسمح بتطبيق نفس التنسيق أو السلوك على مجموعة من العناصر دفعة واحدة.
4. اختيار اسم class: يمكن أن يكون الاسم أي شيء، لكن يُفضل استخدام أحرف إنجليزية وأرقام فقط.يُنصح باستخدام الشرطة الوسطى - للفصل بين الكلمات (مثل: card-title).تجنب استخدام أسماء تصف الشكل فقط (مثل: red-text) وبدلاً من ذلك استخدم أسماء تصف المحتوى أو الوظيفة (مثل: error-message).
5. يمكن أن يكون الاسم أي شيء، لكن يُفضل استخدام أحرف إنجليزية وأرقام فقط.
6. يُنصح باستخدام الشرطة الوسطى - للفصل بين الكلمات (مثل: card-title).
7. تجنب استخدام أسماء تصف الشكل فقط (مثل: red-text) وبدلاً من ذلك استخدم أسماء تصف المحتوى أو الوظيفة (مثل: error-message).

استخدام class في CSS:

لإضافة تنسيق لعناصر تحمل نفس class، نستخدم ما يُعرف بـ مُحدد الكلاس أو class selector.

الطريقة:

في هذا المثال، سيتم تطبيق التنسيق على جميع العناصر التي تحتوي على class="card-title".

ملاحظة مهمة: عند استخدام الكلاس في CSS، يجب كتابة النقطة . قبل اسم الكلاس. بدون هذه النقطة، لن يعمل التحديد.

الفرق بين محدد id ومحدد class:

خلاصة:

• استخدم class لتطبيق نفس التنسيق أو السلوك على عدة عناصر.
• استخدم أسماء وصفية تعبر عن وظيفة العنصر وليس شكله.
• لا تنسَ استخدام النقطة . عند استهداف الكلاس في CSS.
• الفرق الأساسي بين id و class هو أن id فريد، بينما class يمكن تكراره.