محددات Class
الدرس 4 من 15 في دورة محددات CSS على Coddy.
محدد الفئة (class selector) هو نوع من محددات CSS التي تختار العناصر التي تمتلك سمة فئة (class attribute) محددة. سمة الفئة هي سمة مخصصة يمكنك إضافتها إلى عناصر HTML لتجميعها معاً.
لتحديد عناصر بفئة معينة، تستخدم نقطة (.) متبوعة باسم الفئة. على سبيل المثال، المحدد .my-class يختار جميع العناصر التي تمتلك الفئة my-class.
إليك مثال على كيفية استخدام محدد الفئة لتنسيق صفحة ويب:
.my-class {
color: red;
font-size: 2em;
}لإضافة فئة إلى عنصر، اكتب:
<div class="my-class"></div>ستقوم قاعدة CSS هذه بتنسيق جميع العناصر التي تمتلك الفئة my-class لتكون باللون الأحمر وبحجم خط قدره 2em.
التحدي
سهل- أنشئ صفحة ويب تحتوي على ثلاثة عناصر
h1. - أضف class إلى عنصر
h1الأول. - أضف class آخر إلى عنصر
h1الثاني. - استخدم محدد فئة CSS (class selector) لتنسيق عنصر
h1الأول ليكون باللون red وبحجم خط 64px. - استخدم محدد فئة CSS آخر لتنسيق عنصر
h1آخر ليكون باللون blue وبحجم خط 32px.
جرّب بنفسك
<html>
<head>
<title>Class Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>