اولین CSS — ترم ۲ آیرو

در این فصل چه می‌سازی#

تا اینجا هر صفحه‌ای که ساختی یک چیز مشترک داشت: سیاه روی سفید، فونتِ پیش‌فرض، بی‌رنگ. کارِ HTML همین بود و درست هم بود. حالا ترمِ تازه‌ای شروع می‌شود. آخر این فصل یک کارت معرفیِ کوچک داری که پس‌زمینه‌اش رنگ دارد، متنش رنگ دارد، و تیترش رنگی جدا دارد — و همهٔ این رنگ‌ها را تو انتخاب کرده‌ای، نه مرورگر. این اولین باری است که به صفحه می‌گویی «چه شکلی باش».

یک صفحه در دو حالت کنار هم: سمت راست بی‌رنگ و پیش‌فرض، سمت چپ همان صفحه با پس‌زمینه و متنِ رنگی

آخر این فصل می‌توانی:

بگویی چرا ظاهر و رنگ کارِ HTML نیست و CSS دقیقاً چه کاری را برعهده می‌گیرد
یک فایل CSS جدا بسازی و با <link> به صفحه وصلش کنی
ساختار یک قاعدهٔ CSS را خط‌به‌خط بشناسی: selector و declaration
رنگ متن و رنگ پس‌زمینه را با color و background-color عوض کنی و اثرش را ببینی

قبل از شروع#

از ترم ۱: اسکلت یک صفحهٔ HTML (<head> و <body>) و tag های semantic مثل <header> و <main>. ما این ترم روی همان صفحه‌ها رنگ و ظاهر می‌گذاریم.
از فصل ۱ ترم ۱: یادت هست که <head> جایی است که به ماشین‌ها حرف می‌زنی؟ وصل‌کردن CSS هم همان‌جا اتفاق می‌افتد.

مثل کل این خودآموز فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. چرا رنگ کارِ HTML نیست#

در کل ترم ۱ یک قانون را تکرار کردیم: HTML می‌گوید هر تکه از صفحه چه هست، نه اینکه چه شکلی باشد. <h1> یعنی «مهم‌ترین تیتر»، نه «متنِ بزرگ». <strong> یعنی «این مهم است»، نه «این را ضخیم کن». بزرگ‌بودن و ضخیم‌بودن، تصمیمِ پیش‌فرضِ مرورگر بود، نه چیزی که تو گفتی.

حالا وقتش رسیده که خودت دربارهٔ ظاهر تصمیم بگیری. ابزار این کار یک زبان جداست به اسم CSS. کارِ CSS یک چیز است: می‌گوید عنصرهای صفحه چه شکلی باشند — چه رنگی، چه اندازه‌ای، کجای صفحه، با چه فاصله‌ای.

چرا این دو تا را جدا کرده‌اند؟ چرا رنگ را همان‌جا داخل HTML نمی‌نویسیم؟ سه دلیلِ محکم:

یک CSS، صدها صفحه. یک سایتِ واقعی ده‌ها صفحه دارد که باید شبیه هم باشند. با CSSِ جدا، رنگ و فونت را یک‌جا می‌نویسی و همهٔ صفحه‌ها از آن استفاده می‌کنند. رنگِ اصلی را عوض کنی، کلِ سایت با هم عوض می‌شود.
معنا دست‌نخورده می‌ماند. موتور جست‌وجو و screen reader فقط به ساختارِ HTML کار دارند، نه به رنگ. وقتی ظاهر را از ساختار جدا نگه می‌داری، هر کدام کارِ خودش را تمیز انجام می‌دهد.
عوض‌کردنِ ظاهر، ساختار را خراب نمی‌کند. می‌خواهی رنگ را عوض کنی؟ به HTML دست نمی‌زنی. این یعنی کمتر چیزی می‌شکند.

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

پس از این به بعد دو فایل داریم که با هم کار می‌کنند: یک فایل .html که می‌گوید چه هست، و یک فایل .css که می‌گوید چه شکلی است. تار و پود، کنار هم.

۲. یک فایل CSS بساز و وصلش کن#

بیا از همین کارتِ معرفی شروع کنیم. این صفحهٔ ترم‌یکیِ ماست — کاملاً آشنا، بدون یک ذره CSS:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>کارت معرفی من</title>
  </head>
  <body>
    <header>
      <h1>سارا احمدی</h1>
      <p>تازه ساختن سایت را یاد می‌گیرم.</p>
    </header>

    <main>
      <p>این اولین صفحه‌ای است که رنگش را خودم انتخاب می‌کنم.</p>
    </main>
  </body>
</html>

حالا کنارِ این، یک فایلِ دوم می‌سازیم به اسم styles.css. داخلش این را بنویس:

body {
  background-color: cornsilk;
}

این می‌گوید «پس‌زمینهٔ <body> را رنگِ cornsilk کن» — یک کِرِمِ روشن. ولی اگر همین الان صفحه را نگاه کنی، هیچ اتفاقی نمی‌افتد. چرا؟ چون این دو فایل هنوز همدیگر را نمی‌شناسند. فایلِ HTML اصلاً خبر ندارد که یک فایلِ CSS وجود دارد.

باید به HTML بگوییم «برو این فایلِ CSS را هم بردار و اعمال کن». این کار را با یک tag به اسم <link> انجام می‌دهیم که داخل <head> می‌رود. این خط را به <head> اضافه کن:

<link rel="stylesheet" href="style.css">

rel="stylesheet" می‌گوید «این لینک به یک برگهٔ استایل است»، و href می‌گوید «آدرسِ آن فایل این است».

نگاه کن به صفحه. باز هم پس‌زمینه عوض نشد. اما این‌بار خبری از خطا هم نیست — نه در HTML، نه در CSS. صفحه بی‌سروصدا بی‌رنگ ماند. این دقیقاً همان موذی‌بودنی است که در ترم ۱ دیدیم، این‌بار در CSS.

🔧 اگر کار نکرد: پس‌زمینه رنگی نشد؟ به href دقت کن. ما نوشتیم href="style.css" ولی اسم فایلی که ساختیم styles.css است — با یک sِ اضافه. برای تو این دو تا «تقریباً یکی» است، ولی برای مرورگر دو اسمِ کاملاً متفاوت‌اند. مرورگر رفت دنبالِ style.css، پیدایش نکرد، و بی‌خیالِ کلِ استایل شد. اسم را دقیقاً یکسان کن:

<link rel="stylesheet" href="styles.css">

حالا نگاه کن.

✅ چک کن: پس‌زمینهٔ کلِ صفحه باید کِرِمی (cornsilk) شده باشد. اگر هنوز سفید است، یعنی هنوز اسمِ فایل در href با اسمِ واقعیِ فایلِ CSS مو‌به‌مو یکی نیست — تا وقتی این دو دقیقاً برابر نشوند، مرورگر فایل را پیدا نمی‌کند.

این اولین درسِ بزرگِ CSS بود: اگر استایلت اصلاً اعمال نمی‌شود، قبل از هر چیز مطمئن شو فایل درست وصل شده. خیلی وقت‌ها مشکل در قاعده‌ات نیست؛ مرورگر اصلاً فایلت را ندیده.

۳. ساختارِ یک قاعده#

حالا که کار می‌کند، بیا خوب نگاه کنیم چه نوشتیم. آن تکه‌ی CSS یک قاعده (rule) است، و هر قاعدهٔ CSS دقیقاً دو بخش دارد:

body {
  background-color: cornsilk;
}

بخشِ اول، آن body که قبل از { آمده، selector است: می‌گوید این قاعده به کدام عنصرها بخورد. اینجا نوشته‌ایم body، یعنی «هر جا <body> هست». به همین سادگی: اسمِ tag را بنویسی، آن قاعده به آن نوع عنصر می‌خورد.

بخشِ دوم، هر چیزی که داخلِ { } است، declaration block است: فهرستِ کارهایی که باید انجام شود. اینجا یک کار داریم. هر کار خودش هم دو تکه است:

background-color اسمِ property است — «چه چیزی را عوض می‌کنی». اینجا: رنگِ پس‌زمینه.
cornsilk مقدار یا value است — «به چه چیزی عوضش می‌کنی».

بینِ property و value یک : می‌گذاری، و آخرِ هر کار یک ;. پس شکلِ کامل این است: selector بیرون، بعد {، بعد یک یا چند property: value;، بعد }.

یک قاعدهٔ CSS به‌شکل نموداری از هم باز شده: یک شکل که به عنصری روی صفحه اشاره می‌کند (selector)، و کنارش یک جعبه که چند جفت نقطه‌ورنگ داخلش است (declaration ها)، با خط‌های راهنما به حاشیه

💡 نکته: آن ; آخرِ هر خط الان که یک کار داری الزامی به‌نظر نمی‌رسد، ولی وقتی چند کار پشتِ هم بیاید، همین ; است که به مرورگر می‌گوید یک کار تمام شد و کارِ بعدی شروع می‌شود. عادت کن همیشه بگذاری‌اش؛ در بخشِ آخرِ همین فصل می‌بینی نبودنش چه بلایی سرِ صفحه می‌آورد.

قبل از ادامه، جواب بده: در قاعدهٔ h1 { color: crimson; } کدام تکه selector است، کدام property و کدام value؟

جواب: h1 همان selector است (به کدام عنصر می‌خورد)، color همان property است (چه چیزی را عوض می‌کنی: رنگِ متن)، و crimson همان value است (به چه رنگی). همین ساختار در هر قاعدهٔ CSS تکرار می‌شود؛ فقط اسم‌ها عوض می‌شوند.

۴. `color`: رنگِ متن#

background-color رنگِ پس‌زمینه بود. رنگِ خودِ متن property دیگری دارد: color. بیا به همان قاعدهٔ body یک کار دوم اضافه کنیم:

body {
  background-color: cornsilk;
  color: navy;
}

دو تا declaration در یک block، هر کدام با ;ِ خودش. navy یک سرمه‌ایِ تیره است.

✅ چک کن: همهٔ متن‌های صفحه — تیتر، پاراگرافِ زیرش، متنِ <main> — باید سرمه‌ای شده باشند. یک قاعده روی body گذاشتی و رنگِ همهٔ متن‌ها عوض شد؛ چراییِ این را در فصل ۳ کامل می‌بینیم.

حالا بیا تیتر را یک رنگِ جدا بدهیم تا از بقیهٔ متن جدا شود. یک قاعدهٔ دومِ کامل، این‌بار با selectorِ h1، زیرِ قاعدهٔ body اضافه کن:

h1 {
  color: crimson;
}

✅ چک کن: فقط تیتر «سارا احمدی» باید قرمز (crimson) شده باشد، و بقیهٔ متن‌ها هنوز سرمه‌ای بمانند. چون این قاعده مستقیم <h1> را هدف گرفته، رنگِ تیتر همین قرمز می‌شود؛ اینکه چرا این قاعده بر آن color: navyِ body غلبه می‌کند، دقیقاً موضوعِ فصل ۳ است — فعلاً همین‌قدر که می‌بینی کار می‌کند کافی است.

اینها همهٔ فایلِ styles.css تا اینجاست:

/* styles.css */
body {
  background-color: cornsilk;
  color: navy;
}

h1 {
  color: crimson;
}

و این هم فایلِ کاملِ HTML با <link>ِ درست، که فایلِ CSS بالا را صدا می‌زند:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>کارت معرفی من</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>سارا احمدی</h1>
      <p>تازه ساختن سایت را یاد می‌گیرم.</p>
    </header>

    <main>
      <p>این اولین صفحه‌ای است که رنگش را خودم انتخاب می‌کنم.</p>
    </main>
  </body>
</html>

🤖 با AI: از دستیار AI ات بپرس «فرقِ color و background-color چیست؟». جوابش را بخوان، ولی همان اولین عادتِ این خودآموز را تمرین کن: جوابِ AI را با چیزی که خودت می‌بینی چک کن. در آزمایشگاه یک بار جای این دو property را عوض کن — به body بده background-color: navy و color: cornsilk — و ببین صفحه چطور معکوس می‌شود. چیزی که با چشمِ خودت دیدی از هر توضیحی معتبرتر است.

۵. حالا عمداً خرابش کن#

یاد گرفتنِ اینکه یک چیز چطور می‌شکند به‌اندازهٔ یاد گرفتنِ اینکه چطور کار می‌کند مهم است. در آزمایشگاه، از قاعدهٔ h1 آن ;ِ آخرِ خطِ color: crimson را پاک کن، بعد بلافاصله زیرش یک کارِ دوم اضافه کن، مثلاً background-color: gold، تا این‌طور شود:

h1 {
  color: crimson
  background-color: gold;
}

نگاه کن به تیتر. نه قرمز شد، نه پس‌زمینهٔ طلایی گرفت — هیچ‌کدام. بدونِ آن ;، مرورگر این دو خط را یک کارِ به‌هم‌چسبیده و بی‌معنی دید، نفهمیدش، و کلاً هر دو را دور انداخت. باز هم خطایی روی صفحه ندیدی؛ CSS هم مثل HTML وقتی چیزی را نمی‌فهمد، بی‌سروصدا ردش می‌کند و می‌رود سراغِ قاعدهٔ بعدی.

حالا آن ; را سرِ جایش برگردان:

h1 {
  color: crimson;
  background-color: gold;
}

✅ چک کن: حالا تیتر هم قرمز است و هم پس‌زمینهٔ طلایی دارد. همان یک ; بود که همه‌چیز را برگرداند.

این رفتار را به خاطر بسپار: CSSِ خراب معمولاً فریاد نمی‌زند؛ فقط ساکت می‌شود. اگر یک قاعده اعمال نشد، دو مظنونِ اولت همین دو تاست: یا فایل درست وصل نشده (بخش ۲)، یا جایی یک ; یا { یا } جا افتاده و مرورگر قاعده را دور انداخته. حالا background-color: gold را از h1 بردار تا به همان فایلِ تمیزِ بخش قبل برگردی.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
CSS	سی‌اِس‌اِس	زبانی که ظاهرِ صفحه را کنترل می‌کند: رنگ، اندازه، فاصله، چیدمان
rule	رول	یک قاعدهٔ کامل CSS: یک selector به‌علاوهٔ یک declaration block
selector	سِلِکتور	تکهٔ قبل از `{` که می‌گوید قاعده به کدام عنصرها بخورد
declaration	دِکلَریشِن	یک کار داخلِ `{ }`: یک جفتِ `property: value;`
property	پراپِرتی	چه چیزی را عوض می‌کنی (مثل `color`)
value	ولیو	به چه چیزی عوضش می‌کنی (مثل `navy`)
link	لینک	tag یی که در `<head>` یک فایلِ CSS را به صفحه وصل می‌کند

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

الان می‌توانی یک قاعده بنویسی و با اسمِ tag (مثلِ body یا h1) به یک نوع عنصر بخورانی‌اش. ولی همیشه نمی‌خواهی همهٔ <p> ها یک شکل باشند — گاهی فقط یکی‌شان را می‌خواهی جدا کنی. فصل بعد سراغِ selector های قوی‌تر می‌رویم: class و id، اینکه چرا class انتخابِ اولت است، چطور چند عنصر را با هم هدف بگیری، و چطور فقط عنصرهای داخلِ یک ناحیهٔ خاص را انتخاب کنی.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.