استفاده از کلاس در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 03 آذر 1399

استفاده از کلاس در HTML برای گروه ‌بندی عناصر و اعمال سبک‌های یکسان به آن‌ها استفاده می‌شود. این کار به شما کمک می‌کند تا کد خود را سازماندهی کرده و استایل‌هایتان را به طور کارآمدتر مدیریت کنید.

نحوه استفاده از کلاس‌ها در HTML

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

ویژگی class را به یک عنصر اضافه کنید:

برای افزودن کلاس به یک عنصر، از ویژگی class و به دنبال آن نام کلاس در داخل نقل قول‌های دوتایی استفاده کنید. به عنوان مثال، برای افزودن کلاس button به یک عنصر <button>, کد زیر را بنویسید:

HTML

<button class="button">Click me</button>

می‌توانید به یک عنصر چندین کلاس نیز اضافه کنید. برای این کار، نام کلاس‌ها را با فاصله از هم جدا کنید:

HTML

<button class="button primary">Click me</button>

قوانین CSS را برای کلاس‌ها تعریف کنید:

برای استایل دهی به عناصر با استفاده از کلاس‌ها، باید قوانین CSS را برای آن کلاس‌ها تعریف کنید. این کار را در بخش <head> سند HTML خود یا در یک فایل CSS جداگانه انجام می‌دهید. برای مثال، برای استایل دکمه‌هایی که دارای کلاس button هستند با رنگ آبی و حاشیه ضخیم، کد زیر را بنویسید:

CSS

.button {
  background-color: blue;
  border: thick solid black;
}

در این مثال، . قبل از نام کلاس (button) برای انتخاب همه عناصر با آن کلاس استفاده می‌شود.

مزایای استفاده از کلاس‌ها در HTML:

سازماندهی: استفاده از کلاس‌ها به شما کمک می‌کند تا کد HTML خود را به طور منطقی سازماندهی کنید.
قابل استفاده مجدد: می‌توانید از کلاس‌ها برای استایل دهی به چندین عنصر به طور همزمان استفاده کنید، که این امر باعث صرفه‌جویی در وقت و کد شما می‌شود.
نگهداری آسان: اگر نیاز به تغییر استایل گروهی از عناصر دارید، می‌توانید به سادگی قوانین CSS مربوط به کلاس را به روز کنید.

نکاتی برای استفاده از کلاس‌ها در HTML:

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

مثالی از استفاده از کلاس‌ها در HTML:

فرض کنید می‌خواهید یک صفحه وب با سه دکمه ایجاد کنید که هر کدام رنگ و اندازه متفاوتی داشته باشند. می‌توانید از HTML و CSS به صورت زیر برای انجام این کار استفاده کنید:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Example of Using Classes</title>
  <style>
    .button {
      background-color: #ccc;
      border: 1px solid #000;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    .button-primary {
      background-color: blue;
      color: white;
    }

    .button-secondary {
      background-color: green;
      color: white;
    }

    .button-large {
      font-size: 20px;
      padding: 15px 30px;
    }
  </style>
</head>
<body>
  <button class="button button-primary">Primary Button</button>
  <button class="button button-secondary">Secondary Button</button>
  <button class="button button-primary button-large">Large Primary Button</button>
</body>
</html>

در این مثال، سه دکمه با کلاس‌های مختلف (button-primary, button-secondary, و button-large) ایجاد شده است. هر کلاس دارای قوانین CSS خاص خود است که رنگ، اندازه و سایر استایل‌های دکمه را تعریف می‌کند.

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

انواع انتخاب‌گرها با کلاس‌ها

تا الان، نحوه‌ی انتخاب عناصر با یک کلاس خاص را با استفاده از selector نقطه ای (. قبل از نام کلاس) دیدیم. اما selectorهای دیگری هم برای کار با کلاس‌ها وجود دارند:

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

HTML

<p class="text bold">This text is bold and red.</p>

فرزند مستقیم (Direct Child): selector > برای انتخاب عنصری که فرزند مستقیم عنصر دیگری با یک کلاس خاص است، استفاده می‌شود. مثلا:

HTML

<div class="container">
  <p class="text">This is a paragraph inside the container.</p>
</div>

در این مثال، با selector div.container > p فقط پاراگراف‌هایی انتخاب می شوند که فرزند مستقیم div با کلاس container باشند.

همه‌ی فرزندان (Descendant): selector (فاصله) برای انتخاب تمام فرزندان (چه مستقیم و چه غیرمستقیم) یک عنصر با کلاس خاص استفاده می‌شود. مثلا:

HTML

<body>
  <div class="content">
    <p class="text">This is a paragraph.</p>
    <span class="text">This is a span inside the paragraph.</span>
  </div>
</body>

با selector body .text تمام المان‌های با کلاس text چه در داخل div و چه به صورت جداگانه انتخاب می‌شوند.

سلسله‌ی انتخاب (Specificity):

زمانی که چند selector برای یک عنصر هم‌خوانی داشته باشند، سلسله‌ی انتخاب (Specificity) آن‌ها اهمیت پیدا می‌کند. selectorهایی با عناصر بیشتر و یا با id و class در اولویت بالاتری قرار دارند.

مثلا فرض کنید selector .text برای رنگ قرمز و div.content p.text برای رنگ آبی تعریف شده باشد. در صورت استفاده از هر دو کلاس در یک پاراگراف که فرزند مستقیم div.content باشد، رنگ آبی اعمال خواهد شد چون سلسله‌ی انتخاب آن قوی‌تر است.

استفاده از کلاس‌ها با جاوا اسکریپت

علاوه بر CSS، می‌توانید از کلاس‌ها برای انتخاب و دستکاری عناصر با جاوا اسکریپت استفاده کنید. متدهایی مانند document.getElementsByClassName() به شما این امکان را می‌دهند تا بر اساس کلاس، عناصر را در صفحه پیدا کنید.

این قابلیت برای ساختن وب‌سایت‌های پویاتر که رفتارشان بر اساس تعامل کاربر تغییر می‌کند، بسیار مفید است.

بهترین شیوه‌ها برای استفاده از کلاس‌ها:

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

با تسلط بر استفاده از کلاس‌ها در HTML و CSS، می‌توانید کد تمیزتر، سازماندهی‌شده‌تر و قابل نگهداری بهتری بنویسید و استایل‌دهی صفحات وب خود را به صورت موثرتری انجام دهید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊