استخدام id و class

By

استدعاء تصميم خاص class أو id


تحدثنا في الدرس السابق بأننا يمكننا استخدام (المنتقى) وهو وسم HTML لإجراء تعديل كامل على ذلك الوسم أو المنتقى في جميع صفحات HTML شاهد هذا المثال :

h1 { color:red; text-align:center; }


هذا المثال يعني أن كل وسم عنوان كبير معرّف بالوسم h1 في صفحة الويب سيطبق عليه اللون الأحمر والمحاذاة في الوسط أي اذا لدي في صفحة الويب 5 عناوين كبيرة سيطبق عليها هذا التصميم ولكن ماذا لو أردت أن أجعل 4 عناوين باللون الأحمر وواحد باللون الأزرق , ماذا يجب أن أفعل ؟

باستخدام لغة CSS يمكنك تطبيق تصميم معين على وسم معين في صفحة الويب وذلك باستخدام خاصية الاستدعاء class و id حيث تمكنك هاتين الخصيصتين من استدعاء تصميم معين وباسم فريد أنت اخترته .

شاهد هذا المثال :

h1 { color: red; }
.heading { color: blue; }


في هذا المثال نعني به بأن جميع العناوين في صفحة الويب التي تحمل وسم h1 ستأخذ اللون الأحمر بينما الآخر سيأخذ اللون الأزرق وعلى الرغم ان heading ليس بوسم الا أنه اسم فريد يمكنني استدعائه بأي وسم أريد ويجب استدعائه من خلال وسوم HTML كالتالي :
<h1 class=”heading”>هذا عنوان أزرق</h1>

<p class=”heading”>هذه فقرة زرقاء</p>


ولكن السؤال أيهما أفضل class أو id ومتى يمكن استخدامهم؟


استخدام id


يمكن استخدام id لتطبيق تصميم معين على وسم HTML فريد و يستخدم id مع وسم واحد فقط

يجب اضافة "#" الى الاسم الذي تريد تطبيق التصميم عليه واستدعائه من خلال اللاحقة id في وسم HTML

في المثال التالي استخدمنا اسم "para1" لتطبيق تصميم على وسم معين

#para1{

text-align:center;

color:red;

}


ملاحظة : عند استدعاء الاسم كلاحقة في الوسم فقط أضف الاسم ولا تضيف # الى القيمة أي

<h1 id="para1"></h1>


لاتبدأ الاسم عند استخدام id برقم لأنه لن يعمل على متصفح الفايرفوكس Mozilla/Firefox


استخدام class


يمكن استخدام class للتطبيق على وسم او مجموعة وسوم وهو بعكس id الذي يمكن تطبيقه على وسم واحد فقط .

يسمح لك class باستخدام تصميم معين وتطبيقه مرات عديدة حسب الحاجة

يجب اضافة نقطة "." الى الاسم الذي تريد تطبيق التصميم عليه واستدعائه من خلال اللاحقة class في وسم HTML

في المثال التالي جميع العناصر التي تستخدم الاسم واللاحقة class="center" سيطبق عليه المحاذاة في الوسط
.center {text-align:center;}



p.center {text-align:center;}


يمكنك أيضاً تخصيص وسم معين سيتم تطبيق هذا التصميم عليه فقطفي المثال التالي جميع الفقرات / مواضيع التي تستخدم الاسم واللاحقة class="center" سيطبق عليه المحاذاة في الوسط

لاتبدأ الاسم عند استخدام class برقم لأنه مدعوم فقط من متصفح الاكسبلورر Internet Explorer



ليست هناك تعليقات:

إرسال تعليق