CSS классы: что это и как использовать на сайте

CSS-классы - это наименования, которые присваиваются элементам HTML и используются для задания стилей и оформления веб-страниц.

Ниже приведены примеры простых CSS-классов и их использования:

1. Оформление текста:

HTML:

Это мой текст

CSS:

.my-text {
  color: blue;
  font-size: 18px;
  font-family: Helvetica, Arial, sans-serif;
}

В этом примере мы создали класс "my-text" и применили к абзацу в HTML-коде. Далее, мы задали стиль для данного класса, определив цвет текста, размер шрифта и его семейство.

2. Оформление кнопки:

HTML:

Нажми меня

CSS:

.my-btn {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

В этом примере мы создали класс "my-btn" и применили его к HTML-элементу кнопки. Задали стиль для данного класса, определив цвет фона, отсутствие рамки вокруг кнопки, цвет текста и т.д.

Кроме того, CSS-классы можно наследовать, объединять, использовать селекторы, применять псевдо-классы и т.д. Это позволяет создавать более сложные и универсальные стили для веб-страницы.

Вот пример объединения двух классов:

HTML:

Нажми меня

CSS:

.my-btn {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
.my-btn-large {
  font-size: 20px;
  padding: 15px 30px;
}

Мы применили два класса "my-btn" и "my-btn-large" к кнопке, определив разные стили для каждого класса. В итоге, была создана кнопка большего размера с большим шрифтом и отступами.