Selectorهای پرکاربرد CSS

🎯 اهداف یادگیری

درک مفهوم Selectorها در CSS
آشنایی با بهترین روش‌های استایل‌دهی

💡 برای مبتدیان: Selector چیست؟

Selectorها در CSS مانند آدرس‌هایی هستند که به مرورگر می‌گویند کدام عناصر HTML باید استایل بگیرند. درست مثل وقتی که می‌خواهید به یک خانه خاص در یک شهر بروید، باید آدرس دقیق آن را بدانید.

🏠 تشبیه Selectorها:

تگ selector = نام خیابان (همه خانه‌های آن خیابان)
کلاس selector = شماره پلاک (خانه‌های خاص با شماره مشخص)
ID selector = کد پستی منحصر به فرد (فقط یک خانه)

📌 Selectorهای پرکاربرد CSS

۱. انتخابگر تگ

تمام عناصر با تگ مشخص را انتخاب می‌کند:

css

            p {
    color: red;
}

📝 نکته برای مبتدیان:

این کد به مرورگر می‌گوید: "همه تگ‌های <p> در صفحه را پیدا کن و رنگ متن آن‌ها را قرمز کن."

این روش برای زمانی مناسب است که می‌خواهید همه عناصر از یک نوع، ظاهر یکسانی داشته باشند.

حالا نوبت شماست! تمرین کنید

مطالبی که یاد گرفتید را در محیط تمرین آزمایش کنید و مهارت خود را تقویت نمایید

پیش‌نمایش زنده

ذخیره خودکار

مثال‌های آماده

۲. انتخابگر کلاس

عناصری که کلاس مشخص دارند را انتخاب می‌کند:

css

            .highlight {
    background-color: yellow;
}

📝 نکته برای مبتدیان:

کلاس‌ها قابل استفاده مجدد هستند. یعنی می‌توانید یک کلاس را به چندین عنصر مختلف اختصاص دهید.

در HTML به این صورت استفاده می‌شود: <div class="highlight">متن برجسته</div>

نکته: نام کلاس با نقطه (.) شروع می‌شود اما در HTML فقط نام کلاس را می‌نویسید.

حالا نوبت شماست! تمرین کنید

مطالبی که یاد گرفتید را در محیط تمرین آزمایش کنید و مهارت خود را تقویت نمایید

پیش‌نمایش زنده

ذخیره خودکار

مثال‌های آماده

۳. انتخابگر ID

عنصر با ID مشخص را انتخاب می‌کند:

css

            #header {
    font-size: 24px;
}

📝 نکته برای مبتدیان:

IDها منحصر به فرد هستند. یعنی هر ID فقط باید به یک عنصر اختصاص داده شود.

در HTML به این صورت استفاده می‌شود: <div id="header">سرصفحه</div>

نکته: نام ID با هشتگ (#) شروع می‌شود اما در HTML فقط نام ID را می‌نویسید.

⚠️ هشدار: از ID فقط برای عناصر منحصر به فرد استفاده کنید و هرگز یک ID را به چند عنصر ندهید.

حالا نوبت شماست! تمرین کنید

مطالبی که یاد گرفتید را در محیط تمرین آزمایش کنید و مهارت خود را تقویت نمایید

پیش‌نمایش زنده

ذخیره خودکار

مثال‌های آماده

۴. انتخابگر ترکیبی

ترکیب چند انتخابگر برای انتخاب دقیق‌تر:

css

            div.box {
    border: 1px solid #ccc;
}

📝 نکته برای مبتدیان:

این انتخابگر فقط divهایی را انتخاب می‌کند که کلاس box دارند.

در HTML به این صورت استفاده می‌شود: <div class="box">محتوای جعبه</div>

این روش زمانی مفید است که می‌خواهید استایل فقط برای یک نوع خاص از عناصر با یک کلاس خاص اعمال شود.

حالا نوبت شماست! تمرین کنید

مطالبی که یاد گرفتید را در محیط تمرین آزمایش کنید و مهارت خود را تقویت نمایید

پیش‌نمایش زنده

ذخیره خودکار

مثال‌های آماده

📊 خلاصه و مقایسه Selectorها

نوع Selector	نماد	کاربرد	تعداد عناصر
تگ	نام تگ (p, div, h1)	انتخاب همه عناصر با تگ مشخص	چندین
کلاس	. (نقطه)	انتخاب عناصر با کلاس مشخص	چندین
ID	# (هشتگ)	انتخاب عنصر با ID مشخص	یک عنصر
ترکیبی	ترکیب موارد بالا	انتخاب دقیق‌تر عناصر	بستگی دارد

📌 تمرین عملی

صفحه HTML زیر را با استایل‌دهی CSS کامل کنید:

html

            <div class="card">
    <h2>عنوان کارت</h2>
    <p>توضیحات کارت در این قسمت قرار می‌گیرد</p>
</div>

            

🧩 راهنمای گام به گام برای مبتدیان:

مرحله ۱: ایجاد فایل CSS یا تگ style

اگر از فایل جداگانه CSS استفاده می‌کنید، آن را به HTML لینک کنید:

<link rel="stylesheet" href="styles.css">

یا از تگ style درون HTML استفاده کنید:

<style>
/* کدهای CSS اینجا قرار می‌گیرند */
</style>

مرحله ۲: انتخاب عناصر با کلاس card

از انتخابگر کلاس برای انتخاب div با کلاس card استفاده کنید:

.card {
  /* استایل‌ها اینجا قرار می‌گیرند */
}

راهنمای تمرین:

کارت باید دارای حاشیه و سایه باشد
عنوان باید رنگ متفاوتی داشته باشد
از padding مناسب استفاده کنید
رنگ پس‌زمینه را تنظیم کنید

💡 نمونه کد کامل برای کمک:

در اینجا یک نمونه از کد CSS برای این تمرین آورده شده است:

css

                .card {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
  
.card h2 {
  color: #2c3e50;
  margin-top: 0;
}
  
.card p {
  color: #7f8c8d;
  line-height: 1.6;
}

                

🌟 نکات تکمیلی برای یادگیری بهتر:

🔍 تمرین کنید:

بهترین راه برای یادگیری CSS، تمرین عملی است. سعی کنید کدها را خودتان بنویسید و تغییرات را ببینید.

🧩 ابزارهای توسعه‌دهنده مرورگر:

از ابزارهای توسعه‌دهنده مرورگر (با فشردن F12) استفاده کنید تا بتوانید استایل‌ها را به صورت زنده مشاهده و تغییر دهید.

📚 منابع بیشتر:

برای یادگیری عمیق تر CSS بخش آموزش جامع CSS را مطالعه نمایید.

📌 قدم بعدی

❮ بخش قبلی بخش بعدی ❯