CSS یا 'Cascading Style Sheets' زبانیه که بهت کمک می‌کنه ظاهر سایتت رو با رنگ، فونت، چیدمان و حتی انیمیشن طراحی کنی. با یه فایل HTML و یه فایل .css، می‌تونی استایل‌هایی مثل color: blue; یا font-size: 18px; به عناصر بدی و با ابزارهایی مثل فلکس‌باکس و گرید، صفحه‌ات رو منظم کنی. تو این مقاله از صفر شروع کردیم، یه کارت ساده با تیتر، متن و دکمه ساختیم و ترفندهایی مثل مدیا کوئری برای ریسپانسیو کردن یاد گرفتیم. دست به کد بزن و با CSS، سایتت رو از یه اسکلت ساده به یه طراحی جذاب تبدیل کن!

 

اگه با HTML آشنا شدی و اولین صفحه وب‌ات رو ساختی، حالا وقتشه که بهش رنگ و لعاب بدی. اینجا CSS وارد بازی می‌شه! تو این مقاله قراره از صفر با CSS یا "Cascading Style Sheets" آشنا بشی، بفهمی چطور کار می‌کنه و چطور می‌تونی سایتت رو از یه متن ساده به یه صفحه جذاب تبدیل کنی. آماده‌ای؟ دست به کد بزنیم و استایل دادن رو یاد بگیریم!

CSS چیه؟

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

اسمش "Cascading" یا "آبشاری"ه چون قوانینش به ترتیب اعمال می‌شن و می‌تونی اولویت‌ها رو مشخص کنی (بعداً بیشتر توضیح میدم). خلاصه اینکه CSS بهت قدرت می‌ده تا هر چیزی که تو ذهنت داری رو به صفحه‌ات بیاری.

چرا CSS مهمه؟

  • زیبایی: سایتت رو از حالت خام به یه طراحی حرفه‌ای می‌بره.
  • انعطاف‌پذیری: با چند خط کد، کل ظاهر سایتت رو عوض می‌کنی.
  • تجربه کاربری: یه سایت خوشگل و منظم، کاربر رو بیشتر نگه می‌داره.
  • استاندارد وب: هر طراح سایتی باید CSS بلد باشه.

چطور شروع کنیم؟

برای کار با CSS، مثل HTML به چیز خاصی نیاز نداری. یه فایل HTML دم دستت باشه، یه ویرایشگر متن (مثل Notepad یا VS Code) و یه مرورگر کافیه. CSS رو می‌تونی به سه روش به HTML وصل کنی:

  1. داخل خط (Inline): مستقیم تو تگ HTML می‌نویسی.
  2. داخلی (Internal): تو بخش <style> توی <head> می‌ری.
  3. خارجی (External): یه فایل جدا با پسوند .css می‌سازی و به HTML لینک می‌دی.

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

قدم ۱: یه فایل HTML بساز

اول یه فایل ساده به اسم index.html بساز و این کد رو توش بنویس:

<!DOCTYPE html>
<html>
<head>
    <title>آزمایش CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>سلام به دنیای CSS</h1>
    <p>اینجا قراره استایل ببینی!</p>
</body>
</html>
قدم ۲: فایل CSS رو بساز

یه فایل جدید به اسم styles.css تو همون پوشه بساز و این کد رو توش بنویس:

h1 {
    color: blue;
    font-size: 36px;
}

p {
    color: gray;
    font-family: Arial;
}
قدم ۳: نتیجه رو ببین

فایل index.html رو تو مرورگر باز کن. می‌بینی که تیترت آبی و بزرگ شده و پاراگرافت خاکستری با فونت Arialه. همین! اولین استایلت رو زدی.

ساختار CSS چطوره؟

هر قانون CSS از دو بخش تشکیل شده:

  • Selector (انتخاب‌گر): می‌گه کدوم عنصر HTML رو می‌خوای استایل بدی (مثل h1 یا p).
  • Declaration (اعلان): تو یه بلوک {} می‌گه چی رو عوض کنی (مثل color: blue;).

هر اعلان خودش دو بخش داره:

  • Property (ویژگی): مثلاً color یا font-size.
  • Value (مقدار): مثلاً blue یا 36px.

مفاهیم اصلی CSS که باید یاد بگیری

بیایم چند تا از مهم‌ترین چیزایی که تو CSS نیاز داری رو با مثال مرور کنیم:

۱. رنگ‌ها (Colors)

با CSS می‌تونی رنگ متن، پس‌زمینه یا خطوط رو عوض کنی. چند روش برای انتخاب رنگ داری:

  • اسم رنگ: color: red;
  • کد هگز: color: #FF0000; (همون قرمز)
  • RGB: color: rgb(255, 0, 0);

مثال:

h1 {
    color: #FF5733;
    background-color: lightyellow;
}

 

. 2 فونت و متن (Fonts & Text)

می‌تونی فونت، اندازه، ضخامت و تراز متن رو تنظیم کنی:

p {
    font-family: "Helvetica", sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

 

 

اگه فونت اول (مثل Helvetica) رو سیستم کاربر نباشه، به سراغ گزینه بعدی (sans-serif) می‌ره.

۳. جعبه‌ها (Box Model)

هر عنصر تو صفحه یه جعبه‌ست که شامل ایناست:

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

مثال:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}
۴. چیدمان (Layout)

برای چیدمان عناصر، دو ابزار اصلی داری:

  • فلکس‌باکس (Flexbox): چیدمان یه‌بعدی رو ساده می‌کنه.
  • گرید (Grid): برای چیدمان دوبعدی عالیه.

مثال فلکس‌باکس:

.container {
    display: flex;
    justify-content: space-between;
}
۵. ریسپانسیو کردن (Responsiveness)

با مدیا کوئری‌ها می‌تونی استایل رو برای اندازه‌های مختلف صفحه تنظیم کنی:

@media (max-width: 600px) {
    h1 {
        font-size: 24px;
    }
}

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

یه پروژه عملی: استایل یه کارت ساده

بیایم با هم یه کارت بسازیم که یه تیتر، متن و دکمه داشته باشه.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>کارت با CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">
        <h2>خوش اومدی!</h2>
        <p>این یه کارت ساده‌ست که با CSS استایل شده.</p>
        <button>کلیک کن</button>
    </div>
</body>
</html>
CSS:
.card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 5px gray;
    margin: 20px auto;
    text-align: center;
}

h2 {
    color: #2E86C1;
    font-size: 24px;
}

p {
    color: #555;
    font-size: 16px;
}

button {
    background-color: #2E86C1;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #1B4F72;
}

 

 

این کد یه کارت خوشگل با سایه، دکمه تعاملی و رنگ‌های هماهنگ می‌سازه. فایل رو ذخیره کن و تو مرورگر بازش کن تا نتیجه رو ببینی.

ترفندهای سریع برای تازه‌کارها

  1. از مرورگر کمک بگیر: با کلیک راست و "Inspect" تو مرورگر، می‌تونی استایل‌ها رو زنده تست کنی.
  2. واحدها رو بشناس: px برای اندازه ثابت، % برای نسبی و rem برای مقیاس‌پذیر.
  3. ترتیب مهمه: اگه دو قانون برای یه عنصر باشه، آخری اعمال می‌شه (مگر اینکه اولویت عوض شه).
  4. کپی کن و یاد بگیر: کدهای آماده رو ببین، تغییر بده و تست کن.

مشکلات رایج و راه‌حل‌ها

  • استایل اعمال نمی‌شه: چک کن فایل CSS درست لینک شده باشه یا اسم انتخاب‌گرت اشتباه نباشه.
  • فاصله‌ها عجیبن: باگ جعبه رو بررسی کن (margin و padding رو تنظیم کن).
  • رنگ‌ها نمیان: فرمت رنگ رو درست بنویس (مثلاً # رو فراموش نکن).

حالا کجا برم؟

CSS دنیای بزرگیه! بعد از این مقاله، می‌تونی سراغ اینا بری:

  • انیمیشن‌ها با @keyframes.
  • کار با فلکس‌باکس و گرید برای چیدمان پیچیده‌تر.
  • یادگیری Sass برای کدهای تمیزتر.

حرف آخر

CSS مثل قلم‌مو تو دست یه نقاشه؛ هر چقدر بیشتر باهاش کار کنی، بهتر می‌تونی ایده‌هات رو به واقعیت تبدیل کنی. پس دست به کد بزن، چیزایی که یاد گرفتی رو تست کن و اگه سوالی داشتی، تو کامنت‌های "دست به کد" بپرس. تو مقاله‌های بعدی، بیشتر وارد جزئیات می‌شیم و پروژه‌های باحال‌تری باهم می‌سازیم. استایل دادن رو شروع کن و سایتت رو یه پله بالاتر ببر!