List-style-type
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í |
| inherit | hodnota se zdědí z rodičovského prvku |
| initial | nastaví vlastnost na výchozí hodnotu |
| hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha lower-greek upper-greek |
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 malé řecké velké řecké |
| disclosure-closed disclosure-open |
jako mají html tag <summary> uvnitř <details> (špatná podpora) |
| vlastní-číslování | číslování definované pomocí @counter-style (špatná podpora) |
| "řetězec" | místo odrážky bude zadaný řetězec |
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.
Pokud chcete odrážku stylovat (barvit apod.), můžete na to využít pseudoselektor ::marker. Odrážka se někdy v kódu označuje právě jako "marker".
Podpora
| Prohlížeč | Podpora | Podpora @counter-style |
|---|---|---|
| Internet Explorer | ano | ne |
| Mozilla (Firefox) | ano včetně "string" | ano |
| Opera | ano | ne |
| Chrome | ano včetně "string" | ne |
Exotická číslování potřebují ke správné funkci do systému správně nainstalované jazykové verze fontu.
Vlastní číslování
Kdo si chce hrát s číslováním víc (mě to moc nebaví, nevidím důvod), může si nastudovat @counter-style. Například pro definici číslování, které má číslíčka v rámečcích, se nadefinuje nová hodnota ramecky a a do stylu se zapíše jejich definice pomocí UTF kódů:
@counter-style ramecky {
system: fixed;
symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467"
"\2468" "\2469";
}
ol {list-style-type: ramecky;}
Zatím to funguje jenom ve Firefoxu (2020). Funkční příklad na counter-style.
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>
Vlastní řetězec místo odrážky
Komu nestačí list-style-image a chce místo odrážky mít nějaké jiné znaky nebo emoji, může použít jako hodnotu list-style-image i nějaký řetězec. Řetězec se musí zadávat do uvozovek nebo apostrofů.
Příklad na list-style-type: string
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
