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