مقدمه‌ای بر CSS

مقدمه

CSS یا Cascading Style Sheets زبان استانداردی است که برای استایل‌دهی به اسناد وب (صفحات HTML) و تعیین ظاهر این اسناد، کاربرد دارد. در حقیقت، همانطور که محتوا و ساختار اسناد وب توسط HTML ایجاد می‌شود، ظاهر این اسناد نیز توسط CSS تعیین می‌شود. برای مثال، کارهایی مانند تغییر فونت، رنگ و سایز پیش‌فرض متون، قرار دادن محتوای صفحه در چند ستون مجزا، تغییر position یا موقعیت مکانی عناصر در صفحه، ایجاد انیمیشن‌ها و اِعمال افکت‌های ظاهری متعدد بر روی عناصر در حیطه‌ی وظایف CSS قرار دارد. در این درس، قصد داریم مطالبی را در ارتباط با ماهیت زبان CSS و نقشی که این زبان در توسعه‌ی وب دارد، بیان کنیم تا قبل از هر چیز با فلسفه‌ی CSS و کاربرد آن آشنا شوید.

CSS چیست؟

حتماً با HTML به عنوان زبان استاندارد ایجاد صفحات وب آشنا هستید و می‌دانید که این زبان ماهیتاً یک زبان برنامه‌نویسی نیست؛ بلکه یک زبان نشانه‌گذاری (markup) است که عناصر وب را با برچسب‌زدن (tagging) ایجاد می‌کند. CSS هم یک زبان برنامه‌نویسی نیست اما markup هم نیست. در حقیقت، CSS ماهیتاً یک زبان استایل‌دهی (styling) است که عناصر ایجاد شده توسط HTML را به روش‌های مختلف انتخاب کرده و آنها را بر اساس گرامر مشخصی، استایل‌دهی می‌کند.

اما موضوع ماهیت زبان در مورد CSS کمی جالب‌تر و پیچیده‌تر از این است. در حقیقت، CSS به اغلب چیزهایی که در دنیای توسعه‌ی نرم‌افزار دیده‌ایم، شبیه نیست. این زبان:

• یک زبان برنامه‌نویسی نیست اما همانند زبان‌های برنامه‌نویسی به تفکر انتزاعی (abstract thinking) نیاز دارد.
• یک ابزار طراحی نیست اما مانند ابزارهای طراحی به کمی خلاقیت نیاز دارد.
• سینتکس ظاهراً ساده‌ای دارد اما کسانی که درگیر پروژه‌های بزرگ وب شده باشند، می‌دانند که می‌تواند تا چه حد پیچیده شود.

با وجودی که گرامر CSS به‌هیچ‌وجه پیچیدگی‌های یک زبان برنامه‌نویسی را ندارد اما در کار با زبان‌های برنامه‌نویسی، ما معمولاً می‌دانیم دنبال چه چیزی هستیم (مثلاً می‌خواهیم آیتم‌های از نوع x را در یک آرایه پیدا کنیم) اما در CSS، پالایشِ رو به پایین برای رسیدن به یک هدف مشخص، کار سرراست و ساده‌ای نیست و به یک درک مناسب از موضوعات و مفاهیم پایه‌ای (مانند cascade و inheritance) نیاز دارد که متأسفانه خیلی از توسعه‌دهندگان درک کاملی از آنها ندارند.

از نظر گرامری، CSS یک زبان rule-based است؛ یعنی قاعده‌هایی (rules) را تعریف می‌کند که تعیین‌کننده‌ی نحوه‌ی نمایش عناصر HTML هستند. یک قاعده‌ی CSS از یک بخش انتخابگر (selector) و یک بخش استایل‌ها (styles) تشکیل می‌شود. یک selector همانطور که از نامش پیداست، عنصر یا عناصری را انتخاب می‌کند و بخش styles شامل استایل‌هایی است که در قالب جفت‌های property و value روی عناصرِ انتخاب‌شده، اعمال می‌شوند. جزئیات مربوط به گرامر قاعده‌های CSS در فصل بعدی ارائه خواهد شد اما فعلاً بد نیست نگاهی به تصویر زیر داشته باشید که محتویات یک استایل‌شیت ساده را نشان می‌دهد:

پس، یک استایل‌شیت مجموعه‌ای است از قاعده‌های CSS یا CSS rules و هر قاعده از یک بخش انتخابگر (selector) و یک بحش styles تشکیل می‌شود. انتخابگر، عناصر مورد نظر را انتخاب می‌کند و بخش styles استایل‌های مورد نظر را در قالب جفت‌های property و value روی آن عناصر اعمال می‌کند.

نقش CSS در وب

برنامه‌نویسی وب دارای دو حوزه‌ی مجزا با نام‌های Frontend و Backend است. بخش Frontend به کدهای سمت کاربر مربوط می‌شود؛ یعنی کدهایی که تماماً توسط مرورگر تفسیر و اجرا می‌شوند و نیازی به ارسال برای سرور ندارند. از آنجایی که مرورگر در اختیار کاربر قرار دارد و روی ماشین کاربر نصب می‌شود، این کدها را کدهای سمت کاربر (client side) می‌گویند. زبان‌های استاندارد HTML، CSS و JavaScript که اولی یک زبان نشانه‌گذاری (markup)، دومی یک زبان استایل‌دهی (styling) و سومی یک زبان برنامه‌نویسی (programming) است، نقش اصلی را در حوزه‌ی Frontend ایفا می‌کنند. از سوی دیگر، کدهای Backend به پردازش در سمت سرور نیاز دارند و لذا این کدها را کدهای سمت سرور (serve side) می‌گویند.

CSS مزایای زیادی را برای توسعه‌دهندگان و طراحان وب به ارمغان آورده است. با ظهور این استاندارد، HTML به شغل اصلی خود یعنی ایجاد ساختار و محتوای صفحات وب بازگشته و تعیین ظاهر و شیوه‌ی نمایش صفحات وب به CSS واگذار شده و به این ترتیب، از بروز بسیاری از مشکلات و تداخل‌ها جلوگیری شده و کار طراحی و توسعه‌ی وب با سرعت و نظم بیشتری انجام می‌شود.

یکی دیگر از مزایای CSS این است که توسعه‌دهندگان می‌توانند کدهایی را که فقط یک بار نوشته‌اند، روی هر تعداد صفحه اعمال کنند و به این ترتیب، برای ایجاد تغییرات یکسان روی چند صفحه، تنها به ویرایش یک فایل نیاز است. همچنین، با استفاده از CSS می‌توان دستورالعمل‌های متفاوتی را برای نمایش عناصر وب در خروجی‌های مختلف، مشخص کرد. به عنوان مثال، می‌توان ترتیبی داد که یک سند وب در صورت مشاهده در یک نمایشگر، با یک استایل و ظاهر مشخص و در صورت چاپ روی کاغذ، با استایل و ظاهر دیگری نمایش داده شود. این کار در مورد نمایشگرهای با اندازه‌های مختلف نیز امکان‌پذیر است و می‌توان قاعده‌های CSS را طوری تنظیم کرد که صفحه در نمایشگرهای با اندازه‌های مختلف با ظاهرهای متفاوتی نمایش داده شود. در طول این آموزش، نحوه‌ی انجام این کارها را یاد می‌گیرید.

در مورد گرامر زبان CSS در فصل بعدی صحبت می‌کنیم اما در اینجا قصد داریم با ارائه‌ی یک مثال ساده، بدون وارد شدن به جزئیات گرامری، با نقش CSS در وب آشنا شویم. قبل از هر چیز، یک فایل HTML ایجاد کرده و کدهای زیر را در آن وارد کنید و آن را با نامی مثل index.html درون یک پوشه در کامپیوتر خود ذخیره کنید:

CSS

<doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>document title</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>Hello World!</p>
</body>
</html>

برای اِعمال کدهای CSS روی یک سند HTML، چند روش وجود دارد که در جای خود آنها را معرفی خواهیم کرد. اما برای این مثال ابتدایی، از مرسوم‌ترین و مفیدترین روش، یعنی نوشتن کدهای CSS در یک فایل مجزا و لینک کردن آن فایل به سند HTML، استفاده می‌کنیم. برای این منظور، فایلی با نام main.css در همان پوشه‌ای که فایل index.html قرار دارد، ایجاد کرده و کدهای CSS زیر را درون آن وارد کنید و فایل را ذخیره کنید:

body{
  color: red;
  background-color: rgb(10,20,20);
}

در ادامه، به سند HTML برگردید و با استفاده از عنصر link همانند زیر، فایل main.css را به سند HTML لینک کنید:

CSS

<doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>document title</title>
  <link href="main.css" rel="stylesheet"><
</head>
<body>
  <h1>Welcome</h1>
  <p>Hello World!</p>
</body>
</html>

همانطور که می‌بینید، عنصر link با استفاده از یک صفت (attribute) با نام rel که از واژه‌ی relationship گرفته شده، رابطه‌ی بین سند HTML و فایل لینک‌شده را برای مرورگر مشخص می‌کند. همچنین، صفت href، آدرس استایل‌شیت یا فایل CSS را مشخص می‌کند که در اینجا به خاطر قرار داشتن سند HTML و CSS در یک پوشه‌ی یکسان، آدرس فایل CSS تنها شامل نام این فایل (main.css) است. هر دو فایل را ذخیره کرده و فایل index.html را با استفاده از یک مرورگر وب اجرا کنید و نتیجه را ببینید.

به این ترتیب، بدون ورود به بحث گرامر CSS و دقیق شدن در جزئیات ماجرا، استایل‌های ساده‌ای را روی یک صفحه‌ی وب اعمال کردیم. در فصل دوم، گرامر قاعده‌های CSS را به طور رسمی معرفی می‌کنیم و جزئیات بیشتری از نحوه‌ی ایجاد و اعمال کدهای CSS روی صفحات وب بیان خواهیم کرد. اما قبل از آن، مختصری از تاریخچه‌ی CSS را در درس بعدی بیان خواهیم کرد و با روش نسخه‌بندی این استاندارد آشنا خواهیم شد و نکاتی را نیز در ارتباط با مستندات CSS یا CSS specs بیان خواهیم کرد.