Elementų klasės CSS

Ankstesnėse pamokose pasirinkdavome puslapio elementus pagal elemento pavadinimą, nustatydami stilius, pavyzdžiui, visiems paragrafams vienu metu. Puslapyje, tačiau, gali būti skirtingų tipų paragrafų, kuriems reikia taikyti skirtingus stilius. Norint išspręsti šią problemą, skirtingus paragrafus galima priskirti skirtingoms CSS klasėms.

Kad elementą priskirtumėte kokiai nors klasei, reikia tam elementui parašyti atributą class, o jame - jūsų sugalvotą klasės pavadinimą, sudarytą iš raidžių, skaičių, pabraukimo simbolių ir brūkšnelio.

Pažiūrėkime pavyzdžiu. Sukurkime paragrafus su dviem klasių tipais - eee ir zzz:

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

Dabar kreipkimės CSS į paragrafus su skirtingomis klasėmis ir nustatykime jiems kokius nors stilius. Pavyzdžiui, nuspalvinkime paragrafus su klase zzz raudona spalva, o paragrafus su klase eee - žalia.

Norint tai padaryti, CSS faile reikia kreiptis į mūsų klases. Kreipimasis turi tokią sintaksę: pirmiausia eina taško simbolis, o po to mūsų sugalvotas klasės pavadinimas. Tai yra, norint kreiptis į klasę eee reikia parašyti .eee, o klasei zzz - parašyti .zzz.

Taigi, padarykime tai, kas aprašyta. Pridėkime prie mūsų HTML dar ir CSS stilius mūsų įvestoms klasėms:

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

Jei paleisime mūsų kodą, rezultate gausime tai:

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

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