یاد بگیریم، بسازیم

← بازگشت به صفحه اصلی

CSS چیست؟

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

CSS دقیقاً چیکار می‌کنه؟

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

چرا CSS به وجود اومد؟

تو روزهای اولیه‌ی وب، برای رنگی کردن یا چیدن یه المان، مجبور بودی مستقیم تو خود تگ‌های HTML از ویژگی‌هایی مثل bgcolor یا font استفاده کنی. این روش دو تا مشکل بزرگ داشت:

• محتوا (HTML) و ظاهر (استایل) قاطی می‌شدن و کد به‌شدت شلوغ می‌شد
• اگه می‌خواستی رنگ همه‌ی تیترهای سایت رو عوض کنی، باید تک‌تک تگ‌ها رو دستی ویرایش می‌کردی

CSS این مشکل رو حل کرد: محتوا (HTML) از ظاهر (CSS) جدا شد، و با تغییر یه فایل CSS، می‌تونی ظاهر کل سایت رو یه‌جا عوض کنی.

سینتکس پایه‌ای CSS

هر قانون CSS از سه بخش تشکیل شده: یه سلکتور (این‌که کدوم المان استایل بگیره)، و داخل آکولاد، یک یا چند جفت ویژگی-مقدار:

سلکتور {
    ویژگی: مقدار;
}

مثلاً:

h1 {
    color: gold;
    font-size: 32px;
}

این قانون می‌گه: «همه‌ی تگ‌های h1 تو صفحه، رنگشون طلایی باشه و اندازه‌ی فونتشون ۳۲ پیکسل».

روش‌های اتصال CSS به HTML

استایل درون‌خطی (Inline)

مستقیم رو خود تگ، با ویژگی style:

<h1 style="color: gold;">عنوان</h1>

سریع‌ترین روشه ولی برای پروژه‌های واقعی توصیه نمی‌شه، چون قابل استفاده‌ی مجدد نیست و کد رو شلوغ می‌کنه.

استایل داخلی (Internal)

داخل تگ <style> تو بخش <head> همون فایل HTML:

<head>
    <style>
        h1 { color: gold; }
    </style>
</head>

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

استایل خارجی (External)

یه فایل جدا با پسوند .css می‌سازی و با تگ <link> بهش وصل می‌شی:

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

این روشیه که تقریباً همیشه باید استفاده کنی — همون‌طور که خود همین سایت هم از یه فایل style.css مشترک برای همه‌ی صفحه‌هاش استفاده می‌کنه.

سلکتورهای پرکاربرد

چند تا از رایج‌ترین سلکتورها:

• سلکتور تگ: p { } — همه‌ی تگ‌های p رو انتخاب می‌کنه
• سلکتور کلاس: .post-card { } — هر المانی که class="post-card" داشته باشه
• سلکتور آیدی: #back-to-top { } — المانی که id="back-to-top" داره (هر آیدی فقط یه بار تو صفحه استفاده می‌شه)
• سلکتور فرزند/تودرتو: nav a { } — همه‌ی تگ‌های a که داخل یه nav هستن

باکس مدل (Box Model)

هر المان تو CSS مثل یه جعبه در نظر گرفته می‌شه که از چهار لایه تشکیل شده:

• Content: خود محتوا (متن یا تصویر)
• Padding: فاصله‌ی داخلی بین محتوا و لبه‌ی جعبه
• Border: کادر دور جعبه
• Margin: فاصله‌ی بیرونی بین این جعبه و جعبه‌های اطرافش

درک درست باکس مدل یکی از مهم‌ترین پایه‌های CSS‌ه — بیشتر گیج‌شدن‌های تازه‌کارها سر همین فاصله‌گذاری‌هاست.

کجاها از CSS استفاده می‌شه؟

• رنگ‌بندی و تایپوگرافی: تعیین رنگ، فونت و اندازه‌ی متن
• چیدمان صفحه: با ابزارهایی مثل Flexbox و Grid
• ریسپانسیو بودن: با Media Query، سایت رو برای موبایل و دسکتاپ تطبیق می‌دی
• انیمیشن و ترنزیشن: افکت‌های ساده‌ی حرکتی بدون نیاز به جاوااسکریپت

جمع‌بندی

CSS ابزاریه که به HTML جون می‌ده — بدونش، هیچ سایتی ظاهر قابل‌قبولی نداشت. یادگیری سلکتورها و باکس مدل، پایه‌ی محکمی برای رفتن سراغ مفاهیم پیشرفته‌تر مثل Flexbox و Grid بهت می‌ده — که دقیقاً بخش بعدی همین مجموعه‌ست.

← بازگشت به صفحه اصلی