Oblikovanje seznamov s CSS

V HTML poznamo neurejene in urejene sezname. Neurejeni seznami uporabljajo oznake, kot so krogec, prazen krogec ali kvadrat, urejeni seznami pa uporabljajo številčenje oziroma drug zaporedni način označevanja.

Z oblikovnimi slogi lahko seznamom določimo različne oznake, uporabimo slike ali pa nastavimo položaj oznak. Sodobni CSS omogoča tudi bolj natančno oblikovanje oznak z uporabo psevdoelementa ::marker.

Osnovna pravila

• Neurejen seznam uporablja oznake, kot so krogec, prazen krogec ali kvadrat.
• Urejen seznam uporablja številke, črke ali druge zaporedne oznake.
• Oznake lahko določimo z lastnostjo list-style-type.
• Namesto običajne oznake lahko uporabimo tudi sliko z lastnostjo list-style-image.
• Položaj oznake glede na vsebino določimo z lastnostjo list-style-position.

list-style-type

Z lastnostjo list-style-type določimo, kakšne oznake želimo imeti v seznamih. Uporabimo lahko klasične vrednosti, kot so disc, circle, square ali decimal, pa tudi druge načine številčenja in označevanja. Ta lastnost določa oznako elementa seznama oziroma marker. Oznaka praviloma prevzame barvo elementa, torej vrednost currentColor.

<p>Seznam z lastnostjo <em>list-style-type: <strong>none</strong></em></p>
<ul class="none">
   <li>Jabolko</li>
   <li>Hruška</li>
   <li>Sliva</li>
</ul>

<p>Seznam z lastnostjo <em>list-style-type: <strong>disc</strong></em></p>
<ul class="disc">
   <li>Jabolko</li>
   <li>Hruška</li>
   <li>Sliva</li>
</ul>

<p>Seznam z lastnostjo <em>list-style-type: <strong>upper-roman</strong></em></p>
<ol class="roman">
   <li>Jabolko</li>
   <li>Hruška</li>
   <li>Sliva</li>
</ol>

.none { list-style-type: none; }
.disc { list-style-type: disc; }
.roman { list-style-type: upper-roman; }

list-style-image

Z lastnostjo list-style-image določimo, katero sliko želimo imeti kot oznako v seznamih. Ta lastnost nastavi sliko kot marker elementa seznama. Če slike ni mogoče prikazati, se kot nadomestna možnost uporabi vrednost lastnosti list-style-type. Pogosto je priročneje uporabiti bližnjico list-style.

<p>Seznam z lastnostjo <em>list-style-image: url('seznam.png')</em></p>
<ul class="image">
   <li>Jabolko</li>
   <li>Hruška</li>
   <li>Sliva</li>
</ul>

.image { 
   list-style-type: disc;
   list-style-image: url("seznam.png");
}

list-style-position

Z lastnostjo list-style-position določimo položaj oznake pri seznamu. Lastnost določa položaj ::marker glede na element seznama. Vrednost outside pomeni, da je oznaka zunaj glavnega vsebinskega bloka, vrednost inside pa, da je oznaka prvi del vsebine elementa. Lastnost se uporablja za elemente s prikazom list-item in se pogosto nastavi na nadrejenem seznamu, da velja za vse postavke.

<p>Seznam z lastnostjo: <em>list-style-position: <strong>outside</strong></em></p>
<ul class="outside">
   <li class="bgd">Jabolko</li>   
   <li class="bgl">Hruška</li>   
   <li class="bgd">Sliva</li>
</ul>

<p>Seznam z lastnostjo: <em>list-style-position: <strong>inside</strong></em></p>
<ul class="inside">
   <li class="bgd">Jabolko</li>   
   <li class="bgl">Hruška</li>
   <li class="bgd">Sliva</li>
</ul>

.outside { list-style-position: outside; width: 30%; }
.inside { list-style-position: inside; width: 30%; }
.bgd { background-color: #F5DBA9; }
.bgl { background-color: #F9EBCC; }

::marker

Psevdoelement ::marker omogoča neposredno oblikovanje oznake seznama, na primer njene barve ali velikosti. Izbere označevalno polje elementa seznama, ki običajno vsebuje krogec, številko ali drugo oznako. Deluje pri elementih, ki imajo prikaz list-item, na primer pri li in summary. Ta zmožnost ni povsem enako podprta v vseh najbolj razširjenih brskalnikih.

ul.marker li::marker {
   color: #d35400;
   font-size: 1.2em;
}

list-style

Lastnost list-style uporabljamo kot bližnjico za nastavitev več lastnosti oznak pri seznamih. Je bližnjica za list-style-type, list-style-image in list-style-position. Vrednosti lahko zapišemo v enem, dveh ali treh delih in to v poljubnem vrstnem redu. Če sta določena tudi list-style-type in list-style-image, se list-style-type uporabi kot rezervna možnost, če slike ni mogoče prikazati. Privzete vrednosti so disc, outside in none.

• list-style-type
• list-style-image
• list-style-position

ul {
   list-style: square inside;
}

ol {
   list-style: upper-roman outside;
}

Priporočila

• Pri neurejenih seznamih uporabi preproste in jasno prepoznavne oznake.
• Pri urejenih seznamih izberi način številčenja, ki ustreza namenu seznama.
• Če uporabljaš sliko kot oznako, določi tudi rezervno vrednost z list-style-type.
• Psevdoelement ::marker uporabi takrat, ko želiš oblikovati oznako brez spreminjanja same vsebine postavk.

Pogoste napake

• Oznake seznama so izbrane tako, da zmanjšajo preglednost vsebine.
• Uporaba slike kot oznake brez rezervne vrednosti za primer, ko slike ni mogoče prikazati.
• Napačno razumevanje razlike med vrednostma inside in outside.
• Pri ::marker se pričakujejo slogovne možnosti, ki niso enako podprte v vseh brskalnikih.