آموزش CSS | کلاس ها (Classes)

معرفی کلاس ها و نحوه استفاده از آنها

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

تعریف کلاس در CSS

برای تعریف یک کلاس در CSS، از یک نقطه (.) قبل از نام کلاس استفاده می‌کنیم. به عنوان مثال، اگر بخواهیم کلاسی به نام "highlight" تعریف کنیم که رنگ متن را زرد کند، کد CSS به شکل زیر خواهد بود:

.highlight {
    color: yellow;
}

اعمال یک کلاس به یک المان HTML

پس از تعریف کلاس در CSS، می‌توانیم آن را به المان‌های HTML اعمال کنیم. برای این کار، از ویژگی class در تگ HTML استفاده می‌کنیم. به عنوان مثال، اگر بخواهیم یک پاراگراف را با کلاس "highlight" زرد رنگ کنیم، کد HTML به شکل زیر خواهد بود:

<p class="highlight">این متن با کلاس highlight رنگ زرد دارد.</p>

مثال کاربردی

بیایید یک مثال کامل را بررسی کنیم. فرض کنید ما می‌خواهیم یک عنوان و یک پاراگراف را با کلاس‌های مختلف استایل دهی کنیم. ابتدا CSS را تعریف می‌کنیم:

.title {
    font-size: 24px;
    font-weight: bold;
    color: blue;
}

.highlight {
    color: yellow;
}

سپس HTML را به شکل زیر می‌نویسیم:

<h1 class="title">عنوان صفحه</h1>
<p class="highlight">این متن با کلاس highlight رنگ زرد دارد.</p>

در این مثال، عنوان با کلاس "title" به رنگ آبی و با اندازه بزرگ‌تر نمایش داده می‌شود، در حالی که متن پاراگراف با کلاس "highlight" به رنگ زرد است.

جمع‌بندی

کلاس‌ها یکی از ابزارهای قدرتمند CSS هستند که به ما اجازه می‌دهند استایل‌های مشابه را به چندین المان اعمال کنیم. با استفاده از کلاس‌ها، می‌توانیم به راحتی طراحی‌های پیچیده و زیبا را بدون تکرار کد ایجاد کنیم. در بخش‌های بعدی، به بررسی نحوه استفاده از شناسه‌ها و تفاوت‌های آنها با کلاس‌ها خواهیم پرداخت.