CSS i font
Neki FONT atributi imaju za vrednosti predefinisane ključne reči, a nekima se
vrednost zadaje kao numerička vrednost. Numeričke vrednosti su praćene mernom
jedinicom (px, pt, %...). Jedinica se navodi bez razmaka, npr: "15px".
Imamo sledeće atribute fonta:.
- font-family - naziv fonta, zadaje se unutar navodnika ako font ima razmake. Moguće je zadati nekoliko fontova odvojenih zarezom, pri čemu web čitač pokušava da učita prvi, pa ako ne uspe drugi, itd. Kao vrednost font-familiy mogu da se zadaju na primer vrste slova kao što je Arial, Times New Roman, Century, itd. Medjutim osim vrste slova mogu se zadavati i varijacije izabrane vrste slova: serif, sans-serif, cursive, fantasy, monospace. Detaljnije videćemo u primeru.
- font-size - veličina fonta, zadaje se na više načina. Postoje i ovde kao vrednosti predefinisane ključne reči, iako se ređe zadaju:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
Ali kao najčešća vrednost zadaje se broj koji definiše fiksnu
veličinu slova u pikselima, milimetrima, santimetrima i ostalim CSS veličinama.
Moguće je i procentualno definisanje veličine fonta (%)
- koji definiše procentualno veličinu slova u odnosu na zadatu veličinu okolnih slova. Mi nećemo moći sve prikazati primerima ali nije loše Vi da izvrtite sve varijante jer tako ćete dobiti predstavu o kakvim veličinama slova se radi, a ujedno i da stičete rutinu u pisanju CSS.
- font-style - definiše dodatno oblik slova u smislu normalnog ili iskošenog itd. Vrednosti: normal, italic, oblique.
- font-variant - ispis slova. Vrednosti: normal, small-caps.
- font-weight - obična ili masna slova (debljina slova). Vrednosti: normal, bold, bolder, lighter, 100, 200, ..., 900.
Ajde da vidimo neke varijante svih atributa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#f1 {font-family: "Times New Roman";}
#f2 {font-family: "Times New Roman"; font-family: cursive;}
#f3 {font-family: Arial;}
#f4 {font-family: Arial; font-family: monospace;}
#f5 {font-family: Arial; font-family: monospace; font-size:
x-small;}
#f6 {font-family: Arial; font-style: italic;}
#f7 {font-family: Arial; font-variant: small-caps;}
#f8 {font-family: Arial; font-weight: bolder; color:
blue; background-image: url(csspozadina.gif);}
</style></head><body>
<p id=f1>SLOVA prva varijanta samo Times New Roman</p>
<div id=f2>SLOVA druga varijanta Times New Roman sa cursive</div>
<div id=f3>Treća a font Arial. <span id=f4>Četvrta font Arial i
monospace.</span></div>
<div id=f5>Peta arial, monospace plus veličina x-small</div>
<div id=f6>Šesta arial, a stil italic</div>
<div id=f7>Sedma arial, a font variant small-caps</div>
<div id=f8>Osma arial, a font weight bolder</div>
</body></html>
A rezultat:
|
SLOVA prva varijanta samo Times New Roman
SLOVA druga varijanta Times New Roman sa cursive
Treća a font Arial. Četvrta font Arial i monospace.
Peta arial, monospace plus veličina x-small
Šesta arial, a stil italic
Sedma arial, a font variant small-caps
Osma arial, a font weight bolder
|
U gornjem kodu smo koristili sve atribute sa nekim njihovim varijantama.
Mislim da neko posebno objašnjenje nije potrebno.
|
