کلاس ( class)

1️⃣ تعریف

ویژگی class در HTML برای دادن یک نام دسته‌بندی به عناصر استفاده میشه.
با استفاده از این نام می‌تونیم:

  • به اون عناصر استایل (CSS) بدیم.

  • با JavaScript اون عناصر رو انتخاب و کنترل کنیم.

  • چندین عنصر مختلف رو در یک گروه قرار بدیم.

2️⃣ قوانین مهم

  • مقدار class می‌تونه شامل حروف، اعداد، خط تیره (-) و آندرلاین (_) باشه.

  • میشه به یک عنصر چند کلاس داد (با فاصله از هم جدا میشن).

  • کلاس‌ها Case-Sensitive هستن → یعنی box با Box فرق داره.

3️⃣ مثال ساده با CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-text {
      color: red;
      font-weight: bold;
    }
    .blue-bg {
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>

<p class="red-text">این متن قرمز و بولد است</p>
<p class="blue-bg">این متن پس‌زمینه آبی دارد</p>
<p class="red-text blue-bg">این متن هم قرمز است و هم پس‌زمینه آبی دارد</p>

</body>
</html>

4️⃣ چند کلاس روی یک عنصر

<div class="box shadow large">
  این یک جعبه با سه کلاس است.
</div>

5️⃣ استفاده در JavaScript

<p class="msg">سلام دنیا</p>
<button onclick="document.querySelector('.msg').style.color='green'">تغییر رنگ</button>

📌 خلاصه

  • class = برچسب دسته‌بندی برای عناصر

  • برای CSS و JS خیلی مهمه

  • میشه چند کلاس به یک عنصر داد

  • پرکاربرد در طراحی Layout و استایل‌دهی