لتجنب تكرار الكود ، نستخدم فئات متعددة في HTML و CSS. باستخدام CSS ، يمكننا أيضًا تحديد وتصميم كلا الفئتين معًا واستخدام فئات متعددة في عنصر واحد من خلال تعيين معرفات فئات مختلفة لهم. يمكن اتباع هذا الأسلوب باستخدام صيغة مفصولة بمسافة لإضافة فئات متعددة إلى عنصر HTML واحد.
في هذه المقالة ، سوف نتعلم كيفية إضافة فئات متعددة إلى عنصر واحد.
كيفية استخدام فئات متعددة في CSS؟
لاستخدام فئتين أو أكثر في عنصر واحد ، سيتم فصل كل معرف فئة بمسافة.
يجب عليك اتباع النحو التالي لاستخدام فئات متعددة في عنصر واحد:
< فئة h1 = 'class_1 class_2 class_3' > تسليم ... ح >
في عنصر HTML واحد ، يمكنك تضمين أكثر من فئة واحدة عن طريق فصلها بمسافة. لراحتك ، هذا مثال.
مثال: استخدام فئات متعددة في CSS
في المثال أدناه ، سننشئ:
- عنوان يستخدم العلامة
وتعيين اسم الفئة ' عنوان '.
- بعد ذلك ، سننشئ عنوانًا آخر ونخصصه لفئتين مختلفتين: ' عنوان ' و ' خط '. يتم فصل معرفات الفئة هذه بمسافة:
لغة البرمجة
h1 >
< h1 صف دراسي = 'سطر العنوان' >
فصول متعددة في عنصر واحد
h1 >
الآن ، دعنا ننتقل إلى ملف CSS ونطبق بعض خصائص CSS المدرجة أدناه:
- اضبط لون الخلفية على العنوان باستخدام وظيفة rgb () على أنها ' (69 ، 51 ، 151) '.
- تعيين نمط الخط ' مائل 'للعنوان.
في فئة HTML ، يستخدم العنوان الأول اسم الفئة ' عنوان '. لذلك ، سيتم تطبيق النمط المحدد في الفئة المحددة على العنوان الأول:
.عنوان {
لون الخلفية: RGB ( 69 و 51 و 151 ) ؛
نمط الخط: مائل
}
عن ' خط 'فئة ، لدينا:
- اضبط لون العنوان باستخدام وظيفة rgb () على أنها ' (255 ، 0 ، 0) '.
- تطبيق سطر زخرفة النص كـ ' تسطير '.
سيستخدم العنوان الثاني أنماط كلا الفئتين: عنوان ' و ' خط ' صف دراسي:
.خط {اللون: RGB ( 255 و 0 و 0 ) ؛
خط زخرفة النص: تسطير ؛
}
بعد التنفيذ ، تحقق من النتيجة:
من الإخراج ، يمكنك ملاحظة أن العنوان الثاني يستخدم كلا الفئتين CSS.
استنتاج
لاستخدام فئات متعددة في عنصر واحد ، استخدم معرفات فئات مختلفة مفصولة بمسافات بيضاء. باستخدام هذا ، يمكننا تطبيق خصائص CSS مختلفة مرة واحدة. يسمح لنا بإعادة استخدام الفصل حيث توجد عناصر مماثلة. توضح هذه المقالة كيفية استخدام فئات متعددة في عنصر واحد وتصميمه مع مثال.