CSS – Analiziranje svojstava

Čas 08

- background-color: Odredjuje boju pozadine elementa. Pozadina elementa je totalna velicina

elementa, ukljucujuci padding I border ali ne i margin.
Vrednosti:
1. color – odredjuje boju pozadine.
2. transparent – odredjuje da boja pozadine bude providna. Ovo je po defaultu
3. initial – postavlja ovaj property na default vrednost
4. inherit – nasledjuje od roditelja

Default vrednost: transparent

nasledjuje se: ne
Animaciona: da

- color: odredjuje boju teksta.

Savet: background-color kobinovan sa color cini text citljivijim
Vrednosti:
1. color – odredjuje boju teksta
2. initial – postavlja svojstvo na default vrednost
3. iherit – nasledjuje svojstvo od parent elementa

Default vrednost: nije odredjena

Nasledjuje se: da
Animaciona: da

- font-family – Odredjuje font elementa

Moze da sadrzi vise font imena kao “fallback” sistem
Vrednosti:
1. family-name, generic family
2. initial
3. inherit

Default vrednost: zavisi od brauzera

Nasledjuje se: Da
Animaciona: ne
- font-size – postavlja velicinu fonta
Vrednosti:
medium – font-size na medium velicinu
xx-small – ekstra ekstra small
x-small – ekstra small
 small – small
large - veliki
x-large – ekstra veliki
xx-large – ekstra ekstra veliki
smaller – manji od roditeljskog font-size
larger – veci od roditeljskog
length – jedinice za duzinu
% - procenat roditeljskog font-size
initial - default
inherit – nasledjuje od roditelja

Default vrednost: medium

Nasledjuje se: da
Animaciona: da

9. čast Box model

- padding: Elementov padding je razmak izmedju sadrzaja i ivice
padding svojstvo je shorthand za:
padding-top,
padding-right
padding-bottom
padding-left
Beleska: Padding kreira dodatni prostor unutar elementa, dok margina kreira dodatan prostor oko
elemenata.
- Ukoliko padding svojstvo ima 4 vrednosti:
prva vrednost padding-top
druga vrednost padding-right
treca vrednost padding-bottom
cetvrta vrednost padding-left
- Ukoliko padding svojstvo ima 3 vrednosti:
prva vrednost je padding-top
druga vrednost su padding-right i padding-left
treca vrednost je padding-bottom
- Ukoliko padding svojstvo ima 2 vrednosti:
prva vrednost padding-top i padding-bottom
druga vrednost padding-right i padding-left
- Ukoliko padding svojstvo ima 1 vrednost: primenjuje se za sve 4 strane isti padding

- Ne moze biti negativan, animacioni je , ne nasledjuje se , i default je 0

Vrednosti: jedinice duzine , %, initial i inherit
- border – je shorthand za:
- border-width – debljina bordera – default je medium
- vrednosti:
medium, thin, thick, length, initial, inherit
- border-style – stil bordera – default je none
- vrednosti:
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, init, inh
- border-color – boja default je boja teksta
- vrednosti: color, transparent, initial, inherit
Border ima i sledeca svojstva: border-top, border-right, border-bottom, border-left i svaki od
njih je shorthand kao i border.

- margin: postavlja marginu elementa, i shorthand je margin-top, margin-right,

margin-bottom, margin-left
Vrednosti: duzina(dozv negativne vr), %,
auto – brauzer racuna marginu; initial, inherit
Ostatak price isti kao i za margin

- width: Postavlja sirinu elementa.

Note: min-width i max-width gaze width svojstvo

Vrednosti:
auto – default
lenght, %, inital, inheri

Default: auto
Nasledjuje se
Animaciona je

- height – postavlja visinu elementa

Ukoliko je height: auto; Element ce automatski da prilagodi visinu da dozvoli sadrzaju da se
pravilno prikaze
Ukoliko je visina postavljena na numericku vrednost, onda ukoliko sadrzaj ne stane u
definisanu sirinu, on ce da overflow. Kako ce kontejner da rukovodi overflowom zavisi od
svojstva overflow
svojstva max-height i min-height gaze height svojstvo.

za vrednosti ista prica kao i za width

- box-sizing: definise kako ce sirina i visina da budu racunati: da li ce ukljuciti padding i border
ili ne

Vrednosti:
- content-box – Default. Width i height svojstva ukljucuju samo sadrzaj. Border i padding se ne
ukljucuju
- border-box – Width i height svojstva ukljucuju content, padding i border
inherit, initial

Default: content-box
Ne nasledjuje se
Nije animaciona

- display: block, inline, inline-block, none

odredjuju nacin na koji ce se elementi prikazati

Default: ?
Ne nasledjuje se
Nije animaciona

Vrednosti:
- block – prikazuje element kao blok element. Sa pocetkom u novoj lini i zauzima celu sirinu
- inline – prikazuje element kao inline. Ne mogu se primeniti width i height
- inline-block – kao inline-level block kontejner. Elemnt se formatira kao inline ali mogu mu se
primenti sirina i visina
- none – element je potpuno uklonjen

- visibility: odredjuje da li je element visible ili ne

default: visible
nasledjuje se
Animaciona je

vrednosti:
hidden – element je sakriven ali i dalje zauzima prostor
visible – element je vidljiv
initial inherit
10. cas