هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: كيفية استخدام الخصائص class و multi-class في HTML و CSS
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
تُعد الخصائص
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:
<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
ملف الشرح المرجعية لبنية هيكل صفحات الويب
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دبلوم بناء وتنسيق وبرمجة مواقع إنترنت تفاعلية
دبلوم تطوير واجهة مستخدم HTML وCSS وJavaScript شاهد آراء مهندسين البرمجيات الذين حصلوا على عمل بعد إكمالهم الدورات التدريبية مع مدرب البورد...
اشتراك البرمجة لجميع الدورات التدريبية في البرمجة
تعلم البرمجة من الصفر وبدون خبرة حتى احتراف صناعة تطبيقات الويب التفاعلية باستخدام لغة العصر جافاسكربت JavaScript
مقالات ذات صلة
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها؟ لغة PHP هي واحدة من أقوى لغات البرمجة المستخدمة في تطوير الصفحات الويب الديناميكية....
كيفية استعلام وتحليل البيانات بفعالية باستخدام SQL
استعلام البيانات وتحليلها بفعالية باستخدام SQL في عصر البيانات الضخمة، أصبحت القدرة على استعلام البيانات وتحليلها بسرعة ودقة أمراً حيوياً في مختلف...
تعلم البرمجة وتطوير صفحات الويب Javascript
برنامج تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript يعد برنامج “تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript” خيارًا مثاليًا لكل من يرغب...
