0

لماذا اضيف أكثر من class للعنصر

ممكن يكون عندك مثلا button> (btn)> متكرر ولكن في اماكن مختلفه ال btn له نفس صفات معينة زى width ,padding

دول في class 1

انما الشكل متغير حسب المكان هنا دور ال class2

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
Najah_alsaker18
  • حذف بواسطة المستخدم
0
Najah_alsaker18
  • حذف بواسطة المستخدم
0
mostafa_m أضف ردا

نضيف العديد من الكلاسات للعنصر للمزيد من التميز نفترض أنك لديك مجموعة من الأزرار لهم خصائص مشتركة ولكن كل منهم له خاصية مميزة له كاللون مثلا هنا يأتى الدور لإضافة أكثر من كلاس للتمييز بينهم

تستطيع عمل ذلك بإمكانك اضافة بعض الخصائص لكلاس معين ووضعه لكل الأزرار وعمل كلاس أخر مميز لبعض الخصائص الأخرى

نعطى خصائص للكلاسات في ال 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>

وتستطيع بالطبع إضافة ماتريد من كلاسات لإضافة المزيد من التميز

إذا كان لدينا فى الموقع عدة مجموعات من الأزرار.

0
Abdelbaset_ibrahem أضف ردا

يفضل توضيح السؤال بالضبط حيث أنه إذا فهمتك بشكل صحيح، فإنك تتحدث عن إضافة أكثر من فئة (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" التي يمكن استخدامها لتطبيق تخصيصات خاصة بالزر الثاني فقط.

هذا النهج يجعل من السهل تطبيق الأساليب المشتركة على مجموعة من العناصر بينما يمكن تخصيص بعض العناصر بشكل فردي حسب الحاجة.

0
Mahmoud_Abu_Zeid أضف ردا

يمكنك تحديد العديد من الأنماط لنفس العنصر في 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 وهكذا)