Классы элементов в CSS

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

Чтобы отнести тег какому-нибудь классу, нужно этому тегу написать атрибут class, а в нем - придуманное вами название класса, состоящее из букв, цифр, символов подчеркивания и дефиса.

Давайте посмотрим на примере. Сделаем абзацы с двумя типами классов - eee и zzz:

html<p class="eee">
  paragraph with class eee
</p>
<p class="eee">
  paragraph with class eee
</p>
<p class="zzz">
  paragraph with class zzz
</p>
<p class="zzz">
  paragraph with class zzz
</p>

Давайте теперь обратимся в CSS к абзацам с различными классами и зададим им какие-нибудь стили. К примеру, покрасим абзацы с классом zzz в красный цвет, а абзацы с классом eee - в зеленый.

Для этого в CSS файле нужно обратиться к нашим классам. Обращение имеет следующий синтаксис: сначала идет символ точка, а затем придуманное нами имя класса. To есть для обращения к классу eee нужно написать .eee, а для класса zzz - написать .zzz.

Итак, сделаем описанное. Добавим к нашему HTML еще и CSS стили для введенных нами классов:

css.eee {
  color: green;
}
.zzz {
  color: red;
}

Если запустить наш код, то в результате получится следующее:

html<ul>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
  <li class="odd">text</li>
  <li class="eve">text</li>
</ul>

html<h2 class="eee">Title</h2>
<p class="eee">
  paragraph
</p>
<p class="eee">
  paragraph
</p>
<p>
  paragraph without class
</p>

<ul class="eee">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>