سینتکس

آشنایی با سینتکس یا ساختار CSS

اگر بخواهیم به زبان خیلی ساده بگوییم، هر دستور یا قانون (Rule) در CSS از دو بخش اصلی تشکیل شده: «انتخاب‌گر» و «اتاق استایل» (که بهش بلوک اعلان هم می‌گویند).

بیا با هم دقیق‌تر ببینیم هر کدام چی هستند:

• انتخاب‌گر (Selector): با این بخش به CSS آدرس می‌دهیم و می‌گوییم: «ببین! برو سراغ فلان عنصر توی صفحه HTML». یعنی دقیقاً مشخص می‌کنیم کجای صفحه را می‌خواهیم قشنگ‌تر کنیم.

• اتاق استایل (Declaration Block): این بخش همان جایی است که ویژگی‌های ظاهری را داخلش تغییر می‌دهیم. این اتاق با دو تا آکولاد { } باز و بسته می‌شود.

داخل این اتاق، ما یک یا چند دستور (Declaration) می‌نویسیم. هر دستور هم خودش دو بخش دارد:

1. اسم ویژگی (Property): یعنی چه چیزی را می‌خواهی تغییر بدهی؟ (مثلاً رنگ متن، سایز فونت و...)

2. مقدار ویژگی (Value): یعنی می‌خواهی آن تغییر چطوری باشد؟ (مثلاً رنگش قرمز بشود، سایزش ۱۴ بشود و...)

دو تا قانون طلایی که نباید فراموش کنی:

• بین اسم ویژگی و مقدارش همیشه یک دو-نقطه (:) می‌گذاریم.

• آخر هر دستور، حتماً یک نقطه-ویرگول (;) می‌گذاریم تا CSS بفهمد دستور اول تمام شده و می‌تواند برود سراغ دستور بعدی.

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

تصور کن می‌خواهیم کاری کنیم که تمام پاراگراف‌های سایتمان (عناصر <p>) وسط‌چین بشوند و رنگ متن‌شان هم قرمز بشود. کدش را این‌طوری می‌نویسیم:

p {
  color: red;
  text-align: center;
}

داستان این کد چیست؟

• p (انتخاب‌گر): به CSS می‌گوید برو تمام تگ‌های <p> (پاراگراف‌ها) را پیدا کن.

• color: red; : یعنی رنگ متن را بگذار روی قرمز. (یادت نرود که آخرش ; گذاشتیم!)

• text-align: center; : یعنی چیدمان متن را بگذار روی وسط‌چین.

به همین راحتی! در بخش‌های بعدی کلی انتخاب‌گر و ویژگی جدید و جذاب دیگر را با هم یاد می‌گیریم که با آن‌ها می‌توانی به کل سایتت ظاهر دلخواهت را بدهی.