Seznam v CSS určuje, jak jsou obsahy nebo položky uvedeny určitým způsobem, tj. mohou být uspořádány úhledně nebo náhodně, což pomáhá při vytváření čisté webové stránky. Protože jsou přizpůsobivé a snadno se s nimi manipuluje, lze je použít k uspořádání velkého množství materiálu. Výchozí styl seznamu je bez okrajů. Seznam lze rozdělit do dvou kategorií:

Neuspořádaný seznam:Ve výchozím nastavení jsou prvky seznamu v neuspořádaných seznamech označeny odrážkami, což jsou malá černá kolečka.Objednaný seznam:Prvky seznamu v uspořádaných seznamech jsou označeny čísly a písmeny.

K ovládání seznamů CSS jsou k dispozici následující vlastnosti seznamu CSS:

Typ stylu seznamu:Tato vlastnost se používá k určení vzhledu značky položky seznamu, jako je disk, znak nebo vlastní styl počítadla.Obrázek ve stylu seznamu:Pomocí tohoto parametru lze určit obrázky, které budou sloužit jako značky položek seznamu.Pozice stylu seznamu:Popisuje, kde by měl být rámeček markeru u rámečku hlavního bloku.Styl seznamu:Pomocí tohoto atributu se konfiguruje styl seznamu.

Nyní se o těchto vlastnostech dozvíme více na příkladech.

Vlastnost typu list-style

Výchozí typ značky seznamu lze změnit na řadu jiných typů, včetně čtverce, kruhu, římských číslic, latinských písmen a mnoha dalších. Položky v neuspořádaném seznamu jsou označeny kulatými odrážkami (•), zatímco položky v seřazeném seznamu jsou standardně číslovány arabskými číslicemi (1, 2, 3 atd.).

Označení nebo odrážky budou odstraněny, pokud jejich hodnotu nastavíme na žádnou.

Syntax:

typ-stylu seznamu:hodnota;

odinstalovat angular cli

Hodnotu můžeme použít následovně:

1. kruh
2. desítkové, např.:1,2,3 atd
3. desetinné nuly na začátku, např. :01,02,03,04 atd.
4. nižší římský
5. horní římský
6. nižší alfa, např. a,b,c atd
7. horní alfa, např. A, B, C atd
8. náměstí

Poznámka: Výchozí výplň a okraj jsou také zahrnuty v seznamu. K tomu je nutné přidat padding:0 a margin:0

a
tagy k odstranění tohoto.

Příklad

Tento příklad ukazuje seznam CSS s několika typy a hodnotami ve stylu seznamu nastavenými na čtverec a horní alfa a mnoho.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

Výstup