У попередніх уроках ми з вами вибирали елементи сторінки за ім'ям тегу, задаючи стилі, наприклад, одночасно всім абзацям. На сторінці, однак, можуть бути абзаци різних типів, до яких потрібно застосувати різні стилі. Для вирішення такої проблеми можна різні абзаци віднести до різних 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.