كيفية استخدام الخصائص class و multi-class في HTML و CSS

هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب

الدرس: كيفية استخدام الخصائص class و multi-class في HTML و CSS

المدة: 5 دقائق

وصف مختصر:

تعلم كيفية استخدام الخصائص class و multi-class في HTML وCSS. اكتشف أفضل الطرق لتسمية العناصر وتطبيق الأنماط بشكل فعال

وصف الدرس

كيفية استخدام الخصائص class و multi-class في HTML و CSS

تُعد الخصائص class و id من العناصر الأساسية في HTML وCSS لتنسيق وتصميم صفحات الويب. في هذا الدرس، سنستعرض كيفية استخدام هذه الخصائص بشكل فعال وأفضل الممارسات لتسمية العناصر والتعامل معها.

كيفية تسمية الخصائص class في HTML:

  • تسمية class و id: عند تسمية الخصائص class و id في HTML، يجب أن تكون الأسماء واضحة ومفهومة. يمكن استخدام الكلمات المفهومة لتحديد الأنماط والتنسيقات بشكل أفضل.

  • تجنب استخدام المسافات: من الأفضل تجنب استخدام المسافات في أسماء class و id. بدلاً من ذلك، يُوصى باستخدام الشرطتين السفليتين _ أو الشرطتين -. على سبيل المثال، استخدم class="main-header" بدلاً من class="main header".

  • استخدام الأحرف الصغيرة: من المستحسن استخدام الأحرف الصغيرة عند تسمية class و id لتجنب المشاكل المتعلقة بحساسية الحالة في بعض أنظمة الملفات.

  • إضافة أرقام في نهاية الأسماء: يمكن إضافة أرقام في نهاية أسماء class و id إذا كانت هناك حاجة لتمييز عناصر مشابهة. على سبيل المثال، class="item-1" و class="item-2".

  • تسمية من كلمة أو كلمتين: يفضل أن تكون الأسماء قصيرة ومباشرة، مثلاً header, footer, أو main-content.


كيفية الوصول إلى class و multi-class من CSS:

  • استخدام class في CSS: لتطبيق الأنماط على العناصر التي تحتوي على نفس class, استخدم النقطة "." تليها اسم الـ class. على سبيل المثال، .text_green { color: green; }.

  • تطبيق أكثر من class على عنصر واحد: يمكنك تطبيق أكثر من class على نفس العنصر بفصل الأسماء بمسافة. على سبيل المثال: <div class="text_green w-100">.

  • اختيار عدة عناصر باستخدام CSS: يمكن تطبيق أنماط على عناصر متعددة باستخدام selectors متعددة في CSS. على سبيل المثال، .text_green, .text_red { color: green; }.


مثال عملي على استخدام class و multi-class في HTML و CSS:

html






<style>
.w-100, .cols-2 {
width: 100%;
float: left;
}
.cols-2 > div {
float: left;
background-color: gray;
}
#free {
background-color: #f00;
}
.text_green {
color: green;
}
</style>

<div id="free">
<h1>نمط مجاني</h1>
</div>

<section class="cols-2 text_green">
<div>
<h2>اختبار 1</h2>
</div>
<div>
<h2>اختبار 2</h2>
<p>فقرة 2</p>
</div>
</section>

<div class="w-100">
<h1>تذييل</h1>
</div>


في هذا المثال، يتم استخدام class و id لتطبيق الأنماط على العناصر المختلفة، مما يجعل إدارة التنسيق أسهل وأكثر فعالية.

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي كيفية استخدام الخصائص class و multi-class في HTML و CSS

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

الأوامر البرمجية لهذا الدرس HTML and CSS

ملحقات ال PDF

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF

ملف الشرح المرجعية لبنية هيكل صفحات الويب

الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب

has been added to the cart. View Cart