abc HTML5 i CSS TUTORIAL

Veličina fonta /FONT SIZE/ {font-size:} .css


Sllika 1. Izbor vrijednosti atributa - Eksterni CSS /EXTERNAL CSS/

Veličina fonta u dokumentu /BODY FONT SIZE/ {font-size:} Korištenje eksternog CSS-a se izvodi u oba dijela HTML fajla i posebna CSS fajl:

Sintaksa:

  • CSS fajl: TAG { font-size: Veličina_fonta ;}
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <TAG>Sadržaj</TAG>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV | SPAN - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglavlje teksta /HEADINGS/
BODY - Tekst u cijelom dokumentu
DIV - Tekst u cijeloj DIV sekciji
SPAN - Tekst u cijeloj SPAN sekciji

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. Primjeri izgleda fonta možete vidjeti >>.


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

Primjer 1. Veličina fonta u paragrafu. Veličina fonta: 1.5em.
Opis rješenja: Definisanjem veličine

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Izbor veličine fonta</title>
<style>
  body { font-size: 1.5em; }
</style>
</head>
<body>
<p>LAPSUS LINGUAE</p>
<p>Drugi paragraf je isto uređen</p>
</body></html>

<!DOCTYPE html>
<html>
<head> <title>Izbor fonta dokumenta</title>
<link rel=stylesheet href="css/10_BODY_font_size_1_5em.css" type="text/css">
</head>
<body>
<p>LAPSUS LINGUAE</p>
<p>Drugi paragraf je isto uređen</p>
</body></html>

Fajl: 10_BODY_font_size_1_5em.css

body {
font-size:1.5em;
}

LAPSUS LINGUAE

Drugi paragraf je isto uređen

Primjer 2. Veličina fonta u paragrafu. Veličina fonta: 14pt
Opis rješenja: Veličina fonta za paragrafe se može definisati i kao parametar za TAG p /PARAGRAPH/. Dio HEAD izgleda p{ font-size: 14pt; }

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Izbor fonta dokumenta</title>
<style>
  p { font-size: 14pt; }
</style>
</head>
<body>
<p>Ćutanje zlata vrijedi!</p>
<h4>Zaglavlja /HEADINGS/</h4>
<p>Drugi paragraf je isto uređen.</p>
</body></html>

<!DOCTYPE html>
<html>
<head> <title>Izbor fonta dokumenta</title>
<link rel=stylesheet href="css/10_BODY_font_size_14pt.css" type="text/css">
</head>
<body>
<p>Ćutanje zlata vrijedi!</p>
<h4>Zaglavlja /HEADINGS/</h4>
<p>Drugi paragraf je isto uređen.</p>
</body></html>

Fajl: 10_BODY_font_size_14pt.css

p {
font-size: 14pt; }
}

Ćutanje zlata vrijedi!

Zaglavlja /HEADINGS/

Drugi paragraf je isto uređen.

Primjer 3. Veličina fonta u paragrafu je14pt a dio teksta treba biti veličine 20pt-.
Opis rješenja: Veličina fonta paragrafa je parametar za TAG p /PARAGRAPH/. Css za p{ font-size: 14pt; }, a izdvojeni dio teksta je SPAN TAG veličine 20pt je definisan sa span { font-size: 20pt; }.

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Izbor fonta dokumenta</title>
<style>
  p { font-size: 14pt; }
  span { font-size: 20pt; }
</style>
</head>
<body>
<p>Ćutanje <span>često</span> zlata vrijedi!</p>
<h4>Zaglavlja <span>često</span> /HEADINGS/</h4>
<p>Drugi paragraf <span>često</span> je isto uređen.</p>
</body></html>

<!DOCTYPE html>
<html>
<head> <title>Izbor fonta dokumenta</title>
<link rel=stylesheet href="css/10_BODY_font_size_14pt_span_20.css" type="text/css">
</head>
<body>
<p>Ćutanje <span>često</span> zlata vrijedi!</p>
<h4>Zaglavlja <span>često</span> /HEADINGS/</h4>
<p>Drugi paragraf <span>često</span> je isto uređen.</p>
</body></html>

Fajl: 10_BODY_font_size_14pt_span_20.css

p { font-size: 14pt; }
span { font-size: 20pt; }

Ćutanje često zlata vrijedi!

Zaglavlja često /HEADINGS/

Drugi paragraf često je isto uređen.

Daljnji rad:

  1. Font:

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

Index