جاري التحميل...

الفئات في HTML

بعد div نضع ملصقات class المشتركة للأسلوب دون تغيير المعنى.

لماذا الأسماء المشتركة أفضل

الأسماء المشتركة تبقي الأنماط متسقة بدل اسم فريد لكل فقرة.

إجابة مباشرة

اكتب class="note". شارك الاسم. عدّد الأسماء بمسافات. في CSS استخدم .note. لا تضع # في قيمة class.

📊 class in HTML vs CSS

Place	What you write	Role
HTML attribute	class="note"	Labels the element (no leading dot)
CSS selector	.note	Selects elements that have that class
Multiple names	class="card featured"	Space-separated list in HTML
Same idea in CSS	.card.featured	Element that has both classes (advanced combining)

فئة مشتركة على عدة عناصر

فقرتان بنفس class="note" وقانون واحد.

Shared class

html

HTML Code

<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>

قراءة المثال المشترك

كلاهما note
.note يختار المجموعة
خطأ إملائي يكسر النمط

عدة فئات على عنصر واحد

card وfeatured معاً بمسافات.

Multiple classes on one element

html

HTML Code

<div class="card featured">
<h2>Featured tip</h2>
<p>Classes can combine on one box.</p>
</div>
<style>
.card { padding: 12px; border: 1px solid #444; }
.featured { border-color: #0a7; }
</style>

قراءة مثال الفئات المتعددة

رمزان في attribute واحد
.card و.featured معاً
بلا فواصل داخل HTML

عادات التسمية

أسماء قصيرة وواضحة بدون أرقام في البداية.

تمرين

فقرتا tip
نسّق .tip
فئة ثانية على واحدة
أصلح خطأ إملائياً متعمداً

أخطاء شائعة

داخل class
فواصل بدل مسافات
.note داخل HTML

ملخص

class خطاف CSS/JS
مشاركة وتجميع
التالي: id

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة