MULTIMEDIJI I GLOBALNI MEDIJI
HTML I CSS
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Tekst
Nakon što ste osetili šta sve može da se uradi pomoću CSS-a, idemo dalje i počinjemo da radimo sa tekstom. Istorijski gledano, CSS se više koristio za
definisanje izgleda teksta nego za bilo šta drugo. Jedan od razloga je dobra podrška za stilove teksta koja je postojala u CSS-u 1.0, Od tada su se pojavile neke
nove opcije, koje pružaju dodatnu kontrolu nad načinom na koji rukujete tekstom u svojim dokumentima na Webu. Osnovni principi rada sa tekstom u CSS-u
vode poreklo iz tradicionalne tipografije iako su određena ograničenja koja postoje, kako u CSS-u tako i u podršci u pretraživačima, spečila dalji razvoj u ovoj
oblasti.
Na početku dajem jedno upozorenje: Rad sa fontovima može biti komplikovan. Prvo morate da shvatite da u smislu fontova koji se mogu koristiti na
Webu postoji zavisnost od operativnih sistema konkretnog računara koji korisnik koristi, kao i od fontova koji su tamo instalirani. Ako konkretan font nije
instaliran na određenoj mašini, onda ta osoba neće moći da vidi taj font. Ista ograničenja postoje i za HTML, a ni u CSS-u nije mnogo promenjeno. Pored toga
postoje i neke mane pretraživaca vezane za veličinu slova, tako da primena veličine slova može da bude problem. U odnosu na ove slabosti vi ste praktično
nemoćni, a jedino što možete da uradite je da naučite kako da se sa tim slabostima nosite. Hajde da se sada zajedno upoznamo sa detaljima.
Dobra vest je da u pogledu fontova imate nekoliko opcija i da CSS proširuje način na koji se fontovi koriste. Imate mogućnost definisanja boje, debljine
slova, visine slova, rastojanja između slova, odnosno svih vizuelnih karakteristika koje su interesantne kod
fontova. Kada se malo bolje upoznate sa CSS-om, naučićete da kombinujete grafiku i tekst i teko dobijete iznenađujuće dobar dizajn.
U okviru CSS specifikacije, na dva mesta se mogu pronaći osobine vezane za tipografiju. Prvo mesto su osobine vezane za fontove, koje se odnose na to
kako se bira font i kako se nakon toga prikazuje. Drugo mesto su osobine vezane za tekst, koje dalje utiču na kovanje tekstom, obično bez promene fonta. Neke
karakteristike fontova dolaze i iz generalne kategorije stilova i mogu se koristiti i kod teksta.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Izbor fonta
Izbor fonta za dokument može biti problem za one koji imaju malo iskustva u dizajnu i tipografiji. Srećom, postoje neka pravila koja treba slediti.
Fontovi se tradicionalno dele na grupe, poznate pod imenom kategorije fontova. U CSS-u se koristi termin familije fontova. Fontovi su grupisu na bazi izgleda.
U CSS-u postoji pet kategorija:
• Serif - Ovo je font kod kojeg su slova kitnjasta, a koristi se termin serif. Smatra se da su ovi fontovi odlični za telo teksta, posebno kod štampanja, • Sans-serif - Ovaj termin znači “bez serifa”, i odnosi se na fontove koji nisu kitnjasti. Slova kod ovih fontova su zaobljena i šira. Obično su ovi fontovi najbolji za zaglavlja kod štampanja, ali se smatra i da mogu biti dobri za tekst na ekranu. Nisu uvek najbolji izbor za vrlo mali tekst ili tekst ispisan kurzivom. Poznati fontovi iz ove grupe su Anal, Helvetica i Verdana.
kao i da su vrlo pogodni za zaglavlja i druge naslove. Fontovi ovog tipa koje možda poznajete su Times i Georgia. Oba ova fonta se puno koriste na Webu.
• Monospace - Ovo su fontovi kod kojih su sva slova iste širine. Oni se obično koriste za programski kod. U poslednje vreme su popularni i u dizajnu, jer daju “prljav” izgled. Ipak se ovi fontovi obično koriste kod koda. Font iz ove kategorije koji se najviše koristi je Courier.
• Fantasy - Ovi fontovi, poznati i pod imenom dekorativni fontovi, fontovi su sa neobičnim karakteritikama. Oni su korisni kod zaglav
• Cursive - Slova kod ovih fontova liče na slova ispisana rukom. Oni podražavaju pisanje rukom i često kod njih postoje kvakice i crtice. Kao i kod fontova tipa fantasy, i ovi fontovi se u CSS-u retko koriste. Mnogi dizajneri fontove tipa fantasy i cursive ubacuju u grafiku i onda ih koriste kao dekorativni element. Jedan od fontova iz ove grupe je Lucida Handwriting
lja i malih oblasti teksta, ali nisu baš pogodni za telo teksta, pošto dekoracija otežava čitanje. U CSS-u ćete retko, ako ikada i budete, koristiti ove fon
tove, pošto ih ima puno i nema ih na svim računarima. Primer ovakvih fontova je Western.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Fontovi koji danas postoje na skoro svakom računam su Arial, Helvetica, Verdana, Times, Geoigia i Courier. Tahoma, Trebuchet i Lucida su prilično
rasprostranjeni posto idu sa svim verzijama Windowsa, a originalno su bili uključeni u Web Font Pack Microsofta. Ovo je besplatan skup fontova koje je Microsoft distribuisao u ranim danima Interneta.
Ako ste na samom početku, najbolje je da se držite jednostavne šeme fontova. Možete da uradite nešto od sledećeg:
• Izaberite jedan font, tipa serif ili sans-serif, i koristite ga za sve. Menjajte mu veličinu, debljinu slova, boju i druge karakteristike da bi bio interesan niji.
• Izaberite dva fonta, tipa serifi i sans-serif. Font tipa serif koristite za sve naslove, zaglavlja i drugi tekst. Sans-serif koristite za osnovni tekst. (Ovo se na Webu vrlo često koristi.)
• Izaberite dva fonta, sans-serif i serif. Sans-serif koristite za sve naslove, zaglavlja i drugi teksta, a serif za telo teksta. (I ovo je opcija na koju na Webu često nailazimo. Dugo se koristila u svetu štampanja. Pogledajte novine ili knjigu i verovatno ćete naići na ovakvu kombinaciju.)
Kada postanete vesti u radu sa fontovima, možete postati kreativmji, ali se treba držati neke od ovih opcija tako da dokumenti izgledaju profesionalno i
konzistentno.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Primena familije fontova na tekst
Nakon što ste stekli utisak koje su mogućnosti između kojih, možete birati, vreme je da se krene napred i na tekst primeni familija fontova. Ovo ćete uraditi tako što ćete izabrati tekst, a onda osobini font-family zadati određenu vrednost.
Vrednost koja se zadaje ovoj osobini može biti ime pojedinačnog fonta, ključna reč za familiju fontova ili niz imena iza kojih sledi ključna reč familije
fontova.
Pojedinačna imena fontova
Ovu tehniku treba koristiti samo ako ste apsolutno sigurni da oni koji će posećivati vaš sajt imaju font koji je u pitanju.
body {font-farnily: Arlal;}
Ovim se podrazumevani font za sve dokumente podešava na Arial. Problem sa ovom tehnikom je da, ako korisnik nema instaliran Arial font na svom
računaru, pretraživač koristi podrazumevani font. Obično je to font Times, što može dati drugačiji izgled u odnosu na ono što želite.
Ključne reči
Kljucne reči sa imenom familije u CSS-u odgovaraju imenima familija koje smo pomenuli u prethodnom odeljku. To su serif, sans-serif, monospace,
fantasv i cursive.
h1 {font-family: fantasy;}
Ovim se na sva zaglavlja hl primenjuje podrazumevani font tipa fantasy. Problem sa ključnim rečima je da nemate kontrolu nad tim koji će se font koristiti. Rezultat je da se ključne reči obično koriste u slučaju da neki drugi metod ne uspe. To znači da, ako ste izabrali ime jednog fonta, možete i da posle izabranog fonta dodate ključnu reč:
body {“font-family: Arial, sans-serif;}
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Više imena
Tehnika koja daje više kontrole je upotreba više imena familija. To znači da treba izabrati font iz iste familije, pri čemu se zadaje redosled izbora:
body {font-family: Arial, Helvetica, Verdana, sans-serif;}
Pretraživač će prvo potražiti font koji je prvi u listi. Ako taj font ne postoji, primeniće se drugi ili treći. Na kraju smo dodali i ključnu reč sa imenom
familije.
U primeru 9.1 sam kreirao listu stilova. Tu se demonstrira kako se koristi osobina font-family
Primer 9.1 Primena fontova na elemente na strani
<html>
<head>
<style type=”text/css”>
body {font-family: Georgia, Times, Serif;}
h1,h2 {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>Primena familije fontova na tekst</h1/>
<p>Nakon što ste stekli utisak koje su mogućnosti između kojih, možete birati, vreme je da se krene napred i na tekst primeni familija fontova. Ovo ćete uraditi tako što ćete izabrati tekst, a onda osobini font-family zadati određenu vrednost. Vrednost koja se zadaje ovoj osobini može biti ime pojedinačnog fonta,
ključna reč za familiju fontova ili niz imena iza kojih sledi ključna reč familije fontova.</p>
<h2>Pojedinačna imena fontova</h2>
<p>Ovu tehniku treba koristiti samo ako ste apsolutno sigurni da oni koji će posećivati vaš sajt imaju font koji je u pitanju.</p>
<p>body {font-farnily: Arlal;}</p>
<p>Ovim se podrazumevani font za sve dokumente podešava na Arial. Problem sa ovom tehnikom je da, ako korisnik nema instaliran Arial font na svom
računaru, pretraživač koristi podrazumevani font. Obično je to font Times, što može dati drugačiji izgled u odnosu na ono što želite.</p>
</body>
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Primetićete da sam font deklarisao za element body, ali ne i za pasuse (element p). Na taj način je ovo podrazumevana vrednost za sav tekst koji se nađe
u telu dokumenta.
U ovom primeru pasusi jednostavno nasleđuju familiju fontova od elementa body. Primetićete da sam hl i h2 grupisao, pošto želim da se za njih koristi
isti font. Rezultat je prikazan na slici 9.1.
Slika 9.2 Za zaglavlja se koristi font sans-serif, a za teto je izabran font familije šerif.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Veličina slova
U ovom odeljku ćete naučiti kako da podesite veličinu slova. U tu svrhu koristi se osobina font-size, a vrednosti se mogu zadati apsolutno, relativno, kao
dužine ili u procentima.
Ključne reči absolute i relative
Fontovi tipa absolute se zasnivaju na načinu na koji pretraživač određuje veličinu slova. Ključne reći koje postoje su xx-small, small, medium, large, xlarge i xx-large. Evo kako se neka od tih ključnih reci primenjuje na pasus:
p {font-size: medium;}
Veličina medium je obično ekvivalentna podrazumevanoj veličini u pretraživaču za taj element. Na slici 9.2 su prikazane sve ključne reci primenjene na
neki tekst.
Slika 9.2 Veličina slova posle primene ključnih reci iz domena apsolutne veličine
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Dok su ključne reči sa apsolutnim zadavanjem veličine zavisne od načina na koji pretraživač računa fontove, ključne reči iz domena relativnog zadavanja veličine zadaju tu veličinu relativno u odnosu na element roditelj. To su ključne reci larger i smaller. Prema tome, ako sam veličinu slova za element body
podesila na medium, onda mogu upotrebiti ključnu reč larger da promenim veličinu na large (veliki) ili smalier na small (mali). Zapamtite da se ove relativne
ključne reci uvek odnose na veličinu koja je već definisana, bez obzira da li je to urađeno pomoću ključne reci, dužine ili procenta.
Vrednosti koje se zadaju pomoću dužine
Vrednosti se pomoću dužine zadaju za različite osobine. Tu spadaju tri relativne i pet apsolutnih vrednosti. Relativne vrednosti su em, ex i px, a apsolutne su pt, pc, in, mm i cm. Apsolutne vrednosti se ne bi trebalo da koriste za ekran iako su korisne kod kreiranja stilova koji se koriste kod štampanja.
Vrednosti koje se najviše koriste na Webu su pikseli i ems, pošto su, tehnički, obe vrednosti prilagodljive, Što je pogodno za ekran. Međutim, postoji i
problem, a to je da Microsoft Internet Explorer ne prilagođava piksele. Ovo je veliki previd koji pravi probleme, posebno za korisnike sa oštećenim vidom.
Procenti
Vrednosti u procentima kod definisanja veličine slova uvek su relativne u odnosu na drugu vrednost, kao što je vrednost zadata preko ključne reći ili
dužine. Prema tome, ako podesim da je veličina slova za element body 1em, a onda podesim veličinu slova za zaglavlje hl na 150%, dobiću veće zaglavlje hl
nego što je veličina body teksta, Što je relativno u odnosu na podrazumevanu vrednost u pretraživaču.
body {font-size: 1em;} h1 {font-size: 150%;}
NAPOMENA
Kroz ovu knjigu ćete koristiti različite opcije za definisanje veličine slova. Ako su vam potrebne dodatne informacije o problemima vezanim za veličinu slova,
pogledajte članak Owena Briggsa, “Text Sizing”, na adresi http://www.thenoodleincident.com/ tutorials/box lesson/font/index.html.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Težina i stil fonta
Pored familije fontova i njihove veličine, postoje i stil i težina fonta. Težina fonta se odnosi na to koliko su slova masna. Stil fonta se odnosi na različite
izglede koji mogu postojati u okviru date familije.
Težina fonta
Definisanje težine fonta se radi pomoću osobine font-weight, zajedno sa odgovarajućom vrednošću. Vrednosti mogu biti numeričke (100-900, gde je 100
svetio, a 900 najtamnije, a 400 normalno) ili ključne reči normal (težina 400), bold (težina 700), bolder (naredna težina), kao i lighter (naredna svetlija težina).
U
primeru 9.2 je data lista stilova sa različitim težinama.
Primer 9.2 Stilovi koji opisuju familiju fonta, veličinu i težinu
<html>
<head>
<style type=”text/css”>
body {font-family: Georgia, Times, serif; font-size: 1em; font-weight: normal;}
h1, h2 {font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 150%; font-weight: bold;}
h2 {font-size: 130%; font-weight: lighter;} .accent {font-weight: 700;}
</style>
</head>
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Na slici 9.3 je prikazan tekst koji smo već koristili u ovom poglavlju, ali sada sa primenjenim stilovima.
Slika 9.3 Primena težine na telo i zaglvlje i klasu accent
NAPOMENA
Upotreba numeričkih vrednosti od 100 do 900 nije najbolje podržana. Najbolje je da koristite samo one brojeve koji odgovaraju direktno poznatim težinama, na
primer 400 za normal ili 700 za bold.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Stil fonta
Stil fonta pomaže da promenite izgled fonta. Ovo se radi pomoću osobine font-style i vrednosti koje mogu biti normal, italic i oblique.
Vrednost normal se koristi samo ako ste specijalno zainteresovani da se tekst prikaže sa normalnom težinom. U ostalim slučajevima je to podrazumevana vrednost, tako da se ne koristi.
Vrednost oblique se odnosi na zakosena slova i pogodna je za elektronski tekst. Ova vrednost treba da se koristi samo kada font ima takav izgled na
vašem računaru. Ovo ne važi za većinu fontova sa kojima ćete raditi. Ako ne postoji izgled oblique za font, font će se prikazati kao italic.
Vrednost italic ispisuje slova kurzivom. Krajnji rezultat? U skoro svim slučajevima, najbolja vrednost za osobinu font-style je italic (videti primer 9.3).
Primer
9.3 CSS stilovi koji definišu familiju fonta, veličinu i debljinu slova, kao i stil.
body {font-family: Georgia, Times, šerif; font-siže: lem; font-weight: normal;
color: Black;}
h1, h2 {font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 150%; font-weight: bold; color: #999;}
h2 {font-size: 130%; font-weight: lighter; font-style: italic; color: #333;}
.accent {font-weight; 700; color: red;}
Na slici 9.4 je prikazano kako se stil italic primenjuje na zaglavlje h2.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Slika 9.4 Ubacivanje stila fonta za element h2
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Bojenje teksta
Ovo je jednostavan deo! Za boju teksta se koristi osobina color:, koja, kao što ćete videti, nema prefikse font ili text.
Da biste boju primenili na font, jednostavno dodajte osobinu color, zajedno sa odgovarajućom bojom. Želim da tekst malo obojim, tako da ću postojećim stilovima dodati boju (videti primer 9.4).
Primer 9.4 Bojenje teksta
body {font-family: Georgia, Times, šerif; font-size: 1em; font-weight: normal: color: black;}
h1, h2 {font-family: Arial, Helvetica, sans-serif;}
hl {font-size: 153%; font-weight: bold; color: #999;}
h2 {font-size: 130%; font-weight: lighter; font-style: italic; color: #333;}
Na slici 9.5 možete videti da su zaglavlja promenila boju.
Slika 9.5 Primena boje na elemente body, hl, h2 i klasu
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Ravnanje teksta
U danima kada se HTML koristio za prezentaciju, tekst se ravnao pomoću atributa align i odgovarajuće vrednosti. U CSS-u se koristi ista premisa, ali se
to naravno radi izvan HTML-a pomoću osobine text-align. Vrednosti su iste i trebalo bi da su poznate svima koji su nekad koristili programe za obradu teksta:
• left - Koristi se i termin nedoterano desno. Ovo ravnanje ravna tekst sa leve strane, tako da se redovi prekidaju sa desne strane. Ovo je podrazumevano ponašanje za sve pretrazivace i najviše se koristi za sav tekst u elementu body,
text-align: left;
• center - Ovim se tekst centrira. Centrirani tekst je koristan kod zaglavlja, naslova i drugog teksta koji želite da naglasite. Vrlo je teško ćitati dugačak
centrirani tekst, tako da ga ne bi trebalo koristiti za telo teksta.
text-align:center;
• right - Ovim se tekst ravna sa desne strane, dok leva strana nije poravnata,
text-align: right;
•justify - Ovo je tekst koji je poravnat i sa leve i sa desne strane. Ovo se radi raspoređivanjem reči i razmaka između njih u okviru zadate dužine reda.
Ovakvo ravnanje sčesto koristi kod novina i časopisa. Može se dobiti jedinstven, atraktivan izgled, ali ga većina ljudi izbegava pošto rastojanja mogu biti nezgodna, tako da se tekst teže čita.
text-align: justify;
Na slici 9.6 je prikazan isti pasus sa primenjenim različitim opcijama za ravnanje.
This Iatter was a
remarkably large an
beautiful animal,
entirely black, and
sagacious to an
astonishing degree.
This Iatter was a
This Iatter was a
This Iatter was a
remarkably large and remarkably large and remarkably large and
beautiful animal,
beautiful animal,
beautiful anitnal.
entjrely black, and enbrelv black, and entirelv black, and
sagacious to an
sagacious to an
sagacious to an
astomshing degree. astonishing degree. astomshing degree.
Slika 9.6 Tekst koji je levo, desno, centralno i obostrano poravnat.
.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Dekoracija teksta
Pomoću CSS-a možete i da “dekorišete” tekst, odnosno da primenite ili uklonite neku dekorativnu vrednost. Ovo se radi pomoću osobine text-decoration, a moguće vrednos-ti su:
• none - Ovo se koristi uglavnom za uklanjanje podvučene linije kod linkova.
• underline - Ovim se ispod izabranog teksta postavlja linija, koja ga podvlači. Specijalisti koji se bave dostupnošću izbegavaju podvlačenje pošto se
može desiti da se taj tekst pomeša sa linkovima.
• overline - Ovim se iznad izabranog teksta postavlja linija.
• line-through - Ovim se preko izabranog teksta postavlja linija.
• blink - Da, pravilno ste pročitali. Ovo dovodi do toga da tekst treperi. Ovu osobinu je uveo Netscape još u ranim danima .Ovo radi u svim savremenim
pretraživačima, osim u Internet Exploreru.
U primeru 9.5 je pokazano kako se pomoću inlajn CSS-a dekoriše tekst.
Primer
9.5 Dekoracija teksta pomoću CSS-a
<p
style=Btext-decoration:
underline;”>This text is underlined</p>
<p
style=”text-decoration:
overline;”>This text tias an overline</p>
<p
style=”text-decoration:
line-through;”>This text nas a line-through</p>
<p
style=”text-decoration:
blink;”>This text blinks</p>
Na slici 9.7 su prikazani rezultati. Nema teksta koji treperi.
Slika 9.7 Dekoracija teksta pomoću CSS-a. Probajte primer da biste videli i kako treperi tekst.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Uvlačenje teksta
Još jedna vrlo korisna osobina je text-indent. Ona omogućava da uvučete tekst pomoću CSS-a, umesto da to radite pomoću neke grafike ili blanko karaktera koje biste ubacili u HTML.
Može se koristiti bilo koja fiksna vrednost {pomenuta ranije u ovom poglavlju),
p {text-indent: 45px;}
Na ovaj način svaki pasus dobija inicijalno uvlačenje od 45 piksela (videti sliku 9.10).
The Black Cat
By EdgarAIlen Poe
I married early, and was happv to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
This latter was a remarkably large and beautiful animal, entirelv black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife,
who at heart was not a little tinctured with superstition, rnade frequent allusion to the ancient popular notion, which regarded ali black cats as witches in disguise.
Pluto - this was the cat’s name - was my favorite pet and playmate. I alone fed him, and he attended me wherever I went about the house. It was even
with difficulty that I could prevent him from following rne through the streets.
Slika 9.7 Uvlačenje pasusa za 45 piksela
Možete koristiti i vrednosti u procentima; u tom slučaju one se zadaju relativno u odnosu na pravougaonik oko tog elementa (više o tome u Poglavlju
12, “Pozicioniranje, tok i Z indeks”).
p {text-inđent: 40%;}
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Podešavanje visine redova
U tradicionalnoj tipografiji se za ovo koristi termin prored. U pitanu je razmak između redova u tekstu. CSS omogućava da koristite osobinu line-height,
zajedno sa vrednošću koja se zadaje kao dužina, broj ili procenat (videti primer 9.7).
Pimer
9.6 Dodavanje proreda u pasuse pomoću dužinske vrednosti, broja ili procenta
<p style=”line-height: 20px;”>I married early, and was happy to find in my wife a disposition not uncongenial with iny own. </p>
<p style=”line-height: 2;”>Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p style=”line-height: 65%;”>This latter was a remarkably large and beautiful animal, entirely black, and sagacious to an astonishing degree.</p>
U celom dokumentu sam font koji se koristi za telo podesila na 14 piksela, a onda primenila inlajn line-height za svaki pasus, koji sam Želela da promenim (videti sliku 9.8).
Slika 9.8Različiti proredi u pasusima mogu dovesti do interesantnih efekata.
Obično je dobro da se držite podrazumevanog proreda za određeni font, čime se postiže najbolja čitljivost.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Rastojanja između slova i reči
Još jedan aspekt tipografije koji je pokupio i CSS je rastojanje između slova i red. Ovim se rukuje pomoću osobina letter-spacing i word-spacing. Vrednosti koje se zadaju su dužine (videti primer 9.7).
Primer
9.7 Rastojanja između slova i reč
<p style=”letter-spacing: 10px;”>I married early, and was happy to find in my wife a disposition not uncongenial with my own. </p>
<p style=”word-spacing; 0.5em;”>Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind, We had
birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
U prvom pasusu sam između svakog slova zadao rastojanje od 10 piksela, a u drugom 0.5 ems između svake reči (videti sliku 9.9).
Slika 9.9 Rastojanja između slova i reci
Rezultat je neobičan. Iako ovakve stilove obično nećete koristiti u konzervativnim dokumentima, počinjete da uviđate da stilovi mogu da daju i neke
vrlo specifične opcije.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Promena prvog slova i prvog reda teksta
Može se zadati i stil prvog slova teksta (izbačeno slovo), kao i stil prvog reda teksta. U ovom slučaju se koriste selektori pseudo elemenata. Sa ovim se
još niste sreli. Evo kako to izgleda:
first-line:
first-letter
Ovo je pridruženo elementu na koji želite da primenite stil (videti primer 9.8).
Primer 9.8 Upotreba selektora tipa pseudo element
p:first-line {font-weight: bold; color: #333;}
p:first-letter {font-style: italic; color: #999;}
Na slici 9.16 se vidi kako izgleda kada se ovi stilovi primene na tekst.
Slika 9.16 Upotreba pseudo elemenata za stilove koji se odnose na prvo slovo i prvi red
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Skraćenice za stilove fontova
Kao i kod pozadine, skraćenice postoje i za stilove fontova. One u sebi sadrže neke od osobina fontova, kao i osobinu line-height, ali nijednu od osobina
vezanih za tekst. Kada se koriste skraćenice za fontove, morate da vodite računa o redosledu. Skraćena osobina je font: a redosled u kome se zadaju vrednosti
je: font-style, font-variant, font-weight, font-size/line-height, font-family.
p {font: italic small-caps bold 14px/15px Arial, Helvetica, sans/serif;}
Ovo dovodi do toga da svi pasusi budu italic, sa smanjenim velikim slovima, ispisani masnim slovima, dok je veličina fonta 14piksela. Prored je 15
piksela (primetili ste kosu crtu između ove dve vrednosti, što je jedini slučaj kada se kosa crta koristi u CSS-u), a font je Arial, Helvetica ili podrazumevani font
sans-serif.
Ako želite da izostavite neku vrednost, samo zadržite redosled ostalih:
p {font: bold 14px Arial, sans/serif;}
Ovim se dobija font od 14 piksela sa tipom Arial ispisan masnim slovima. Skraćenice možete koristiti kad god želite, ah treba da budete svesni činjenice
da je kod fontova redosled vrlo bitan, ili lista stilova neće funkcionisati.
dipl.ing. Aleksandar Rikalović M.Sc.
Tekst
multimediji i globalni mediji
Sada postajete majstor
Znam da vam je trenutno zabavno. Do sada ste stekli dovoljno znanja o slikama, bojama i tekstu, tako da možete da napravite stvarno lepe strane i sajtove. Naravno da ima još puno toga što se može naučiti o CSS-u. U narednom časovima ćete se upoznati sa načinima na koji se linkovi koriste u savremenom
dizajnu za Web. Nekad smo linkove mogli da podešavamo pomoću relativno malo opcija, ali sada postoje različite osobine linkova, uključujući i različite boje
za stanja, pa čak i hover efekte.
Upoznaćete se i sa listama i načinom kombinovanja listi i linkova, što je osnovni deo kod savremenih pristupa navigaciji, i to kako za vertikalnu, tako i
za horizontalnu navigaciju. Na taj način ćete moći da pravite interaktivne interfejse koji ulivaju strahopoštovanje, sa minimalnom upotrebom slika ili čak i bez
slika.
.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 8