درس از مسیر CSS
انتخابگرهای CSS چطور کار می‌کنند؟
پاسخ کوتاه: انتخابگر در CSS مشخص می‌کند استایل روی کدام عنصرها اعمال شود؛ پرکاربردترین‌ها انتخابگر تگ، انتخابگر class با نقطه و انتخابگر id با علامت # هستند.
توضیح کامل
آموزش این درس
انتخابگرهای پایه
- •انتخابگر تگ: روی همه عنصرهای یک نوع اعمال می‌شود، مثل p.
- •انتخابگر class: با نقطه نوشته می‌شود و روی عنصرهایی با همان class اعمال می‌شود.
- •انتخابگر id: با علامت # نوشته می‌شود و برای یک عنصر یکتا است.
class برای استفاده مجدد مناسب است، اما id باید فقط یک بار در صفحه استفاده شود.
مثال کد
نمونه عملی
p {
color: #374151;
}
.highlight {
background: #fef9c3;
}
#main-title {
font-size: 24px;
}هر بلوک یک نوع انتخابگر متفاوت را نشان می‌دهد.
خروجی: پاراگراف‌ها رنگ می‌گیرند، عنصرهای دارای class به نام highlight پس‌زمینه روشن می‌گیرند و عنصر با id برابر main-title بزرگ‌تر می‌شود.
اشتباهات رایج
مراقب این موارد باشید
- •فراموش کردن نقطه قبل از نام class یا علامت # قبل از id.
- •استفاده از یک id برای چند عنصر مختلف.
- •بیش از حد خاص کردن انتخابگرها که تغییر استایل را سخت می‌کند.
نکته‌های کاربردی
نکته‌های مهم
- •برای استایل‌های قابل استفاده مجدد از class استفاده کنید.
- •نام class را بر اساس کاربرد انتخاب کنید نه ظاهر لحظه‌ای.
تمرین
تمرین: کار با انتخابگرها
- 1یک class به نام highlight بسازید و به چند عنصر بدهید.
- 2استایل آن class را تعریف کنید.
- 3یک id یکتا برای عنوان اصلی صفحه تعریف و استایل دهید.
پروژه‌های آموزشی
تمرین‌های مرتبط با این مسیر
یک کارت محصول زیبا و ریسپانسیو بسازید و تمرین کنید چطور HTML و CSS را کنار هم به کار ببرید.
پروژه آموزشی فرم تعاملی با JavaScript
یک فرم با اعتبارسنجی ساده در مرورگر بسازید و تعامل کاربر را با JavaScript تمرین کنید.
این پروژه به‌زودی فعال می‌شود.
نیاز به طراحی سایت حرفه‌ای دارید؟
پروژه شما را با همین استانداردها می‌سازیم
اگر می‌خواهید به‌جای ساخت دستی، سایت آماده و حرفه‌ای داشته باشید، تیم ما کنار شماست.