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