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

ما هي خاصية id؟

خاصية id (اختصار لكلمة "identifier" أي "معرّف") تُستخدم لإعطاء اسم فريد لعنصر معين في الصفحة. هذا الاسم يُمكن استخدامه لاحقًا في ملفات CSS لتنسيق العنصر، أو في JavaScript للتفاعل معه برمجيًا.

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

1. القيمة يجب أن تكون فريدة: لا يجوز تكرار نفس قيمة id لأكثر من عنصر في نفس الصفحة.كل عنصر يجب أن يحمل id مختلفًا عن الآخرين.
2. لا يجوز تكرار نفس قيمة id لأكثر من عنصر في نفس الصفحة.
3. كل عنصر يجب أن يحمل id مختلفًا عن الآخرين.
4. اختيار اسم id: يمكنك اختيار أي اسم تريده، لكن يُفضل استخدام أحرف إنجليزية وأرقام فقط.من الأفضل استخدام الشرطة الوسطى - للفصل بين الكلمات (مثل: main-header).تجنب استخدام الرموز الخاصة أو المسافات.
5. يمكنك اختيار أي اسم تريده، لكن يُفضل استخدام أحرف إنجليزية وأرقام فقط.
6. من الأفضل استخدام الشرطة الوسطى - للفصل بين الكلمات (مثل: main-header).
7. تجنب استخدام الرموز الخاصة أو المسافات.

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

لإضافة تنسيق (style) لعنصر معين باستخدام id، نستخدم ما يُعرف بـ المُحدد بواسطة id أو id selector.

الطريقة:

في هذا المثال، يتم تطبيق اللون الأزرق وحجم الخط 24 بكسل على العنصر الذي يحمل id="main-header".

ملاحظة مهمة: لا تنسَ استخدام الرمز # قبل اسم id عند كتابة التنسيق في CSS. بدون هذا الرمز، لن يعمل التحديد.

الفرق بين محدد id ومحدد النوع (type selector):

• محدد id: يستهدف عنصرًا واحدًا فقط بناءً على قيمة id الخاصة به.
• محدد النوع: يستهدف جميع العناصر من نوع معين، مثل جميع عناصر <h2> في الصفحة.

مثال على محدد النوع:

هذا الكود سيجعل جميع عناوين <h2> في الصفحة باللون الأخضر.

خلاصة:

• استخدم id لتحديد عنصر فريد في الصفحة.
• تأكد من أن قيمة id لا تتكرر.
• استخدم الرمز # في CSS لاستهداف العنصر بواسطة id.
• استخدم أسماء واضحة ومنظمة لتسهيل قراءة الكود وصيانته.