Lista w CSS określa, w jaki sposób zawartość lub elementy są wyszczególnione w określony sposób, tj. mogą być ułożone schludnie lub losowo, co pomaga w tworzeniu przejrzystej strony internetowej. Ponieważ można je dostosować i są proste w obsłudze, można je wykorzystać do uporządkowania dużych ilości materiału. Domyślny styl listy jest bez obramowania. Listę można podzielić na dwie kategorie:

Lista nieuporządkowana:Domyślnie elementy list nieuporządkowanych są oznaczone punktorami, czyli małymi czarnymi kółkami.Uporządkowana lista:Elementy list na listach uporządkowanych są identyfikowane za pomocą cyfr i liter.

Do kontrolowania list CSS dostępne są następujące właściwości list CSS:

Typ stylu listy:Ta właściwość służy do określenia wyglądu znacznika elementu listy, takiego jak dysk, znak lub niestandardowy styl licznika.Obraz w stylu listy:Za pomocą tego parametru można określić obrazy, które będą służyć jako znaczniki pozycji listy.Pozycja w stylu listy:Opisuje, gdzie powinno znajdować się pole znacznika w stosunku do głównego pola bloku.Styl listy:Styl listy jest konfigurowany za pomocą tego atrybutu.

Dowiemy się teraz więcej o tych cechach na przykładach.

Właściwość typu listy

Domyślny typ listy można zmienić na wiele innych typów, w tym kwadrat, okrąg, cyfry rzymskie, litery łacińskie i wiele innych. Pozycje na liście nieuporządkowanej oznaczane są okrągłymi punktorami (•), natomiast pozycje na liście uporządkowanej domyślnie numerowane są cyframi arabskimi (1, 2, 3 itd.).

Oznaczenia lub kule zostaną usunięte, jeśli ustawimy ich wartość na none.

Składnia:

typ-stylu listy:wartość;

PowerShell mniejszy lub równy

Możemy użyć tej wartości w następujący sposób:

1. koło
2. dziesiętne, np.:1,2,3 itd
3. zera dziesiętne początkowe, np.: 01,02,03,04 itp.
4. dolno-rzymski
5. górno-rzymskie
6. niższa alfa, np. a, b, c itd
7. wyższa alfa, np. A, B, C itd
8. kwadrat

Uwaga: na liście znajdują się także domyślne dopełnienia i marginesy. Konieczne jest dodanie dopełnienia:0 i marginesu:0 do

I
tagi, aby to wyeliminować.

Przykład

Ten przykład pokazuje listę CSS z kilkoma typami w stylu listy i wartościami ustawionymi na kwadrat, górną alfa i wiele.

 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> 

Wyjście