abc HTML5 i CSS TUTORIAL

Nenumerisana lista - Atributi /UNORDERED LIST - OL - ATTRIBUTE VALUES/ <OL style="list-style-type: Vrijednost>


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

Nenumerisana lista /UNORDERED LIST/   Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa: UL> Sintaksa:   <OL style="list-style-type: | disc | circle | square;">

Oznake:
UL - Nenumerisana lista
LI - Elementa liste
Atribut: list-style-type

Legenda tipova nenumerisane liste:
disc - Ispunjen krug
circle - Prazan krug
square - Ispunjen kvadrat


Slika 2. Nenumerisana lista - buliti /UNORDERED LIST - UL & LI/

Primjer 1. Nenumerisana lista sa atributima /ATTRIBUTE VALUES/:

Vrijednost

Opis

Primjer

 

DEFAULT. Ispunjen krug

disc

Ispunjen krug

<UL style="list-style-type: disc;">

circle

Prazan krug

<UL style="list-style-type: circle;">

square

Ispunjen kvadrat

<UL style="list-style-type: square;">

Primjer 2. Ispunjen krug /DISK - A FILLED CIRCLE/

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Ispunjen krug</title>
</head>
<body>
<UL style="list-style-type: disc;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>
  • jedan
  • dva
  • tri

Primjer 3. Prazan krug /CIRCLE - AN UNFILLED CIRCLE/

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug</title>
</head>
<body>
<UL style="list-style-type: circle;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>


  • jedan
  • dva
  • tri

Primjer 4. Prazan krug /SQUARE - A FILLED SQUARE/

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Kvadrat</title>
</head>
<body>
<UL style="list-style-type: square;">
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>


  • jedan
  • dva
  • tri

Primjer 5. Lista u listi /krug u kvadratu/

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug u kvadratu</title>
<style>
  UL { list-style-type: square;
    UL { list-style-type: circle; }
  }
</style>
</head>
<body>
<UL style="list-style-type: square;">
  <LI>jedan</LI>
  <LI>dva</LI>
<UL style="list-style-type: circle;">
  <LI>dva.jedan</LI>
  <LI>dva.dva</LI>
</UL>
  <LI>tri</LI>
</UL>
</body></html>


  • jedan
  • dva
    • dva.jedan
    • dva.dva
  • 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
  • Glava 3
    • Hard disk
    • Monitor
    • Disketna jedinica
    • Tastatura
    • Miš
  • Glava 4
   
2. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst
  • Glava 2
  • Glava 3
    • Hard disk
    • Monitor
    • Disketna jedinica
    • Tastatura
    • Miš
  • Glava 4
   
3. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst
  • Meni 1
        supa
        jelo
        dezert
  • 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