HTML class & Id Attribute

-

في هذه المقالة، بنتعرف على class & Id في HTML، بالإضافة الى كيفية تنفيذها من خلال الأمثلة. وشو هي الفائدة منهم.وبشكل عام كلاهما بنستفيد منهم عند تطبيق الخصائص على elements لكن اكيد في التنفيذ في فرق.

تمام نبدأ ب  class Attribute

class هي attribute لجميع HTML element تستخدم لتحديد class في CSS بهدف تطبيق مجموعة من الخصائص. ويمكن الوصول الى   element  عن طريق JavaScript باستخدام class name

وحتي نفهم الموضوع نطبق المثال التالي في صفحة HTML 


<!DOCTYPE html>
<head>
  <style>
.Wisdomh2 {
  background-color: rgb(168, 165, 164);
  color: white;
  border: 2px solid black;
}
.WisdomP {
  background-color: rgb(172, 95, 82);
  color: white;
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
}
  </style>
</head>
<html>
<body dir="rtl">
<div>
  <h2 class="Wisdomh2" >حكم وامثال</h2>
  <p class="WisdomP"> ستظل تكرر نفس أخطاءك في الحياة إذا لم تتعلم منها.
 </p>
  <p>العديد من حالات الفشل في الحياة هم أشخاص لم يدركوا مدى قربهم من النجاح عندما استسلموا.
</p>
</div> 
</body>
</html>

شغل الصفحة والنتيجة بتكون

تمام نفهم الكود: 

عرفنا 2 class الأول باسم Wisdomh2 والثاني باسم WisdomP. وبعدها مجموعة من الخصائص لكل class 

 لاحظ ان class يبدأ ب .

بعد هيك في HTML Element طبقنا الكود: 

<h2 class="Wisdomh2" >
حكم وامثال
</h2>

لاحظ ان h2> tag> يحتوي على attribute باسم class تم ربطها مع css class باسم Wisdomh2

ونفس الكلام تم تطبيقه على p> tag> 

ملاحظات :

  • class attribute تستخدم مع جميع HTML element 
  • CSS class name هي case sensitive  بمعني يجب ان تكون الاسم في CSS مطابق للاسم في class attribute 
  • يمكن تطبيق اكثر من class name على نفس  element HTML  
  • يمكن تطبيق نفس class name على اكثر من HTML element 


HTML id Attribute

الهدف من Id هو إعطاء  unique id ل Html element، بحيث نقدر نتعامل مع هذا HTML element باستخدام هذا Id ، واكيد لا يمكن إعطاء اكثر من Id لنفس Html element، واكيد كمان لا يمكن تطبيق نفس Id على اكثر من Html element في المستند الواحد.

من خلال هذا Id ممكن نطبق خصائص CSS على Element وممكن نوصل ل element من خلال هذا id باستخدام JavaScript 

تمام نطبق مثال حتي نفهم المقصود: 

<!DOCTYPE html>
<html>
<head>
<style>
#wisdomh2 {
  background-color: rgb(182, 71, 27);
  color: black;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>
<h2 id="wisdomh2" >حكم وامثال</h2>
</body>
</html>

النتيجة 



عرفنا id ل h2> tag> باسم wisdomh2 وفي Style عملنا مجموعة من الخصائص كمان باسم wisdomh2. بمجرد تعريف نفس الاسم في id و CSS بتم تطبيق الخصائص بشكل تلقائي . 
ملاحظة : في CSS للتعامل مع Id يجب ان يبدأ ب الرمز #، وفي حال ما اضفنا هذا الرمز فلن يتم تطبيق الخصائص حسب Id 

الفرق بين Class و Id 
  • مكن استخدام class name  مع عدة elements HTML ، بينما يجب استخدام Id مع element HTML واحد فقط داخل الصفحة. 
  • عند استخدام class name فيجب ربط CSS class مع Html element عن طريق class attribute ، لكن في id يتم الربط بشكل تلقائي حسب id