CSS selektori

Svaki od elemenata koji je dodan na web stanicu može biti oblikovan pomoću CSS-a.

CSS selektor služi kao veza između HTML elementa i njegovog CSS oblikovanja (kao što je boja, veličina, oblikovanje, položaj…).

Osnovni selektori su selektor elementa, identifikatora i klase. CSS svojstva umećemo unutar vitičastih zagrada.

Osnovni selektori su selektori elemenata. Imamo selektore odlomaka, naslova, poveznica, tablica, simboličkih i numeričkih popisa… Selektor elementa sastoji se od oznake elementa bez šiljatih zagrada.

Pogledajmo primjer:

HTML

<h1>Moj naslov</h1>

CSS

    h1 { color: blue; }
    body { background-color: lightblue; }


U ovom primjeru smo pomoću selektora elementa naslova h1 dodijelili boju teksta (color: blue;) a odlomku body dodijelili pozadinsku boju (svojstvo background-color:  lightblue 😉

Selektor klase koristimo kod oblikovanja html elemenata koji imaju zadanu vrijednost svojstva klase. Pomoću selektora klase možemo oblikovati jedan ili više elemenata za zadanu vrijednost svojstva klase.

U primjeru ispod jedan naslov ima svojstvo klase, a drugi nema i kada iskoristimo CSS selektor klase, CSS svojstva će se primjeniti samo na naslov koji ima svojstvo klase

HTML

 <h1 class="boja">naslov</h1>


 <h1>naslov</h1>

CSS selektor klase

.boja { color: red; }

Selektori identifikatora se razlikuju od selektora klase po tome što označavaju samo jedan element. 

Primjer oblikovanja elemenata pomoću selektora klase i identifikatora:

HTML

<h1 class="boja">Naslov</h1>
<p id="naslov" class="boja">Odlomak s pozadinskom bojom</p>

CSS selektor identifikatora

#naslov {
	background-color : yellow;
}

Lista svojstava koje možete dodijeliti putem CSS-a je ogromna, a listu možete vidjeti OVDJE

Nastavi tečaj – HTML i CSS predlošci

Related Posts

Osnove CSS-aOsnove CSS-a

HTML nam omogućuje mnoge mogućnosti, kao što su ubacivanje naslova, stiliziranog teksta, videozapisa i fotografija, no iako se i korištenjem samog HTML-a stranica može stilizirati, najčešće se za stil stranice

READ MOREREAD MORE