abc HTML5 i CSS TUTORIAL

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


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

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

  • CSS fajl: UL { list-style-type: | disc | circle | square ; }
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <ul><li>Tekst po izboru</li></ul>

Oznake:
UL - Nenumerisana lista

Nenumerisana LISTA /UNORDERED LIST/          ( <UL><LI>tekst</UL>)

Oznake:
UL - Nenumerisana lista
Atribut: list-style-type

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

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"> ).

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 /UNUNORDERED LIST - UL & LI/

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/.

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Ispunjen krug</title>
<link rel=stylesheet href="css/20_UL_disc.css" type="text/css">
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>

Fajl: 20_UL_disc.css

ul { list-style-type: disc; }
  • jedan
  • dva
  • tri

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

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Krug</title>
<link rel=stylesheet href="css/20_UL_circle.css" type="text/css">
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>

Fajl: 20_UL_circle.css

ul { list-style-type: circle; }
  • jedan
  • dva
  • tri

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

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

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

<!DOCTYPE html>
<html>
<head><title>Nenumerisana lista - Kvadrat</title>
<link rel=stylesheet href="css/20_UL_square.css" type="text/css">
</head>
<body>
<UL>
  <LI>jedan</LI>
  <LI>dva</LI>
  <LI>tri</LI>
</UL>
</body></html>

Fajl: 20_UL_square.css

ul { list-style-type: square; }

  • jedan
  • dva
  • tri

Daljnji rad:

  1. Provjerite svoje znanje:
    Zadatak Ispis
    Koirsteći fajl 20_UL_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_UL_lower_roman kreirati ispis na ekranu:

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

  3. Provjerite svoje znanje:
    Zadatak Ispis
    Koirsteći fajl 20_UL_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_UL_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