CSS formatiranje liste

U ovoj lekciji ćemo naučiti kako da pomoću CSS-a formatiramo HTML liste. Formatiranje listi se najpre odnosi na zadavanje oblika oznake koja će se pojaviti ispred stavke. Moguće je zadati nekoliko vrsta postojećih grafičkih oznaka (tzv. "bulleta") ili bilo kakvu sličicu, kao i različite tipove numeracije. Osim toga, moguće je odrediti i položaj oznake u odnosu na stavku.

Atributi koje koristimo su:

list-style-type Određuje kako se označavaju stavke u listi
list-style-image Možemo da zadamo bilo koju sličicu, koja će se koristiti kao glif ispred stavke
list-style-position Položaj oznake u odnosu na stavku
list-style Kompleksan atribut kojim se definiše izgled liste

Kao što znamo, HTML liste mogu biti neuređene (<ul>) ili uređene (<ol>). Neuređene se podrazumevano prikazuju sa grafičkim oznakama - tzv. "bulletima", dok su uređene liste numerisane, obično dekadnim brojevima. Pomoću ovih atributa, možemo u potpunosti promeniti način označavanja, bez obzira kog tipa je lista.

Suštinski, ovi atributi se mogu primeniti na svaki elemenat za koji je zadat prikaz display: list-item. Ovaj način prikaza je podrazumenvan za stavke liste <li>, ali ga putem CSS-a po potrebi možemo zadati bilo kom drugom elementu, klasi i sl.

Vrednosti atributa koji se koriste za formatiranje liste se podrazumevano nasleđuju (inherit), pa tako nema potrebe zadavati ih za same stavke <li>, već je dovoljno to uraditi u kontejnerskom elementu <ul> ili <ol>.

list-style-type

U listi, ispred svake stavke imamo neki vodeći simbol ili oznaku. Navikli smo da kod neuređenih lista to budu obično kružići, dok kod uređenih bude neka numeracija (npr. brojevi). Pomoću ovog atributa možemo zadati način označavanja stavki u listi. Postoji zaista puno mogućnosti, a ovde ćemo se pozabaviti najčešće korišćenim.

Evo i par primera kako bi to izgledalo...

list-style-type: disc; list-style-type: '>>'; list-style-type: moj_tip; list-style-type: none;

Za neuređene liste postoje tri unapred definisana simbola koji se prikazuju kao "bulleti":

Ako želimo da se lista prikazuje kao uređena, imamo malo veći izbor:

Tipovi oznaka

Da ne biste mnogo lupali glavu, ovde ćemo ilustrovati kako izgledaju različite oznake u neuređenim i uređenim listama. U pitanju su najstandardniji tipovi i trebalo bi da ih sve vidite ispravno u bilo kom web čitaču.

  • disc
    • prva stavka
    • druga stavka
    • treća stavka
  • circle
    • prva stavka
    • druga stavka
    • treća stavka
  • square
    • prva stavka
    • druga stavka
    • treća stavka
  • decimal
    • prva stavka
    • druga stavka
    • treća stavka
  • decimal-leading-zero
    • prva stavka
    • druga stavka
    • treća stavka
  • upper-roman
    • prva stavka
    • druga stavka
    • treća stavka
  • lower-roman
    • prva stavka
    • druga stavka
    • treća stavka
  • upper-latin (isto kao upper-alpha)
    • prva stavka
    • druga stavka
    • treća stavka
  • lower-latin (isto kao lower-alpha)
    • prva stavka
    • druga stavka
    • treća stavka
  • lower-greek (upper-greek ne postoji kao opcija)
    • prva stavka
    • druga stavka
    • treća stavka

list-style-image

Pomoću ovog atributa, možemo zadati bilo koju sličicu koja će služiti kao oznaka u neuređenim listama. To je obično neka sličica na vašem sajtu (ili bilo gde na Internetu - nije zaista bitno, sve dok navodite ispravnu putanju do nje). Inače, kada zadamo da oznaka bude sličica, to podešavanje nadjačava ono što je zadato u list-style-type atributu. Moguće vrednosti su:

Slika se zadaje pomoću funkcije url().

list-style-image: url('putanja/slika.png');

Primer: Numerisanje liste sa stavkama i podstavkama

Ovde ćemo isprobati zadavanje sličice kao oznake za stavke u glavnoj listi i zadavanje numeracije podliste u obliku malih slova abecede. Glavna lista će biti neuređena (UL), a podliste su uređene (OL).


  <style>
  ul {
    /* Za elemente glavne liste zadajemo sličicu */
    list-style-image: url('img/glif-tref.png');
  }
  ol {
    /* Za elemente podliste moramo da uklonimo sličicu, pošto ona nadjačava tip liste */
    list-style-image: none;
    /* Za elemente podliste sada zadajemo oznake u obliku malih slova */
    list-style-type: lower-latin;
  }
  </style>

  <ul>
    <li>Prvo</li>
    <li>Drugo
      <ol>
        <li>Prva podstavka</li>
        <li>Druga podstavka</li>
        <li>Treća podstavka</li>
      </ol>
    </li>
    <li>Treće
      <ol>
        <li>Stavka</li>
        <li>Stavka</li>
      </ol>
    </li>
    <li>Četvrto</li>
  </ul>
p1

list-style-position

Atribut list-style-position služi da odredimo položaj oznake u odnosu na tekst stavke. Ovo se ne odnosi na razmak stavke od oznake ili uvlačenje stavki. U pitanju je suštinska stvar - da li je oznaka izdvojena ili se prikazuje kao deo teksta stavke. Moguće vrednosti su:

Primer, kako bismo zadali ovaj atribut:

list-style-position: inside;

list-style

Atribut list-style je kompleksan atribut kojim je moguće istovremeno zadati sva tri formatiranja za listu. Dakle, ovaj atribut zamenjuje list-style-type, list-style-image i list-style-position. Vrednost se zadaje u obliku:

Ne moraju se zadati sve tri vrednosti, već samo dve ili jedna. Ovo ima smisla, pošto ako zadamo sliku kao oznaku, nema smisla zadavati neku od CSS oznaka. Na primer:

list-style: circle none inside; list-style: url("slika.png") outside;

Primer: Formatiranje liste

Isprobaćemo zadavanje kompleksnog atributa list-style i videćemo kako izgleda kada je kao položaj zadato inside.


  <style>
  ul {
    /* Pomoću atributa list-style zadajemo istovremeno i sličicu i položaj */
    list-style: url('img/glif-herc.png') inside;
    width: 15em;
  }
  </style>

  <ul>
    <li>Ovde smo u jednom primeru objedinili atribute list-style-image i list-style-position.</li>
    <li>Primećujete da je položaj oznake zadat kao inside i oznaka je sada postavljena unutar stavke.</li>
  </ul>
p2

Korišćenje CSS brojača u listama

Formatiranje listi ide ruku-pod-ruku sa CSS brojačima. Možemo kombinovati atribute koje smo upravo objasnili sa atributima za uvođenje i kontrolu brojača, kako bismo uz malo znanja o selektorima podređenog elementa i pseudo-elementima napravili listu koja izgleda i ima numeraciju upravo onako kako želimo.

Ako nismo pravilno postavili podliste unutar stavki glavne liste, nećemo dobiti prikaz koji očekujemo.

Sve to je ilustrovano u primeru koji sledi...

Primer: Numerisanje liste sa stavkama i podstavkama

Ovde ćemo pokušati da iskoristimo šta smo naučili kako bismo numerisali <ol> listu, s tim što želimo da glavne stavke budu numerisane decimalnim brojevima, a podstavke malim slovima abecede. Želimo da sve to izgleda ovako:

  • 1) Stavka
  • 1 (a) Podstavka
  • 1 (b) Podstavka
  • 2) Stavka
  • 2 (a) Podstavka
  • 2 (b) Podstavka

Ovakav zadatak ne bismo mogli da rešimo korišćenjem funkcije counters(), već uz malo lukavog manipulisanja selektorima i brojačima.


  <style>
  ol {
    /* U glavnoj listi počinjemo sa brojačem "stavka" od 0 */
    counter-reset: stavka;
    /* Isključujemo brojač iz same liste da se ne bi mešao sa našim CSS brojačima */
    list-style-type: none;
  }
  /* Podlistu definišemo kao OL listu direktno unutar LI stavke */
  li>ol {
    /* U podlisti uvodimo brojač "podstavka".
      Ne brinite, iako je i ovo OL elemenat, neće se restartovati i brojač "stavka" -
      atribut counter-reset ovde uvodi novu vrednost, samo brojač "podstavka". */
    counter-reset: podstavka;
  }
  li::before {
    /* U pseudo-klasi ::before za LI stavku povećavamo brojač "stavka" */
    counter-increment: stavka;
    /* Prikazujemo sam brojač i zatvorenu zagradu posle njega */
    content: counter(stavka) ") ";
  }
  /* Sada definišemo pseudo-element ::before za podstavku (kao stavku unutar liste koja je unutar stavke) */
  li>ol>li::before {
    /* Povećavamo brojač "podstavka" */
    counter-increment: podstavka;
    /* Prikazujemo sadržaj - prvo brojač glavne stavke, 
      a onda u zagradi brojač podstavke kao malo slovo abecede */
    content: counter(stavka) " (" counter(podstavka, lower-latin) ") ";
    /* A evo da pokažemo i kako sada možemo da promenimo izgled same oznake */
    color: blue;
  }
  </style>

  <ol>
    <li>Prvo</li>

    <li>Drugo
      <ol>
        <li>Neki ispis</li>
        <li>Još jedan ispis</li>
        <li>Poslednji ispis</li>
      </ol>
    </li>
    
    <li>Treće
      <ol>
        <li>Stavka</li>
        <li>Stavka</li>
      </ol>
    </li>

    <li>Četvrto</li>
    
  </ol>

Trebalo bi da ovde vidite željeni rezultat. Mi smo namerno malo boldovali i povećali oznake ispred stavki, kako bi bile upečatljivije. Inače, oznake se prikazuju istim fontom kao i stavke.

p3
  1. Mozilla Developer Network, CSS Lists and Counters
  2. D. S. McFarland (2013): CSS3: The Missing Manual, O'Reilly, Sebastopol
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.