2- CSS : الهوية و التصنيف

بسم الله الرحمن الرحيم

سنتحدث عن مجموعة من المحتويات الهامة فى تنسيق و تنظيم اللغة أثناء إستخدامها

الهوية id ما هى ؟؟

هى عبارة عن إسم يتم إختياره للعناصر و يكون لكل عنصر اسم هوية id خاص به لا يمكن أن يتكرر .. و اسم الهوية هو Selector

واسم الهوية يتم إدراجه فى لغة HTML / XML كصفة أو سمة .. لاحظ المثال التالى 

لدينا عنصر HTML كالتالى

<p id="main">مدونة عالم نت</p> 

لاحظت أنه تم وضع اسم الهوية id فى صورة سمة ..( للتعرف على السمات راجع الدرس الرابع HTML : السمات أو Attributes )

لعمل ملف CSS الخاص به نسنخدم اسم الهوية id كالتالى و يوضع قبله علامة #

#main {

      color: red ;

      text-align: left;

      background: yellow;

} 

 فيكون الناتج كالتالى

مدونة عالم نت

ماذا إن كان لدينا مجموعة من العناصر نريد أن نجعل لها نفس ملف CSS .. بحيث لا يمكن أن يتكرر اسم الهوية id أبدا .

فلكل نصر يكون اسم هوية id يختلف عن الاخرين .. 

لذلك هناك مايسمى بالتصنيف أو Class  

ماهو التصنيف Class ؟؟ 

 هى تماما تشبه اسم الهوية id لكنها تكون لمجموعة من العناصر و تسمى Class و توضع قبله نقطة  .

لاحظ المثال التالى

<p class="main">مدونة عالم نت</p>

<p class="main">عالم نت</p>

يكون ملف CSS الخاص به كالتالى

.main {

    color: red;

    text-align: left;

} 

تكون كالتالى 

مدونة عالم نت

عالم نت

فبالتالى يكون كل عنصر من عناصر HTML يحتوى على كلمة main فى صورة class سوف يكون موقعه الى اليسار و أحمر اللون

 من الملاحظات الهامة أثناء إختيارك إسم المجموعة Class .. لا تبدأ الاسم برقم .. لأن بعض التصفحات لا تدعم هذا

هذا مثال يجمع اسم الهوية id و المجموعة class معا

 <p class="main"  id="main2>مدونة عالم نت</p>

 <p class="main"  id="main3">عالم نت</p>

 ملف CSS الخاص به :

.main {color: red; text-align: left;}

#main2 {background: yellow;}

#main3 {background: green;}

الناتج يكون :>>

مدونة عالم نت

 عالم نت