🔶 ۱. رنگ‌ها (Colors)

رنگ‌ها باعث زنده شدن طراحی‌هات می‌شن. در CSS می‌تونی از چند روش مختلف رنگ بنویسی:

✅ فرمت‌های رنگی

🔹 HEX
  • با # شروع میشه.
  • شامل ۳ یا ۶ رقم هگزادسیمال.

مثال:

color: #ff0000; /* قرمز */
color: #0f0;    /* سبز کوتاه‌نویسی */
🔹 RGB
  • شامل سه عدد بین 0 تا 255 است.

مثال:

color: rgb(255, 0, 0); /* قرمز */
🔹 RGBA
  • مثل RGB است + کانال شفافیت (alpha).
  • عدد چهارم بین 0 (شفاف) و 1 (کامل پررنگ).

مثال:

color: rgba(255, 0, 0, 0.5); /* قرمز با شفافیت 50% */
🔹 HSL
  • Hue → رنگ اصلی (۰ تا ۳۶۰ درجه)
  • Saturation → میزان اشباع رنگ (٪)
  • Lightness → روشنی (٪)

مثال:

color: hsl(0, 100%, 50%); /* قرمز */
🔹 Opacity
  • شفافیت کل المان را تنظیم می‌کند (نه فقط رنگ متن).

مثال:

div {
  opacity: 0.5;
}

→ همه چیز در div نیمه‌شفاف می‌شود.

✅ گرادینت‌ها (Gradients)

🔹 Linear Gradient
  • تغییر رنگ در یک خط مستقیم.

مثال:

background: linear-gradient(to right, red, yellow);

→ از سمت چپ قرمز به سمت راست زرد.

🔹 Radial Gradient
  • تغییر رنگ به صورت دایره‌ای.

مثال:

background: radial-gradient(circle, red, yellow);

→ از مرکز قرمز به اطراف زرد.

✅ ۲. تایپوگرافی (Typography)

🔹 font-family

  • نوع فونت متن را تعیین می‌کند.

مثال:

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

🔹 font-size

  • اندازه متن.

مثال:

p {
  font-size: 18px;
}

🔹 font-weight

  • ضخامت متن.

مقدارهای رایج:

  • normal
  • bold
  • 100 → 900

مثال:

p {
  font-weight: bold;
}

🔹 line-height

  • فاصله بین خطوط متن.

مثال:

p {
  line-height: 1.5;
}

🔹 text-align

  • جهت قرارگیری متن.

مثال:

p {
  text-align: center;
}

🔹 text-decoration

  • خط‌ها روی یا زیر متن.

مثال:

a {
  text-decoration: none;
}

🔹 letter-spacing

  • فاصله بین حروف.

مثال:

p {
  letter-spacing: 2px;
}

🔹 text-transform

  • تغییر حروف به بزرگ یا کوچک.

مثال:

p {
  text-transform: uppercase;
}

✅ ۳. واحدهای اندازه‌گیری (Units)

🔹 px

  • پیکسل → واحد ثابت.

مثال:

font-size: 16px;

🔹 em

  • نسبت به اندازه فونت والد.

مثال:

font-size: 2em; /* یعنی دو برابر فونت والد */

🔹 rem

  • نسبت به اندازه فونت ریشه (html).

مثال:

font-size: 1.5rem;

🔹 vw

  • درصدی از عرض صفحه.

مثال:

font-size: 5vw;

🔹 vh

  • درصدی از ارتفاع صفحه.

مثال:

height: 50vh;

🔹 %

  • نسبت به والد.

مثال:

width: 50%;

✅ ۴. فاصله‌گذاری (Spacing)

🔹 margin

  • فاصله خارجی المان از المان‌های دیگر.

مثال:

p {
  margin: 20px;
}

🔹 padding

  • فاصله داخلی محتوا از مرز المان.

مثال:

p {
  padding: 10px;
}

🔹 box-sizing

  • تعیین می‌کند که اندازه width و height شامل padding و border باشد یا نه.
content-box (پیش‌فرض):
  • width فقط محتوای خالص است.
border-box:
  • width شامل padding و border هم هست.

مثال:

div {
  box-sizing: border-box;
}

→ توصیه می‌شود همیشه border-box استفاده کنی.

✅ ۵. Borders & Shadows

🔹 border

  • حاشیه دور المان.

مثال:

p {
  border: 1px solid black;
}

🔹 border-radius

  • گرد کردن گوشه‌های المان.

مثال:

button {
  border-radius: 10px;
}

🔹 box-shadow

  • سایه پشت المان.

مثال:

div {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

🔹 text-shadow

  • سایه پشت متن.

مثال:

h1 {
  text-shadow: 1px 1px 3px gray;
}

✅ مثال کامل همه این مفاهیم

HTML:

<div class="box">
  <p>سلام دنیا!</p>
</div>

CSS:

.box {
  background: linear-gradient(to right, #ff0000, #ffff00);
  color: white;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: 50%;
  margin: 30px auto;
  padding: 20px;
  border: 2px solid black;
  border-radius: 15px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

نتیجه:

  • پس‌زمینه گرادینت قرمز → زرد
  • متن سفید و بزرگ
  • ضخیم و وسط‌چین
  • حروف بزرگ
  • حاشیه سیاه و گوشه‌ها گرد
  • سایه پشت جعبه
  • فاصله‌های داخلی و خارجی منظم

✅ قانون طلایی:

«CSS مثل هنر ترکیب رنگ، متن و فضاست. همه‌چیز باید هم‌زمان خوانا، زیبا و متعادل باشه.»