CSS selektori : Uvod u web dizajn : Moj web dizajn

CSS selektori : CSS selectors

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.

CSS svojstva

Postoje brojna css svojstva koja služe vizualnom oblikovanju web stranice. Pomoću njih možemo promijeniti između ostalog boju pozadine elementa (svojstvo background-color), veličinu slova (svojstvo font-size) ili svojstva modela pravokutnika (svojstva width i height, margin, border i padding).

CSS vrijednosti

Svakom od css svojstava moramo dodijeliti vrijednost. Svojstvu boje teksta (svojstvo color) ili pozadinske boje (svojstvo background-color) dodjeljujemo vrijednost boje koja može biti engleski naziv boje (npr. red, green, blue, orange...).

CSS selektor elementa

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:

css-selektor-elementa.html

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Selektor elementa</title>
  <style>
    h1 { color: blue; }
    p { background-color: orange; }
  </style>
  </head>
  <body>
    <h1>Obojan tekst naslova</h1>
    <p>Odlomak s pozadinskom bojom</p>
  </body>
</html>

U ovom primjeru smo pomoću selektora elementa naslova h1 dodijelili boju teksta (color: blue;), a selektoru odlomka p dodijelili boju pozadine (svojstvo background-color: orange;)

CSS selektor klase

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.

css-selektor-klase.html

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Selektor klase</title>
  <style>
    .boja { color: blue; }
  </style>
  </head>
  <body>
    <h1 class="boja">Plavi naslov</h1>
    <p class="boja">Plavi odlomak</p>
  </body>
</html>

U elementu <style> oblikovali smo klasu pomoću selektora klase. On počinje znakom točka . iza kojeg dolazi naziv klase. Nakon toga navodimo unutar vitičastih zagrada stilove kojim oblikujemo elemente klase (u ovom slučaju svojstvo color kojoj dodjeljujemo vrijednost blue):

CSS selektor identifikatora

Selektori identifikatora se razlikuju od selektora klase po tome što označavaju samo jedan element. Kao što vrijednost svojstva identifikatora id mora biti jedinstvena na web stranici, za razliku od vrijednosti svojstva class koje se može ponavljati za više html elemenata.

U elementu <style> oblikovat ćemo id pomoću oznake za identifikator # iza kojih slijedi naziv identifikatora (u ovom slučaju naslov):

#naslov {
	background-color : yellow;
}

Primjer oblikovanja elemenata pomoću selektora klase i identifikatora:

css-selektor-identifikatora.html

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Selektor identifikatora</title>
  <style>
    .boja { color: blue; }
    #naslov { background-color: yellow; }
  </style>
  </head>
  <body>
    <h1 class="boja">Plavi naslov</h1>
    <p id="naslov" class="boja">Odlomak s pozadinskom bojom</p>
  </body>
</html>

Pozor!

Oblikovanje pomoću css svojstava u <style> elementu ne ovisi o formatiranju teksta kojim opisujemo css stilove. Umetanje novih redaka i razmaka web preglednik zanemaruje. Potreban je samo jedan razmak, a sve ostalo ne utječe na izgled dokumenta. Tako je dopušteno:

.boja { color: blue; }
#naslov { background-color: yellow; }

Ovaj način koristimo radi preglednosti koda.

Također je dopušteno stavljanje svojstava u novi red:

.boja { 
  color: blue; 
}
#naslov { 
  background-color: yellow; 
}

CSS selektori

Tečaj - Uvod u HTML

Uvod u web dizajn

Naša preporuka

Besplatne usluge: