آموزش id و class در css

در آموزشگاه طراحی سایت پرتو، ما با دوره‌های عملی و پروژه‌محور، شما را به یک طراح وب حرفه‌ای تبدیل می‌کنیم. این مقاله، علاوه بر توضیح پایه‌ای class و id در CSS، به سلکتورهای پیشرفته، بهترین practices مدرن و ترکیب آن‌ها با ویژگی‌های جدید CSS مانند Variables و :has() می‌پردازد تا سایت‌های تمیز، واکنشگرا و نگهداری‌ پذیر بسازید.

CSS چیست و چرا مهم است؟

CSS (Cascading Style Sheets) زبانی برای استایل‌دهی به عناصر HTML است. با CSS می‌توانید ظاهر صفحات وب را جدا از محتوا طراحی کنید، که این کار باعث:

• کاهش تکرار کد
• سرعت بالاتر بارگذاری
• یکسان‌سازی طراحی در چندین صفحه

نگهداری آسان‌تر پروژه‌ها می‌شود.

اگر تازه‌کار هستید، شرکت در کلاس آموزش html-css در آموزشگاه پرتو را پیشنهاد می‌کنیم؛ جایی که این مفاهیم را با مثال‌های واقعی تمرین می‌کنید.

ساختار پایه‌ای یک قانون CSS

هر دستور CSS شامل:

Selector (انتخاب‌کننده)
Property (ویژگی)
Value (مقدار)

مثال درست و استاندارد

h1 {
  color: blue;
  font-size: 2rem;
}

سلکتورهای Class و ID – تفاوت اصلی

Class: برای گروهی از عناصر که استایل مشابهی دارند. می‌توانید به چندین عنصر اعمال کنید.

ID: برای یک عنصر منحصربه‌فرد در صفحه. فقط یک بار در هر صفحه استفاده شود (برای دسترسی‌پذیری و سئو مهم است).

در HTML

<p class="highlight">این پاراگراف برجسته است.p>
<div id="header">هدر سایتdiv>

در CSS

.highlight {  /* سلکتور Class با نقطه(.) */
  background-color: yellow;
  padding: 10px;
}

#header {     /* سلکتور ID با شارپ(#) */
  background-color: navy;
  color: white;
}

مزایای استفاده از Class

می‌توانید چندین class به یک عنصر بدهید (با فاصله جدا کنید):

<p class="text-center bold red">متن نمونهp>

.text-center { text-align: center; }
.bold { font-weight: bold; }
.red { color: red; }

p.highlight {  /* فقط پاراگراف‌های با class highlight */
  font-style: italic;
}

سلکتورهای پیشرفته Class

چندین کلاس همزمان: با [class~=”class1 class2″] یا مستقیم در HTML.

Attribute Selectorهای مدرن:

[class^="btn-"] {  /* کلاس‌هایی که با btn- شروع می‌شوند */
  padding: 10px 20px;
  border-radius: 4px;
}

has() Selector (جدید و قدرتمند)

.article:has(.highlight) {
  border: 2px solid gold;  /* مقاله‌هایی که داخل‌شان highlight دارند */
}

بهترین Practices برای Class و ID در پروژه‌های واقعی

از class برای استایل‌های reusable استفاده کنید (نه id).

نام‌گذاری معنادار و استاندارد: BEM (Block__Element–Modifier) یا Utility Classes (مثل Tailwind).

از CSS Variables برای تم‌های قابل تغییر:

:root {
  --primary-color: #007bff;
}
.primary { color: var(--primary-color); }

در کلاس آموزش طراحی سایت پرتو، نام‌گذاری حرفه‌ای و ساختار پروژه را با ابزارهایی مثل SCSS تمرین می‌کنید.

مثال عملی کامل: کارت responsivehtml

<div class="card shadow large">
  <h2 class="card-title">عنوان کارتh2>
  <p class="card-text">توضیحات اینجا قرار می‌گیرد.p>
  <a href="#" class="btn primary">دکمهa>
div>

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.shadow { box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.large { max-width: 400px; margin: 0 auto; }

.card-title { font-size: 1.5rem; }
.card-text { line-height: 1.6; }

.btn {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

.primary { background: var(--primary-color); color: white; }

این مثال با Flexbox یا Grid هم قابل گسترش است و کاملاً واکنشگرا می‌شود.

جمع‌بندی و نکات نهاییClass و ID پایه کنترل دقیق استایل در CSS هستند، اما با ترکیب آن‌ها با ویژگی‌های مدرن مثل Variables، Container Queries و سلکتورهای پیشرفته، می‌توانید کدهای تمیزتر و قدرتمندتری بنویسید.

همیشه به specificity (اولویت سلکتورها) توجه کنید:

ID > Class > Element.

در کلاس آموزش html-css و کلاس آموزش طراحی سایت آموزشگاه پرتو، این مفاهیم را در پروژه‌های واقعی پیاده می‌کنید و با ابزارهای مدرن مانند VS Code، Browser DevTools و Frameworkها آشنا می‌شوید.

سؤالی دارید؟ در کامنت‌ها بپرسید یا با آموزشگاه طراحی سایت پرتو تماس بگیرید!