استخدام class& id مع css فى html5

كنا قد تحدثنا فى المشاركات السابقة عن كيفية التعامل مع css وتطبيقه على عناصر لغة Html
ولكن ماذا لو أردنا تطبيق تنسيقات معينة من تنسيقات css على بعض العناصر وتجاهل العناصر الأخرى.
فمثلا لو الصفحة بها العديد من الفقرات وأردنا تطبيق تنسيق معين على فقرة بعينها وتطبيق تنسيقات أخرى على باقى الفقرات فماهو الحل؟
هنا دعت الحاجة إلى استخدام id وclass

1- خاصية id

نقوم بإعطاء عنصر html اسم id مخصص ونلاحظ أنه لكل عنصر id واحد فقط ولا يمكن تكرار نفس id لأى عنصر اخر فى نفس الصفحة
عند تعريف id فى css يتم وضع علامة # قبل اسم id
مثال:

<head>
<style>
#p1{color:blue;
}
p{ color:red;
}
</style>
</head>
<body dir="rtl">
<p id="p1">حزمة برامج الأوفيس وهى حزمة برامج موجهة للمستخدم العادى وتخدمه فى جميع احتياجاته اليومية </p>
<p>أولا: برنامج micirosoft word: وهو برنامج مخصص لمعالجة الكلمات وتنسيقها</p>
<p>برنامج الاكسيل وهو برنامج مخصص للجداول الالكترونية والميزانيات</p>
</body>

نلاحظ هنا الآتى:-

تمت وضع علامة # قبل اسم Id
تم إعطاء الفقرة الأولى اسم id معين من خلال استخدام القاعدة id=""
تم تطبيق التنسيقات الخاصة بid على فقرة Id فقط وتم تطبيق التنسيقات الأخرى على باقى الفقرات.

ناتج المثال:

2- خاصية class

يمتاز الكلاس بأنه يمكن استخدام نفس الكلاس لأكثر من عنصر فى الصفحة الواحدة عكس id

وايضا يمكن استخدام أكثر من كلاس للعنصر الواحد

وعند تعريف الكلاس فى css يسبق اسم الكلاس بنقطة . فى حين كان يسيق اسم id بعلامة #

عند الرغبة فى تطبيق أكثر من كلاس على عنصر واحد نقوم بكتابة اسماء الكلاسات مع ترك مسافة فارغة بين الأسماء

مثال:

نلاحظ تم ترك مسافة بين اسماء الكلاسات

<head>

<style>

.p1{color:blue;

}

.p2{ background-color:lightblue;

border:2px solid green;

padding:10px;

}

p{ color:red;

}

</style>

</head>

<p class="p1 p2">حزمة برامج الأوفيس وهى حزمة برامج موجهة للمستخدم العادى وتخدمه فى جميع احتياجاته اليومية </p>

<p class ="p1">أولا: برنامج micirosoft word: وهو برنامج مخصص لمعالجة الكلمات وتنسيقها</p>

<p>برنامج الاكسيل وهو برنامج مخصص للجداول الالكترونية والميزانيات</p>

<p> برنامج الباوربوينت وهو مخصص للعروض التقديمية </p>

</body>

ناتج المثال

ملاحظة هامة

تم إلغاء العديد من الوسوم فى Html5 وكانت هذه الوسوم تستخدم من قبل فى الإصدارات السابقة مثل

الصفحات

أعلان الهيدر

القائمة