List-style-type

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

list-style-type
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.

Podpora

Podpora vlastnosti list-style-type
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.

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>

Přesný vzhled zrušeného číslování

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.

Exotická číslování

Vizte příklad japonského číslování katakana a hiragana.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.