نحوه‌ی نگارش CSS

برای نوشتن کدهای CSS باید از یک ساختار و قاعده‌ی مشخص پیروی کرد تا مرورگر بتواند آن را به‌درستی بخواند و اجرا کند. در این درس با اجزای تشکیل‌دهنده‌ی یک قانون CSS و قواعد نوشتن آن آشنا می‌شویم.

اجزای یک قانون CSS

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

• Selector (انتخاب‌گر): مشخص می‌کند کدام عنصر یا عناصر HTML باید استایل بگیرند.
• Declaration Block (بلوک اعلان): داخل آکولاد { } قرار می‌گیرد و شامل یک یا چند دستور استایل‌دهی است.

هر دستور داخل بلوک اعلان نیز خودش از دو بخش تشکیل شده:

1. Property (ویژگی): نام مشخصه‌ای که می‌خواهیم تغییر دهیم، مثل color یا font-size.
2. Value (مقدار): مقداری که به آن ویژگی اختصاص می‌دهیم، مثل red یا 16px.

نمونه‌ی یک قانون کامل CSS

h1 {
    color: green;
    font-size: 24px;
}

در این مثال، h1 به‌عنوان Selector انتخاب شده است، پس این قانون روی تمام عناصر h1 صفحه اعمال می‌شود. داخل آکولاد نیز دو دستور نوشته شده: اولی رنگ متن را green تعیین می‌کند و دومی اندازه‌ی فونت را برابر 24px قرار می‌دهد. هر دو دستور با علامت ; به پایان رسیده‌اند.

چند نکته‌ی مهم درباره‌ی نگارش CSS

• بعد از هر Property باید حتماً از : استفاده شود، در غیر این صورت مرورگر دستور را اجرا نمی‌کند.
• گذاشتن ; در انتهای آخرین دستور اجباری نیست، اما برای جلوگیری از خطا هنگام اضافه کردن دستورهای بعدی، توصیه می‌شود همیشه نوشته شود.
• فاصله‌ها (Space) و خطوط جدید تأثیری در اجرای درست کد ندارند و بیشتر برای خواناتر شدن کد استفاده می‌شوند.
• نام‌های Property در CSS همیشه باید دقیقاً مطابق قوانین استاندارد نوشته شوند و اشتباه تایپی باعث نادیده گرفته شدن آن دستور می‌شود.

نوشتن چند Selector برای یک قانون مشترک

اگر بخواهیم چند عنصر مختلف استایل یکسانی داشته باشند، می‌توان Selector‌ها را با علامت , از هم جدا کرد تا از تکرار کد جلوگیری شود.

h1, h2, p {
    color: navy;
}

در این نمونه، سه عنصر h1، h2 و p با علامت , از هم جدا شده‌اند و همگی رنگ متن navy می‌گیرند. این روش باعث می‌شود به‌جای نوشتن سه قانون جداگانه، فقط یک‌بار قانون را بنویسیم.