العودة إلى الدورة

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

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

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

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

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

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

    هذا تنبيه مهم.

    حاوية تحذير أخرى.
    زر رابط
  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

    تطبق أنماط متعددة هنا.

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

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