آشنایی با اجزای سازنده یک قانون CSS

تا اینجا چندبار کلمه‌ی Selector و Property رو تو مثال‌ها دیدیم، ولی وقتشه دقیق‌تر بریم سراغ اینکه یه قانون CSS از چه تیکه‌هایی ساخته شده و هر کدوم چه اسمی داره.

یک قانون کامل CSS چه شکلیه؟

به این مثال دقت کن:

p {
  color: blue;
  font-size: 16px;
}

این کل بلوک، یک Rule (قانون) نامیده می‌شه. هر Rule از دو بخش اصلی تشکیل شده: یه Selector و یه یا چند Declaration که داخل آکولاد قرار گرفتن.

Selector چیست؟

بخشی از Rule که قبل از آکولاد باز میاد و مشخص می‌کنه این استایل قراره روی کدوم عنصر(های) HTML اعمال بشه.

p {
  /* این p یک Selector است */
}

تو این مثال، p یعنی «همه تگ‌های پاراگراف تو صفحه». Selectorها می‌تونن خیلی ساده (مثل نام یک تگ) یا خیلی پیچیده (ترکیبی از چند شرط) باشن؛ در فصل ۳ به‌طور کامل و اختصاصی همه انواع Selector رو بررسی می‌کنیم.

Declaration چیست؟

هر خط داخل آکولاد که یک ویژگی رو به یک مقدار نسبت می‌ده، یک Declaration (اعلان) نامیده می‌شه.

color: blue;

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

Property چیست؟

Property (ویژگی) اسم چیزی‌ه که می‌خوای تغییرش بدی؛ مثلاً رنگ، اندازه فونت، فاصله یا عرض.

color: blue;
/* "color" همان Property است */

CSS صدها Property مختلف داره که هرکدوم یه جنبه خاص از ظاهر عنصر رو کنترل می‌کنن. تو فصل‌های بعدی، دسته‌بندی‌های مختلف این Propertyها (رنگ، تایپوگرافی، چیدمان و غیره) رو کامل می‌بینیم.

Value چیست؟

Value (مقدار) همون چیزیه که به یک Property نسبت می‌دیم.

color: blue;
/* "blue" همان Value است */

هر Property فقط مقادیر خاصی رو قبول می‌کنه. مثلاً Property به اسم color می‌تونه مقادیری مثل نام رنگ، کد Hex یا فرمول RGB بگیره، ولی Property به اسم font-size باید یه واحد اندازه‌گیری (مثل px یا rem) بگیره.

ترکیب همه اجزا در یک نگاه

selector {
  property: value;
}

و با مثال واقعی:

h1 {
  color: darkred;
  font-size: 28px;
  margin-bottom: 12px;
}

در این مثال:

  • h1 → Selector؛ یعنی «برو سراغ همه تگ‌های h1»
  • color: darkred; → یک Declaration کامل، با Property به اسم color و Value به اسم darkred
  • font-size: 28px; → یک Declaration دیگر، با Property به اسم font-size و Value به اسم 28px
  • margin-bottom: 12px; → سومین Declaration، با Property به اسم margin-bottom و Value به اسم 12px
  • کل این بلوک، از Selector تا پایان آکولاد، یک Rule کامل محسوب می‌شه

نکته‌ای درباره سینتکس نوشتاری

چند نکته ساده ولی مهم درباره نوشتن صحیح Syntax در CSS:

  • هر Declaration باید با یک سمی‌کالن (;) تموم بشه؛ حتی آخرین Declaration داخل یه Rule هم بهتره سمی‌کالن داشته باشه.
  • بین Property و Value باید یک دونقطه (:) باشه.
  • کل مجموعه Declarationها باید داخل یک جفت آکولاد ({ }) قرار بگیرن.
  • فاصله‌گذاری و تورفتگی (Indentation) از نظر فنی اجباری نیست، ولی برای خوانایی کد ضروریه.

اشتباهات رایج

  • فراموش کردن سمی‌کالن در انتهای یک Declaration، که می‌تونه باعث خطا در Declarationِ بعدی بشه.
  • جابه‌جا نوشتن Property و Value؛ مثلاً نوشتن blue: color; به‌جای color: blue;
  • فراموش کردن یکی از آکولادها (باز یا بسته)، که باعث می‌شه Rule بعدی هم درست خونده نشه.

جمع‌بندی

یک Rule در CSS از یک Selector و یک یا چند Declaration تشکیل شده. هر Declaration خودش شامل یک Property (چه چیزی تغییر کنه) و یک Value (چه مقداری بگیره) است. درک دقیق این اجزا و اسم‌هاشون، پایه‌ی خوندن و نوشتن هر قطعه کد CSS در ادامه این دوره خواهد بود.