مبانی CSS

راهنمای جامع و واضح برای یادگیری CSS مدرن: آبشاری و وراثت، مدل جعبه، انتخاب‌کننده‌ها و ویژگی، Flexbox، Grid، CSS Nesting و Layers (۲۰۲۵)، ویژگی‌های منطقی، media و container queries، نام‌گذاری BEM / utility.

نکته حرفه‌ای: تمام قطعه‌های کد اینجا آماده کپی-پیست هستند. بعد از هر بخش مکث کنید و خودتان امتحان کنید.

🌱 مرحله ۰ · کار مقدماتی — چرا CSS مهم است و راه‌اندازی

موضوع	چرا مهم است؟	میانبر نیکود
تأثیر بصری	CSS HTML ساده را به طرح‌های جذاب تبدیل می‌کند	ویدیو: چرا CSS قلب تپنده طراحی وب است
جداسازی مسئولیت‌ها	HTML معنادار و CSS صرفاً استایل را نگه می‌دارد	چیت‌شیت: HTML در مقابل CSS: تقسیم مسئولیت‌ها
بهره‌وری	ویژگی‌های CSS مدرن سرعت توسعه را افزایش می‌دهد	راه‌اندازی سریع: راه‌اندازی محیط Live-Reload با VS Code + Live Server

عمل:

۱. VS Code (یا هر ویرایشگر کد) را نصب کنید. ۲. پوشه‌ای به نام css-essentials ایجاد کنید. ۳. داخل آن، index.html و styles.css را اضافه کنید. ۴. Live Server (یا معادل آن) را باز کنید تا هر ذخیره‌سازی در مرورگر تازه شود.

HTML پایه شما در index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CSS Essentials</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- We'll add content here as we learn -->
  </body>
</html>

در styles.css، با فایل خالی شروع کنید:

/* styles.css */

/* We'll add CSS step by step. */

🌀 مرحله ۱ · آبشاری و وراثت

۱.۱ آبشاری (Cascade)

ترتیب مهم است: قوانین بعدی قوانین قبلی را لغو می‌کنند.
ویژگی مهم است: انتخاب‌کننده‌های خاص‌تر برنده می‌شوند.
مهم: !important به زور برنده می‌شود—اما کم استفاده کنید.

/* styles.css */
p {
  color: blue; /* Specificity: 0,0,0,1 */
}
p.intro {
  color: green; /* Specificity: 0,0,1,1 – overrides plain p */
}
#main p {
  color: red; /* Specificity: 0,1,0,1 – overrides both above */
}

<!-- index.html -->
<body>
  <p class="intro">I’m green, not blue.</p>
  <div id="main">
    <p class="intro">I’m red, because #main p is most specific.</p>
  </div>
</body>

بهترین شیوه: CSS را از عمومی → خاص ساختار دهید. بر اساس کامپوننت مدولار کنید. از زنجیره‌های عمیق انتخاب‌کننده اجتناب کنید.

۱.۲ وراثت (Inheritance)

برخی ویژگی‌ها به طور طبیعی از والدین به ارث می‌رسند: color، font-family، line-height.
برخی دیگر نه: margin، padding، border باید برای هر عنصر تنظیم شوند.
از کلمه کلیدی inherit برای اجبار وراثت استفاده کنید.

/* styles.css */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  font-size: 2rem;
  /* inherits color #333 from body */
}

.small-text {
  font-size: 0.875rem;
  color: inherit; /* gets #333 even if nested */
}

<!-- index.html -->
<body>
  <h1>Inherited Color</h1>
  <div class="container">
    <p class="small-text">I’m small and dark too.</p>
  </div>
</body>

نکته: از وراثت برای تایپوگرافی استفاده کنید تا یکپارچگی حفظ شود. از اعلان مجدد استایل‌های مشترک روی هر عنصر اجتناب کنید.

📏 مرحله ۲ · مدل جعبه

هر عنصر یک جعبه مستطیلی است که از موارد زیر تشکیل شده:

۱. محتوا (عرض/ارتفاع) ۲. پدینگ (فضای داخل حاشیه) ۳. حاشیه (خط دور) ۴. مارجین (فضای خارج حاشیه)

+-------------------------------------+
| margin                              |
|  +--------------------------------+ |
|  | border                         | |
|  |  +--------------------------+  | |
|  |  | padding                  |  | |
|  |  |  +--------------------+  |  | |
|  |  |  |   content          |  |  | |
|  |  |  +--------------------+  |  | |
|  |  +--------------------------+  | |
|  +--------------------------------+ |
+-------------------------------------+

۲.۱ `box-sizing`

به طور پیش‌فرض، width/height فقط روی محتوا اعمال می‌شود. از box-sizing: border-box استفاده کنید تا پدینگ و حاشیه در عرض کل گنجانده شوند:

/* styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

<!-- index.html -->
<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid #000;
    box-sizing: border-box; /* total width stays 200px */
  }
</style>
<div class="box">Content fits nicely inside 200px total.</div>

بهترین شیوه: همیشه این کد را در بالای CSS خود قرار دهید تا از شگفتی‌ها جلوگیری کنید:

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

۲.۲ پدینگ، حاشیه و مارجین

/* styles.css */
.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 16px auto; /* 16px top/bottom, centered horizontally */
}

<!-- index.html -->
<div class="card">
  <h2>Box Model Demo</h2>
  <p>Observe the padding, border, and margin.</p>
</div>

فروپاشی مارجین: مارجین‌های عمودی بین بلوک‌های هم‌سطح ممکن است فروپاشی شوند (مارجین بزرگتر اعمال می‌شود).
کوتاه‌نویسی:
- margin: 10px 20px 30px 40px; (بالا، راست، پایین، چپ)
- padding: 10px 20px; (بالا/پایین، چپ/راست)

🔍 مرحله ۳ · انتخاب‌کننده‌ها و ویژگی

۳.۱ انتخاب‌کننده‌های رایج

انتخاب‌کننده نوع: div، p
انتخاب‌کننده کلاس: .btn، .container
انتخاب‌کننده ID: #nav، #header
انتخاب‌کننده ویژگی: input[type="text"]، a[target="_blank"]
شبه‌کلاس: a:hover، input:focus، li:nth-child(2)
شبه‌عنصر: p::first-line، h2::after

/* styles.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

input[type="text"]:focus {
  outline: 2px solid #0070f3;
}

.btn-primary:hover {
  background-color: #0051a2;
}

۳.۲ مبانی ویژگی

ویژگی را به عنوان یک ۴-تایی (a, b, c, d) محاسبه کنید:

۱. استایل‌های درون‌خطی → a = 1 اگر style="…" باشد؛ در غیر این صورت 0. ۲. IDها → b = تعداد IDها در انتخاب‌کننده. ۳. کلاس‌ها/ویژگی‌ها/شبه‌کلاس‌ها → c = تعداد این موارد. ۴. انتخاب‌کننده‌های نوع/شبه‌عناصر → d = تعداد این موارد.

p → (0,0,0,1)
.intro p → (0,0,1,1)
#main .intro p:hover → (0,1,2,1)

قاعده سرانگشتی:

۱. انتخاب‌کننده‌های کلاس را ترجیح دهید (ویژگی 0,0,1,0). ۲. از ID در CSS اجتناب کنید؛ ممکن است خیلی خاص باشند. ۳. هرگز بیش از ۳ سطح عمیق زنجیره نکنید. انتخاب‌کننده‌ها را ساده نگه دارید.

۳.۳ جنگ‌های ویژگی و `!important`

/* styles.css */
.header {
  color: #000;
}

#main .header {
  color: #333;
}

.header {
  color: #666 !important; /* overrides ID selector */
}

هشدار: استفاده بیش از حد از !important نگهداری را دردناک می‌کند. به جای آن، CSS خود را بازسازی کنید یا ویژگی انتخاب‌کننده را به حداقل افزایش دهید.

📐 مرحله ۴ · Flexbox

Flexbox در طرح‌های یک‌بعدی (ردیف یا ستون) عالی عمل می‌کند.

۴.۱ کانتینر Flex در مقابل آیتم Flex

<!-- index.html -->
<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* styles.css */
.flex-container {
  display: flex; /* direct children become flex items */
  gap: 16px; /* space between items */
  padding: 16px;
  background: #f5f5f5;
}

.item {
  background: #0070f3;
  color: #fff;
  padding: 16px;
  flex: 1; /* each item grows equally */
  text-align: center;
}

display: flex روی کانتینر.
flex-direction: پیش‌فرض row است؛ می‌تواند column باشد.
flex-wrap: wrap به آیتم‌ها اجازه می‌دهد روی چندین خط بپیچند.
justify-content (محور اصلی) و align-items (محور عرضی) تراز را کنترل می‌کنند.

۴.۲ ویژگی‌های رایج Flex

/* styles.css */
.flex-container {
  display: flex;
  justify-content: space-between; /* space between items */
  align-items: center; /* vertically center in row */
  flex-wrap: wrap;
}

.item {
  flex: 0 1 200px; /* flex-grow:0, flex-shrink:1, flex-basis:200px */
}

ویژگی	توضیح
`justify-content`	`flex-start`، `flex-end`، `center`، `space-between`، `space-around`، `space-evenly`
`align-items`	`stretch`، `flex-start`، `flex-end`، `center`، `baseline`
`flex-wrap`	`nowrap` (پیش‌فرض)، `wrap`، `wrap-reverse`
`flex`	کوتاه‌نویسی برای `flex-grow`، `flex-shrink`، `flex-basis`

نکته حرفه‌ای: از gap به جای margin برای فاصله بین آیتم‌های flex استفاده کنید. از مشکلات فروپاشی مارجین جلوگیری می‌کند.

۴.۳ مثال دنیای واقعی: نوار ناوبری

<!-- index.html -->
<nav class="navbar">
  <a href="#" class="logo">MyShop</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="cart">
    <a href="#">Cart (0)</a>
  </div>
</nav>

/* styles.css */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0070f3;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #333;
  text-decoration: none;
}

.cart a {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid #333;
  border-radius: 4px;
}

Try It: Resize your browser. Notice how the nav stays aligned. Later, we’ll make it responsive.

🧱 مرحله ۵ · Grid

CSS Grid طرح‌های دو‌بعدی (هم ردیف و هم ستون) را مدیریت می‌کند.

۵.۱ تعریف کانتینر Grid

<!-- index.html -->
<div class="grid-container">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
  <div class="card">Item 4</div>
</div>

/* styles.css */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 16px;
  padding: 16px;
}

.card {
  background: #f0f0f0;
  padding: 24px;
  text-align: center;
}

display: grid روی کانتینر.
grid-template-columns و grid-template-rows مسیرهای grid را تعریف می‌کنند.
gap هم فاصله ردیف و هم ستون را تعریف می‌کند.
repeat(4, 1fr) ۴ ستون با عرض مساوی ایجاد می‌کند.

۵.۲ Grid های صریح در مقابل ضمنی

صریح: شما ردیف‌ها/ستون‌ها را تعریف می‌کنید.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: auto 1fr auto;
}

ضمنی: مرورگر مسیرهای اضافی ایجاد می‌کند اگر آیتم‌ها از grid تعریف شده فراتر بروند.
```
.grid-auto {
  display: grid;
  grid-auto-flow: row; /* default */
  grid-auto-rows: 100px; /* each new row is 100px tall */
}
```

۵.۳ قرار دادن آیتم‌ها

/* styles.css */
.item-a {
  grid-column: 1 / 3; /* spans from column 1 up to (but not including) column 3 */
  grid-row: 1 / 2; /* first row only */
}

.item-b {
  grid-column: 3 / 5; /* spans columns 3 & 4 */
  grid-row: 1 / 3; /* spans two rows */
}

کوتاه‌نویسی: grid-column: 1 / span 2 (شروع از ستون ۱، گسترش ۲ ستون).
همچنین می‌توانید مناطق نام‌گذاری شده را با grid-template-areas تعریف کنید و آیتم‌ها را از طریق grid-area اختصاص دهید.

📦 مرحله ۶ · CSS Nesting و Layers (۲۰۲۵)

تا سال ۲۰۲۵، مرورگرهای مدرن از CSS Nesting و Layers پشتیبانی می‌کنند که به سازماندهی و ساده‌سازی CSS کمک می‌کنند.

۶.۱ CSS Nesting

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

/* styles.css */
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;

  &__header {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }

  &__body {
    font-size: 1rem;
    color: #555;
  }

  &__footer {
    margin-top: 16px;
    text-align: right;

    & .btn {
      background: #0070f3;
      color: #fff;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

/* Compiled for older browsers (example) */
.card {
  /* … */
}
.card__header {
  /* … */
}
.card__body {
  /* … */
}
.card__footer {
  /* … */
}
.card__footer .btn {
  /* … */
}

Note: If a browser doesn’t support nesting, use a PostCSS plugin in your build process to compile to flat CSS.

۶.۲ CSS Layers

Layers به شما اجازه می‌دهند CSS خود را در برش‌های مفهومی گروه‌بندی کنید و ترتیب آبشاری را به طور قابل پیش‌بینی‌تری کنترل کنید:

/* styles.css */
@layer resets {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer base {
  html {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
  }
  body {
    background: #fafafa;
  }
}

@layer components {
  .btn {
    display: inline-block;
    padding: 8px 16px;
    background: #0070f3;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
  }
}

@layer utilities {
  .text-center {
    text-align: center !important;
  }
  .mt-16 {
    margin-top: 16px !important;
  }
}

/* Usage: */
@import "styles.css"; /* Layers load and cascade in declared order */

ترتیب: Layers به ترتیب اعلان شده ظاهر می‌شوند؛ قوانین در لایه‌های عمیق‌تر لایه‌های قبلی را لغو می‌کنند.
مزایا: resets، استایل‌های پایه، کامپوننت‌ها و کلاس‌های utility را جدا می‌کند—تعارضات ویژگی را کاهش می‌دهد و کد را آسان‌تر برای درک می‌کند.

🔄 مرحله ۷ · ویژگی‌های منطقی و حالت‌های نوشتن

ویژگی‌های منطقی طرح‌ها را با حالت‌های نوشتن مختلف (LTR، RTL، عمودی) تطبیق می‌دهند. از ویژگی‌های فیزیکی مانند margin-left اجتناب کنید؛ از معادل‌های منطقی مانند margin-inline-start استفاده کنید.

۷.۱ مارجین و پدینگ منطقی

/* styles.css */
.card {
  margin-block-start: 16px; /* top in LTR, top in RTL */
  margin-block-end: 16px; /* bottom in LTR, bottom in RTL */
  margin-inline-start: auto; /* left in LTR, right in RTL */
  margin-inline-end: auto; /* right in LTR, left in RTL */
  padding-block: 16px 24px; /* vertical padding: top 16px, bottom 24px */
  padding-inline: 16px; /* horizontal padding: left/right 16px */
}

block keywords refer to the block axis (vertical in LTR).
inline keywords refer to the inline axis (horizontal in LTR).
Logical properties automatically adapt when the document’s direction changes (e.g., dir="rtl").

۷.۲ جریان متن و حالت‌های نوشتن

/* styles.css */
.vertical-text {
  writing-mode: vertical-rl; /* text flows top-to-bottom, right-to-left */
  text-orientation: upright;
  border: 1px solid #000;
  padding: 8px;
}

<!-- index.html -->
<div class="vertical-text">
  This text is vertical when you set writing-mode.
</div>

مورد استفاده: مفید برای سایت‌های چندزبانه، خوانندگان کتاب الکترونیکی، یا حروف‌چینی عمودی آسیایی.

📱 مرحله ۸ · Media Queries و Container Queries

۸.۱ Media Queries (نقاط شکست واکنش‌گرا)

/* styles.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 1024px) {
  .container {
    padding: 0 12px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 8px;
  }
}

همیشه از mobile-first استفاده کنید: استایل‌های پایه را برای viewport های کوچک تعریف کنید، سپس برای صفحه‌های بزرگتر لغو کنید.
نقاط شکست رایج:
- 320px (گوشی‌های کوچک)
- 480px (گوشی‌های بزرگ)
- 768px (تبلت‌ها)
- 1024px (لپ‌تاپ‌های کوچک)
- 1280px+ (دسکتاپ‌ها)

8.2 Container Queries (2025)

Container queries let components adapt based on their own container’s size, not just the viewport. Example:

/* styles.css */
.product-card {
  container-type: inline-size; /* opt-in to container queries */
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}

@container (max-width: 400px) {
  .product-card {
    display: block;
  }
  .product-card .details {
    font-size: 0.875rem;
  }
}

@container (min-width: 401px) {
  .product-card {
    display: flex;
    gap: 16px;
  }
  .product-card img {
    width: 40%;
  }
  .product-card .details {
    width: 60%;
  }
}

<!-- index.html -->
<div class="product-card">
  <img src="/images/product.jpg" alt="Cool gadget" />
  <div class="details">
    <h2>Cool Gadget</h2>
    <p>$49.99</p>
    <button class="btn">Buy Now</button>
  </div>
</div>

container-type: inline-size: makes that element a query container.
Inside @container, use the same syntax as media queries, but queries target the container’s width/height.
Enables truly component-level responsiveness, making styles more reusable.

🔖 مرحله ۹ · قراردادهای نام‌گذاری: BEM و کلاس‌های Utility

نام‌گذاری واضح نگهداری را آسان‌تر می‌کند، به خصوص در تیم‌ها یا پروژه‌های open-source.

۹.۱ BEM (Block، Element، Modifier)

Block: کامپوننت مستقل (مثلاً، product-card).
Element: بخشی از یک block، به صورت block__element نوشته می‌شود (مثلاً، product-card__title).
Modifier: نوع یا حالت، به صورت block--modifier یا block__element--modifier نوشته می‌شود (مثلاً، product-card--featured، button--primary).

<!-- index.html -->
<div class="product-card product-card--featured">
  <img class="product-card__image" src="/images/gadget.jpg" alt="Gadget" />
  <h2 class="product-card__title">Gadget Pro</h2>
  <p class="product-card__price">$99.99</p>
  <button class="button button--primary">Add to Cart</button>
</div>

/* styles.css */
/* Block */
.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

/* Element */
.product-card__image {
  width: 100%;
  border-radius: 4px;
}

.product-card__title {
  font-size: 1.25rem;
  margin: 12px 0;
}

.product-card__price {
  color: #0070f3;
  font-weight: bold;
}

/* Modifier */
.product-card--featured {
  border-color: #0070f3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  text-transform: uppercase;
}

.button--primary {
  background: #0070f3;
  color: #fff;
}

بهترین شیوه: BEM کلاس‌ها را مسطح نگه می‌دارد (بدون انتخاب‌کننده‌های نسل). این ویژگی را کاهش می‌دهد و کامپوننت‌ها را قابل حمل می‌کند.

۹.۲ CSS Utility-First

به جای نوشتن کلاس‌های کامپوننت جدید، از کلاس‌های utility کوچک و قابل استفاده مجدد استفاده کنید. مثال:

<!-- index.html -->
<div class="max-w-400 mx-auto p-16 bg-white border border-gray rounded-lg">
  <img class="w-full rounded-sm" src="/images/gadget.jpg" alt="Gadget" />
  <h2 class="text-xl mt-12">Gadget Pro</h2>
  <p class="text-blue font-bold mt-8">$99.99</p>
  <button class="px-16 py-8 bg-blue text-white rounded">Add to Cart</button>
</div>

/* styles.css */
/* Utilities */
.max-w-400 {
  max-width: 400px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.p-16 {
  padding: 16px;
}
.bg-white {
  background-color: #fff;
}
.border {
  border: 1px solid #e0e0e0;
}
.border-gray {
  border-color: #e0e0e0;
}
.rounded-lg {
  border-radius: 8px;
}
.w-full {
  width: 100%;
}
.rounded-sm {
  border-radius: 4px;
}
.text-xl {
  font-size: 1.25rem;
}
.mt-12 {
  margin-top: 12px;
}
.text-blue {
  color: #0070f3;
}
.font-bold {
  font-weight: bold;
}
.mt-8 {
  margin-top: 8px;
}
.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.bg-blue {
  background-color: #0070f3;
}
.text-white {
  color: #fff;
}
.rounded {
  border-radius: 4px;
}

مزایا و معایب:

مزایا: نمونه‌سازی سریع‌تر، فاصله‌گذاری/رنگ‌های یکپارچه.

معایب: Markup طولانی می‌شود. کلاس‌های utility را با کلاس‌های کامپوننت برای قابلیت نگهداری متعادل کنید.

🎨 مرحله ۱۰ · پروژه کوچک — کارت محصول (پیکسل-پرفکت و سیال)

10.1 Objective

Recreate this e-commerce product card exactly as shown in your design, then ensure it’s fluid down to 320 px. No CSS frameworks—pure CSS.

نکته: یک تصویر محلی در public/images/product-card-example.jpg قرار دهید تا در زیر به آن مراجعه کنید.

![Product Card Example](/images/product-card-example.jpg)

Features to implement:

Container with border, rounded corners, and subtle shadow.
Product Image that fills width and maintains aspect ratio.
Title (product name), price, and rating stars.
“Add to Cart” button with hover effect.
Responsive:
- ≥ 768 px: image and details side by side.
- < 768 px: stack vertically.
- Down to 320 px: adjust font sizes, paddings, and gaps to prevent overflow.

۱۰.۲ ساختار HTML

<!-- index.html -->
<div class="product-card">
  <img
    src="/images/product-card-example.jpg"
    alt="Stylish Sneakers"
    class="product-card__image"
  />

  <div class="product-card__info">
    <h2 class="product-card__title">Stylish Sneakers</h2>
    <p class="product-card__price">$59.99</p>
    <div class="product-card__rating">
      <span aria-label="4 out of 5 stars">★★★★☆</span>
      <span class="rating-count">(120 reviews)</span>
    </div>
    <button class="button button--primary">Add to Cart</button>
  </div>
</div>

.product-card: کانتینر بلوک.
.product-card__image: عنصر برای تصویر.
.product-card__info: عنوان، قیمت، امتیاز و دکمه را می‌پیچد.
.button و .button--primary: کلاس‌های دکمه قابل استفاده مجدد.

۱۰.۳ CSS پایه

/* styles.css */
/* 1. Layers & Resets */
@layer resets, base, components, utilities;

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

@layer base {
  html {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    background: #fafafa;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }
}

/* 2. Components */
@layer components {
  .product-card {
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    container-type: inline-size;
  }

  .product-card__image {
    width: 100%;
    object-fit: cover;
  }

  .product-card__info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .product-card__title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  .product-card__price {
    font-size: 1.125rem;
    color: #0070f3;
    font-weight: bold;
  }

  .product-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: #ffbf00;
  }

  .rating-count {
    font-size: 0.875rem;
    color: #777;
  }
}

/* 3. Buttons */
@layer components {
  .button {
    padding: 12px 24px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    text-align: center;
  }

  .button--primary {
    background: #0070f3;
    color: #fff;
  }

  .button--primary:hover {
    background: #0051a2;
  }
}

/* 4. Utilities */
@layer utilities {
  .text-center {
    text-align: center !important;
  }
}

/* 5. Responsive & Container Queries */
@layer components {
  /* Default: single-column (mobile-first) */
  .product-card {
    grid-template-columns: 1fr;
  }

  @container (min-width: 768px) {
    .product-card {
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    .product-card__image {
      height: 100%;
    }
  }
}

Explanation:

We used CSS Layers (@layer) to organize resets, base styles, components, and utilities.

The .product-card is display: grid with a single column by default (mobile-first).

At 768 px, it switches to a two-column grid: image on the left, info on the right.

object-fit: cover keeps the image’s aspect ratio while filling its grid cell.

All paddings, font sizes, and gaps are in rem/px, making small-screen tweaks simple.

10.4 Fluid Adjustments Down to 320 px

Add media queries for very small screens:

/* styles.css */
@layer components {
  @media (max-width: 480px) {
    .product-card__title {
      font-size: 1rem;
    }
    .product-card__price {
      font-size: 1rem;
    }
    .product-card__info {
      padding: 12px;
      gap: 8px;
    }
    .button {
      padding: 10px 20px;
    }
  }

  @media (max-width: 320px) {
    .product-card__info {
      padding: 8px;
      gap: 6px;
    }
    .product-card__title {
      font-size: 0.875rem;
    }
    .button {
      padding: 8px 16px;
      font-size: 0.875rem;
    }
  }
}

۴۸۰ پیکسل: پدینگ‌ها و اندازه فونت‌ها را برای گوشی‌های کوچک کمی کاهش دهید.
۳۲۰ پیکسل: بیشتر کاهش دهید تا از سرریز جلوگیری شود.
با کوچک کردن پنجره مرورگر تا ۳۲۰ پیکسل تست کنید—هیچ نوار اسکرول افقی ظاهر نمی‌شود و تمام متن قابل خواندن باقی می‌ماند.

🔗 مرحله ۱۱ · مطالعه بیشتر و منابع

Flexbox Guide — Kevin Powell: “Learn CSS Flexbox”
Grid Tutorial — Kevin Powell: “Learn CSS Grid”
Modern CSS — Stephanie Eckles: “Modern CSS YouTube Playlist”
CSS Nesting & Layers — MDN: “Nesting” | “Cascade Layers”
Container Queries — CSS Tricks: “All About CSS Container Queries”
Logical Properties — MDN: “CSS Logical Properties”
BEM Methodology — getbem.com: “BEM 101”

نکته: این لینک‌ها را بوکمارک کنید و هنگام ساخت پروژه‌های بزرگتر دوباره مراجعه کنید. آموزش‌های ویدیویی می‌توانند مفاهیم پیچیده را آسان‌تر درک کنند.

🎒 تکالیف و تمرین

۱. تمرین مدل جعبه

سه عنصر <div> تودرتو ایجاد کنید. به هر کدام یک رنگ حاشیه، پدینگ و مارجین متمایز بدهید. در DevTools بررسی کنید تا ببینید عرض چگونه محاسبه می‌شود.
مدرک: اسکرین‌شات نشان‌دهنده مقادیر اندازه محاسبه شده در DevTools.

۲. آزمون ویژگی

پنج سناریوی CSS با انتخاب‌کننده‌های مختلط بنویسید. پیش‌بینی کنید کدام استایل در هر مورد برنده می‌شود.
مدرک: یک قطعه کد با پاسخ‌های شما که به صورت درون‌خطی کامنت شده‌اند.

۳. طرح Flexbox

یک شبکه کارت واکنش‌گرا بسازید: سه ستون در دسکتاپ، دو ستون در تبلت (≥ ۷۶۸ پیکسل)، و یک ستون در موبایل (≤ ۴۸۰ پیکسل). هر کارت باید شامل تصویر و متن باشد.
مدرک: URL زنده یا ضبط صفحه نمایش نشان‌دهنده تنظیم طرح هنگام تغییر اندازه.

۴. گالری Grid

یک گالری عکس با استفاده از CSS Grid با فاصله‌های مساوی ایجاد کنید. در < ۶۰۰ پیکسل، به دو ستون تغییر دهید؛ در < ۴۰۰ پیکسل، از یک ستون استفاده کنید.
مدرک: لینک CodePen یا URL زنده نشان‌دهنده رفتار واکنش‌گرا.

Nesting & Layers Practice
- Take an existing project (e.g., a mini portfolio) and refactor its CSS to use @layer and nesting. Create at least three layers (resets, base, components).
- Proof: Paste the reorganized CSS with comments explaining each layer’s purpose.

۶. چالش ویژگی‌های منطقی

یک طرح دو ستونی برای انگلیسی (LTR) بسازید. سپس dir="rtl" را به تگ <html> اضافه کنید و تأیید کنید که پدینگ‌ها/مارجین‌ها به طور خودکار با استفاده از ویژگی‌های منطقی تطبیق می‌یابند.
مدرک: اسکرین‌شات‌های هر دو نمای LTR و RTL نشان‌دهنده تراز صحیح.

۷. کارت Container Query

یک کارت گواهی ایجاد کنید که آواتار و متن را کنار هم نشان دهد وقتی کانتینر ≥ ۳۰۰ پیکسل عرض دارد؛ در غیر این صورت عمودی روی هم قرار دهید. از container-type و @container استفاده کنید.
مدرک: قطعه کد و توضیح مختصری از اینکه چگونه container query بر طرح تأثیر می‌گذارد.

۸. مقایسه BEM در مقابل Utility

کارت محصول را دو بار بازسازی کنید: یک بار با نام‌گذاری BEM و یک بار با کلاس‌های utility. طولانی بودن HTML و اندازه فایل CSS را مقایسه کنید.
مدرک: هر دو نسخه کد و یک نوشته کوتاه (۲–۳ جمله) در مورد اینکه کدام روش را ترجیح می‌دهید و چرا ارائه دهید.

ارسال: فایل‌ها یا URL های خود را به پورتال تکالیف نیکود آپلود کنید. فرآیند و تأملات خود را در انجمن جامعه به اشتراک بگذارید.

مبانی CSS

On this page