سمة فئة HTML
تُستخدم سمة HTML classلتحديد فئة لعنصر HTML.
يمكن لعناصر HTML المتعددة أن تشترك في نفس الفئة.
استخدام صفة الفئة
غالبًا ما تُستخدم classالسمة للإشارة إلى اسم فئة في ورقة أنماط. يمكن أيضًا استخدامه بواسطة JavaScript للوصول إلى العناصر ومعالجتها باستخدام اسم الفئة المحدد.
في المثال التالي لدينا ثلاثة <div>عناصر لها classصفة بقيمة "city". <div>
سيتم تصميم العناصر الثلاثة بالتساوي وفقًا .city
لتعريف النمط في قسم الرأس:
مثال
<!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". سيتم تصميم كلا <span>
العنصرين بشكل متساوٍ وفقًا .note
لتعريف النمط في قسم الرأس:
مثال
<!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.
ملاحظة: اسم الفئة حساس لحالة الأحرف!
نصيحة: يمكنك معرفة المزيد عن CSS في دروسنا في CSS .
بناء الجملة للفصل
لإنشاء فصل دراسي ؛ اكتب حرف نقطة (.) ، متبوعًا باسم فئة. بعد ذلك ، حدد خصائص CSS داخل الأقواس المتعرجة {}:
مثال
أنشئ فئة باسم "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>
فصول متعددة
يمكن أن تنتمي عناصر HTML إلى أكثر من فئة واحدة.
لتحديد فئات متعددة ، افصل بين أسماء الفئات بمسافة ، على سبيل المثال <div class = "city main">. سيتم تصميم العنصر وفقًا لجميع الفئات المحددة.
في المثال التالي ، <h2>ينتمي العنصر الأول إلى كل من
cityالفئة وأيضًا إلى mainالفصل ، وسيحصل على أنماط CSS من كلا الفئتين:
مثال
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
يمكن أن تشترك العناصر المختلفة في نفس الفئة
يمكن أن تشير عناصر HTML المختلفة إلى نفس اسم الفئة.
في المثال التالي ، كلاهما <h2>ويشيران <p>
إلى فئة "المدينة" وسيشتركان في نفس النمط:
مثال
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
استخدام سمة الفئة في JavaScript
يمكن أيضًا استخدام اسم الفئة بواسطة JavaScript لأداء مهام معينة لعناصر محددة.
يمكن لـ JavaScript الوصول إلى عناصر باسم فئة معين باستخدام getElementsByClassName()الطريقة:
مثال
انقر فوق الزر لإخفاء جميع العناصر التي تحمل اسم الفئة "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
لا تقلق إذا لم تفهم الكود في المثال أعلاه.
ستتعلم المزيد عن JavaScript في فصل HTML JavaScript ، أو يمكنك دراسة برنامج JavaScript التعليمي .
ملخص الفصل
- تحدد سمة HTML
classاسم فئة واحدًا أو أكثر لعنصر - يتم استخدام الفئات بواسطة CSS و JavaScript لتحديد عناصر محددة والوصول إليها
- يمكن
classاستخدام السمة على أي عنصر HTML - اسم الفئة حساس لحالة الأحرف
- يمكن أن تشير عناصر HTML المختلفة إلى نفس اسم الفئة
- يمكن لـ JavaScript الوصول إلى عناصر باسم فئة محدد باستخدام
getElementsByClassName()الطريقة