List-style-type

CSS vlastnost list-style-type určuje vzhled odrážky nebo čísla seznamu.

Výchozí podoba je buď puntík (disc) v nečíslovaném seznamu (tag <ul> aj.), nebo normální čísla (decimal) v číslovaném seznamu (tag <ol>). V dalších úrovních seznamů (ol nebo ul v li) jsou výchozí podoby jiné.

Mozilla navíc zná hodnoty decimal-leading-zero, lower-latin, upper-latin, lower-greek, upper-greek. Internet Explorer u hodnot, které nepodporuje, zobrazí puntík (disc).

Podpora

Příklady

Někdy se chce, aby se v celém dokumentu nezobrazovaly odrážky:

<style>
ul li {list-style-type: none}
</style>

Vidíte, že se to týká jenom odrážek, nikoli číslování. O tom, jestli jde o odrážky nebo číslování, rozhoduje, to, zda je v html uveden tag <ul> (unordered list) nebo <ol> (ordered list). Pokud bych chtěl vypnout číslování, bude tam ol li:

<style>
ol li {list-style-type: none}
</style>

Stejným mechanismem se dá číslování přepnout na odrážky:

<style>
ol li {list-style-type: disc}
</style>

Pokud se v html dělají zanořené seznamy (tag <li> obsahuje další <ul> nebo <ol>), dávají prohlížeče zanořené úrovni automaticky jinou odrážku. Dá se nastavit, aby například odrážky v druhé úrovni zanoření měly stejný vzhled jako odrážky na první úrovni:

<style>
ul li, ul li ul li {list-style-type: disc}
</style>

Zápis ul li ul li zasáhne tag <li>, který je v jiném tagu <ul>, který je v tagu <li>, jenž je v tagu <ul>. Jasné ne? Raději příklad kousku html zanořeného seznamu:

<ul>
<li>normální text s održkou, odrážka první úrovně</li>
<li>
 <ul>
  <li>odrážka druhé úrovně</li>
  <li>další odrážka druhé úrovně</li>
 </ul>
</li>
<li>další odrážka první úrovně</li>
</ul>

Vizte též

List-style, Seznamy v HTML (odrážky a číslování)