ممكن يكون عندك مثلا button> (btn)> متكرر ولكن في اماكن مختلفه ال btn له نفس صفات معينة زى width ,padding
دول في class 1
انما الشكل متغير حسب المكان هنا دور ال class2
لماذا اضيف أكثر من class للعنصر
نضيف العديد من الكلاسات للعنصر للمزيد من التميز نفترض أنك لديك مجموعة من الأزرار لهم خصائص مشتركة ولكن كل منهم له خاصية مميزة له كاللون مثلا هنا يأتى الدور لإضافة أكثر من كلاس للتمييز بينهم
تستطيع عمل ذلك بإمكانك اضافة بعض الخصائص لكلاس معين ووضعه لكل الأزرار وعمل كلاس أخر مميز لبعض الخصائص الأخرى
نعطى خصائص للكلاسات في ال style كالأتى
/*الكلاس الأساسي لبعض الأزرار */
.btn {
width: 60px;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
border-width: 1px;
border-style: solid;
}
/*كلاس مخصص لإضافة بعض الخصائص المميزة*/
.btn-red {
background-color: red;
color: #fff;
border-color: orangered;
font-size: 16px;
}
/*كلاس مخصص أخر لإضافة بعض الخصائص المميزة*/
.btn-blue {
background-color: blue;
color: #cecece;
border-color: yellowgreen;
font-size: 20px;
}
ويتم تطبيقهم فى ملف ال html كالأتى
<button class="btn btn-red">red</button> <button class="btn btn-blue">blue</button>
وتستطيع بالطبع إضافة ماتريد من كلاسات لإضافة المزيد من التميز
إذا كان لدينا فى الموقع عدة مجموعات من الأزرار.
يفضل توضيح السؤال بالضبط حيث أنه إذا فهمتك بشكل صحيح، فإنك تتحدث عن إضافة أكثر من فئة (class) لعنصر HTML وذلك لتطبيق أنماط مختلفة على نفس العنصر في أماكن مختلفة. هذا يمكن أن يكون مفيدًا عندما تريد تطبيق خصائص مشتركة لعناصر متعددة .
على سبيل المثال، يمكن أن يكون لديك زر (button) يشترك في بعض الخصائص الأساسية مثل العرض (width) والتباعد (padding) في جميع أنحاء موقع الويب الخاص بك. ومع ذلك، قد ترغب في تخصيص مظهر زر معين بشكل مختلف في بعض الصفحات أو الأقسام. في هذه الحالة، يمكنك استخدام فئة إضافية لتعديل النمط حسب الحاجة.
على سبيل المثال:
<button class="btn common-styles">Button 1</button> <button class="btn common-styles specific-style">Button 2</button>
في هذا المثال، تشترك كل من الأزرار في فئة "btn" لتطبيق الأسلوب العام للأزرار. ولكن الزر الثاني يحتوي أيضًا على فئة إضافية "specific-style" التي يمكن استخدامها لتطبيق تخصيصات خاصة بالزر الثاني فقط.
هذا النهج يجعل من السهل تطبيق الأساليب المشتركة على مجموعة من العناصر بينما يمكن تخصيص بعض العناصر بشكل فردي حسب الحاجة.
يمكنك تحديد العديد من الأنماط لنفس العنصر في HTML و CSS باستخدام الكلاسات في السيناريو الذي وصفتهالقيام
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.class1 {
/* خصائص مشتركة بين جميع الـ btn بغض النظر عن الموقع */
width: 100px;
padding: 10px;
}
.btn1 {
/* خصائص خاصة بـ btn عندما يكون في المكان الأول */
background-color: red;
/* أضف المزيد من الخصائص الخاصة بـ btn1 */
}
.btn2 {
/* خصائص خاصة بـ btn عندما يكون في المكان الثاني */
background-color: blue;
/* أضف المزيد من الخصائص الخاصة بـ btn2 */
}
</style>
</head>
<body>
<button class="class1 btn1">Button 1</button>
<button class="class1 btn2">Button 2</button>
<!-- يمكنك تكرار هذا للأزرار الأخرى -->
</body>
</html>
لدينا عنصر button يحمل الكلاسات class1 و btn1 والآخر يحمل class1 و btn2 بواسطة هذا التنظيم يمكنك تحديد الخصائص المشتركة في class1 والخصائص الفريدة لكل زر في كلاسه المخصص (btn1 أو btn2 وهكذا)
التعليقات