Madarasa ya Vipengele katika CSS

Katika somo zilizopita tulichagua vipengele vya ukurasa kulingana na jina la kitambulisho, tukitaja mitindo, kwa mfano, kwa viperengu vyote wakati huo huo. Kwenye ukurasa, hata hivyo, kunaweza kuwa na viperengu vya aina tofauti, ambavyo inahitajika kutumia mitindo tofauti. Ili kutatua tatizo kama hilo, viperengu tofauti vinaweza kupelekwa kwa madarasa tofauti ya CSS madarasa.

Ili kupeleka kitambulisho kwa darasa fulani, inahitajika kuandika sifa class kwa kitambulisho hicho, na ndani yake - jina la darasa ulilobuni, linaloundwa na herufi, nambari, alama za under_score na kistariungio.

Wacha tuangalie kwa mfano. Wacha tutengeneze viperengu na aina mbili za madarasa - eee na 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>

Wacha sasa tuelekeze kwenye CSS kwa viperengu vilivyo na madarasa tofauti na tuitaje mitindo fulani. Kwa mfano, rangi viperengu vilivyo na darasa zzz kwa rangi nyekundu, na viperengu vilivyo na darasa eee - kwa kijani.

Ili kufanya hivyo, kwenye faili ya CSS inahitajika kuelekeza kwa madarasa yetu. Mwelekeo una sintaksia ifuatayo: kwanza huandikwa alama nukta, kisha huandikwa jina la darasa tulilobuni. Yaani, kwa kuelekeza kwa darasa eee inahitajika kuandika .eee, na kwa darasa zzz - kuandika .zzz.

Kwa hivyo, wacha tufanye yaliyoelezewa. Tuongeze kwenye HTML yetu pia mitindo ya CSS kwa madarasa tuliyoanzisha:

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

Ikiwa utaendesha msimbo wetu, basi matokeo yatakuwa yafuatayo:

Imetolewa msimbo ufuatao:

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

Rangi kwa rangi nyekundu vipengee vilivyo na darasa odd na kwa kijani - vipengee vilivyo na darasa eve.

Imetolewa msimbo ufuatao:

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

Rangi kwa rangi nyekundu vipengee vyote vilivyo na darasa eee.

Eleza kwa nini katika shida iliyopita rangi nyekundu inarangiwa vitambulisho li, ingawa darasa, linalobainisha rangi, limepewa kitambulisho ul.