در CSS، بلوک‌های کد به مجموعه‌ای از قواعد و ویژگی‌های استایل‌دهی گفته می‌شود که برای تعریف نحوه نمایش و رفتار یک یا چند عنصر HTML استفاده می‌شوند. ساختار هر بلوک CSS شامل انتخابگر (selector) و مجموعه‌ای از ویژگی‌ها (properties) است که مقدارهایی (values) برای آن‌ها تعیین می‌کند.
ساختار کلی بلوک CSS
یک بلوک CSS از دو بخش اصلی تشکیل می‌شود:
- انتخابگر (Selector): مشخص می‌کند که کدام عنصر HTML باید تحت تاثیر این استایل قرار گیرد.
- مجموعه ویژگی‌ها (Declaration Block): شامل ویژگی‌ها و مقادیر مربوطه است که درون آکولادها {} نوشته می‌شوند.
property1: value1;
property2: value2;
property3: value3;
}
ساختار دقیق‌تر بلوک‌های CSS
- انتخابگر (Selector): تعیین می‌کند که این استایل‌ها برای کدام عنصر یا گروهی از عناصر HTML اعمال می‌شود.
- آکولاد {}: استایل‌ها و ویژگی‌ها درون آکولادها نوشته می‌شوند.
- ویژگی‌ها (Properties): ویژگی‌هایی هستند که ظاهر و رفتار عنصر را تغییر می‌دهند. ویژگی‌ها می‌توانند شامل رنگ‌ها، اندازه‌ها، موقعیت‌دهی‌ها و بسیاری از ویژگی‌های دیگر باشند.
- مقادیر (Values): برای هر ویژگی یک مقدار باید مشخص شود که نشان‌دهنده مقدار مورد نظر برای آن ویژگی است.
مثال‌های بلوک‌های CSS
1. مثال ساده از یک بلوک CSS
color: blue;
font-size: 24px;
}
در اینجا:
- انتخابگر h1 است که برای تگ‌های h1 اعمال می‌شود.
- ویژگی‌ها:
- color رنگ متن را به آبی تغییر می‌دهد.
- font-size اندازه فونت را به 24 پیکسل تنظیم می‌کند.
2. مثال با ویژگی‌های بیشتر
color: #333;
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
padding: 5px;
}
در اینجا:
- انتخابگر p برای تگ‌های p اعمال می‌شود.
- ویژگی‌ها شامل:
- color: رنگ متن را به 333# تغییر می‌دهد.
- font-size: اندازه فونت را به 16 پیکسل تنظیم می‌کند.
- line-height: فاصله بین خطوط متن را تنظیم می‌کند.
- margin: فاصله بیرونی از دیگر عناصر را تنظیم می‌کند.
- padding: فاصله داخلی بین متن و حاشیه‌های پاراگراف را تنظیم می‌کند.
3. استفاده از چندین انتخابگر
font-family: Arial, sans-serif;
font-weight: bold;
}
در اینجا:
- انتخابگرها h1, h2 و h3 به‌طور هم‌زمان برای این تگ‌ها اعمال می‌شود.
- ویژگی‌های مشترک برای این تگ‌ها:
- font-family: فونت متن را به Arial یا sans-serif تغییر می‌دهد.
- font-weight: ضخامت فونت را به bold (خودکار) تغییر می‌دهد.
ویژگی‌های یک بلوک CSS
در یک بلوک CSS می‌توان از ویژگی‌های مختلفی استفاده کرد. برخی از مهم‌ترین ویژگی‌ها به شرح زیر هستند:
-
ویژگی‌های مربوط به رنگ و پس‌زمینه:
- color: رنگ متن
- background-color: رنگ پس‌زمینه
- background-image: تصویر پس‌زمینه
- border: حاشیه عنصر
-
ویژگی‌های مربوط به چیدمان و موقعیت‌دهی:
- display: نوع نمایش عنصر (مثل block, inline, flex)
- position: نوع موقعیت‌دهی (مثل relative, absolute, fixed)
- margin: فاصله بیرونی عنصر
- padding: فاصله داخلی عنصر
-
ویژگی‌های مربوط به فونت‌ها:
- font-family: فونت مورد استفاده
- font-size: اندازه فونت
- font-weight: ضخامت فونت
- line-height: ارتفاع خط
-
ویژگی‌های مرتبط با چیدمان متنی:
- text-align: تراز متن (چپ، راست، وسط)
- text-decoration: نوع تزئینات متن (مثل خط زیر متن)
- text-transform: تغییر شکل متن (مثل حروف بزرگ یا کوچک)
بلوک‌های CSS چندگانه در یک فایل
شما می‌توانید چندین بلوک CSS را در یک فایل CSS بنویسید. هر بلوک به‌طور جداگانه استایل‌ها را برای عنصرهای مختلف تعیین می‌کند.
h1 {
color: red;
font-size: 36px;
}
/* بلوک CSS برای p */
p {
color: blue;
font-size: 18px;
line-height: 1.6;
}
نکات مهم در نوشتن بلوک‌های CSS:
- هر ویژگی و مقدار باید با ; خاتمه یابد.
- همیشه آکولادها {} برای بسته‌بندی مجموعه ویژگی‌ها و مقادیر ضروری هستند.
- می‌توانید از کامنت‌ها برای توضیح در مورد بخش‌های مختلف بلوک‌های CSS استفاده کنید:
/* این بخش مربوط به استایل‌دهی به تگ‌های h1 است */
h1 {
color: blue;
}
خلاصه
یک بلوک CSS مجموعه‌ای از ویژگی‌ها و مقادیر است که برای استایل‌دهی به یک یا چند عنصر HTML اعمال می‌شود. هر بلوک CSS از یک انتخابگر (selector) برای هدف قرار دادن عناصر و مجموعه‌ای از ویژگی‌ها و مقادیر برای تعیین ظاهر آن‌ها تشکیل می‌شود.
