abc HTML5 i CSS TUTORIAL - Linijski CSS /INLINE CSS/

Veličina fonta u zaglavlju teksta /HEADINGS FONT SIZE/ style="font-size:veličina;"


Slika 1. Izbor vrijednosti atributa - Linijski CSS /INLINE CSS/

Veličina fonta u zaglavlju teksta /HEADINGS FONT SIZE/   Sintaksa:   <p style="font-size:Veličina_fonta;">

Oznake:
TAG - h1 | h2 | h3 | h4 | h5 | h6 - - zaglavlje teksta /HEADINGS/

font-size - Atribut za veličinu fonta
Veličina_fonta - Brojna vrijednost fonta i mjerna jedinica veličine fonta (em, px, pt, %).

FONT SIZE tag je zastario i u HTML 5 verziji se za izbor parametera fonta koristi CSS.

Veličina fonta se iskazuje u jednoj od 4 mjerne jedinice. Odnos mjernih jedinica: 1em = 12pt = 16px = 100%. (Vidi Veličina fonta >>).


Slika 2. Veličine fonta /font-size/

Primjeri

:
 

<body style="font-size:100%;" >

<body style="font-size:120%;" >

font-size:1em

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

font-size:12 pt

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

font-size:16px

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

font-size:100%

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.
 
 

Primjer: Veličine fonta u zaglavlju teksta /HEADINGS FONT SIZE/.

R.br.

HTML5 kod

Opis koda

Ekran
1.

Veličina fonta u zaglavlju teksta /HEADINGS/:
1em = 12pt = 16px = 100%

 <!DOCTYPE html>
<html>
<head> <title>Veličina fonta</title> </head>
<body>
<h2>znanje.org</h2>
<h2 style="font-size:1em;">znanje.org</h2>
<h2 style="font-size:12pt;">znanje.org</h2>
<h2 style="font-size:16px;">znanje.org</h2>
<h2 style="font-size:100%;">znanje.org</h2>
</body>
</html>

znanje.org

znanje.org

znanje.org

znanje.org

znanje.org

2.

Dvostruka veličina fonta u zaglavlju teksta /HEADINGS/:
2em = 24pt = 32px = 200%

 <!DOCTYPE html>
<html>
<head>
<title>Veličina fonta</title>
</head>
<body>
<h6>znanje.org</h6>
<h6 style="font-size:2em;">znanje.org</h6>
<h6 style="font-size:24pt;">znanje.org</h6>
<h6 style="font-size:32px;">znanje.org</h6>
<h6 style="font-size:200%;">znanje.org</h6>
</body>
</html>
znanje.org
znanje.org
znanje.org
znanje.org
znanje.org

3.

Jedan i po puta uvečana veličina fonta u odnosu na standardnu veličinu fonta u zaglavlju teksta /HEADINGS/:
1.5x1em = 1.5x12pt = 1.5x16px = 1.5x100%
1.5em = 18pt = 24px = 150%

 <!DOCTYPE html>
<html>
<head>
<title>Veličina fonta</title>
</head>
<body>
<h5>znanje.org</h5>
<h5 style="font-size:1.5em;">znanje.org</h5>
<h5 style="font-size:18pt;">znanje.org</h5>
<h5 style="font-size:24px;">znanje.org</h5>
<h5 style="font-size:150%;">znanje.org</h5>
</body>
</html>
znanje.org
znanje.org
znanje.org
znanje.org
znanje.org

4.

Tri četvrtine (0.75) veličina fonta u odnosu na standardnu veličinu fonta u zaglavlju teksta /HEADINGS/:
0.75x1em = 0.75x12pt = 0.75x16px = 0.75x100%
0.75em = 9pt = 12px = 75%

 <!DOCTYPE html>
<html>
<head>
<title>Veličina fonta</title>
</head>
<body>
<h1>znanje.org</h1>
<h1 style="font-size:0.75em;">znanje.org</h1>
<h1 style="font-size:9pt;">znanje.org</h1>
<h1 style="font-size:12px;">znanje.org</h1>
<h1 style="font-size:75%;">znanje.org</h1>
</body>
</html>

znanje.org

znanje.org

znanje.org

znanje.org

znanje.org

Odnos veličine fonta definisane u BODY tagu i u p tagu >>.

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Primjeri korištenja veličina fonta /FONT SIZE/ style="font-size /RELATED LINKS/:

Index