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

Давайте посмотрим на пример того, как работают CSS классы. Ниже у нас есть простая HTML-страница с тремя заголовками (элементы h2) и тремя абзацами (элементы p).

Обратите внимание, что второй заголовок, третий заголовок и последний абзац оформлены иначе, чем остальные, так как этим элементам присвоен класс .bright. Селектор класса CSS .bright применяет свои правила стиля ко всем элементам с атрибутом class=»bright».

HTML:

<h2> Первый заголовок</h2>
<p> Первый абзац.</p>
<h2 class="bright"> Второй заголовок</h2>
<p> Второй абзац.</p>
<h2 class="bright"> Третий заголовок</h2>
<p class="bright"> Третий абзац.</p>

CSS:

.bright {
color: orange;
font-family: Arial;
}

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

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

Как создать класс в CSS

Давайте попробуем задать класс CSS с нуля. Допустим, вы хотите создать абзац текста и оформить определенные слова для большей выразительности.

Вы можете сделать это, создав класс CSS для этих специальных слов, затем присвоив этот класс отдельным словам с помощью тегов span.

Начните с написания HTML элементов, которые вы хотите стилизовать. В данном случае это абзац текста.

<p>
  Наше <span>маркетинговое программное обеспечение</span> и{" "}
  <span>сервисная платформа</span> предоставляют вам инструменты, необходимые
  для<span>привлечения</span> посетителей, <span>превращения</span> их в
  потенциальных клиентов и <span>завоевания их доверия</span> в качестве
  клиентов.
</p>;

Давайте добавим атрибуты класса к этим тегам. Для этого добавьте атрибут class=»name» к открывающему тегу целевого элемента и замените name уникальным идентификатором класса.

<p> Наше <span class="orange-text"> маркетинговое программное обеспечение </span> и <span class="orange-text"> сервисная платформа </span> предоставляют вам инструменты, необходимые для <span class="blue-text"> привлечения </span> посетителей, <span class="blue-text"> превращения </span>    их в потенциальных клиентов и <span class="blue-text"> завоевания их доверия </span> в качестве клиентов.</p>

Здесь мы добавили два CSS класса к нашим тегам span: orange-text и blue-text.

Теперь давайте рассмотрим некоторые вопросы, которые у вас могут возникнуть о CSS классах.

Сколько CSS классов можно добавить к элементу

Часто использование классов в CSS заключается в добавлении определенного стиля к конкретному элементу.

Вы не ограничены одним классом для каждого элемента. Хотя вы можете указать классы CSS для всех абзацев на вашей странице (задать размер шрифта или цвет фона), вы также можете указать классы для отдельных абзацев, чтобы изменить их цвет или отступы, сохраняя при этом общие правила стиля.

Заключение

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