در فصل قبل، مختصری از تاریخچه‌ی زبان CSS بیان شد و با ساز و کار مستندات این زبان و فرایند نگهداری و
توسعه‌ی آن آشنا شدیم و دیدیم که CSS چه نقشی در توسعه‌ی وب دارد و چگونه امکان استایل‌دهی به صفحات وب را
در یک لایه‌ی مجزا فراهم می‌کند. علاوه بر اینها، با ارائه‌ی یک مثال ساده، نحوه‌ی استفاده از این زبان را
در عمل دیدیم. در این درس، قصد داریم یک معرفی مقدماتی از گرامر (syntax) زبان CSS داشته باشیم و با ساختار
گرامری قاعده‌های CSS یا CSS rules که مؤلفه‌های ساختاری CSS محسوب می‌شوند، آشنا شویم. در انتهای این درس،
کامنت‌های CSS را نیز معرفی می‌کنیم.
ساختار گرامری قاعده‌های CSS
همانطور که گفته شد و دیدیم، CSS به عنوان زبان استایل‌دهی استاندارد وب، با اِعمال استایل‌های مورد نظر
روی عناصر HTML، نحوه‌ی نمایش عناصر را کنترل کرده و ظاهر صفحات وب را تعیین می‌کند. گفتیم که CSS از نظر
گرامری یک زبان rule-based است؛ به این معنی که مؤلفه‌های ساختاری این زبان، قاعده‌هایی (rules) هستند که
عنصر یا عناصری را انتخاب کرده و استایل‌هایی را برای آن عناصر تنظیم می‌کنند.
یک قاعده‌ی CSS از دو بخش کلی تشکیل می‌شود: بخش انتخابگر (selector) و بخش استایل‌ها (styles) که
declarations نیز نامیده می‌شود. بخش انتخابگر، تعیین‌کننده‌ی عنصری (عناصری) است که قصد داریم استایلی را
روی آن (آنها) اعمال کنیم و بخش استایل‌ها، شامل اعلان استایلی (استایل‌هایی) است که باید روی عنصر (عناصر)
انتخاب‌شده، اعمال شود. یک استایل، متشکل از یک جفت property و value است که در آن property نام استایل
مورد نظر و متناظر با یک ویژگی عنصر است و value مقداری است که قصد داریم به آن ویژگی بدهیم. تصویر زیر،
ساختار یک قاعده‌ی CSS را در قالب یک مثال نشان می‌دهد:
مثالی از ساختار یک قاعده‌ی ساده‌ی CSS
در این ساختار نمونه، h1 انتخابگری است که باعث می‌شود همه‌ی عناصر صفحه که از نوع h1 هستند انتخاب شوند،
color و font-size دو پراپرتی CSS هستند که به ترتیب، متناظر با ویژگی
رنگ و سایز فونت متن عناصر هستند، red
مقدار معرف یک رنگ و به عبارت دیگر، یک مقدار رنگی است و px (پیکسل) یک واحد اندازه‌گیری در CSS است. دقت
داشته باشید که بین مقدار و واحد نباید فاصله‌ای باشد؛ یعنی 20px صحیح است نه 20 px. به
طور کلی، مقداری که
یک پراپرتی می‌تواند دریافت کند، به نوع و ماهیت آن پراپرتی بستگی دارد. برای مثال، یک پراپرتی مانند color
به مقداری نیاز دارد که معرف یک رنگ است ولی یک پراپرتی مانند font-size باید مقداری را
دریافت کند که معرف
اندازه باشد.
بنابراین، یک استایل‌شیت (stylesheet) چیزی نیست جز مجموعه‌ای از قاعده‌های CSS و هر قاعده‌ی CSS دارای
ساختار کلی زیر است:
selector{property1: valu1;property2: value2;}
بررسی روش‌های مختلف برای انتخاب عناصر صفحه و پراپرتی‌های متعددی که برای استایل‌دهی به عناصر مختلف وجود
دارد و نیز مقادیر قابل تخصیص به پراپرتی‌های مختلف، بخش اعظمی از یک آموزش CSS را تشکیل می‌دهد. یک فصل
مجزا از این آموزش به بررسی کامل انتخابگرها اختصاص دارد و در هر فصل نیز با تعدادی پراپرتی مرتبط با هم
آشنا می‌شویم. با این حال، در ادامه‌ی این درس قصد داریم به طور مختصر و گذرا در مورد مؤلفه‌های ساختاری
قاعده‌های CSS یعنی انتخابگرها و پراپرتی‌ها و مقادیر آنها صحبت کنیم.
انتخابگرهای CSS
همانطور که دیدیم، برای اعمال استایل یا به عبارت دقیق‌تر، برای تغییر استایل پیش‌فرض یک عنصر، باید ابتدا
آن عنصر را انتخاب کنیم و سپس، استایل‌های مورد نظر را تعریف یا اعلان کنیم. یک انتخابگر، بخش ابتدایی یک
قاعده است که موجب انتخاب عنصر یا عناصر مورد نظر می‌شود.
اَشکال مختلفی از انتخابگرها وجود دارد که ساده‌ترین آنها انتخابگر عنصر (element selector) است که از نام
عناصر برای انتخاب آنها استفاده می‌کند. در واقع، این فرم از انتخابگرها باعث می‌شوند که همه‌ی عناصرِ از یک
نوع مشخص انتخاب شوند و به همین دلیل از عبارت انتخابگرهای نوع (type selectors) نیز برای آنها استفاده
می‌شود. برای مثال، انتخابگر h1 باعث انتخاب همه‌ی عناصر از نوع h1 در صفحه می‌شود و یا انتخابگر p باعث
می‌شود که همه‌ی عناصر از نوع p در صفحه انتخاب شوند.
یک سند HTML با نامی دلخواه مثل index.html ایجاد کنید و کدهای زیر را در آن وارد کنید:
CSS
<!doctype html><html><head><meta charset="utf-8"><title>CSS Syntax</title></head><body><header><h1>Welcome</h1><p>Hello World!</p></header><article><h2>Subject 1</h2><p>text here ...</p></article><article><h2>Subject 2</h2><p>text here ...</p></article><footer><p>Contact information</p></footer></body></html>
دو قاعده‌ی CSS زیر را نیز در یک استایل‌شیت با نام main.css وارد کرده و این فایل را درون پوشه‌ای با نام
styles ذخیره کنید، به طوری که فایل index.html و پوشه‌ی styles در کنار هم قرار داشته باشند.
h2{text-align: center;}p{color: green;}
سپس، همانند زیر با استفاده از یک عنصر link، فایل main.css را به صفحه معرفی و لینک کنید:
CSS
<!doctype html><html><head><meta charset="utf-8"><title>CSS Syntax</title><link rel="stylesheet" href="styles/main.css"></head><body><header><h1>Welcome</h1><p>Hello World!</p></header><article><h2>Subject 1</h2><p>text here ...</p></article><article><h2>Subject 2</h2><p>text here ...</p></article><footer><p>Contact information</p></footer></body></html>
حالا سند HTML را پس از ذخیره، توسط یک مرورگر اجرا کنید و نتیجه را مشاهده کنید.
انتخابگر نوع که کار انتخاب عناصر را بر اساس نام یا نوع آنها انجام می‌دهد، تنها یکی از انواع
انتخابگرهایی است که در CSS قابل استفاده است و انتخابگرهای متعدد و متنوعی وجود دارد که کار انتخاب عناصر
مورد نظر را در سناریوهای مختلف برای ما ممکن می‌کنند.
یکی از پر کاربردترین انتخابگرهای CSS، انتخابگر کلاس (class selector) است که عناصر را بر اساس مقدار صفت
class آنها انتخاب می‌کند. انتخابگر id نیز عناصر را بر اساس مقدار صفت id آنها انتخاب می‌کند. انتخابگر
کلاس دارای فرم کلی .classname است و یک انتخابگر id نیز به فرم #idname است. مثال
زیر را ببینید:
CSS
<!doctype html><html><head><meta charset="utf-8"><title>Some Css Selectors</title><style>h2{background-color: lime;}li{color: brown;}.intro{color: green;}#main-title{font-size: 36px;}</style></head><body><header><h1 id="main-title">Some CSS Selectors</h1><p>These selectors are simple</p><ul><li>Element selectors</li><li>Class selectors</li><li>Id selectors</li></ul></header><article><h2>Element Selectors</h2><p class="intro">These selectors work based on tag names</p></article><article><h2>Class Selectors</h2><p class="intro">These selectors work based on value of class attribute</p></article><article><h2>Id Selectors</h2><p class="intro">These selectors work based on value of id attribute</p></article></body></html>
در این مثال، کدهای CSS نه در یک فایل مجزا بلکه در صفحه‌ی جاری و درون عنصری به نام style در بخش head
صفحه نوشته شده‌اند. این یک روش دیگر برای اعمال کدهای CSS روی صفحه است که روش داخلی یا internal نام دارد.
در درس بعدی، خواهیم دید که هر یک از روش‌های internal و external در چه شرایطی مناسب هستند.
در کدهای CSS مثال بالا، دو انتخابگر اول از نوع انتخابگرهای نوع هستند که اولی باعث انتخاب همه‌ی عناصر h2
در صفحه و دومی باعث انتخاب همه‌ی عناصر li می‌شود. انتخابگر سوم، یک انتخابگر کلاس است که باعث می‌شود
همه‌ی عناصر صفحه که دارای کلاس intro هستند (یعنی مقدار صفت class آنها برابر با intro است)، انتخاب شوند.
آخرین انتخابگر نیز یک انتخابگر id است که باعث می‌شود عنصری در صفحه که مقدار صفت id آن برابر با
main-title است، انتخاب شود. عملکرد پراپرتی‌های موجود در این مثال نیز از نامشان کاملاً مشخص است: پراپرتی
color برای تعیین رنگ زمینه (foreground)، پراپرتی background-color
برای تعیین رنگ پس‌زمینه (background) و
پراپرتی font-size برای تعیین سایز فونت عناصر کاربرد دارند.
پراپرتی‌ها و مقادیر CSS
یادآوری می‌کنم که یک استایل CSS از یک جفت property و value ساخته می‌شود. بخش property نام ویژگی یا
خصوصیتی است که قصد مقدارهی به آن را داریم و بخش value مقداری است که مایلیم به آن پراپرتی اختصاص دهیم و
این دو بخش با یک کاراکتر دونقطه (colon) از هم جدا می‌شوند.
دسته‌بندی پراپرتی های CSS
مستندات CSS شامل تعداد زیادی از پراپرتی‌هاست که برای عناصر مختلف، قابل تنظیم هستند. این پراپرتی‌ها را
می‌توان در دو گروه کلی جای داد: گروه presentation که شامل پراپرتی‌هایی است که به ظاهر عناصر مربوط
می‌شوند و گروه layout که پراپرتی‌هایی را شامل می‌شود که به موقعیت و وضعیت عناصر در صفحه و به طور کلی
به طرح‌بندی و چیدمان عناصر در صفحه مربوط می‌شوند.
در طول این آموزش، با پراپرتی‌های مختلف و مقادیر قابل تخصیص به آنها آشنا می‌شویم اما در اینجا توجه شما
را به چند نکته در ارتباط با پراپرتی‌ها جلب می‌کنم:
نکته‌ی اول اینکه پراپرتی‌های CSS و مقادیر آنها نسبت به بزرگی یا کوچکی حروف حساس‌اند یا اصطلاحاً case
sensitive هستند. بنابراین، یک پراپرتی مثل color را نمی‌توانیم به صورت Color یا COLOR
بنویسیم و مقداری
مثل 10px را نیز نباید به فرمی مثل 10PX بنویسیم. همه‌ی پراپرتی‌ها و همه‌ی مقادیر ممکن برای آنها، باید
با استفاده از حروف کوچک (lowercase) نوشته شوند.
نکته‌ی دوم که قبلاً هم به آن اشاره کردیم، به نحوه‌ی صحیح نوشتن مقدار و واحد اندازه‌گیری مربوط
می‌شود؛ بین این دو بخش نباید فاصله‌ای وجود داشته باشد. مثلاً 10px صحیح است نه 10 px.
نکته‌ی سوم به رفتار موتور CSS با پراپرتی‌ها و مقادیر ناشناخته مربوط است. اگر نام یک پراپرتی را
اشتباه بنویسیم یا مقدار غیرمعتبری را به آن اختصاص دهیم و یا مرورگرِ کاربری از یک پراپرتی پشتیبانی نکند
و به طور کلی، اگر مرورگر به هر دلیلی قادر به شناسایی پراپرتی یا مقدار آن نباشد، آن پراپرتی را نادیده
می‌گیرد. این رویکردی است که دست ما را برای استفاده از ویژگی‌ها و پراپرتی‌های جدید و بهره بردن از آخرین
قابلیت‌های CSS باز می‌گذارد.
نکته‌ی پایانی به املای پراپرتی‌ها مربوط است. برای برخی واژه‌های زبان انگلیسی بیش از یک املا وجود
دارد؛ مثلاً در انگلیسی آمریکایی از واژه‌ی color و در انگلیسی بریتانیایی از colour استفاده می‌شود. در
اینگونه شرایط، املای آمریکایی (us) ملاک خواهد بود. بنابراین، پراپرتی color صحیح است نه colour.
کامنت‌های CSS
همانند هر زبان دیگر، در CSS نیز می‌توانیم از کامنت‌ها (comments) برای افزودن توضیحات اختیاری به کدهای
خود با اهدافی مانند مستندسازی و افزایش خوانایی کدها استفاده کنیم. استفاده‌ی مناسب از کامنت‌ها، به‌ویژه
در پروژه‌های تیمی، از اهمیت بالایی برخوردار است و به اعضای تیم کمک می‌کند که راحت‌تر کدهای نوشته‌شده
توسط سایرین را درک کنند. علاوه بر این، هیچ تضمینی وجود ندارد که وقتی در آینده به کدی که قبلاً نوشته‌ایم،
مراجعه کنیم، بتوانیم کاملاً آن را درک کنیم و همه چیز را در مورد آن به خاطر آوریم؛ لذا افزودن کامنت‌های
مناسب به کدها در پروژه‌های انفرادی نیز دارای اهمیت است.
کامنت‌ها در CSS با استفاده از نمادگذاری C-style ایجاد می‌شوند. در این نمادگذاری، هر چیزی که بین
کاراکترهای /* و */ قرار داشته باشد، کامنت تلقی شده و توسط مفسر نادیده گرفته می‌شود. توضیحات می‌توانند در
یک یا چند خط و در هر بخشی از کدها آورده شوند:
