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