ممكن يكون عندك مثلا button> (btn)> متكرر ولكن في اماكن مختلفه ال btn له نفس صفات معينة زى width ,padding
دول في class 1
انما الشكل متغير حسب المكان هنا دور ال class2
يمكنك تحديد العديد من الأنماط لنفس العنصر في 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 وهكذا)
التعليقات