#1 Seznamy
Seznamům, v HTML zapisované prvkem <ul> nebo <ol> s položkami <li>, lze pomocí CSS nastavit tvar či typ odrážky i zda je odrážka zahrnována do prvku nebo ne.
Seznamy se dělí na:
- číslované, které mají jako odrážky čísla (arabské, římské…) nebo také písmena
- nečíslované, které mají jako odrážky tvary (nejčastěji kolečko nebo pomlčka)
#2 Stylizace seznamů
Změna odrážky
Každému seznamu lze nastavit jinou, ať už předdefinovanou nebo vlastní, odrážku. Používá se k tomu vlastnost list-style-type.
ol {
list-style-type: lower-roman; /* Malé římské číslice */
}
ul {
list-style-type: circle; /* Kolečko */
}
Vlastnost list-style-type může obsahovat mnoho hodnota, z nichž některé mají speciální prefix nebo se nejedná o klíčové slovo. Jejich zkrácený výpis naleznete zde:
| Hodnota | Popis |
|---|---|
| lower-* | Nastavuje písmena na malá (hvězdička se přepisuje na konkrétní znakovou sadu) |
| upper-* | Nastavuje písmena na velká (hvězdička se přepisuje na konkrétní znakovou sadu) |
| "…" | Vlastní text (v uvozovkách), který bude fungovat jako odrážka |
| \1F44D | Hodnota emoji v Unicode tabulce (měnitelná hodnota podle emoji) |
| none | Nezobrazí se žádná odrážka (položka však bude stále odražena od kraje) |
| inherit | Zdědí vlastnost po rodiči |
Položkám lze také nastavit jako odrážku obrázek. Ten se vkládá do vlastnosti list-style-image a do funkce url(), která obsahuje adresu obrázku v adresáři.
Pozice odrážky
Seznamu lze také přidělit vlastnost list-style-position, která definuje, kde se bude odrážka nacházet – zda mimo prvek (před ním) anebo vně prvku.
Vlastnost může obsahovat dvě hlavní hodnoty (kromě globálních hodnot) – outside, která je základním nastavením, odrážka se nachází mimo prvek nebo inside, která odrážku přemístí do prvku.
ul#mimo {
list-style-position: outside;
}
ul#uvnitr {
list-style-position: inside;
}
Zkrácená vlastnost
Seznamy lze také stylovat pomocí zkrácené vlastnosti list-style, která sjednocuje vlastnosti list-style-type, list-style-position a list-style-image. Vyplňují se ve stejném pořadí, můžou být však některé vynechány, jelikož mají jedinečné hodnoty.
ul {
font-style: upper-roman inside;
}