آموزش class | css

نام‌گذاری اصولی

🔰 کلاس در CSS چیست؟

کلاس (Class) یک ویژگی در HTML است که به عناصر یک نام گروهی می‌دهد تا بتوانیم با CSS به آنها استایل بدهیم.

✅ یک کلاس می‌تواند روی چندین عنصر استفاده شود.

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

کلاس در CSS یک انتخابگر است که به ما اجازه می‌دهد به یک یا چند عنصر HTML، استایل یکسانی بدهیم.

<!– ساختار پایه –>
<div class=“نام-کلاس”>محتوا</div>

<!– در CSS –>
.نام-کلاس {
color: blue;
font-size: 18px;
}

.box
یک المان با کلاس box
.box
المان دوم با همان کلاس – هر دو یک استایل دارند

📝 قوانین نام‌گذاری کلاس‌ها

❌ اشتباهات رایج

❌ غلط .۱۲۳box
❌ غلط .box-@home
❌ غلط .box color
❌ غلط .Box (با حروف بزرگ)
❌ غلط .box?name

✅ قوانین صحیح

✅ صحیح .box1
✅ صحیح .box-home
✅ صحیح .box_color
✅ صحیح .boxHome
✅ صحیح ._box

قانون توضیح مثال
حروف و اعداد فقط حروف انگلیسی، اعداد، خط تیره و زیرخط .header-box, .card_1
شروع با حرف نباید با عدد شروع شود .box1 ✅ | .۱box ❌
بدون فاصله از خط تیره یا زیرخط استفاده کنید .main-title, .main_title
حروف کوچک بهتر است همه حروف کوچک باشند .navbar (بهتر از .NavBar)

🎯 متدولوژی‌های محبوب نام‌گذاری

۱. BEM

Block__Element–Modifier

.card__title–large
.menu__item–active
.btn__icon–small

۲. OOCSS

شیءگرا

.btn-primary
.card-rounded
.text-large

۳. SMACSS

دسته‌بندی

.l-header (layout)
.is-hidden (state)
.theme-dark (theme)

✏️ تمرین ۱: ساخت کلاس‌های ساده

تمرین ۱
صورت مسئله:

سه کلاس CSS به نام‌های زیر ایجاد کنید:

  • .title-red – رنگ قرمز، اندازه ۲۴px
  • .title-blue – رنگ آبی، اندازه ۲۴px
  • .title-green – رنگ سبز، اندازه ۲۴px

سپس در HTML از هر کلاس برای یک عنوان استفاده کنید.

<!– HTML –>
<h2 class=“title-red”>عنوان قرمز</h2>
<h2 class=“title-blue”>عنوان آبی</h2>
<h2 class=“title-green”>عنوان سبز</h2>

<!– CSS –>
.title-red {
color: #ef4444;
font-size: 24px;
}

.title-blue {
color: #3b82f6;
font-size: 24px;
}

.title-green {
color: #10b981;
font-size: 24px;
}

خروجی

عنوان قرمز

عنوان آبی

عنوان سبز

تمرین ۲
صورت مسئله:

یک کلاس به نام .card ایجاد کنید که:

  • پس‌زمینه: خاکستری روشن (#f9f9f9)
  • حاشیه: ۱px خاکستری
  • گردی گوشه: ۸px
  • فاصله داخلی: ۲۰px

سپس سه کارت با محتوای متفاوت ایجاد کنید.

<!– HTML –>
<div class=“card”>
<h3>کارت شماره ۱</h3>
<p>محتوای کارت اول</p>
</div>

<div class=“card”>
<h3>کارت شماره ۲</h3>
<p>محتوای کارت دوم</p>
</div>

<div class=“card”>
<h3>کارت شماره ۳</h3>
<p>محتوای کارت سوم</p>
</div>

<!– CSS –>
.card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
}

خروجی

کارت شماره ۱

محتوای کارت اول

کارت شماره ۲

محتوای کارت دوم

کارت شماره ۳

محتوای کارت سوم

تمرین ۳
صورت مسئله:

سه کلاس برای دکمه‌ها ایجاد کنید:

  • .btn-small – اندازه ۱۲px، فاصله ۸px ۱۶px
  • .btn-medium – اندازه ۱۶px، فاصله ۱۲px ۲۴px
  • .btn-large – اندازه ۲۰px، فاصله ۱۶px ۳۲px

همگی پس‌زمینه بنفش (#۸b5cf6) و رنگ سفید داشته باشند.

<!– HTML –>
<button class=“btn-small”>دکمه کوچک</button>
<button class=“btn-medium”>دکمه متوسط</button>
<button class=“btn-large”>دکمه بزرگ</button>

<!– CSS –>
.btn-small {
background-color: #8b5cf6;
color: white;
border: none;
border-radius: 6px;
font-size: 12px;
padding: 8px 16px;
cursor: pointer;
}

.btn-medium {
background-color: #8b5cf6;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
padding: 12px 24px;
cursor: pointer;
}

.btn-large {
background-color: #8b5cf6;
color: white;
border: none;
border-radius: 6px;
font-size: 20px;
padding: 16px 32px;
cursor: pointer;
}

خروجی



تمرین ۴
صورت مسئله:

یک المان با دو کلاس ایجاد کنید:

  • .box – پس‌زمینه آبی، گردی ۸px، فاصله ۲۰px
  • .border-red – حاشیه قرمز ۲px

یک div که هم کلاس box و هم border-red دارد بسازید.

<!– HTML –>
<div class=“box border-red”>
این یک المان با دو کلاس است
</div>

<!– CSS –>
.box {
background-color: #3b82f6;
color: white;
border-radius: 8px;
padding: 20px;
}

.border-red {
border: 2px solid #ef4444;
}

خروجی
این یک المان با دو کلاس است

تمرین ۵
صورت مسئله:

یک منوی ساده با کلاس‌های زیر ایجاد کنید:

  • .nav-menu – کلاس اصلی منو (پس‌زمینه خاکستری، بدون بولت)
  • .nav-item – آیتم‌های منو (فاصله ۱۰px، نمایش افقی)
  • .nav-link – لینک‌ها (بدون زیرخط، رنگ تیره)
  • .nav-link:hover – هاور (رنگ بنفش، زیرخط)

منو شامل ۴ آیتم باشد: خانه، محصولات، خدمات، تماس با ما

<!– HTML –>
<ul class=




قوانین اسم‌گذاری کلاس‌ها
چه اسم‌هایی مجاز هستن؟

✅ درست ✅

  • .product-card ✓
  • .card1 ✓
  • .product_title ✓
  • .badgeNew ✓
  • .a ✓
  • .box1 ✓

❌ نادرست ❌

  • .۱۲۳product ✗ (شروع با عدد)
  • .product card ✗ (فاصله)
  • .product@badge ✗ (@ غیرمجاز)
  • .card%price ✗ (کاراکتر خاص)

/* همه اینها مجاز هستن */
.a { color: red; }
.b { color: blue; }
.myBox { color: green; }
.product-title { color: orange; }
.card_1 { color: purple; }
💡 نکته مهم:

کلاس‌ها به حروف بزرگ و کوچک حساس هستن!
.ProductCard با .productcard فرق داره.

۵ تمرین عملی

📌 ۱تمرین:
یک کارت محصول بسازید که شامل عنوان، توضیحات و یک برچسب “تخفیف ویژه” باشد. از کلاس‌های دلخواه (مثلاً .a، .b، .c) استفاده کنید.
نمایش خروجی مورد نظر:

🎁 تخفیف ویژه

هدفون بی‌سیم

کیفیت صدای عالی با ۲۴ ماه گارانتی

راهنمایی:

  • از کلاس .a برای کارت اصلی استفاده کنید
  • از کلاس .b برای برچسب استفاده کنید
  • از کلاس .c برای عنوان استفاده کنید

<!– HTML –>
<div class=”a“>
    <div class=”b“>🎁 تخفیف ویژه</div>
    <h3 class=”c“>هدفون بی‌سیم</h3>
    <p>کیفیت صدای عالی با ۲۴ ماه گارانتی</p>
</div>
/* CSS */
.a {
    background: #f59e0b;
    color: white;
    padding: 20px;
    border-radius: 15px;
}

.b {
    background: white;
    color: #f59e0b;
    padding: 5px 15px;
    border-radius: 25px;
    display: inline-block;
}

.c {
    margin: 10px 0;
    font-size: 20px;
}

✅ نکته: هر اسم دلخواهی می‌تونستید بذارید، مهم یکسان بودن اسم کلاس در HTML و CSS هست.

📌 تمرین ۲:
یک دکمه بسازید که همزمان دو کلاس داشته باشد: یک کلاس برای استایل پایه و یک کلاس برای حالت ویژه (مثلاً دکمه قرمز برای هشدار).
نمایش خروجی مورد نظر:


<!– HTML –>
<button class=”btn“>دکمه معمولی</button>
<button class=”btn alert“>دکمه هشدار</button>
/* CSS */
.btn {
    background: #3b82f6;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
}

.alert {
    background: #ef4444;
    border-radius: 50px;
}

💡 وقتی چند کلاس داریم، با فاصله از هم جدا می‌شن: class=”btn alert”

📌 تمرین ۳:
یک کارت محصول با کلاس‌های تک‌حرفی (x, y, z) طراحی کنید که شامل تصویر، عنوان، قیمت و دکمه خرید باشد.
نمایش خروجی مورد نظر:

📷 تصویر محصول

لپ تاپ ایسوس

۲۵,۰۰۰,۰۰۰ تومان

<!– HTML با کلاس‌های تک‌حرفی –>
<div class=”x“>
    <div class=”y“>📷</div>
    <h3 class=”z“>لپ تاپ ایسوس</h3>
    <div class=”w“>۲۵,۰۰۰,۰۰۰ تومان</div>
    <button class=”v“>خرید</button>
</div>
/* CSS */
.x { background: white; padding: 20px; border-radius: 10px; }
.y { background: #e2e8f0; height: 150px; border-radius: 10px; }
.z { color: #0f172a; }
.w { color: #f59e0b; font-size: 24px; font-weight: bold; }
.v { background: #f59e0b; color: white; padding: 10px; border: none; }

📌 تمرین ۴ :
یک سیستم برچسب طراحی کنید که یک کلاس پایه .tag داشته باشد و کلاس‌های جداگانه برای رنگ‌های مختلف (مثلاً .tag-sale، .tag-new).
نمایش خروجی مورد نظر:

پیش‌فرض
تخفیف دار
جدید

<!– HTML –>
<span class=”tag“>پیش‌فرض</span>
<span class=”tag sale“>تخفیف دار</span>
<span class=”tag new“>جدید</span>
/* CSS */
.tag {
    background: #10b981;
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-block;
}

.sale { background: #ef4444; }
.new { background: #3b82f6; }

📌 تمرین ۵:
دو کلاس .dark-mode و .light-mode تعریف کنید و یک کارت محصول طراحی کنید که با تغییر کلاس، رنگ‌بندی آن عوض شود.
نمایش خروجی مورد نظر:

حالت تاریک

این کارت در حالت تاریک است

حالت روشن

این کارت در حالت روشن است

<!– HTML –>
<div class=”card dark-mode“>
    <h4>حالت تاریک</h4>
    <p>این کارت در حالت تاریک است</p>
</div>

<div class=”card light-mode“>
    <h4>حالت روشن</h4>
    <p

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *