CSS vlastnost list-style-type určuje vzhled odrážky nebo čísla seznamu.
hodnoty | vzhled odrážky nebo čísla |
---|---|
disc | puntík |
circle | kolečko (prázdné) |
square | čtvereček |
decimal | desítkové (normální) číslo |
lower-roman | malé římské číslice (fajn nesmysl) |
upper-roman | velké římské číslice |
lower-alpha | a. b. c. |
upper-alpha | A. B. C. |
none | odrážky se nezobrazí |
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).
Jako odrážku nelze použít žádný jiný znak. (Docela škoda, nechápu, proč si tam nemůžu dát libovolnou entitu.) Pokud potřebujete nějaký zvláštní typ odrážky, musíte si ji nakreslit jako obrázek a přidat ji k seznamu pomocí list-style-image.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
4, 5, 5.5, 6 | ||
Mozilla (Netscape 6+) | všechny verze | |
Opera | 4, 5, 6, 7 | |
Konqueror | ano | |
IE 5 / Mac | ano | |
Netscape Navigator 4 | ne |
Známá chyba: pokud tagu <li> nastavíte šířku (width) pomocí třídy nebo id, číslování přestane v Internet Exploreru fungovat (všechno se čísluje od jedničky).
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>
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.