abc HTML5 i CSS TUTORIAL

Nenumerisana lista - Atributi /UNORDERED LIST - UL - ATTRIBUTE VALUES/


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

Nenumerisana lista /UNORDERED LIST/   Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

Sintaksa:

  • HEAD dio (za listu): <style> UL {list-style-type = | disc | circle | square | none ;} </style>
  • BODY dio: <UL>

Oznake:
TAG: <Ul>
Atribut: list-style-type

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

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


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


Slika 3. Margina /MARGINS/, okvir /BORDER/, /PADDING/, sadržaj /CONTENT/

Nenumerisana lista sa atributima /ATTRIBUTE VALUES/:

Vrijednost

Opis

Primjer

 

DEFAULT. Ispunjen krug

disc

Ispunjen krug

UL {
list-style-type: disc;
}

circle

Prazan krug

ol {
list-style-type: circle;
}

square

Ispunjen kvadrat

ol {
list-style-type: square;
}

Primjer 1. Ispunjen krug /DISK - A FILLED CIRCLE/ u nenumerisanoj listi /UNORDERED LIST/.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Ispunjen krug</title>
<style>
  UL { list-style-type: disc; }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 2. Prazan krug /CIRCLE - AN UNFILLED CIRCLE/ u nenumerisanoj listi /UNORDERED LIST/.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug</title>
<style>
  UL { list-style-type: circle; }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 3. Prazan krug /SQUARE - A FILLED SQUARE/ u nenumerisanoj listi /UNORDERED LIST/.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Kvadrat</title>
<style>
  UL { list-style-type: square; }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 4. Lista u listi /krug u kvadratu/ u nenumerisanoj listi /UNORDERED LIST/:

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

Tekst prije liste.

  • jedan
  • dva
    • dva.jedan
    • dva.dva
  • tri

Poslije liste.

Primjer 5. Nenumerisana listi /UNORDERED LIST/, boja pozadine je žuta a slova crvena:

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug u kvadratu</title>
<style>
  UL { background-cWolor:yellow;
       color:red;
  }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 6. Nenumerisana listi /UNORDERED LIST/, elementi liste: boja pozadine je žuta a slova crvena, razmak povećan na 1em (još jedan razmak veličine fonta):

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug u kvadratu</title>
<style>
  LI { background-color:yellow;
       color:red;
       margin-top: 1em;
  }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 7. Nenumerisana listi /UNORDERED LIST/, elementi liste: boja pozadine je žuta a slova crvena, razmak povećan na 1em (još jedan razmak veličine fonta), bez bulita.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug u kvadratu</title>
<style>
  LI { background-color:yellow;
       color:red;
       margin-top: 1em;
       list-style-type: none;
  }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 7. Nenumerisana listi /UNORDERED LIST/, elementi liste: boja pozadine je žuta a slova crvena, razmak povećan na 1em (još jedan razmak veličine fonta), bez bulita.

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug u kvadratu</title>
<style>
  LI { background-color:yellow;
       color:red;
       margin-top: 1em;
       list-style-type: none;
       padding: 1em;
  }
</style>
</head>
<body>
<p>Tekst prije liste.</p>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
<p>Poslije liste.</p>
</body></html>

Tekst prije liste.

  • jedan
  • dva
  • tri

Poslije liste.

Primjer 8. Navigacioni linkovi su na lijevom dijelu a tekst na desnom. Za linkove se koristi nenumerisana lista /UNORDERED LIST/ bez bulita sa bojom pozadine, marginom i pomjeranjem unutar bordera.

<!DOCTYPE html>
<html>
<head><title>Linkovi u lijevom baru</title>
<style>
body {
  padding-left: 10em;
  color: brown;
  background-color: orange;
  font-family: Calibry, Helvetica, Arial;
}
ul.navigacionibar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 1em;
  left: 1em;
  width: 8em
}
</style>
</head>
<body>
<ul class="navigacionibar">
  <LI>Prvo poglavlje</LI>
  <LI>Drugo poglavlje</LI>
  <LI>Treće poglavlje</LI>
</ul>
<h2>Prvo poglavlje</h2>
<p>tekst prvog poglavlja</p>
<h2>Drugo poglavlje</h2>
<p>tekst drugog poglavlja</p>
<h2>Treće poglavlje</h2>
<p>tekst trećeg poglavlja</p>
</body></html>
  • Prvo poglavlje
  • Drugo poglavlje
  • Treće poglavlje

Prvo poglavlje

tekst prvog poglavlja

Drugo poglavlje

tekst drugog poglavlja

Treće poglavlje

tekst trećeg poglavlja

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

1. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst

Tekst prije liste.

  • Glava 3
    • Hard disk
    • Monitor
    • Disketna jedinica
    • Tastatura
    • Miš
  • Glava 4

Poslije liste.
   
2. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst

Tekst prije liste.

  • Glava 2
  • Glava 3
    • Hard disk
    • Monitor
    • Disketna jedinica
    • Tastatura
    • Miš
  • Glava 4

Poslije liste.
   
3. Provjerite svoje znanje:
 
Zadatak Ispis
Napišite kod koji ispisuje tekst

Tekst prije liste.

  • Meni 1
        supa
        jelo
        dezert
  • Meni 2

Poslije liste.

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