هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: كيفية استخدام الخصائص class و multi-class في HTML و CSS
المدة: 5 دقائق
وصف مختصر:
تعلم كيفية استخدام الخصائص class و multi-class في HTML وCSS. اكتشف أفضل الطرق لتسمية العناصر وتطبيق الأنماط بشكل فعال
وصف الدرس
كيفية استخدام الخصائص class و multi-class في HTML و CSS
تُعد الخصائص
كيفية تسمية الخصائص class في HTML:
كيفية الوصول إلى class و multi-class من 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 من الصفر لبناء صفحات ويب