کلاسها در HTML
درس div جعبه گذاشت؛ حالا class قلاب استایل است: نام قابلاستفاده مجدد روی یک یا چند عنصر تا CSS (و بعداً JS) گروه را پیدا کند. class معنای تگ را عوض نمیکند — برچسب برای ظاهر و رفتار است.
چرا نام مشترک بهتر از برچسب یکبارمصرف است
اگر هر پاراگراف نام یکتا بگیرد، stylesheet باد میکند. کلاسهای مشترک (note, tip, card) یک قانون را چند جا اعمال میکنند. تگ معنایی زیرش بماند.
پاسخ مستقیم
class="note" بنویسید. چند عنصر note را دوباره استفاده کنند. یک عنصر چند کلاس با فاصله: class="card featured". در CSS با نقطه: .note { … }. # را داخل attribute نگذارید.
📊 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<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>خواندن نمونهٔ مشترک
- هر دو
noteدارند .noteیعنی هر عنصر با آن کلاس- یک قانون برای کل گروه
- غلط املایی attribute استایل را میشکند
چند کلاس روی یک عنصر
کارت پایه card بهعلاوه تأکید featured — با فاصله در یک attribute.
Multiple classes on one element
html<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رنگ حاشیه را قوی میکند- ویرگول داخل attribute ممنوع
عادت نامگذاری
نقش را وصف کنید (tip, card) نه یک ظاهر یکباره. با رقم شروع نکنید.
تمرین
- دو پاراگراف
class="tip" - استایل
.tip - کلاس دوم روی یکی
- غلط املایی عمدی و اصلاح
- شکل HTML و CSS را در یک جمله بنویسید
اشتباهات آسان
#داخل attribute کلاس- ویرگول بهجای فاصله
- کلاس یکتا برای هر عنصر وقتی اشتراک کافی است
- نوشتن
.noteدر HTML بهجایnote
خلاصه
- class قلاب CSS/JS است
- اشتراک و چندکلاسه
- HTML بدون نقطه؛ CSS با نقطه
- بعدی: ویژگی id
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود