CSS - Liste

Vrste listi u HTML-u

Postoje tri različite vrste lista u HTML-u:

  • Neuređene liste (Unordered lists) - koristi se za kreiranje popisa povezanih stavki, neodređenim redosljedom.
  • Uređene liste (Ordered lists) - koristi se za kreiranje popisa povezanih stavki, određenim redoslijedom.
  • Lista opisa (Definition list) - koristi se za pravljenje liste pojmova i njihovih opisa.

Pogledajte lekciju HTML liste da biste saznali više o listama i kako ih stvoriti.


Uređivanje lista uz pomoć CSS-a

CSS pruža nekoliko svojstava za stilizovanje i oblikovanje najčešće korištenih neuređenih i uređenih lista. Svojstva CSS listi obično omogućavaju:

  • Da kontrolišite oblik ili izgled oznaka.
  • Navedite sliku oznaka, a ne tačku ili broj oznake.
  • Na listi odredite udaljenost između oznaka i teksta.
  • Da navedite da li će se marker pojaviti unutar ili izvan okvira koji sadrži stavke liste.

U sljedećem dijelu saznaćete o svojstvima koja se mogu koristiti za oblikovanje HTML lista.


Promjena vrste oznake liste

Stavke na uređenim listama prema zadanom su numerisane arapskim brojevima (1, 2, 3, 5, itd.), dok liste koje nisu uređene, označene okruglim znakom (•). Možete promijeniti ovu zadanu vrstu markera popisa u bilo koju drugu vrstu, poput rimskih brojeva, latiničnih slova, kruga, kvadrata itd. koristeći svojstvo tipa type-style. Poledajmo sljedeći primjer da razjasnimo kako ovo svojstvo zapravo djeluje: 

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje numerisanja ili nabrajanja stilova popisa</title>
<style>  
    ul {
        list-style-type: square;
    }
    ol {
        list-style-type: upper-roman;
    }
</style>
</head>
<body>
    <h2>Neuređene liste</h2>
    <ul>
        <li>Stavka liste 1</li>
        <li>Stavka liste 2</li>
        <li>Stavka liste 3</li>
    </ul>
    <h2>Uređene liste</h2>
    <ol>
        <li>Stavka liste 1</li>
        <li>Stavka liste 2</li>
        <li>Stavka liste 3</li>
    </ol>
</body>
</html>

Promjena položaja oznake

Po zadanom su znakovi svih stavki liste pozicionirani izvan njihovih okvira za prikaz. Međutim, ove oznake možete postaviti i unutar okvira prikaza stavke liste koristeći svojstvo list-style-position, zajedno sa vrjednostima. Linije će se u ovom slučaju zamotati ispod markera, umjesto da su razdvojene. Evo primjera: 

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje položaja označivača liste</title>
<style>  
    body{
        font-size: 14px;
        font-family: Arial,sans-serif;
    }
    ol li {
        background: #ddd;
        padding: 5px;
        margin: 5px;
    }
    ol.in li {
        list-style-position: inside;
    }
    ol.out li {
        list-style-position: outside;
    }
</style>
</head>
<body>
    <h2>Pozicija markera liste - iznutra</h2>
    <ol class="in">
        <li>Vežite sigurnosni pojas</li>
        <li>Uključite motor automobila i pažljivije proučite instrument
        tablu u potrazi za bilo kojim znakom upozorenja.</li>
        <li>Pažljivo pogledajte oko sebe i krenite.</li>
    </ol>
    <h2>Pozicija markera na listi - izvana</h2>
    <ol class="out">
        <li>Vežite sigurnosni pojas.</li>
        <li>Uključite motor automobila i pažljivije proučite instrument
        tablu u potrazi za bilo kojim znakom upozorenja.</li>
        <li>Pažljivo pogledajte oko sebe i krenite.</li>
    </ol>
</body>
</html>

Pogledajmo sljedeću ilustraciju da biste shvatili kako se postavljaju brojevi ili znakovi.


Korištenje slike kao oznake liste

Takođe možete postaviti sliku kao marker liste koristeći svojstvo list-style-image. Pravilo stila u sljedećem primjeru daje prozirnu PNG sliku "arrow.png" kao marker liste za sve stavke s popisa bez narudžbe. Isprobajmo ga i pogledajte kako to funkcioniše: 

ul li {
    list-style-image: url("images/bullet.png");
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje slike kao markera liste sa CSS-om</title>
<style>
    ul li {
        list-style-image: url("/examples/images/bullet.png");
    margin: 5px;
    }
</style>
</head>
<body>
    <h2>Korištenje slike kao tačke nabrajanja</h2>
    <ul>
        <li>Stavka liste 1</li>
        <li>Stavka liste 2</li>
        <li>Stavka liste 3</li>
    </ul>
</body>
</html>

Ponekad svojstvo list-style-image možda neće proizvesti očekivani rezultat. Alternativno, za bolju kontrolu pozicioniranja markera slike možete koristiti sljedeće rješenje. Kao obilazak, takođe možete postaviti mete slika putem CSS svojstva background-image. Prvo postavite listu da nema znakova. Zatim definišite pozadinsku sliku koja se ne ponavlja, za element liste. Sljedeći primjer prikazuje znakove slike jednako u svim pretraživačima: 

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (od gore-ljevo) */
    background-repeat: no-repeat;
    padding-left: 20px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje označivača slike u pozadini sa CSS-om</title>
<style>
    ul {
        list-style-type: none;
    }
    ul li {
        background-image: url("/examples/images/bullet.png");
        background-position: 0px 3px;
        background-repeat: no-repeat;
        padding-left: 20px;
        margin: 5px
    }
</style>
</head>
<body>
    <h1>Korištenje slike kao tačke nabrajanja</h1>
    <ul>
        <li>Stavka liste 1</li>
        <li>Stavka liste 2</li>
        <li>Stavka liste 3</li>
    </ul>
</body>
</html>

Postavljanje svih svojstava liste odjednom

Svojstvo stila liste može definsati sva tri svojstva list-style-type, list-style-image, i list-style-position liste na jednom mjestu. Sljedeće pravilo stila postavlja sva svojstva liste u jednoj deklaraciji. 

ul {
    list-style: square inside url("images/bullet.png");
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS list-style Stenografska imovina</title>
<style>
    ul {
        list-style: square inside url("/examples/images/bullet.png");
        background: #9ddfef;
    }
    ul li {
        background: #ededed;        
        margin: 5px 0;
        padding: 5px;
    }
</style>
</head>
<body>
    <h2>Svojstvo<code> list-style</code> skraćeno svojstvo</h2>
    <ul>
        <li>Stavka liste 1</li>
        <li>Stavka liste 2</li>
        <li>Stavka liste 3</li>
    </ul>
</body>
</html>

Izrada navigacijskih menija pomoću liste

HTML liste se često koriste za stvaranje horizontalne navigacijske trake ili menija koji se obično pojavljuju na vrhu web stranice. Ali pošto su stavke liste blok elementi, da bismo ih prikazali unutar, potrebno je koristiti svojstvo prikaza CSS display. Pogledajmo primjer da vidimo kako to zaista funkcioniše: 

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izgradnja trake za navigaciju sa HTML listom i CSS-om</title>
<style>
    body{
        font-size: 14px;
        font-family: Arial,sans-serif;
    }
    ul {
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li {
        display: inline-block;
    }
    ul li a {
        display: block;
        padding: 10px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover {
        color: #fff;
        background: #939393;
    }
</style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Početna</a></li>
            <li><a href="#">O nama</a></li>
            <li><a href="#">Kursevi</a></li>
            <li><a href="#">Informacije</a></li>
            <li><a href="#">Donacije</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
  <p><strong>Napomena:</strong> Postavite pokazivač miša preko veze na meni da biste vidjeli efekt hover.</p>
</body>