اگر تا اینجای مسیر همراه بودی، یعنی حالا با HTML آشنا شدی و میدونی چطور محتوای یک صفحه وب رو بسازی. حالا وقتشه وارد بخش جذابتر ماجرا بشیم: CSS! همون چیزی که ظاهر صفحات رو زیبا، رنگی و حرفهای میکنه.
🎨 تفاوت HTML و CSS
- HTML: ساختار و محتوای صفحه (مثل متن، تصاویر، فرمها).
- CSS: ظاهر و طراحی محتوا (مثل رنگ، فونت، فاصلهها و چیدمان).
به زبان ساده: HTML اسکلت صفحه است و CSS لباس و استایل اون.
🖥️ اتصال فایل CSS به HTML
برای اینکه بتونیم استایلها رو روی صفحه اعمال کنیم، باید یک فایل CSS بسازیم و اون رو به HTML وصل کنیم. این کار با تگ <link> در بخش <head> انجام میشه:
<link rel="stylesheet" href="css/screen.css">
rel="stylesheet"یعنی این فایل یک استایلشیت است.href="..."مسیر فایل CSS رو مشخص میکنه.
📂 بهتره برای نظم بیشتر، یک پوشه به اسم css بسازیم و فایلهامون رو اونجا قرار بدیم.
🎯 اولین قانون CSS
فرض کنیم میخوایم عنوان صفحه (تگ <h1>) رو نارنجی کنیم:
h1 {
color: orange;
}
بعد از ذخیره و رفرش مرورگر، عنوان نارنجی میشه.
🧠 مرور سریع سینتکس CSS
هر قانون CSS شامل دو بخش اصلیه:
- Selector (انتخابگر): مشخص میکنه کد روی کدوم عنصر اعمال بشه (مثلاً
h1). - Declaration (اعلان): داخل آکولاد نوشته میشه و شامل ویژگی (Property) و مقدار (Value) هست.
مثال:
h1 {
color: orange;
text-align: center;
}
color→ ویژگیorange→ مقدار- هر اعلان با
;تموم میشه.
🌱 تغییر رنگ پاراگرافها
برای اینکه همه پاراگرافها سبز بشن:
p {
color: green;
}
ذخیره… رفرش… ✅ حالا همه پاراگرافها سبز شدن!
🧾 جمعبندی
- فایل CSS یک فایل متنی ساده است که با پسوند
.cssذخیره میشه. - با
<link>در بخش<head>به HTML وصل میشه. - قوانین CSS شامل انتخابگر و اعلان هستن.
- هر اعلان یک ویژگی و یک مقدار داره.