Класове на елементи в 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.