درک ساختار و قوانین نگارش در CSS

درک ساختار CSS

یک فایل CSS شامل مجموعه ای از قوانینی است که توسط مرورگر وب تفسیر می شود و سپس در عناصر مربوطه مانند پاراگراف ها، سرتیترها و …. در html اعمال می شوند.

ساختار کلی قانون CSS

یک قانون CSS دو بخش اصلی دارد:

• انتخابگر (Selector): مشخص می‌کند کدام عنصر(ها) تحت تأثیر قرار گیرند (مثل h1, p).
• تعریف‌ها (Declarations): شامل ویژگی‌ها و مقادیر، داخل {} قرار می‌گیرند.

h1 /*انتخابگر*/ {
    color:blue; /*تعریف*/
    text-align:center; /*تعریف*/
}

• h1: انتخابگر
• color: blue;: تعریف (ویژگی color با مقدار blue)
• text-align: center;: تعریف دوم

نکته: هر تعریف با ; پایان می‌یابد و گروه تعریف‌ها با {} احاطه می‌شود.

خوانایی بهتر کد

برای وضوح بیشتر، هر تعریف را در خط جداگانه بنویسید:

h1 {
  color: blue;
  text-align: center;
}

کامنت‌گذاری (Comments)

• برای توضیح کد استفاده می‌شود (مرورگر نادیده می‌گیرد).
• شروع: /* ، پایان: */

/* این یک کامنت تک‌خطی است */
h1 {
  color: blue;
  text-align: center;
}

/* کامنت چندخطی
   برای توضیحات طولانی */
p {
  font-size: 18px;
  text-transform: uppercase;
}

کاربرد: اشکال‌زدایی (کامنت کردن موقت کد):

h1 { color: blue; }
/* p { font-size: 18px; } */  /* غیرفعال موقت */

حساسیت به حروف کوچک/بزرگ (Case Sensitivity)

• نام ویژگی‌ها و مقادیر: حساس نیستند (مثل Color: Blue کار می‌کند).
• انتخابگرها: معمولاً حساس‌اند (مثل .mainContent ≠ .maincontent). توصیه: همه را کوچک بنویسید تا ایمن باشد.

برچسب‌ها: CSS, سینتکس, ساختار.