در حال بارگذاری...

مقدمه CSS

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

CSS چیست؟

CSS (Cascading Style Sheets) زبان استاندارد استایل‌دهی اسناد HTML است. قوانینی می‌نویسید که به مرورگر بگویند عناصر چگونه دیده شوند: رنگ متن، فونت، حاشیه، پس‌زمینه، چیدمان و بیشتر. HTML پاسخ می‌دهد «این محتوا چیست؟» CSS پاسخ می‌دهد «چگونه باید دیده شود؟»

HTML و CSS با هم کار می‌کنند

HTML را اسکلت صفحه و CSS را لباس و پرداخت بدانید. همچنان به HTML محکم نیاز دارید — تیتر، پاراگراف، لینک و landmark — تا CSS عنصر معنادار برای استایل داشته باشد. این کورس فرض می‌کند HTML پایه را می‌دانید.

📊 نقش HTML در برابر CSS

لایه	کار اصلی	سؤال‌های معمول
HTML	ساختار و معنا	این تیتر است، پاراگراف، یا لینک؟
CSS	ظاهر و چیدمان	چه رنگ، اندازه، فاصله و ترتیبی؟
JavaScript (بعداً)	رفتار و تعامل	وقتی کاربر کلیک کرد چه می‌شود؟

JavaScript را در کورس بعدی می‌آموزید. فعلاً تفکیک را روشن نگه دارید: ساختار در HTML، ظاهر در CSS.

نگاهی اول به یک قانون CSS

یک قانون CSS سلکتور (چه چیزی استایل شود) و declarationها (چگونه استایل شود) دارد. Declarationها داخل آکولاد هستند و از یک ویژگی و یک مقدار استفاده می‌کنند.

یک قانون ساده

css

CSS Code

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

این قانون چه می‌کند

h1 سلکتور است — هر عنصر h1 را هدف می‌گیرد
color: navy; رنگ متن را تنظیم می‌کند
font-size: 2rem; اندازه تیتر را تنظیم می‌کند
هر declaration با نقطه‌ویرگول تمام می‌شود
سلکتورها و واحدها را در جلسات بعد عمیق‌تر می‌آموزید. اینجا کافی است شکل قانون را ببینید.

دیدن CSS روی صفحه

مرورگر قوانین CSS را روی عناصر HTML مطابق اعمال می‌کند. پایین، صفحهٔ کوتاهی از بلوک داخلی <style> استفاده می‌کند تا HTML و CSS را در یک فایل ببینید. جلسات بعد stylesheet خارجی و روش‌های دیگر افزودن CSS را پوشش می‌دهند.

HTML با بلوک style

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

چه چیزی عوض شد

بدون قوانین <style> صفحه ظاهر پیش‌فرض مرورگر را می‌گیرد. با CSS پس‌زمینه نرم‌تر می‌شود، تیتر آبی تیره می‌شود و پاراگراف فاصلهٔ خوانا می‌گیرد. همان محتوای HTML — ظاهر متفاوت.

چرا «cascading» مهم است (پیش‌نمایش)

«Cascading» در CSS یعنی استایل می‌تواند از چند جا بیاید و مرورگر با قوانین cascade و specificity تصمیم می‌گیرد کدام قانون برنده شود. هنوز به الگوریتم کامل نیاز ندارید. این ایده را به خاطر بسپارید: چند قانون می‌توانند یک عنصر را هدف بگیرند و CSS برای ظاهر نهایی سیستم روشنی دارد. جلسات بعدی cascade و specificity آن را عملی می‌کنند.

خودتان امتحان کنید

فایلی به نام intro.html بسازید.
مثال HTML-با-style را بچسبانید، ذخیره کنید و در مرورگر باز کنید.
در قانون h1 مقدار color: #1a365d; را به color: teal; تغییر دهید، ذخیره و تازه کنید.
رنگ تیتر را تأیید کنید. اگر چیزی عوض نشد، ذخیره و تب درست را چک کنید.

اشتباهات رایج

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

خلاصه

CSS صفحات HTML را استایل می‌دهد: رنگ، فونت، فاصله، چیدمان و ظاهر
HTML محتوا را ساختاربندی می‌کند؛ CSS ظاهر آن را کنترل می‌کند
قانون CSS سلکتور را با declarationهای ویژگی/مقدار داخل { } جفت می‌کند
می‌توانید با بلوک <style> شروع کنید، بعد به stylesheet خارجی بروید
Cascading یعنی چند قانون می‌توانند اعمال شوند؛ درس‌های بعد می‌گویند کدام برنده است
با ویرایش یک قانون کوچک و تازه کردن مرورگر تمرین کنید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان