آشنایی با CSS

در دورهٔ HTML صفحه‌ای ساختید که درست است، اما خام و بی‌رنگ است: همهٔ متن یک اندازه، همه چیز از بالا به پایین چیده شده، بدون رنگ و فاصله. CSS مخفف Cascading Style Sheets است؛ زبانی که ظاهر صفحه را تعیین می‌کند: رنگ، فونت، فاصله، چیدمان و حتی انیمیشن. HTML اسکلت است و CSS نما؛ با همین دو، بیشتر وبی که هر روز می‌بینید ساخته می‌شود.

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

ساختار یک قاعدهٔ CSS

واحد اصلی CSS «قاعده» (Rule) است. هر قاعده دو بخش دارد: «انتخاب‌گر» (Selector) که می‌گوید کدام عناصر صفحه هدف هستند، و بلوک اعلان‌ها (Declarations) که می‌گوید با آن‌ها چه کنید. هر اعلان هم از ویژگی (Property) و مقدار (Value) ساخته می‌شود:

h1 {
  color: crimson;
  font-size: 2rem;
}

این قاعده را چنین بخوانید: «عنصرهای h1 را بردار، رنگشان را crimson و اندازهٔ فونتشان را ۲rem کن». هر اعلان با نقطه‌ویرگول تمام می‌شود و آکولادها بلوک را می‌بندند. تفسیر مرورگر هم بخشنده است: اگر یک اعلان را اشتباه بنویسید، فقط همان اعلان نادیده گرفته می‌شود و بقیهٔ قاعده کار می‌کند.

توضیح‌ها در CSS بین /* و */ نوشته می‌شوند:

/* The main brand color */
--brand: darkslateblue; /* more on colors in a later lesson */

اتصال CSS به صفحه

سه راه برای رساندن استایل به صفحه دارید. راه درست و استاندارد، فایل بیرونی است: کدها را در فایلی مثل styles.css می‌نویسید و در head صفحه با عنصر link وصل می‌کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Test Page</title>
  </head>
  <body>
    <h1>Hello, CSS!</h1>
  </body>
</html>

h1 {
  color: darkslateblue;
}

دو راه دیگر را هم بشناسید، هرچند به‌ندرت انتخاب اول باشند. عنصر style داخل head استایل‌های همان صفحه را نگه می‌دارد و برای آزمایش سریع به کار می‌آید. ویژگی style روی خود عنصر هم استایل درون‌خطی (Inline Style) می‌نویسد:

<h1 style="color: darkslateblue;">A heading with an inline style</h1>

آبشار: کدام قاعده برنده می‌شود؟

واژهٔ Cascading در نام CSS یعنی آبشار. وقتی چند قاعده روی یک عنصر اثر می‌گذارند، مرورگر طبق قوانین مشخصی برنده را انتخاب می‌کند. ساده‌ترین بخش این قوانین را همین حالا بدانید:

1. استایل درون‌خطی از همهٔ قواعد فایل قوی‌تر است.
2. انتخاب‌گر شناسه #id از کلاس .class قوی‌تر است و کلاس از انتخاب‌گر عنصر.
3. اگر دو قاعده هم‌وزن باشند، قاعده‌ای که در فایل پایین‌تر نوشته شده می‌برد.

p { color: gray; }   /* element: low weight */
.note { color: navy; } /* class: wins */

پاراگرافی که کلاس note دارد، به‌جای خاکستری سرمه‌ای می‌شود؛ چون انتخاب‌گر کلاس در برابر انتخاب‌گر عنصر برنده است. این مکانیزم را در درس انتخاب‌گرها دقیق‌تر می‌شماریم.

تمرین‌ها

<!-- Write your code here -->

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>First Styles</title>
  </head>
  <body>
    <h1>Learning CSS</h1>
    <p>Today I wrote my first stylesheet.</p>
  </body>
</html>

h1 {
  color: steelblue;
}

p {
  text-align: center;
}

:::

خلاصه

• CSS زبان تعیین ظاهر است و از HTML جدا نگه داشته می‌شود تا یک فایل، صدها صفحه را پوشش دهد.
• هر قاعده از انتخاب‌گر و بلوک اعلان‌ها ساخته می‌شود؛ هر اعلان جفت ویژگی و مقدار است و با نقطه‌ویرگول تمام می‌شود.
• بهترین راه اتصال، فایل بیرونی با عنصر link است؛ style داخلی و ویژگی style برای موارد خاص‌اند.
• آبشار تعیین می‌کند کدام قاعده برنده شود؛ شناسه از کلاس و کلاس از انتخاب‌گر عنصر قوی‌تر است.

در درس بعدی زبان انتخاب‌گرها را کامل می‌کنیم؛ ابزاری که با آن دقیقاً مشخص می‌کنید کدام عنصرها استایل بگیرند.