IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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.

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display