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í |
hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
exotická číslování: hebrejské arménské gruzínské ideografické (prý čínské číslovky) a čtyři japonská písma: hiragana je japonské malé katakana japonské velké to samé ve verzích -iroha |
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 |
---|---|---|
Internet Explorer | 4, 5, 5.5, 6 | |
Mozilla (Firefox, Netscape 6+ atd.) | všechny verze | pouze Mozilla umí exotická číslování |
Opera | 4, 5, 6, 7 | |
Chrome | ano |
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).
Exotická číslování se zobrazují pouze v Mozille a potřebují ke správné funkci do systému správně nainstalované jazykové verze fontu.
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>
Když vypnete odrážky pomocí list-style-type: none;, tak se vám většinou nepodaří vyladit vzhled seznamu ve všech prohlížečích stejně. Správný postup poradil Plaváček:
Prostě celý seznam vraž do divu, kterému nastavíš požadované okraje, a pro UL nastavíš margin a padding na 0. A nic se nikam neposune.
Vizte příklad japonského číslování katakana a hiragana.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.