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

Veličina fonta u paragrafu /PARAGRAPH FONT SIZE/ style="font-size:veličina;"


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

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

Oznake:
p paragraf /PARAGRAPH/

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 paragrafu

R.br.

HTML5 kod

Opis koda

Ekran
1.

Veličina fonta u paragrafu:
1em = 12pt = 16px = 100%

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

znanje.org

znanje.org

znanje.org

znanje.org

znanje.org

2.

Dvostruka veličina fonta u paragrafu:
2em = 24pt = 32px = 200%

 <!DOCTYPE html>
<html>
<head>
<title>Izgled fonta </title>
</head>
<body>
<p>znanje.org</p>
<p style="font-size:2em;">znanje.org</p>
<p style="font-size:24pt;">znanje.org</p>
<p style="font-size:32px;">znanje.org</p>
<p style="font-size:200%;">znanje.org</p>
</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 paragrafu:
1.5x1em = 1.5x12pt = 1.5x16px = 1.5x100%
1.5em = 18pt = 24px = 150%

 <!DOCTYPE html>
<html>
<head>
<title>Izgled fonta </title>
</head>
<body>
<p>znanje.org</p>
<p style="font-size:1.5em;">znanje.org</p>
<p style="font-size:18pt;">znanje.org</p>
<p style="font-size:24px;">znanje.org</p>
<p style="font-size:150%;">znanje.org</p>
</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 paragrafu:
0.75x1em = 0.75x12pt = 0.75x16px = 0.75x100%
0.75em = 9pt = 12px = 75%

 <!DOCTYPE html>
<html>
<head>
<title>Izgled fonta </title>
</head>
<body>
<p>znanje.org</p>
<p style="font-size:0.75em;">znanje.org</p>
<p style="font-size:9pt;">znanje.org</p>
<p style="font-size:12px;">znanje.org</p>
<p style="font-size:75%;">znanje.org</p>
</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