نحو CSS
از قبل می‌دانید CSS ظاهر HTML را کنترل می‌کند. این جلسه روی دستور زبان یک قانون تمرکز می‌کند تا بدون حدس بفهمید آکولاد، دونقطه و نقطه‌ویرگول کجا می‌آیند.
نحو CSS چیست؟
نحو CSS همان الگوی ثابتی است که برای نوشتن قانون استایل به کار می‌رود. تقریباً هر قانون روزمره همین شکل را دارد: انتخاب کنید چه چیزی استایل شود (سلکتور)، بلوک declaration را با { باز کنید، یک یا چند declaration بنویسید، سپس با } ببندید. هر declaration یک ویژگی را با یک مقدار جفت می‌کند.
اجزای یک قانون CSS
قانون را به قطعات نام‌دار بشکنید. وقتی هر جزء را بشناسید، پیدا کردن غلط تایپی خیلی آسان‌تر می‌شود.
📊 اجزای یک قانون CSS
| جزء | مثال | نقش |
|---|---|---|
| سلکتور | p |
مشخص می‌کند قانون روی کدام عناصر اعمال شود |
| بلوک declaration | { … } |
یک یا چند declaration را داخل آکولاد نگه می‌دارد |
| Declaration | color: teal; |
یک دستور ویژگی–مقدار، معمولاً با ; تمام می‌شود |
| ویژگی (property) | color |
جنبه‌ای که می‌خواهید تغییر دهید |
| مقدار (value) | teal |
مقداری که به آن ویژگی می‌دهید |
| دونقطه / نقطه‌ویرگول | : / ; |
ویژگی را از مقدار جدا می‌کند؛ بیشتر declarationها را تمام می‌کند |
یک قانون با اجزای مشخص
این یک قانون حداقلی است که هر قطعهٔ مهم در آن دیده می‌شود. جلسات بعد سلکتورها را عمیق‌تر می‌کنند؛ اینجا هدف ساختار درست است.
قانون CSS با اجزای مشخص
cssp {
color: teal;
}از چپ به راست بخوانید
p— سلکتور (هر پاراگراف){…}— بلوک declarationcolor— ویژگی:— جداکنندهٔ ویژگی از مقدارteal— مقدار;— پایان declaration
فاصله و شکست خط انعطاف‌پذیرند. می‌توانیدp{color:teal;}را در یک خط بنویسید؛ مرورگر همان‌طور رفتار می‌کند. برای یادگیری و کار تیمی فرم چندخطی خوانا بهتر است.
چند declaration در یک بلوک
یک قانون می‌تواند برای همان سلکتور چند ویژگی را تنظیم کند. هر declaration را در خط خودش بنویسید و با نقطه‌ویرگول تمام کنید.
چند declaration
css.note {
color: #0f172a;
background-color: #e0f2fe;
padding: 1rem;
border-radius: 0.5rem;
}چرا این کار می‌کند
.noteیک سلکتور class است (کلاس‌ها را بعداً بیشتر تمرین می‌کنید)- چهار declaration یک بلوک مشترک دارند
- مرورگر همهٔ آن‌ها را روی عناصر با
class="note"اعمال می‌کند - نبودن نقطه‌ویرگول بین دو declaration می‌تواند باعث شود ویژگی بعدی اعمال نشود
گروه‌بندی سلکتورها
وقتی چند سلکتور به استایل یکسان نیاز دارند، آن‌ها را با ویرگول جدا کنید. یک بلوک declaration برای همهٔ آن‌ها کافی است.
سلکتورهای گروه‌بندی‌شده
cssh1, h2, h3 {
font-family: Georgia, serif;
color: #1e293b;
}چه وقت گروه کنید
گروه‌بندی از کپی‌پیست بی‌جا جلوگیری می‌کند وقتی تیترها (یا عناصر دیگر) باید ظاهر مشترک داشته باشند. اگر بعداً یک سلکتور استایل جدا خواست، برایش قانون جدا بنویسید؛ گروه را شلوغ نکنید.
چک‌لیست علائم نگارشی
هنگام نوشتن این فهرست کوتاه را در ذهن داشته باشید:
- آکولاد دور بلوک declaration می‌آید
- دونقطه بین ویژگی و مقدار می‌نشیند
- نقطه‌ویرگول هر declaration را تمام می‌کند (قبل از بعدی لازم است؛ حتی برای آخری عادت خوبی است)
- ویرگول سلکتورهای گروه را جدا می‌کند — نه ویژگی‌ها را
- نام ویژگی‌ها و بیشتر مقدارهای کلیدی نسبت به حروف بزرگ/کوچک حساس نیستند، ولی عرفاً با حروف کوچک می‌نویسند
خودتان امتحان کنید
- فایل
syntax.htmlبسازید با یک پاراگراف<p class="note">Syntax practice</p>و بلوک<style>در head. - قانون چندdeclaration مربوط به
.noteرا از این جلسه اضافه کنید. background-colorرا به#fef3c7تغییر دهید، ذخیره کنید و تازه کنید.- declaration پنجم را اضافه کنید:
font-size: 1.125rem;داخل همان بلوک، ذخیره و دوباره تازه کنید. - هم پس‌زمینه و هم اندازهٔ فونت باید عوض شوند. اگر نشد، آکولاد و نقطه‌ویرگول را چک کنید.
اشتباهات رایج
- نوشتن
color tealبدون دونقطه — مرورگر declaration را نمی‌فهمد - فراموش کردن
{یا}طوری که declarationها بیرون بلوک بمانند و نادیده گرفته شوند - حذف نقطه‌ویرگول بین دو declaration طوری که ویژگی دوم اعمال نشود
- گذاشتن ویرگول بین ویژگی و مقدار (
color, teal) به‌جای دونقطه - گذاشتن یک ویژگی به‌تنهایی بدون سلکتور یا آکولاد — این یک قانون کامل نیست
خلاصه
- نحو CSS = سلکتور + بلوک declaration
{ }پر از declaration - هر declaration به شکل
property: value;است - یک بلوک می‌تواند برای همان سلکتور چند declaration داشته باشد
- ویرگول سلکتورهایی را که استایل مشترک دارند گروه می‌کند
- دقت در آکولاد، دونقطه و نقطه‌ویرگول از خطاهای بی‌صدا جلوگیری می‌کند
- با ویرایش مقدارها و افزودن declaration تمرین کنید، سپس مرورگر را تازه کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود