8. المحددات الأساسية: محددات الفئة (.)

محددات الفئات (Class selectors) هي العمود الفقري لـ CSS الحديث. فهي تسمح لك بتطبيق نفس النمط على عناصر متعددة وعشوائية، بغض النظر عن نوع وسم HTML الخاص بها.

تعريف واستخدام الفئة (Class)

1. HTML: أضف سمة class إلى عنصر واحد أو أكثر. html

   <p class="warning">هذا تنبيه مهم.</p> <div class="warning">حاوية تحذير أخرى.</div> <button class="primary-btn">اضغط هنا</button> <a href="#" class="primary-btn">زر رابط</a>

2. CSS: استهدف الفئة عن طريق وضع نقطة (.) قبل اسم الفئة. css .warning { background-color: yellow; border: 1px solid orange; padding: 10px; }

   .primary-btn { background-color: darkgreen; color: white; padding: 8px 16px; border-radius: 5px; }

الخصائص الرئيسية للفئات

• إعادة الاستخدام: الميزة الأكبر. يمكن استخدام الفئة على أي عنصر HTML (div أو p أو h1 أو img وما إلى ذلك).

• فئات متعددة: يمكن أن يحتوي العنصر على فئات متعددة مطبقة عليه، مفصولة بمسافات. html

  <p class="text-center warning font-large">تطبق أنماط متعددة هنا.</p>

  يدمج المتصفح الأنماط المحددة بواسطة الفئات الثلاث (text-center و warning و font-large).

أفضل ممارسة: استخدم أسماء فئات وصفية مفصولة بشرطات (مثل .nav-link و .card-image و .is-active).