Klase elemenata u CSS
U prethodnim lekcijama smo birali elemente stranice po imenu taga, zadajući stilove, na primer, istovremeno svim pasusima. Na stranici, međutim, mogu postojati pasusi različitih tipova, na koje treba primeniti različite stilove. Za rešavanje ovakvog problema možemo različite pasuse svrstati u različite CSS klase.
Da bismo svrstali tag u neku klasu, potrebno je
tom tagu napisati atribut class,
a u njemu - naziv klase koji ste vi smislili,
koji se sastoji od slova, cifara, simbola donje crte
i crtice.
Hajde da pogledamo na primeru. Napravićemo pasuse
sa dve vrste klasa - eee i zzz:
<p class="eee">
pasus sa klasom eee
</p>
<p class="eee">
pasus sa klasom eee
</p>
<p class="zzz">
pasus sa klasom zzz
</p>
<p class="zzz">
pasus sa klasom zzz
</p>
Hajde sada da pristupimo u CSS pasusima
sa različitim klasama i zadamo im neke
stilove. Na primer, obojimo pasuse sa klasom
zzz u crvenu boju, a pasuse sa klasom
eee - u zelenu.
Za ovo u CSS fajlu treba da pristupimo
našim klasama. Pristup ima sledeću
sintaksu: prvo ide znak tačka, a zatim
ime klase koje smo mi smislili. Odnosno za
pristup klasi eee treba napisati
.eee, a za klasu zzz - napisati
.zzz.
Dakle, uradimo opisano. Dodajmo našem HTML-u i CSS stilove za unete klase:
.eee {
color: green;
}
.zzz {
color: red;
}
Ako pokrenemo naš kod, kao rezultat ćemo dobiti sledeće:
Dat je sledeći kod:
<ul>
<li class="odd">tekst</li>
<li class="eve">tekst</li>
<li class="odd">tekst</li>
<li class="eve">tekst</li>
<li class="odd">tekst</li>
<li class="eve">tekst</li>
</ul>
Obojite u crvenu boju elemente sa klasom
odd i u zelenu boju - elemente sa
klasom eve.
Dat je sledeći kod:
<h2 class="eee">Naslov</h2>
<p class="eee">
pasus
</p>
<p class="eee">
pasus
</p>
<p>
pasus bez klase
</p>
<ul class="eee">
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
<li>tekst</li>
</ul>
Obojite u crvenu boju sve elemente sa klasom
eee.
Objasnite, zašto se u prethodnom zadatku u crvenu
boju boje tagovi li, iako je klasa,
koja zadaje boju, dodeljena tagu ul.