آموزش کامل CSS

🔹 CSS چیست؟

CSS مخفف Cascading Style Sheets است. با آن به عناصر HTML استایل (رنگ، اندازه، فاصله) می‌دهیم.

h1 {
  color: #3b82f6;
  font-size: 32px;
  text-align: center;
}

ابتدا «سلکتور» (مثل h1)، سپس داخل { } خاصیت‌ها را می‌نویسیم.

🔹 رنگ و پس‌زمینه

.box {
  color: white;
  background: #111;
  padding: 16px;
  border-radius: 12px;
}

🔹 چیدمان با Flexbox

.row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

Flexbox بهترین روش برای چیدن عناصر کنار هم است.

🔹 انیمیشن ساده

.btn {
  transition: transform .2s;
}
.btn:hover {
  transform: scale(1.1);
}

🔹 سلکتورها (Selectors)

با سلکتور مشخص می‌کنیم استایل روی کدام عنصر اعمال شود.

p        { color: gray; }   /* همه پاراگراف‌ها */
.box     { padding: 10px; } /* کلاس */
#main    { width: 100%; }   /* آی‌دی */
.menu a  { color: blue; }   /* لینک داخل منو */

. برای class، # برای id، و فاصله برای عناصر تودرتو.

🔹 باکس مدل (Box Model)

هر عنصر یک جعبه است: محتوا + padding (فاصله داخلی) + border (حاشیه) + margin (فاصله بیرونی).

.card {
  padding: 16px;
  border: 2px solid #3b82f6;
  margin: 12px;
  box-sizing: border-box;
}

🔹 متن و فونت

p {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: .5px;
  text-align: justify;
}

🔹 موقعیت‌دهی (Position)

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
}
.bar { position: sticky; top: 0; }

مقادیر: static, relative, absolute, fixed, sticky.

🔹 چیدمان با Grid

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Grid برای چیدمان دوبعدی (سطر و ستون) عالی است.

🔹 طراحی واکنش‌گرا (Responsive)

با Media Query استایل را بر اساس اندازهٔ صفحه تغییر می‌دهیم تا در موبایل هم زیبا باشد.

@media (max-width: 760px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

🔹 متغیرها، سایه و گرادیان

:root { --brand: #3b82f6; }
.btn {
  background: linear-gradient(135deg, var(--brand), #06b6d4);
  box-shadow: 0 8px 24px rgba(59,130,246,.4);
  border-radius: 12px;
}

🚀 CSS Pro Roadmap v35 — حرفه‌ای‌تر شو

بعد از مقدمات، این‌ها را یاد بگیر: pseudo-class، pseudo-element، clamp، container، transform، animation و طراحی responsive.

.card:hover { transform: translateY(-6px); }
.card::before { content:""; position:absolute; inset:0; }
.title { font-size: clamp(28px, 5vw, 72px); }

🎯 تمرین پروژه‌ای

یک لندینگ پیج بساز: hero، سه کارت ویژگی، فرم ثبت‌نام، و footer. بعد در Code Lab تست کن.

.landing {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #1d4ed8, #020617);
}