دنیای کامل CSS
از صفر تا صد

p {
  color: deeppink;      /* رنگ متن */
  font-size: 24px;     /* اندازه فونت */
  font-weight: bold;   /* ضخامت */
}

  ┌── سلکتور (Selector): چه چیزی را استایل بدهیم؟
h1 {
  ┌── پراپرتی    ┌── مقدار (Value)
  color: blue;   ← یک «اعلان» (Declaration)
  font-size: 32px;
}
▲                    ▲
آکولاد باز           ; جداکننده اعلان‌ها

/* این یک کامنت تک‌خطی است */

/*
  کامنت
  چندخطی هم همینطوری
*/

body { margin: 0; /* حذف فاصله پیش‌فرض */ }

/* یک قانون برای چند سلکتور (با کاما) */
h1, h2, h3 {
  font-family: Tahoma, sans-serif;
}

@import "reset.css";
@import url("theme.css") screen;

nav a { ... }      /* هر لینک داخل nav، هر عمقی */
ul > li { ... }    /* فقط li که فرزند مستقیم ul است */
h2 + p { ... }     /* پاراگراف بلافاصله بعد از h2 */
h2 ~ p { ... }     /* همه پاراگراف‌های هم‌سطح بعد h2 */

p                /* (0,0,0,1) = 1 */
.box             /* (0,0,1,0) = 10 */
#main            /* (0,1,0,0) = 100 */
#main .box p     /* (0,1,1,1) = 111 ← برنده! */
.box.active p    /* (0,0,2,1) = 21 */

┌─────────── margin (فاصله بیرونی) ───────────┐
│  ┌──────── border (حاشیه) ────────────────┐  │
│  │  ┌───── padding (فاصله داخلی) ───────┐  │  │
│  │  │                                  │  │  │
│  │  │        content (محتوا)           │  │  │
│  │  │                                  │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

/* ۴ مقدار: بالا راست پایین چپ (ساعتگرد) */
margin: 10px 20px 30px 40px;

/* ۲ مقدار: بالا‌وپایین | راست‌وچپ */
padding: 10px 20px;

/* ۱ مقدار: هر چهار طرف */
margin: 0;

/* جداگانه */
margin-top: 10px;
padding-inline: 20px; /* راست+چپ منطقی (RTL/LTR) */

/* پیش‌فرض: width = فقط محتوا */
box-sizing: content-box;
عرض کل = width + padding + border

/* بهتر: width = کل جعبه (با padding و border) */
box-sizing: border-box;
عرض کل = دقیقاً همان width

/* توصیه: روی همه عناصر اعمالش کن */
* { box-sizing: border-box; }

/* الگوی پرتکرار: فرزند absolute داخل والد relative */
.card { position: relative; }
.badge {
  position: absolute;
  top: 8px; right: 8px;
}

/* هدر چسبان بالای صفحه */
header { position: sticky; top: 0; }

.modal { position: fixed; z-index: 1000; }
.overlay { z-index: 999; }

html { font-size: 16px; }
h1   { font-size: 2rem; }  /* = 32px (2×16) */
.box { width: 50%; height: 100vh; }  /* تمام ارتفاع صفحه */

color: red;
color: #ff0000;
color: rgb(255 0 0 / 50%);   /* سینتکس مدرن */
color: rgba(255, 0, 0, 0.5);   /* سینتکس قدیمی */
color: hsl(0 100% 50% / .5);

.icon { border: 1px solid currentColor; } /* همان رنگ متن */
.faded { opacity: 0.5; } /* شفافیت کل عنصر */

.hero {
  background-image: url("bg.jpg");
  background-size: cover;     /* پر کردن کامل بدون اعوجاج */
  background-position: center;
  background-repeat: no-repeat;
  /* شورت‌هند معادل: */
  background: url("bg.jpg") center/cover no-repeat;
}

/* خطی */
background: linear-gradient(90deg, red, blue);
/* شعاعی (دایره‌ای) */
background: radial-gradient(circle, yellow, orange);
/* مخروطی (چرخان) */
background: conic-gradient(red, green, blue, red);
/* با نقاط توقف دقیق */
background: linear-gradient(red 0%, red 50%, blue 50%);

body {
  font-family: "Vazirmatn", Tahoma, sans-serif; /* fallback مهم! */
  font-size: 16px;
  line-height: 1.7;   /* بدون واحد = ضریب فونت */
}
/* شورت‌هند font (ترتیب مهم است) */
h1 { font: bold 2rem/1.2 Tahoma; }

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap; /* جلوگیری از متن نامرئی */
}

/* یک خط با سه‌نقطه */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* چند خط (مثلاً ۳ خط) */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* شورت‌هند: ضخامت | نوع | رنگ */
border: 2px solid #22d3ee;
border-top: 1px dashed red; /* فقط بالا */
/* انواع: solid, dashed, dotted, double, groove, ridge, inset, outset */

border-radius: 12px;        /* هر چهار گوشه */
border-radius: 10px 0 10px 0; /* هر گوشه جدا */
border-radius: 50%;         /* دایره کامل! */

/* X | Y | تاری | گسترش | رنگ */
box-shadow: 0 4px 12px rgba(0,0,0,.2);
/* سایه داخلی */
box-shadow: inset 0 0 10px black;
/* چند سایه با کاما */
box-shadow: 0 2px 4px #0003, 0 8px 16px #0002;

.center {
  display: flex;
  justify-content: center;  /* افقی */
  align-items: center;      /* عمودی */
  min-height: 100vh;
}

.item {
  flex-grow: 1;    /* چقدر فضای اضافه بگیرد */
  flex-shrink: 1;  /* چقدر کوچک شود */
  flex-basis: 200px; /* اندازه پایه */
  /* شورت‌هند: grow shrink basis */
  flex: 1 1 200px;
  align-self: flex-end; /* فقط این آیتم */
  order: 2;        /* تغییر ترتیب نمایش */
}

.grid {
  display: grid;
  /* ۳ ستون مساوی */
  grid-template-columns: 1fr 1fr 1fr;
  /* یا کوتاه‌تر: */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto;
  gap: 16px;  /* فاصله سلول‌ها */
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
/* خودش تعداد ستون را با عرض صفحه تنظیم می‌کند! */

.hero {
  grid-column: 1 / 3;  /* از خط ۱ تا ۳ (۲ ستون) */
  grid-row: 1 / 2;
  /* یا با span: */
  grid-column: span 2;   /* ۲ ستون اشغال کن */
}

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header  { grid-area: header; }
.side   { grid-area: sidebar; }

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* استایل پایه برای موبایل (Mobile-first) */
.container { width: 100%; }

/* تبلت به بالا */
@media (min-width: 768px) {
  .container { width: 750px; }
}
/* دسکتاپ به بالا */
@media (min-width: 1024px) {
  .container { width: 980px; }
}

/* clamp: حداقل، ایده‌آل، حداکثر — فونت سیال */
font-size: clamp(1rem, 2.5vw, 2rem);

/* عکس و ویدیو کشسان */
img { max-width: 100%; height: auto; }

.box {
  transform: translate(20px, 0) rotate(15deg) scale(1.2);
  transform-origin: center; /* نقطه مرجع تبدیل */
}
/* ترفند وسط‌چینِ مطلق: */
.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.btn {
  background: blue;
  /* پراپرتی | مدت | تابع زمان | تأخیر */
  transition: background 0.3s ease 0s;
}
.btn:hover { background: red; }

/* چند پراپرتی با کاما */
transition: color .2s, transform .3s;
/* همه پراپرتی‌ها */
transition: all .3s ease;

/* قدم ۱: تعریف مراحل */
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

/* قدم ۲: اعمال به عنصر */
.ball {
  /* نام | مدت | تابع | تأخیر | تکرار | جهت */
  animation: bounce 1s ease-in-out 0s infinite;
}

filter: blur(5px);            /* تاری */
filter: brightness(1.5);      /* روشنایی */
filter: grayscale(100%);     /* سیاه‌وسفید */
filter: drop-shadow(0 4px 8px black);
/* چند فیلتر با هم: */
filter: contrast(1.2) saturate(1.5) hue-rotate(90deg);

.glass {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
}

clip-path: circle(50%);
clip-path: polygon(50% 0, 100% 100%, 0 100%); /* مثلث */

/* تعریف (معمولاً در :root برای دسترسی سراسری) */
:root {
  --main-color: #22d3ee;
  --spacing: 16px;
  --radius: 12px;
}

/* استفاده با تابع var() */
.btn {
  background: var(--main-color);
  padding: var(--spacing);
  border-radius: var(--radius);
}

/* اگر متغیر تعریف نشده باشد، مقدار دوم استفاده می‌شود */
color: var(--text-color, black);

/* متغیرها ارث می‌رسند — می‌توانی محلی بازنویسی کنی */
.card { --main-color: tomato; }
/* حالا داخل .card رنگ tomato است */

:root { --bg: #0a0e1a; --text: white; }
html[data-theme="light"] { --bg: white; --text: black; }
body { background: var(--bg); color: var(--text); }
/* فقط با JS صفت data-theme را عوض کن — کل تم تغییر می‌کند! */

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

.center {
  display: grid;
  place-items: center; /* کوتاه‌ترین راه وسط‌چینی! */
}

.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}