abc HTML5 i CSS TUTORIAL

Izgled i veličina fonta numerisana lista /ORDERED LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }


Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Izgled i veličina fonta numerisana lista /ORDERED LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: } 

Korištenje internog CSS-a se izvodi u oba dijela HTML fajla:

Sintaksa:

  • HEAD dio (za numerisanu listu):
    <style>
    TAG {font-family:Naziv_fonta;} | TAG {font-size: Veličina_fonta;} | TAG {font-family: Naziv_fonta; font-size: Veličina_fonta;}
    </style>
  • BODY dio: <OL>

Oznake:
TAG - ol | li
ol - početak numerisne liste
/ol - kraj numerisne liste
li - Element liste

font-family - Atribut za ime fonta
naziv_fonta - Otkucati ime fonta (vidi iz tabele).
font-size - Atribut za veličinu fonta
Veličina_fonta - Brojna vrijednost fonta i mjerna jedinica veličine fonta (em, px, pt, %).

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

Numerisana lista počinje sa TAG-om OL (ORDERED LIST) a ispred svakog elementa liste je <LI> (element liste /LIST ITEM/). Na kraju elementa lista je </LI> odnosno na kraju liste </OL> >>.


Slika 2. Numerisana lista - buliti /ORDERED LIST - OL & LI/

Primjer 1. Numerisana lista /ORDERED LIST/ u dokumentu. Promjena fonta u TAHOMA.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Ime fonta</title>
<style>
  OL {font-family:Tahoma; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

Tekst ispred liste

  1. jedan
  2. dva
  3. tri

Primjer 2. Numerisana lista /ORDERED LIST/ u dokumentu, Promjena fonta u Comic Sans MS.

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Ime fonta</title>
<style>
  OL {font-family:"Comic Sans MS"; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
<OL>
  <LI>Strari vijek</LI>
  <LI>Srednji vijek </LI>
  <LI>Novi vijek </LI>
</OL>
</body></html>

Tekst ispred liste

  1. Strari vijek
  2. Srednji vijek
  3. Novi vijek

Primjer 3. Promjena veličine fonta u numerisanoj listi /ORDERED LIST/:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Veličina fonta</title>
<style>
  OL {font-size:1.5em; }
</style>
</head>
<body>
<p>Tekst ispred liste</p>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

Tekst ispred liste

  1. jedan
  2. dva
  3. tri

Primjer 4. Promjena veličine i imena fonta:

<!DOCTYPE html>
<html>
<head><title>Numerisana lista - Veličina i imena fonta</title>
<style>
  OL {font-size:1.2em; font-family:Comic Sans MS; }
</style>
</head>
<body>
<p>Tekst bez izmjene parametara</p>
<OL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

Tekst bez izmjene parametara

  1. jedan
  2. dva
  3. tri

Daljnji rad: Napisati html kod za slijedeće primjere:

1. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst

Vojskovođe Rimskog carstva:

  1. Cezar
  2. Oktavijan
  3. Konstantin
   

2. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst
  1. Hard disk
  2. Monitor
  3. Disketna jedinica
  4. Tastatura
  5. Miš
    6.
   

3. Provjerite svoje znanje:
 

Zadatak

Ispis
Napišite kod koji ispisuje tekst
  1. Meni 1
        supa
        jelo
        dezert
  2. Meni 2

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