آموزش HTML - کلاس

کلاس (class) یک کلیدواژه مهم در HTML است. کلاس ویژگی (attribute) است که می‌توان آن را روی یک یا چند عنصر اعمال کرد و برای استایل‌دهی و دسته‌بندی عناصر بر اساس ویژگی‌ها یا اهداف مشترک استفاده می‌شود. کلاس‌ها به چند عنصر اجازه می‌دهند تا قوانین استایل‌دهی یکسانی را به اشتراک بگذارند. با اختصاص دادن یک کلاس یکسان به چندین عنصر، می‌توانید استایل‌های CSS یا قابلیت‌های JavaScript را به طور هم‌زمان روی همه آن‌ها اعمال کنید. این امر باعث ایجاد یکپارچگی در طراحی و چیدمان شده و مدیریت و بروزرسانی وب‌سایت را آسان‌تر می‌کند.

ویژگی class در HTML در کد HTML با استفاده از کلیدواژه "class" تعریف می‌شود و استایل‌دهی آن در CSS تعیین می‌گردد. این جداسازی محتوا و استایل یک اصل کلیدی در طراحی وب است که ساخت صفحات وب جذاب و منظم را تسهیل می‌کند.

سنتکس کلاس

برای ایجاد یک قانون CSS برای عناصر HTML با استفاده از ویژگی class در CSS، یک نقطه (.) و به دنبال آن نام کلاس ذکر شده در عنصر HTML را می‌نویسیم، سپس می‌توانیم ویژگی‌های CSS را درون آکوالد به فرمت key: value; مانند color: yellow; تعریف کنیم.

در این کد، ما کلاسی به نام "highlight" را انتخاب کرده‌ایم که رنگ پس‌زمینه، رنگ متن و ضخامت فونت عنصری که روی آن اعمال شده را تغییر می‌دهد.

• در HTML:

  <element class="highlight">...</element>

• در CSS:

  /* CSS using class Attribute Selector */
  .highlight {
     background-color: yellow;
     color: black;
     font-weight: bold;
  }

• در JavaScript:

  document.getElementsByClassName('highlight')

استفاده از ویژگی Class در HTML

کلاس‌های HTML برای استایل‌دهی و قالب‌بندی یکپارچه عناصر صفحه وب ضروری هستند. آن‌ها به شما اجازه می‌دهند بدون تکرار کد، استایل‌های یکسانی را روی چندین عنصر اعمال کنید که این کار باعث افزایش قابلیت نگهداری و ایجاد یک طراحی هماهنگ می‌شود. ویژگی class می‌تواند روی هر یک از عناصر HTML (به جز عنصرهایی که داخل عنصر head قرار می‌گیرند) استفاده شود. در ادامه روش استفاده موثر از کلاس‌ها همراه با یک مثال کاربردی آورده شده است.

تعریف یک کلاس برای استایل‌دهی

در مثال زیر، دو عنصر ساخته‌ایم؛ یکی h1 و دیگری p، و کلاس‌های "header" و "highlight" را روی آن‌ها تنظیم کرده‌ایم، اما از کلاس "highlight" در CSS داخلی برای استایل‌دهی به عنصر p استفاده کرده‌ایم. شما می‌توانید به روشی مشابه از کلاس "header" برای استایل‌دهی به عنصر h1 استفاده کنید.

<!DOCTYPE html>
<html>

<head>
   <style>
      <!-- CSS class attribute Selector Used -->
      .highlight {
         background-color: yellow;
         color: black;
         padding: 5px;
      }
   </style>
</head>

<body>
   <!-- Using class attribute in both Element-->
   <h1 class="header">Tutorialspoint</h1>
   <p class="highlight">Simply Easy Learning</p>
</body>

</html>

کلاس‌های چندگانه

ما می‌توانیم با جدا کردن نام کلاس‌ها با فاصله (space)، چند کلاس را روی یک عنصر اعمال کنیم.

در مثال زیر، دو کلاس "heading" و "content" روی عنصر <h1> اعمال شده است. این کار با استفاده از یک فاصله برای جدا کردن نام کلاس‌ها در داخل ویژگی class انجام می‌شود.

می‌توان چند کلاس را روی یک عنصر اعمال کرد تا استایل‌ها را از هر دو کلاس به ارث ببرد. در این مورد، کلاس "heading" اندازه فونت بزرگ و تراز وسط را ارائه می‌دهد، در حالی که کلاس "content" رنگ متن خاص و ارتفاع خط (line-height) را تعیین می‌کند.

<!DOCTYPE html>
<html>

<head>
    <style>
        .heading {
            font-size: 24px;
            color: #333;
            text-align: center;
        }

        .content {
            font-size: 16px;
            color: #666;
            line-height: 1.5;
        }

        .button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- Defined two Classes in h1 Element -->
    <h1 class="heading content">
        Welcome to Tutorialspoint
    </h1>
    <p class="content">
        We make Tutorials - Simply Easy Learning
    </p>
    <button class="button">Click Me</button> 
</body>

</html>

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

مهم‌ترین ویژگی کلاس‌ها، قابلیت استفاده مجدد آن‌ها است. شما می‌توانید یک کلاس را روی چند عنصر اعمال کنید تا ظاهر یکپارچه‌ای در سراسر وب‌سایت خود حفظ کنید. در مثال زیر ما دو عنصر p (پاراگراف) ایجاد می‌کنیم. هر دوی این پاراگراف‌ها برجسته‌سازی (highlighting) یکسانی خواهند داشت زیرا کلاس "highlight" بین آن‌ها مشترک است.

<!DOCTYPE html>
<html>

<head>
   <style>
      .highlight {
         background-color: yellow;
         color: black;
         font-weight: bold;
      }
   </style>
</head>

<body>
   <p class="highlight">
      To create a class, you need to define it within
      your HTML document or link to an external CSS 
      file that contains class definitions. Classes 
      are defined using the "class" attribute.
   </p>
   <p class="highlight">
      HTML classes are essential for styling and formatting
      web page elements consistently. They allow you to apply
      the same styles to multiple elements without repeating 
      code, promoting maintainability and a cohesive design.
   </p>
</body>

</html>

استفاده از ویژگی class از طریق JavaScript

کلاس‌های HTML چندمنظوره هستند و علاوه بر استایل‌دهی، اهداف مختلف دیگری را نیز دنبال می‌کنند.

کلاس‌ها معمولاً برای شناسایی عناصر جهت استفاده در توابع JavaScript به کار می‌روند. به عنوان مثال، می‌توانید از یک کلاس برای هدف قرار دادن عناصر خاص مانند دکمه‌ها استفاده کنید و آن‌ها را از طریق JavaScript تعاملی سازید. در کد زیر ما یک دکمه ایجاد کرده‌ایم که تابعی را اجرا می‌کند تا ویژگی display یک عنصر p را از none به block تغییر دهد. در نتیجه یک پاراگراف را مشاهده خواهید کرد.

<!DOCTYPE html>
<html>

<head>
   <script>
      function showContent() {
         var element = document.getElementsByClassName('content')[0];
         if (element.style.display === 'none') {
            element.style.display = 'block';
         } else {
            element.style.display = 'none';
         }
      }
   </script>
   <style>
      .interactive-button {
         background-color: #007bff;
         color: #fff;
         padding: 10px 20px;
         border: none;
         cursor: pointer;
      }
   </style>
</head>

<body>
   <button class="interactive-button" 
           onclick="showContent()">Click Me</button>
   <p class="content" style="display: none;">
       This content can be toggled by clicking the button.
   </p>
</body>

</html>

نکاتی که باید درباره کلاس به یاد داشته باشید

• بیش از ۱ کلاس را می‌توان روی هر عنصر HTML تعریف کرد.
• کلاس‌ها هم توسط CSS و هم JavaScript برای انتخاب عنصر استفاده می‌شوند.
• کلاس به حروف کوچک و بزرگ حساس است (case sensitive)، بنابراین هنگام استفاده از آن برای انتخاب عنصر دقت کنید.
• چندین عنصر نیز می‌توانند کلاس یکسانی داشته باشند.
• در CSS از .className و در JavaScript از متد getElementsByClassName() برای انتخاب عنصر HTML دارای کلاس استفاده می‌کنیم.