abc HTML5 i CSS TUTORIAL

Numerisana lista - Atributi /ORDERED LIST - OL - ATTRIBUTE VALUES/ .css


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

Numerisana lista - Atributi /ORDERED LIST - OL - ATTRIBUTE VALUES/ .css
Korištenje eksternog CSS-a se izvodi u oba dijela HTML fajla i posebna CSS fajl:

  • CSS fajl: OL { list-style-type: | lower-alpha | upper-alpha | lower-roman | upper-roman ; }
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <ol><li>Tekst po izboru</li></ol>

Oznake:
OL - Numerisana lista

NUMERISANA LISTA /ORDERED LIST/          ( <OL><LI>tekst</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
Atribut se definiše u CSS fajlu istom sintaksom kao i interni CSS /INTERNAL CSS/..
Svaka stranica mora imati link (u HEAD dijelu) na .css fajl sa stilom /STYLE SHEET/ koristeći <link> TAG ( <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.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. Numearisana 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;
}

Primjer 1. Alfabetski redoslijed - velika slova /UPPER CASE/.
Opis rješenja: Alfabetski redoslijed sa velikim slovima abecede se bira u sa stilom <style> ol {list-style-type: upper-alpha;}

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
ol {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<OL>
  <LI>voda</LI>
  <LI>sok</LI>
  <LI>kafa</LI>
  <LI>mlijeko</LI>
</OL>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<link rel=stylesheet href="css/20_OL_upper_alpha.css" type="text/css">
</head>
<body>
<OL>
  <LI>voda</LI>
  <LI>sok</LI>
  <LI>kafa</LI>
  <LI>mlijeko</LI>
</OL>
</body></html>

Fajl: 20_OL_upper_alpha.css

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

A. voda
B. sok
C. kafa
D. mlijeko

Primjer 2. Alfabetski redoslijed - mala slova /LOWER CASE/.
Opis rješenja: Alfabetski redoslijed sa velikim slovima abecede se bira u sa stilom <style> ol {list-style-type: lower-alpha;}

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head> <title>Numerisana lista</title>
<style>
ol {list-style-type: lower-alpha;}
</style>
</head>
<body>
<OL>
  <LI>voda</LI>
  <LI>sok</LI>
  <LI>kafa</LI>
  <LI>mlijeko</LI>
</OL>
</body> </html>

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<link rel=stylesheet href="css/20_OL_lower_alpha.css" type="text/css">
</head>
<body>
<OL>
  <LI>voda</LI>
  <LI>sok</LI>
  <LI>kafa</LI>
  <LI>mlijeko</LI>
</OL>
</body> </html>

Fajl: 20_OL_lower_alpha.css

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

a voda
b. sok
c. kafa
d. mlijeko

Daljnji rad:

  1. Provjerite svoje znanje:
    Zadatak Ispis
    Koirsteći fajl 20_OL_lower_roman kreirati ispis na ekranu (rimski brojevi - mala slova /LOWER CASE/):

      i. jedan
     ii. dva
    iii. tri

  2. Provjerite svoje znanje:
    Zadatak Ispis
    Koirsteći fajl 20_OL_lower_roman kreirati ispis na ekranu:

       i. kafa
     ii. sok
    iii. voda
     iv. mlijeko

  3. Provjerite svoje znanje:
    Zadatak Ispis
    Koirsteći fajl 20_OL_upper_roman kreirati ispis na ekranu (rimski brojevi - velika slova /UPPER CASE/ ):

      I. jedan
     II. dva
    III. tri

  4. Provjerite svoje znanje:
    Zadatak Ispis
    Koirsteći fajl 20_OL_upper_roman kreirati ispis na ekranu:

      I. voda
     II. sok
    III. mlijeko
    IV. kafa

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