Listy

Wyobraź sobie, że masz wiele produktów, które planujesz kupić podczas następnego zakupów. Jednym z najczęściej stosowanych sposobów wizualnego przedstawienia tego jest lista, ale jak dodać styl do listy zakupów?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Tworzenie listy

Poprzednia lista zaczynała się elementem semantycznym <ul>, a jej elementami podrzędnymi były elementy listy zakupów (elementy <li>). Jeśli przyjrzysz się każdemu elementowi <li>, zauważysz, że wszystkie mają wartość display: list-item, dlatego przeglądarka domyślnie renderuje element ::marker.

li {
  display: list-item;
}

Istnieją 2 inne typy list.

Uporządkowane listy można tworzyć za pomocą elementu <ol>. W takim przypadku element listy będzie wyświetlać liczbę jako element ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Listy opisów są tworzone za pomocą elementu <dl>, ale ten typ listy nie używa elementu listy <li>.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Style list

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Teraz, gdy już wiesz, jak utworzyć listę, możesz nadać jej styl. Najpierw wykrywane są właściwości usług porównywania cen, które są stosowane do całej listy.

Do nadawania stylów przykładom możesz użyć 3 właściwości stylu listy: list-style-position, list-style-imagelist-style-type.

list-style-position

list-style-position umożliwia przeniesienie punktuor do pozycji inside lub outside na liście. Domyślna wartość outside oznacza, że punkt nie jest uwzględniany w zawartości elementu listy, natomiast wartość inside przenosi pierwszy element w zawartości elementu listy.

Lista z obiema wartościami ::marker, które wskazują, że wartość outside (wartość domyślna) nie znajduje się w elemencie listy, ale w polu treści elementu listy.

list-style-image

list-style-image pozwala zastąpić punktory listy obrazami. Dzięki temu możesz ustawić obraz, np. url lub none, aby punkty były obrazem, plikiem SVG lub GIF. Możesz też użyć dowolnego typu multimediów lub nawet identyfikatora URI danych.

Zobaczmy, jak dodać obraz każdego produktu spożywczego jako list-style-image:

list-style-type

Ostatnią opcją jest nadanie stylów za pomocą list-style-type, co zmienia punkty na znane słowa kluczowe, niestandardowe ciągi znaków, emotikony itp. Wszystkie możliwe typy stylów list znajdziesz tutaj.

list-style skrót

Teraz, gdy masz już wszystkie te właściwości, możesz użyć skrótu list-style, aby ustawić wszystkie style listy w jednym wierszu:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style umożliwia deklarowanie kombinacji 1, 2 lub 3 właściwości list-style w dowolnej kolejności. Jeśli zarówno list-style-type, jak i list-style-image są ustawione, w przypadku niedostępności obrazu używany jest obrazlist-style-type.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Jest to najczęściej używana właściwość stylów list omawianych w tej sekcji. Jedną z częstych zastosowań jest użycie list-style: none do ukrycia domyślnych stylów. Style domyślne pochodzą z przeglądarki i często widzisz zresetowane arkuszy stylów, które usuwają style list, takie jak odstępy i marginesy. Możesz też użyć tej skrótu do ustawiania stylów, np. list-style: square inside;

Do tej pory przykłady koncentrowały się na nadawaniu stylu całej liście i jej elementom, ale co z dokładniejszym podejściem?

Element pseudo ::marker

Element znacznika list-item to znak odstępu, łącznik lub cyfra rzymska, który pomaga wskazać poszczególne elementy na liście.

Lista z 3 elementami, która pokazuje, że każdy z punktów jest pseudoelementem ::marker.

Jeśli zbadasz listę w narzędziach dla deweloperów, zobaczysz element ::marker dla każdego elementu listy, mimo że nie zadeklarowano żadnego w HTML. Jeśli przyjrzysz się ::marker, zobaczysz styl domyślny przeglądarki.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Gdy zadeklarujesz listę, każdy element zostanie oznaczony, mimo że w kodzie HTML nie ma znaku na strzałkę ani cyfry rzymskiej. Jest to pseudoelement, ponieważ przeglądarka generuje go za Ciebie i zapewnia ograniczony interfejs API do stylizacji. Więcej informacji o cechach produktu w usługach porównywania cen ::marker ma ograniczoną obsługę w Safari.

Pole znacznika

W modelu układu CSS znaczniki elementów listy są reprezentowane przez pole znacznika powiązane z każdym elementem listy. Pole znacznika to kontener, który zwykle zawiera punktor lub numer.

Aby zmienić styl pola znacznika, możesz użyć selektora ::marker. Dzięki temu możesz wybrać tylko znacznik zamiast stylizacji na podstawie całej listy.

Style znaczników

Po wybraniu znacznika przyjrzyjmy się właściwościom stylizacji dostępnym dla tego selektora. Więcej informacji o niestandardowych punktach z użyciem atrybutu CSS ::marker znajdziesz na stronie web.dev.

Dozwolonych właściwości CSS ::marker jest sporo:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Wyświetl typ

Wszystkie nasze właściwości list-style i ::marker wiedzą, jak stylizować elementy <li>, ponieważ mają domyślną wartość wyświetlania list-item. Możesz też tworzyć elementy listy, które nie są elementami <li>.

Aby to zrobić, dodaj właściwość display: list-item. Przykładem użycia display: list-item jest sytuacja, gdy chcesz umieścić w nagłówku odsyłacz, który można zmienić na coś innego za pomocą ::marker. Ten przykład pokazuje nagłówek, który używa elementu display: list-item do stylizacji, oraz listę z prawidłowym znacznikiem listy.

Chociaż za pomocą atrybutu display możesz przekształcić dowolny element w widok elementu listy, nie powinieneś używać go zamiast prawidłowego znacznika listy, jeśli stylizowana treść jest rzeczywiście listą. Zmiana wizualnego wyglądu elementu na element listy nie zmienia sposobu odczytu i rozpoznawania elementu przez usługi ułatwień dostępu, więc nie będzie on odczytywany jako element listy przez czytniki ekranu ani urządzenia z przełącznikami. W miarę możliwości zawsze używaj znaczników semantycznych i twórz listy za pomocą <li>.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o listach

Element poprzedzający element listy nazywa się

::counter
::marker
::bullet
::pencil

Występują 3 typy list HTML:

<dl>
<li>
<ol>
<ul>
<lo>
<list>

Które 2 style z tej listy zostaną zastosowane do ::marker?

color
background-color
display
transition

Zasoby