ما هو خاصية class وكيفية استخدامها في HTML؟

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

الدرس: ما هو خاصية class وكيفية استخدامها في HTML؟

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

وصف مختصر:

تعلم كيفية استخدام خاصية class في HTML وتطبيق أنماط CSS على عدة عناصر. احصل على نصائح لتنسيق العناصر وإدارة التصميم

وصف الدرس

ما هو خاصية class في HTML وكيفية استخدامها بفعالية؟

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

ما هي خاصية class في HTML؟

تستخدم خاصية class في HTML لتحديد مجموعة من العناصر التي تشترك في نفس الأنماط. يمكن استخدام نفس الاسم للـ class لأكثر من عنصر، مما يسمح لك بتطبيق أنماط CSS على جميع العناصر التي تحتوي على نفس القيمة.

كيفية الوصول إلى خاصية class من CSS؟

لاستخدام خاصية class في CSS، يتم استدعاءها باستخدام النقطة "." تليها اسم الـ class. على سبيل المثال، إذا كان لديك عنصر يحتوي على class="example", يمكنك تنسيقه في CSS باستخدام .example.

كيف يمكن استخدام خاصية class لتحديد عدة عناصر؟

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

كيفية تطبيق أكثر من class على عنصر واحد؟

يمكنك تطبيق أكثر من class على عنصر واحد بفصل أسماء الـ class بمسافة. على سبيل المثال، <div class="class1 class2"> يمكن أن يحصل على الأنماط من كلا class1 و class2.

كيفية استخدام أكثر من class معًا في CSS؟

يمكنك استخدام أكثر من class في CSS لتطبيق أنماط مختلفة على العناصر التي تحتوي على تلك الـ classes. على سبيل المثال، .class1.class2 يستهدف العناصر التي تحتوي على كلا class1 و class2.

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

html






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

<div class="w-100 text_green">
<h1>نمط مجاني</h1>
</div>

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

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


في هذا المثال، يتم استخدام class لتحديد وتنسيق العناصر عبر الصفحة. يتم تعيين class "w-100" و "text_green" لتطبيق أنماط محددة على العناصر المختلفة.

 

الفيديوهات

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

فيديو الدرس التعليمي ما هو خاصية class وكيفية استخدامها في HTML؟

المصادر

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

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

ملحقات ال PDF

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

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

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

has been added to the cart. View Cart