В предыдущих уроках мы с вами выбирали элементы страницы по имени тега, задавая стили, к примеру, одновременно всем абзацам. На странице, однако, могут быть абзацы разных типов, к которым нужно применять разные стили. Для решения такой проблемы можно разные абзацы отнести к разным CSS классам.
Чтобы отнести тег какому-нибудь классу, нужно
этому тегу написать атрибут class,
а в нем - придуманное вами название класса,
состоящее из букв, цифр, символов подчеркивания
и дефиса.
Давайте посмотрим на примере. Сделаем абзацы
с двумя типами классов - eee и zzz:
<p class="eee">
абзац с классом eee
</p>
<p class="eee">
абзац с классом eee
</p>
<p class="zzz">
абзац с классом zzz
</p>
<p class="zzz">
абзац с классом zzz
</p>
Давайте теперь обратимся в CSS к абзацам
с различными классами и зададим им какие-нибудь
стили. К примеру, покрасим абзацы с классом
zzz в красный цвет, а абзацы с классом
eee - в зеленый.
Для этого в CSS файле нужно обратиться к
нашим классам. Обращение имеет следующий
синтаксис: сначала идет символ точка, а затем
придуманное нами имя класса. То есть для
обращения к классу eee нужно написать
.eee, а для класса zzz - написать
.zzz.
Итак, сделаем описанное. Добавим к нашему HTML еще и CSS стили для введенных нами классов:
.eee {
color: green;
}
.zzz {
color: red;
}
Если запустить наш код, то в результате получится следующее:
Дан следующий код:
<ul>
<li class="odd">пункт</li>
<li class="eve">пункт</li>
<li class="odd">пункт</li>
<li class="eve">пункт</li>
<li class="odd">пункт</li>
<li class="eve">пункт</li>
</ul>
Покрасьте в красный цвет элементы с классом
odd и в зеленый цвет - элементы с
классом eve.
Дан следующий код:
<h2 class="eee">заголовок</h2>
<p class="eee">
абзац
</p>
<p class="eee">
абзац
</p>
<p>
абзац без класса
</p>
<ul class="eee">
<li>пункт</li>
<li>пункт</li>
<li>пункт</li>
<li>пункт</li>
<li>пункт</li>
</ul>
Покрасьте в красный цвет все элементы с классом
eee.
Объясните, почему в предыдущей задаче в красный
цвет красятся теги li, хотя класс,
задающий цвет, назначен тегу ul.