MULTIMEDIJI I GLOBALNI MEDIJI
HTML I CSS
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Margine, okviri i rastojanja
Jedna od najlepših stvari kod CSS-a je da pomoću njega možete da podešavate neke karakteristike, kao što su margine, okviri i rastojanja. Ne samo da
možete da podešavate ove karakteristike, nego prilikom toga imate i zaista veliku fleksibilnost.
U okviru vizuelnog modela CSS-a se može smatrati da svi elementi imaju margine, okvir i rastojanje. Razlog je u tome da svaki element čini pravougaonik. Postoje dva tipa tih pravougaonika. To su posebni blokovi (vezani za elemente na nivou bloka) i linijski pravougaonici (ubačeni pravougaonici).
Pomoću vizuelnog modela koji postoji u CSS-u, za koji se koristi termin pravougaoni model, možete različitim elementima pravougaonika defmisati
izgled. U narednom odeljku ću vam prikazati pravougaoni model, tako da možete da vidite kako on radi, ali je u ovom trenutku poenta da možete da podešavate
ne samo izgled svih stranica tog pravougaonika, već i svaku od njih pojedinačno.
Margine omogućavaju da se kontrolišu margine pravougaonika. Mogu se zadavati pozitivne i negativne vrednosti. Okviri omogućavaju da podesite
izgled pravougaonika upotrebom različitih unapred definisanih stilova za okvire, dok rastojanja omogućavaju da sadržaj elementa udaljite od samog pravougaonika (slično kao kod ćelija u tabeli). Mogućnost rukovanja ovim elementima je jedan od razloga što je CSS prilično delotvorniji u odnosu na prethodne
tehnologije.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Upoznavanje sa pravoguaonim modelom
Pravougaoni model je standardizovani deo tehnologije pretraživača. W3C nadgleda standardizaciju preraživača, tako da je ova organizacija defmisala i
pravougoni model (Box Model) (videti sliku 11.1).
GORE
TM MARGINA (transparentna)
TB OKVIR
LEVO LB
LB
LP
SADRŽAJ
RP
RB
RM
DESNO
BP
BB
BM
DOLE
Slika 11.1 Pravougaoni model, onako kako je definisan od strane W3C-a
KVANTNI SKOK: Pravougaoni model u CSS-u
Pošto se CSS tako puno koristi za vizuelna podešavanja, poznavanje ovog modela i načina na koji se on pravilno ili nepravilno interpretira u pretraživačima
postaje ključno u tome koliko dobro ćete naučiti i primeniti CSS na svojim stranama. Pravougaoni model ne samo da je povezan sa definisanjem izgleda margina, okvira i rastojanja sadržaja, već i sa načinom na koji CSS koristite za pozicioniranje sadržaja u okviru nekog rasporeda.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Upotreba margina
Margine se najčešće koriste za kontrolu rastojanja između elemenata. Primetili ste da, podrazumevano, uvek postoji određeno rastojanje oko nekog
sadržaja koji se prikazuje u pretraživačima (videti sliku 11.2). Ovo se može kontrolisati promenom vrednosti margina u elementu body (videti primer 11.1).
Primer 11.1 Podešavanje
margina za element body
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color: black; margin-top: 0; margin-left: 0; border: 2px solid white;}
h1 {font-size: 24px; color: orange;}
h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px;>
NAPOMENA
Primetićete da iza vrednosti 0 nema nikakvih vrednosti, kao što su px ili em. Razlog je što se iza nule ne moraju pisati jedinice; značenje je implicitno.
Time što sam za element body podesio gornju i levu mraginu na 0, ceo element se pomerio, zajedno sa elementima koji se u njemu nalaze (videti sliku 11.3).
Slika 11.2 Ako se gornja i leva margina podese na 0, primetićete da se okvir koji okružuje element body pomerio naviše i u levo.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Modifikacija stilova linkova
Pogledajte sliku 11.2 i primetićete da su se svi elementi koji se nalaze u elementu body pomerili u levo, sa izuzetkom elementa h2, kod kojeg je osobina
text-indent podešena na 15 piksela. Element hl i pasusi, oboje potomci elementa body koji nemaju svoje margine, pomerili su se u levo i naviše. Ili nisu? Šta je
rastojanje između elementa hl i okvira elementa body. Iako se element očigledno pomerio naviše, element hl nije. Razlog je što pretraživač Mozilla očekuje da
vrednost gornje margine prvog elementa bude 0, ako želite da taj element ide zajedno sa gornjom marginom elementa u kome se taj element nalazi. U Internet
Exploreru se ovo ne očekuje, tako da isti stil dovodi do toga da se i hl pomera u levo i naviše.
U primeru 11.2 sam napravio stilove koji pomalo dramatično demonstriraju upotrebu margina kod elemenata, uključujući i podešavanje margina na nulu
za element h1.
Primer
11.2
Podešavanje
različitih vrednosti za margine, radi demonstracije njihove...
body {font; 14px Verdana, Arial, Helvetica, sans-serif; color: white; backgroundcolor:black;
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; border: 2px solid white;}
h1 {font-size: 24px; color: orange; margin-top: 0; margin-right: 100px; border: 2px solid green;}
h2 {font: italic 20px Georgia, Times, serif; color: #999; text-indent: 15px;}
p {margin-left: 100px; margin-top: 5px; margin-bottom: 0; border: 2px solid yellow;>
Na slici 11.2 je prikazano kako ove margine izgledaju. Da biste mogli da vidite mar¬gine, ubacile sam i okvire. 0 okvirima ćete više naučiti kasnije u ovom
poglavlju.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Leva i gornja margina su podešene na 0
Leva margina pasusa je podešene na 100 piksela
Gornja margina za h1 je podešene na 0,
a desna 100 piksela
Desna i donja margina podešene na 0
Donja margina pasusa je podešena na 0,
a gornja na 5 piksela
Slika 11.2 Primena margina na različite elemente, uključujući body, h1 i pasuse
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Skraćenice za margine
Pomoću osobine margin mogu se skraćeno zadati osobine margina. Do sada ste primetili da CSS skraćenice imaju svoje kaprice, kao što je redosled
vrednosti. Ni margine nisu izuzetak.
Pomoću osobine margin možete da podesite vrednosti svojih margina. Morate poštovati sledeći redosled: gornja, desna, donja i leva. Popularna
skraćenica za ovaj redosled je TrouBLe (nevolja). U primeru 11.3 sam koristio duži oblik definisanja osobina:
body {margin-top: 30px; margin-right: 30px; margin-bottom: 30px; margin-left: 130px;}
Iako kod dužeg oblika niste u obavezi da poštujete pomenuti redosled, nije loše da uvek koristite isti redosled, jer ćete time kasnije izbeći probleme:
body {margin: 30px 30px 30px130px;}
Obratite pažnju na to da između pojedinih vrednosti nema zareza, kao i da se vrednosti primenjuju u redosledu koji smo pomenuli.
Sačekajte, ima još toga. I skraćenu verziju možete dalje skratiti ako se oslonite na činjenicu da suprotne vrednosti automatski primaju vrednost
odgovarajućeg para (pod uslovom da vrednost nije konkretno zadata).
body {margin: 30px 20px;}
Ovim se dobijaju margine od 30 piksela na vrhu i dnu, kao i 20 piksela sa leve i desne strane.
body {margin: 30px 20px 70px;}
Ako su sve margine iste, možete vrednost zadati samo jednom:
body {margin: 100px;}
Ovim se dobija margina od 100 piksela sa sve četiri strane.
Kao i kod definisanja širine, mogu se koristiti procenti:
body {margin: 20%;}
Ovim se dobija margina od 20% na svim stranama. Na kraju, zapamtite da u slučaju da je vrednost 0, ne morate zadavati jedinice ni procente.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Okviri
U proteklim poglavljima sam koristio okvire da bih vam vizuelno objasnio neke CSS koncepte. Ovde ću se okvirima detaljnije pozabaviti.
Izgled okvira se može definisati na osnovu strane, širine, stila i boje. Za svaku osobinu se koristi posebna karakteristika elementa border. To su border-width,
bonder-style i border-color. Stranu okvira treba da postavite između dva dela osobine border, na primer, border-left-color, border-right-style i border-top-width.
Debljina okvira
Debljina okvira se može zadati pomoću dužina (u pikselima ili ems jedinicama) ili pomoću ključnih reći, koje uključuju thin, medium i thick.
border-bottom-width: 2px;
border-left-width: thick;
Stil okvira
Ovde stvari postaju zabavne. Trenutno postoji osam opcija za stil okvira, pored još dve dodatne opcije {videti tabelu 11.1).
okvira u CSS-u
Tabela
11.1
Stilovi
Stil Efekat
dotted Niz tačaka
dashed Niz crtica
solid
Puna linija
double Dve pune linije
groove Žleb koji ulazi u ekran
ridge
Greben koji izlazi iz ekrana
inset
Mešavina sive i crne okvirne linije
outset Obrnuta mešavina sive i crne okvirne linije
hidden Skriveni okvir. Možete ga prikazati pomoću nekog skripta
none
Okvir se ne prikazuje
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Boja okvira
Boje se mogu podešavati na osnovu heksadecimalnih vrednosti, skraćenica za hek-sadecimalne vrednosti, RGB vrednosti, RGB procenata ili imena boja
koja su podržana.
border-top-color:
Sve ovo zajedno
U primeru 11.3 je pokazano kako se koriste različite kombinacije osobina okvira.
Primer 11.3 Kombinovanje stilova okvira
body {font: 14px verdana, Arial, Helvetica, sans-serif; color: white; background-color:
black; margin-top: 0;}
h1 {font-size: 24px; color: orange; border-left-width: 3px; border-left-color:
red; border-left-style: dotted; border-bottom-width: thick; border-bottom-color:
#999; border-bottom-style: inset;}
h2 {font: italic 20px Georgia, Times, šerif; color: #999; text-indent: 15px;
border-bottom: thin; border-bottom-style: dotted; border-color: orange;}
p {border-left-wiđth: mediun; border-left-style: solid; border-left-color: green;>
Sve ove stilove možete videti na slici 11.3
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Slika 11.3 Primena okvira na određene strane. Podešavanje debljine, stila i boje.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Skraćenica za okvire
Skraćenica za definisanje okvira je najduža skraćenica koja se koristi za definisanje jedne osobine. Postoji nekoliko opcija.
Skraćenica za stranu, debljinu, stil i boju.
Svaka kategorija skraćenica ima odgovarajuću skraćenicu.
border-right, border-left, border-top, border-bottom
border-width
border-style
border-color.
Prema tome, možete napisati: border-right: 1px dotted red;
Na taj način će izabrani element imati desnu granicu od jednog piksela, linija će biti tačkasta, a boja crvena.
Osobina border
Ova skraćena osobina omogućava podešavanje debljine, stila i boje za sve četiri strane elementa o kome se radi.
border: ttiick ridge white;
Na slici 11.4 možete da vidite kako izgleda rezultat.
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Podešavanje rastojanja sadržaja u odnosu na okvir
Ovo rastojanje (padding) omogućava da podesite rastojanje između sadržaja i njegovog okvira. U prethodnim primerima koje smo radili u ovom poglavlju primetili ste elemente koji se ravnaju sa njihovim okvirima i marginama. Ova osobina omogućava da rešite takve probleme. Rastojanje se može podešavati
za svaku stranu. Mogu se koristiti dužinske vrednosti, koje se, na primer, zadaju u pikselima, ili se mogu koristiti procenti. Pojedinačne osobine za podešavanje
ovih rastojanja su padding-top, padding-right, padding-bottom i padding-left. Primer 11.4 pokazuje kako se ove osobine koriste.
Primer
11.4
Dodavanje
belina pomoću osobine padding
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color: black; margin-top: 10px;>
h1 {font-size: 24px; color: orange; border-bottom: 2px dotted lime; paddingbottom: 10px;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc; text-indent: 15px;}
p {border: thin solid orange; padding-top: 15px; padding-right: 30px; padding-bottom: 0; padding-left: 30px;}
Primetićete da se zadavanjem rastojanja tekst zaglavlja hl odvaja od okvira, a rastojanja su zadata i za pasus (levo, desno, gore i dole) (videti sliku 11.8)
Slika 11.8 Dodavanje belina pomoću osobine padding
dipl.ing. Aleksandar Rikalović M.Sc.
Margine, okviri i rastojanja
multimediji i globalni mediji
Skraćenice za definisanje rastojanja
Za definisanje rastojanja takođe možete koristiti skraćenice. Koristi se osobina padding. Skraćenice kod ovih rastojanja liče na skraćenice koje se koriste kod margina. To znači da je redosled vrlo bitan i ako to ne zapamtite, vrlo brzo ćete upasti u TrouBle (nevolje). Da bi sve radilo, vrednosti morate zadati
sledećim redosledom: top, right, bottom, left (gore, desno, dole, levo).
p {padding: 15px 30px 25px 0;}
Dobijamo sve više kontrole
Očigledno je da nas istraživanje pravougaonog modela i načina na koji elementi funkcionisu kada se ubaci CSS vode dalje na putu da steknemo više
kontrole nad dizajnom.
Jedna od oblasti na koju bih želeo da vas podsetim je da dokumenti moraju da imaju pravilnu strukturu. Zbog prelaza na tehnologiju DOCTYPE, koju
sam pomenula ranije u ovom poglavlju, postalo je bitno da se osigura da se koristi pravi DOCTYPE da biste bili sigurni da u IE-u 6.0 nećete imati problema sa
pravougaonim modelom.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 11