Класы элементаў у CSS

У папярэдніх уроках мы выбіралі элементы старонкі па імені тэга, задаючы стылі, напрыклад, адначасова ўсім абзацам. На старонцы, аднак, могуць быць абзацы розных тыпаў, да якіх трэба ўжываць розныя стылі. Для вырашэння такой праблемы можна розныя абзацы аднесці да розных CSS класаў.

Каб аднесці тэг якому-небудзь класу, трэба гэтаму тэгу напісаць атрыбут class, а ў ім - прыдуманую вамі назву класа, якая складаецца з літар, лічбаў, знакаў падкрэслівання і дэфіса.

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

<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 файле трэба звярнуцца да нашых класаў. Зварот мае наступны сінтаксіс: спачатку ідзе знак кропка, а затым прыдуманая намі імя класа. Гэта значыць для звароту да класа eee трэба напісаць .eee, а для класа zzz - напісаць .zzz.

Такім чынам, зробім апісанае. Дадамо да нашага HTML яшчэ і CSS стылі для ўведзеных намі класаў:

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

Калі запусціць наш код, то ў выніку атрымаецца наступнае:

Дадзены наступны код:

<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>

Пафарбуйце ў чырвоны колер элементы з класам odd і ў зялёны колер - элементы з класам eve.

Дадзены наступны код:

<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>

Пафарбуйце ў чырвоны колер усе элементы з класам eee.

Тлумачце, чаму ў папярэдняй задачы ў чырвоны колер фарбуюцца тэгі li, хоць клас, які задае колер, прызначаны тэгу ul.