Listy CSS

Rekomendacje kursów:

Listy CSS

Atrybuty listy CSS pozwalają na umieszczanie, zmianę znaku listy lub używanie obrazu jako znaku listy.

W pewnym sensie, każda treść, która nie jest opisowym tekstem, może być uważana za listę. Spis ludności, układ słoneczny, genealogia, menu zwiedzania, nawet wszyscy Twoi przyjaciele mogą być przedstawieni jako lista lub lista list.

Ponieważ listy są tak różnorodne, są one bardzo ważne, więc brak bogatej listy stylów w CSS jest dużą stratą.

Typ listy

Na przykład, w liście niezorganizowanej, znak listy (marker) pojawia się obok każdego elementu listy. W liście uporządkowanej, znak może być literą, liczbą lub symbolem z innej systemu liczenia. Aby wpłynąć na styl listy, najprostszym (i najbardziej wszechstronnym) sposobem jest zmiana typu znaku.

Aby zmienić typ znaku używanego w elementach listy, można użyć atrybutu list-style-type:

ul {list-style-type : square}

Powyższe wyrażenie ustawia znak listy w liście niezorganizowanej na kwadrat.

Obraz elementu listy

Czasami, standardowe znaki są niewystarczające. Możesz użyć różnych obrazów dla różnych znaków, co można zrobić za pomocą: list-style-image Atrybut działa:

ul li {list-style-image : url(xxx.gif)}

Wystarczy użyć prostego wartości url(), aby użyć obrazu jako znaku.

Pozycja znaku listy

CSS2.1 może określić, czy znak znajduje się poza treścią elementu listy, czy wewnątrz. list-style-position Zakończone.

Skrócona lista stylów

Dla uproszczenia, można połączyć powyższe 3 atrybuty listy w jedną wygodną atrybut:list-styleJak tutaj:

li {list-style : url(example.gif) square inside}

Wartości list-style mogą być wymienione w dowolnej kolejności, a wszystkie mogą być pominięte. Wystarczy podać jedną wartość, inne zostaną wypełnione wartościami domyślnymi.

Przykład listy CSS:

Znaczniki różnych typów elementów listy w liście niezorganizowanej
Ten przykład pokazuje różne typy znaczników listy w CSS.
Znaczniki różnych typów elementów listy w uporządkowanej liście
Ten przykład pokazuje różne typy znaczników listy w CSS.
Wszystkie typy stylów listy
Ten przykład pokazuje wszystkie różne typy znaczników listy w CSS.
Użycie obrazu jako znacznika listy
Ten przykład pokazuje, jak używać obrazu jako znacznika listy.
Umieszczanie znaczników listy
Ten przykład pokazuje, gdzie umieścić znaczniki listy.
Definiowanie wszystkich atrybutów listy w jednym deklaracji
Ten przykład pokazuje, jak ustawić wszystkie atrybuty listy w jednym skróconym atrybucie.

Atrybuty listy CSS(list)

Atrybut Opis
list-style Atrybut skrócony. Używany do ustawienia wszystkich atrybutów listy w jednym deklaracji.
list-style-image Ustawienie obrazu jako znacznika listy.
list-style-position Ustawienie pozycji znacznika listy w liście.
list-style-type Ustawienie typu znacznika listy.
marker-offset