CSS formatiranje liste

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

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>

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>

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.