Оновлено: 19.05.2025

class

Frontend HTML Універсальні атрибути class

Задає стильовий клас, який дає змогу пов'язати певний елемент зі стильовим оформленням. У значенні допускається вказувати відразу кілька класів, розділяючи їх між собою пропуском.

 

 

⌨️ Синтаксис

class="<ім'я класу>"

 

 

⚙️ Значення

У HTML4 імена класів можуть містити в собі латинські літери (A-Z, a-z), цифри (0-9), символ дефіса (-) і підкреслення (_) і не повинні починатися з цифри. Використання літер кирилицею в класах неприпустимо. У HTML5 ці обмеження знято, але для сумісності зі старими браузерами і JavaScript рекомендується дотримуватися цих правил.

 

 

⚙️ Значення за замовчуванням

Немає

 

 

📋 Приклад

<!DOCTYPE html>
<html>
 <head>
  <metacharset="utf-8">
  <title>class attribute</title>
  <style>
    p { /* Normal paragraph */
    text-align: justify; /* Justify text */
    }
    p.cite { /* A paragraph with the cite class */
    color: navy; /* Blue text color */
    margin-left: 20px; /* Indent left */
    border-left: 1px solid navy; /* Border to the left of the text */
    padding-left: 15px; /* Distance from line to text */
    }
  </style>
 </head>
 <body>
  <p>For artificial lighting of the room, fluorescent lamps are used.
    They are characterized by high luminous efficiency, long service life,
    low brightness of the luminous surface, close to the natural spectral
    the composition of the emitted light, which ensures good color rendering.</p>
  <p class="cite">To prevent the display screen from being illuminated by light fluxes
    window openings are equipped with light-diffusing curtains.</p>
 </body>
</html>