آموزش CSS به زبان ساده — شروع سریع و آسان برای مبتدی‌ها

محمد
برنامه نویسی و طراحی وب

1. مقدمه: CSS چیست و چرا مهم است؟

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

2. راه‌های اضافه کردن CSS به سایت

سه روش اصلی برای افزودن CSS به پروژه:

2.1. CSS درون‌خطی (Inline)

کد استایل رو مستقیم داخل تگ HTML می‌نویسی.

<p style="color: red;">این متن قرمز است</p>

2.2. CSS داخلی (Internal)

کدها رو داخل تگ <style> در <head> می‌ذاری.

<head>
  <style>
    p { color: blue; }
  </style>
</head>

2.3. CSS خارجی (External) [روش استاندارد]

در یک فایل جدا (مثلاً style.css) می‌نویسی و به صفحه لینک می‌کنی:

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

توصیه: همیشه از روش سوم برای پروژه‌های جدی‌تر استفاده کن.

3. ساختار یک کد CSS و مفاهیم اولیه

هر دستور CSS این شکلیه:

انتخابگر { خاصیت: مقدار; }

به نظر پیچیده است؟ بیاید با یک مثال ساده جلو بریم:

p {
  color: green;
  font-size: 18px;
}

یعنی هر <p> (پاراگراف) سبز و اندازه فونتش ۱۸ پیکسل میشه.

مفاهیم:

انتخابگر (Selector): تعیین می‌کنه استایل برای کدوم عنصره
خاصیت (Property): چه چیزی تغییر کنه؟ (مثلا رنگ)
مقدار (Value): به چی تغییر کنه؟ (مثلا “سبز”)

4. انتخابگرها (Selectors) — چند مدل پرکاربرد

انتخابگر نوع (عنصر):

  h1 { color: orange; }

انتخابگر کلاس:
کلاس رو در HTML به عنصر اضافه کن و با نقطه در CSS صدا بزن

  .alert { background: yellow; }

  <div class="alert">هشدار!</div>

انتخابگر آیدی:
در HTML آیدی بده و با # در CSS صدا بزن

  #main-title { font-weight: bold; }

  <h1 id="main-title">خوش آمدید</h1>

انتخابگر همه عناصر (ستاره): تمام عناصر را هدف می‌گیرد

  * { margin: 0; padding: 0; }

5. رنگ‌دهی و پس‌زمینه

رنگ متن:

p { color: #007bff; }

رنگ پس‌زمینه:

body { background-color: #f8f9fa; }

استفاده از نام رنگ، هگز، RGBA:

h1 { color: red; }
h2 { color: #28a745; }
h3 { color: rgba(255,0,0,0.8); }

6. فونت و استایل‌دهی متون

تغییر فونت:

p { font-family: Tahoma, Arial, sans-serif; }

اندازه متن:

h2 { font-size: 24px; }

ضخامت، مورب، خط زیری:

strong { font-weight: bold; }
em { font-style: italic; }
a { text-decoration: underline; }

ترازبندی:

p.center { text-align: center; }

7. فریم‌بندی، حاشیه (Margin)، فاصله داخلی (Padding) و Border

Margin (حاشیه بیرونی):

div { margin: 20px; }

Padding (فاصله داخلی):

div { padding: 10px; }

Border (کادر دور عنصر):

img { border: 2px solid orange; }

ترکیب:

.box {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #ccc;
}

8. کار با ابعاد عناصر (Width, Height)

img {
  width: 200px;
  height: auto;
}
div {
  width: 50%;
  min-height: 100px;
}

9. آشنایی با مدل جعبه‌ای (Box Model)

هر عنصر در HTML مثل یک جعبه است:

Content: محتوای اصلی
Padding: فاصله تا Border
Border: خط دور جعبه
Margin: فاصله جعبه تا بقیه جعبه‌ها

مثال:

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #000;
  margin: 15px;
}

10. شناورسازی و موقعیت‌دهی (Position، float، display)

float:

img.float-left { float: left; margin-right: 20px; }

position:

.banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}

display:

span { display: inline; }
div { display: block; }
.menu { display: flex; justify-content: space-between; }

11. ریسپانسیو کردن سایت با Media Query

برای نمایش درست در موبایل و دسکتاپ:

@media (max-width: 600px) {
  body { background: lightgray; }
  .box { width: 100%; }
}

مجبور نیستی چند نسخه سایت بنویسی، کافیست چند قانون ساده اضافه کنی تا ظاهر صفحه در دستگاه‌های مختلف تغییر کنه.

12. نکات و بهترین تمرین‌های CSS

از کلاس برای استایل‌دهی استفاده کن، نه ID
فایل CSS رو آخر <head> بذار تا سریع‌تر لود شه
کدهای CSS رو دسته‌بندی و مرتب بنویس
از ابزارهایی مثل CSS Validation Service استفاده کن
هر تغییری دادی، F5 بزن و تست کن

13. سوالات پرتکرار CSS

آیا هنوز باید CSS یاد بگیرم؟
بله، هر سایت مدرنی به CSS نیاز داره!

Bootstrap یا فریم‌ورک‌های دیگه جایگزین CSS هستن؟
خیر، Bootstrap درواقع بر پایه‌ی CSS ساخته شده. با زدن پایه CSS می‌تونی از هر فریم‌ورکی استفاده کنی.

چطور سایتم توی موبایل درست نمایش داده بشه؟
با media queryها و استفاده‌ی درست از واحدهای نسبی مثل درصد و vw/vh

محمد وب‌سایت