ساختار CSS و آشنایی با Selector، Property و Value

این جلسه ادامه دوره کامل آموزش CSS آوای وبه. تو جلسه اول فهمیدیم CSS چیه و تو جلسه دوم یاد گرفتیم چطور بهش وصلش کنیم. حالا وقتشه بریم زیر پوست CSS و ببینیم ساختار CSS دقیقاً از چی تشکیل شده — یعنی اون چیزی که به مرورگر می‌گه «این المان رو پیدا کن، این ویژگی رو براش تغییر بده، و این مقدار رو بذار.»

🎯 اهداف یادگیری این جلسه

• درک کنی یک قانون (Rule) تو CSS دقیقاً از چی تشکیل شده
• بتونی المان مورد نظرت رو هدف بگیری (Selector)
• ویژگی (Property) درستی رو انتخاب کنی
• مقدار (Value) مناسبی براش بذاری

🧩 یک قانون CSS از چند بخش تشکیل شده؟

هر قانون (Rule) توی CSS از سه بخش اصلی ساخته می‌شه:

• Selector (انتخابگر): مشخص می‌کنه این استایل قراره روی کدوم عنصر HTML اعمال بشه
• Property (ویژگی): چه چیزی رو می‌خوایم عوض کنیم (رنگ؟ فاصله؟ فونت؟)
• Value (مقدار): اون ویژگی رو چه مقداری بدیم

الگوی کلی همیشه این شکلیه:

selector {
  property: value;
}

1. Selector (انتخاب‌کننده)

به مرورگر می‌گه «کدوم المان رو انتخاب کنم؟»

• p → همه پاراگراف‌ها
• .title → المان‌هایی که کلاس title دارن
• #main → المانی که آیدی main داره

2. Property (ویژگی)

می‌گه «چه چیزی رو تغییر بده؟»

• color → رنگ متن
• font-size → اندازه فونت
• background-color → رنگ پس‌زمینه

3. Value (مقدار)

می‌گه «چجوری تغییر بده؟»

• red, blue, #333 → برای رنگ‌ها
• 16px, 2em, 120% → برای سایزها
• center, left, right → برای ترازبندی

📦 آشنایی با بلوک اعلان (Declaration Block)

مجموعه‌ی Property و Value که داخل آکولاد { } نوشته می‌شه رو Declaration Block می‌گن. هر جفت Property/Value رو هم یه Declaration می‌نامن. می‌تونی چند تا Declaration پشت سر هم، با ; از هم جدا، داخل یه بلوک بنویسی:

p {
  color: green;
  font-size: 18px;
  text-align: center;
}

معنی این کد: برو همه p‌ها رو انتخاب کن، رنگ متنشون رو سبز کن، اندازه‌شون رو ۱۸ پیکسل کن و وسط‌چین‌شون کن.

نکته مهم: هر Declaration باید با ; تموم بشه (به‌جز آخری که اختیاریه، ولی برای عادت خوب همیشه بذارش تا موقع اضافه‌کردن خط بعدی یادت نره).

🎯 چند نوع Selector پرکاربرد

Selector فقط اسم تگ نیست؛ چند نوع رایج داره که تو جلسه بعد کامل باهاشون آشنا می‌شیم، ولی برای شروع این سه‌تا رو بشناس:

• Element Selector:p — همه تگ‌های <p> رو انتخاب می‌کنه
• Class Selector:.title — هر عنصری که class="title" داشته باشه رو انتخاب می‌کنه
• ID Selector:#header — عنصری که id="header" داره رو انتخاب می‌کنه (فقط یه‌بار تو صفحه باید استفاده بشه)

.title {
  color: darkred;
}

#header {
  background-color: #f5f5f5;
}

یه نکته کاربردی: بین Class و ID، معمولاً کلاس‌ها انعطاف‌پذیرتر و راحت‌تر قابل مدیریتن، چون رو چند المان قابل استفاده‌ان و Specificity پایین‌تری دارن؛ برای همین در پروژه‌های واقعی بیشتر ترجیح داده می‌شن.

⚠️ خطاهای رایج مبتدی‌ها تو نوشتن ساختار CSS

• فراموش کردن : بین Property و Value — مثلاً نوشتن color royalblue; به‌جای color: royalblue;
• فراموش کردن ; در انتهای هر Declaration — باعث می‌شه خط بعدی درست خونده نشه
• فراموش کردن آکولاد بسته } — کل بلوک بعدی رو به‌هم می‌ریزه

مرورگرها معمولاً خطای نحوی رو نشون نمی‌دن؛ فقط اون Declaration خراب رو نادیده می‌گیرن و بقیه‌ی صفحه سالم می‌مونه. برای همین همیشه بعد از نوشتن کد، نتیجه رو تو مرورگر چک کن.

✅ کدت رو با W3C CSS Validator تست کن

می‌خوای مطمئن بشی کدهای CSS تو استاندارد هستن و هیچ خطایی ندارن؟ W3C CSS Validator یه ابزار رایگان و رسمیه که کد CSS تو رو بررسی می‌کنه و هر خطا یا هشداری که ممکنه روی سئو، دسترس‌پذیری یا عملکرد سایت اثر بذاره رو نشون می‌ده.

سه روش برای تست وجود داره: آپلود فایل CSS، وارد کردن URL سایت، یا جای‌گذاری مستقیم کد. ساده‌ترین روش برای شروع، جای‌گذاری مستقیمه:

1. به w3.org برو و گزینه by Direct Input رو انتخاب کن
2. کد CSS خودت رو تو باکس متنی کپی کن
3. روی دکمه Check کلیک کن
4. اگه خطا یا هشداری بود، توضیحش رو می‌بینی؛ اگه بدون مشکل باشه، کدت تایید می‌شه

📊 جدول خلاصه برای مرور سریع

🧪 تمرین این جلسه

یه فایل HTML با یه <h1>، یه <p> با class="intro" و یه <div> با id="box" بساز. حالا تو فایل CSS جدا:

• برای h1 یه رنگ و اندازه فونت بده
• برای .intro یه رنگ متفاوت و text-align: center بده
• برای #box یه background-color و padding بده

بعد کدت رو تو W3C Validator هم تست کن تا ببینی خطایی نداره. این تمرین کمکت می‌کنه فرق Element، Class و ID Selector رو عملاً حس کنی.

❓ سوالات متداول

🎯 جمع‌بندی و قدم بعدی

حالا می‌دونی ساختار CSS از Selector، Property و Value تشکیل می‌شه و چطور یه Declaration Block درست بنویسی. این سه‌تا مثل قلب CSS هستن؛ اگه درست یادشون بگیری، بقیه مباحث مثل آب خوردن می‌شن. جلسه بعد می‌ریم سراغ خود Selectorها و کامل یاد می‌گیریم چطور دقیق‌ترین عنصر رو برای استایل‌دهی انتخاب کنیم.

جلسه چهارم: آموزش کامل سلکتورها در CSS ←

💬 نوبت توئه!

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

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.