abc HTML5 i CSS TUTORIAL

Numerisana lista - Atributi /ORDERED LIST - OL - ATTRIBUTE VALUES/ {list-style-type:}


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

NUMERISANA LISTA /ORDERED LIST/       OL    (<OL><LI>tekst</OL>)

Sintaksa:

  • HEAD dio: <style> OL { list-style-type: | lower-alpha | upper-alpha | lower-roman | upper-roman; }</style>
  • BODY dio: <OL>

Oznake:
OL - Numerisana lista
Atribut: list-style-type

Legenda tipova numerisane liste:
lower-alpha - mala slova
upper-alpha - velika slova
lower-roman . rimski brojevi - mala slova
upper-roman - rimski brojevi - velika slova

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 /ORDERED LIST - OL & LI/

Numerisana lista sa atributima /ATTRIBUTE VALUES/

Vrijednost

Opis

Primjer

 

DEFAULT. Decimalni brojevi /DECIMAL NUMBERS/ (1, 2, 3, 4)

lower-alpha

Alfabetski redoslijed, mala slova (a, b, c, d)

ol {
list-style-type: lower-alpha
}

upper-alpha

Alfabetski redoslijed, velika slova /uppercase/ (A, B, C, D)

ol {
list-style-type: upper-alpha
}

lower-roman

Rimski brojevi mala slova /ROMAN NUMBERS/, LOWERCASE (i, ii, iii, iv)

ol {
list-style-type: lower-roman
}

upper-roman

Rimski brojevi velika slova /ROMAN NUMBERS/, UPPERCASE (I, II, III, IV)

ol {
list-style-type: upper-roman
}

Alfabetski redoslijed - velika slova /UPPER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
  ol { list-style-type: upper-alpha; }
</style>
</head>
<body>
<OL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

A. jedan
B. dva
C. tri

Alfabetski redoslijed - mala slova /LOWER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
  ol { list-style-type: lower-alpha; }
</style>
</head>
<body>
<OL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>
  1. jedan
  2. dva
  3. tri

Redoslijed po rimskim brojevima - velika slova /UPPER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
  ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<OL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

  I. jedan
 II. dva
III. tri

Redoslijed po rimskim brojevima - mala slova /LOWER CASE/

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
  ol { list-style-type: lower-roman }
</style>
</head>
<body>
<OL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</OL>
</body></html>

  i. jedan
 ii. dva
iii. tri

Numerisana lista - promjena boje fonta i veličine  (<OL><li>tekst</OL>)

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

  1. Provjerite svoje znanje:
    Zadatak Ispis
    Napišite kod koji ispisuje tekst
    1. Glava 3
      1. Hard disk
      2. Monitor
      3. Disketna jedinica
      4. Tastatura
      5. Miš
    2. Glava 4

  2. Provjerite svoje znanje:
    Zadatak Ispis
    Napišite kod koji ispisuje tekst 
    1. Glava 2
    2. Glava 3
      1. Hard disk
      2. Monitor
      3. Disketna jedinica
      4. Tastatura
      5. Miš
    3. Glava 4

  3. Provjerite svoje znanje:
    Zadatak Ispis
    Napišite kod koji ispisuje tekst
    1. Meni 1
      supa
      jelo
      dezert
    2. Meni 2

Spisak .css fajlova /CSS FILES LIST/

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