Pozicioniranja sadržaja sa CSS-om (osnove)

Uvod

Pozicioniranje sadržaja je moguće uraditi na razne načine koristeći CSS svojstva. Koje će svojstvo biti korišćeno zavisi od specifičnosti layout-a, kao i od zahteva za podržavanje primenjene sintakse u browser-ima. Osnovna tehnika za pozicioniranje sadržaja je svojstvo position. Ukoliko je vrednost svojstva: relative, absolute ili fixed, dostupna su i dodatna svojstva: top, right, bottom, left.
Kao jedno od rešenja za pozicioniranje sadržaja se može koristiti osobina float, ali je trend je da se ova osobina što manje koristi (tj. da se koristi samo za “obavijanje teksta oko bloka”).
Tehnika koja je preporučena i podržana od većine novijih browsera, podrazumeva korišćenje CSS svojstva “display:flex”. Smatra se da svojstvo “display:grid” ima odličan potencijal, ali će morati da se sačeka korišćenje u praksi dok je ne usvoje svi browser-i.

Continue reading…


Box model

Pojam i definicija

box model

Svi HTML elementi su kutije (eng. box), uključujući i span tag. Kutija kao pojam u front-end-u se razlikuje od pojama kutije iz života.
Dimezija kutije po W3C se dobija sabiranjem
dimenzija sledećih elemenata:

  • sadržaj box-a (ima svoju visinu i širinu)
  • padding
  • border

Margina ne ulazi u veličinu box-a, ona razdvaja boxove. Ukoliko se explicitno ne definiše širina box-a, onda box zauzima 100% roditeljskog elementa.

Za igranje sa box modelom i dobijanje krajnje veličine možete posetiti stranicu.

Continue reading…


CSS selektori

Tipovi selektora

CSS selektori su deo CSS synatax-e, koji odredjuju HTML elemente na koje će se primeniti CSS pravila.

Univerzalni selektor

Univerzalni selektor se obeležava * (zvezdom), i njegova osobina je da selektuje sve elemente. Ovaj selektor se obično koristi kada se radi resetovanje stilova.

Primer

Definisani sa tipom HTML elementa

Ovo su najjednostavniji selektori i definišu se nazivom HTML elementa koji targetiraju.

Primer

ili

Definisani sa klasom elementa

Ovi selektori “gadjaju” HTML elemente koji sadrže odredjenu klasu.

Primer

Selektor koji targetira klasu se obeležava sa . (tačkom) ispred imena klase.

Definisani sa ID-om elementa

Ovi selektori “gadjaju” HTML elemente koji sadrže odredjeni ID. Obeležavaju se # znakom ispred naziva ID.

Primer

Selektor koji targetira element sa odredjenim ID-om se obeležava sa znakom # ispred ID-a.


Continue reading…