درس پنجم: انتخاب‌گرها، کلاس‌ها و آیدی‌ها

درس پنجم: انتخاب‌گرها، کلاس‌ها و آیدی‌ها

در این درس یاد می‌گیریم چطور بین عناصر مشابه تفاوت قائل شویم. برای مثال، چطور یک دکمه را سبز و دکمه دیگر را قرمز کنیم، در حالی که هر دو تگ <button> هستند.

🏷️ ۱. کلاس‌ها (Class Selector)

کلاس‌ها پرکاربردترین راه برای استایل‌دهی هستند. شما یک کلاس تعریف می‌کنید و می‌توانید آن را به هر تعداد تگی که دوست داشتید بدهید. در CSS کلاس‌ها با نقطه (.) شروع می‌شوند.

/* تعریف کلاس در CSS */
.success-text {
    color: green;
    font-weight: bold;
}

استفاده در HTML:

<p class="success-text">عملیات با موفقیت انجام شد</p>

🆔 ۲. آیدی‌ها (ID Selector)

آیدی‌ها منحصر‌به‌فرد هستند. هر آیدی فقط باید یک بار در هر صفحه استفاده شود. در CSS آیدی‌ها با هش (#) شروع می‌شوند.

/* تعریف آیدی در CSS */
#main-header {
    background-color: #2c3e50;
    color: white;
}

⚔️ تفاوت اصلی کلاس و آیدی چیست؟

ویژگیکلاس (Class)آیدی (ID)
تعداد استفادهنامحدود در یک صفحهفقط یک بار در هر صفحه
علامت در CSSنقطه (.)هش (#)
🚩 تمرین درس پنجم:

دو دکمه بسازید. به اولی کلاس btn-blue و به دومی کلاس btn-red بدهید. سپس در CSS، رنگ پس‌زمینه هر کدام را مطابق نام کلاسشان تنظیم کنید.