Що означає такий напис в styles.css: .example?

Основний
1

У CSS файлі styles.css, .example є селектором класу. Коли ви бачите .blockd в CSS, це означає, що будь-який HTML елемент з класом “blockd” буде мати стилі, що визначені в цьому блоку CSS.

Наприклад, якщо в HTML ви маєте елемент <div class="example">...</div>, то всі властивості стилізації, які визначені для .example в styles.css, будуть застосовані до цього елемента.

Селектор класу:

  • Позначається символом крапки (.), наприклад, .example.
  • Використовується для стилізації всіх елементів, які мають певний клас.
  • Один і той самий клас може бути назначений багатьом елементам.
  • Класи можна використовувати багаторазово на одній сторінці.
<!DOCTYPE html>
<html>
<head>
  <title>Приклад селектора класу</title>
  <style>
    .button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
    }
  </style>
</head>
<body>

<button class="button">Класова кнопка</button>
<button class="button">Інша класова кнопка</button>

</body>
</html>

У цьому прикладі .button є селектором класу. Обидва кнопки отримають стилі, визначені для класу .button .