CSS priručnik
CSS Tutorial
CSS Priručnici


   CSS Tutorial
   Uvod
1. Umetanje
2. Background...
3. Selectori
4. Margin...
5. Fonts
6. Text
7. Tablice
8. Popis
9. Positioning
10. Napredno
CSS Elementi


Kontaktirajte nas...

Naručite CD

CSS Tutorial

5. Font - Fontovi

5.1 font-family

Font-family style element omogućava izmjenu fonta na web stranici. Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-family: Verdana, Arial, 'Times New Roman', serif }
</style>
 </head>
<body>
<p>Ovo je verdana text</p>
</body>
</html>

A izgleda ovako:

Ovo je verdana text



NAPOMENA 1:
U gornjem primjeru upotrijebljeni su različiti fontovi: Verdana, Arial, Times New Roman, Serif. Nije potrebno koristiti više od jednog fonta no dobro je font-family attribut završiti sa "generic" family.

"generic" family može biti: serif, sans-serif, cursive, fantasy ili monospace.

Ako browser pročita ovaj style sheet:
p { font-family: Verdana, Arial, 'Times New Roman', serif } uzima prvi font u nizu, tj. font Verdana. Ako takav font ne postoji na korisnikovu računalu, browser uzima naredni, Arial... itd. Ako ne nađe niti jedan, upotrijebiti će "generic" font koji je u normalnim okolnostima uvijek prisutan na računalu. Zato je preporuka uvijek završiti sa "generic" fontom.

NAPOMENA 2:
Fontovi u čijem nazivu postoje razmaci (više od jedne riječi) moraju se staviti u navodnike: npr. 'Times New Roman', 'Book Antiqua'.



5.2 font-style

Ovaj style element ima 3 moguće vrijednosti: normal, italic ili oblique (normal ili italic se najčešće koriste). Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-size:italic }
h1 { font-size:normal }
h2 { font-size:oblique }
</style>
 </head>
<body>
<h1>Header 1</h1>
<p>Ovo je neki text</p>
<h2>Header 2</h2>
</body>
</html>

Dati će:

Header 1

Ovo je neki text

Header 2




5.3 font-variant

Ovaj style element ima 2 moguće vrijednosti: normal ili small-caps. Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-variant:small-caps }
h1 { font-variant:normal }
</style>
 </head>
<body>
<h1>Header 1</h1>
<p>Neki text</p>
</body>
</html>

Dati će:

Header 1

Neki text




5.4 font-weight

Moguće vrijednosti: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |

Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-weight:bold }
em { font-weight:200 }
</style>
 </head>
<body>
<p>neki bold text</p>
<em>ovo je light text</em>
</body>
</html>

U vašem browseru će izgledati ovako:

neki bold text

ovo je light text



5.5 font-stretch

Moguće vrijednosti: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |

NAPOMENA :
Ovaj style element radi samo ukoliko određeni font-family podržava ove vrijednosti.



5.6 font-size

Omogučava promjenu veličine fonta. Moguće vrijednosti:
apsolutne: [ xx-small | x-small | small | medium | large | x-large | xx-large ]
relativne: [ larger | smaller ]
duljina: px | cm | mm ...
postoci: %

Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-size:xx-large }
em { font-size:10px }
</style>
 </head>
<body>
<p>malo extra extra veliki text</p>
<em>ovo je 10px text</em>
</body>
</html>

Izgleda ovako:

malo extra extra veliki text

ovo je 10px text



Budući da uvijek postoji i skraćeni oblik to može izgledati ovako:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font: bold italic 14pt 'Times New Roman', serif }
div { font-family: 'Comic Sans Ms', Arial, Serif; font-size:18px; font-weight:bold; font-style:normal; color:green; background:silver; }
</style>
 </head>
<body>
<p>ovo je moj text ...</p>
<div>No to nije sve ...</div>
</body>
</html>

Izgleda ovako:

ovo je moj text ...

No to nije sve ...
Text Oglasi Foto Oglasi Besplatne Stvari Besplatan Web Hosting Web Direktorij Dizajn