21/02/2024
تعلم أساسيات HTML

الدرس السابع عشر – شرح السمة class والسمة id فى HTMl والفرق بينهما

سنقوم بشرح السمة class والسمة id فى HTMl بالتفصيل باللغة العربية وتوضيح الفرق بيهما ومتى نستخدم السمة class ؟ ومتى نستخدم السمة id ؟


السمة class فى HTML

يمكن اسخدام السمة class فى أى عنصر من عناصر HTML ، حيث يمكن اضافة نفس ال class إلى أكثر من عنصر. من الشائع استخدام السمة class لتصنيف العنصر فى تنسيقات CSS ، ويستخدم أيضا فى ال JavaScript للوصول للعناصر والتلاعب بها باستخدام class محدد.

فى المثال التالى لدينا ثلاث عناصر div تم اضافة السمة class إليهم جميعا بالاسم city . كل هذه العناصر سوف يتم تنسيقهم بالتساوى باختيارهم عن طريق city. فى التصميم الموجود فى القطاع head باستخدام أكواد CSS :

 <!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html> 

فى المثال التالى لدينا عنصرين span تم اضافة اليهم السمة class باسم note . وكما فعلنا فى المثال السابق كلا العنصرين سيتم تنسيقهم بالتساوى باختيارهم باستخدام note. فى أكواد التصميم الموجودة فى القسم head بأكواد CSS :

 <!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html> 

وكذلك يمكن استخدام السمة class على أى عنصر من عناصر HTML ولكن يجب أن تعرف أن اسم ال class لابد أن يكون مكتوب بنفس الطريقه. بمعنى أنه case sensitive أى حساس إلى الحرف الكبيرة والصغيرة.

صيغة كتابة السمة class

لاختيار العناصر التى بها السمة class فى أكواد CSS نكتب نقطة (.) متبوعة باسم ال class ثم تنسيقات CSS بعدها داخل { } .

ولإضافة أكثر من Class لنفس العنصر يتم الفصل بينهم بمسافة. فى المثال التالى العنصر الأول h2 تم إضافة السمة class بـ الاسم city وأيضا بالاسم main ، حيث يتم تطبيق التنسيقات الخاصة بالاسمين عليه:

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

ويمكن اضافة نفس ال class لعناصر من أنواع مختلفة كما فى المثال التالى:

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

استخدام السمة class فى أكواد Javascript

فى المثال التالى سنقوم باختيار العناصر طبقا لاسم ال class حيث الاسم city :

 <script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script> 

السمة id فى HTML

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

صيغة كتابة السمة id

لاستخدام السمة id فى أكواد CSS نقوم بكتابة # متبوعة باسم id ثم تكتب أكواد التنسيق داخل القوسين { } .

كما فى المثال التالى لدينا العنصر h1 مضاف إليه السمة id بالاسم myHeader حيث سيتم تنسيقه باستخدام أكواد CSS فى القسم head وسنقوم باختياره بـ #myHeader :

 <!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html> 

لاحظ أيضا أن السمة id حساسة للحروف الصغيرة والكبيرة case sensitive ، ولابد أن يحتوى الاسم على حرف واحد على الأقل ، ولا يمكن أن تبدأ بأرقام ، وأيضا لا يمكن كتابة مسافات فيها.

استخدام السمة id لعمل رابط قفز

كما فى المثال التالى سنقوم بعمل رابط قفز باستخدام السمة id بحيث عن النقر على الرابط سيتم نقل المستخدم مباشرة للعنصر h2 الخاص بالعنوان :

<h2 id="C4">Chapter 4</h2>

ثم نقوم بعمل رابط القفز نفسه ويجب أن يكون فى نفس الصفحة كالتالى:

 <a href="#C4">Jump to Chapter 4</a> 

أو إذا كان فى صفحة أخرى نستخدم الكود التالى:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

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

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

 <script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script> 

الفرق بين السمة class والسمة id فى HTML

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

<style>
/* "myHeader" والتى لها الاسم id تنسيق العنصر بالسمة */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/*  "city" باسم class تنسيق كل العناصر التى تحتوى على السمة */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- باسم فريد من نوعه id عنصر له السمة -->
<h1 id="myHeader">My Cities</h1>

<!-- class عناصر متعددة لها نفس اسم السمة -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →