Listy

Podcast o CSS – 030: listy

Wyobraź sobie, że masz kilka produktów, które planujesz kupić podczas następnej wizyty w sklepie spożywczym. Jednym z typowych sposobów przedstawienia tych danych 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 rozpoczynała się od elementu semantycznego (<ul>) od elementu listy zakupów (elementy <li>) jako elementów podrzędnych. Po sprawdzeniu każdego elementu <li> możesz zobaczyć, że zawiera on element display: list-item. Dlatego przeglądarka domyślnie renderuje element ::marker.

li {
  display: list-item;
}

Są jeszcze dwa inne typy list.

Listy uporządkowane można tworzyć za pomocą parametru <ol>. W takim przypadku element listy będzie zawierał liczbę podaną w polu ::marker.

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

Listy opisów są tworzone za pomocą właściwości <dl>, jednak ten typ listy nie korzysta z elementu elementu listy <li>.

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

Style listy

Obsługa przeglądarek

  • 1
  • 12
  • 1
  • 1

Źródło

Już wiesz, jak utworzyć listę, aby dostosować jej styl. Pierwsze do odkrycia właściwości CSS to te, które zostały zastosowane do całej listy.

Istnieją 3 właściwości stylu listy, których możesz użyć do określenia stylu przykładu: list-style-position, list-style-image i list-style-type.

list-style-position

list-style-position pozwala przenieść punktor do zawartości elementu listy pod pozycją inside lub outside. Wartość domyślna outside oznacza, że punktor nie jest uwzględniony w zawartości elementu listy, a inside przenosi pierwszy element w zawartości elementu listy.

listy z tagiem „zewnętrzna” i „wewnątrzną” ::marker, która wskazuje, że „zewnętrzny” (wartość domyślna) nie ma na liście elementu listy i znajduje się w polu zawartości elementu listy.

list-style-image

list-style-image umożliwia zastępowanie punktorów listą obrazami. Dzięki temu możesz ustawić obrazy, takie jak url lub none, aby punktory stały się obrazami, obrazami SVG lub GIF-ami. Możesz też użyć dowolnego typu mediów lub nawet identyfikatora URI danych.

Zobaczmy, jak dodać zdjęcie każdego z produktów spożywczych jako list-style-image:

list-style-type

Ostatnią opcją jest nadanie stylu elementu list-style-type, co spowoduje zmianę punktacji na słowa kluczowe związane ze znanym stylem, ciągami tekstowymi niestandardowymi, emotikonami i innymi elementami. Wszystkie możliwe typy stylów listy znajdziesz tutaj.

list-style – skrót

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 zadeklarowanie kombinacji jednej, dwóch lub trzech właściwości list-style w dowolnej kolejności. Jeśli ustawiono zarówno parametr list-style-type, jak i list-style-image, wtedy parametr list-style-type jest używany jako kreacja zastępcza na wypadek, gdyby obraz był niedostępny.

/* 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ść w stylach list omówionych w tej sekcji. Jedną z częstych aplikacji jest list-style: none do ukrycia stylów domyślnych. Style domyślne pochodzą z przeglądarki i często resetuje się arkusz stylów, który powoduje usunięcie stylów listy, takich jak dopełnienie czy marginesy. Możesz też używać tego skrótu do ustawiania stylów, np. list-style: square inside;

Do tej pory przykłady skupiały się na określaniu stylu całej listy i jej elementów, ale co z bardziej szczegółowym podejściem?

Pseudoelement ::marker

Znacznik list-item to punktor, łącznik lub cyfra rzymska, który pomaga wskazać każdy element na liście.

Lista z 3 elementami, która wskazuje, że każdy z punktorów jest pseudoelementami ::marker.

Jeśli wyświetlisz listę w Narzędziach deweloperskich, możesz zobaczyć element ::marker dla każdego elementu listy, mimo że żaden nie został zadeklarowany w kodzie HTML. Jeśli przyjrzysz się bliżej kreacji ::marker, zobaczysz jej domyślny styl w przeglądarce.

::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;
}

Podczas zadeklarowania listy każdy element otrzymuje znacznik, mimo że w kodzie HTML nie ma żadnych punktorów ani cyfr rzymskich. Jest to pseudoelement, ponieważ generuje go dla Ciebie przeglądarka i udostępnia ograniczony interfejs API stylu do kierowania reklam. Więcej informacji o budowie punktora CSS ::marker ma ograniczoną obsługę w Safari.

Pole markera

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

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

Style znaczników

Teraz, gdy masz już wybrany znacznik, przyjrzyjmy się właściwościom stylu dostępnym dla tego selektora. Więcej informacji o punktorach niestandardowych w pliku CSS ::marker znajdziesz na stronie web.dev.

Kilka właściwości CSS ::marker jest dozwolonych:

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

Wyświetl typ

Wszystkie właściwości list-style i ::marker wiedzą, jak stylizować elementy <li>, ponieważ mają one domyślną wartość wyświetlaną elementu listy. W elemencie listy możesz też tworzyć elementy, które nie należą do typu <li>.

W tym celu musisz dodać właściwość display: list-item. Przykładem zastosowania elementu display: list-item jest możliwość umieszczenia punktora w nagłówku, aby umożliwić jego zmianę na inny element za pomocą właściwości ::marker. Poniższy przykład pokazuje nagłówek z zastosowaniem atrybutu display: list-item do określenia stylu, a lista zawiera prawidłowe znaczniki listy.

Za pomocą funkcji display możesz przekształcić dowolny element w widok elementów listy, ale nie używaj tego atrybutu zamiast prawidłowych znaczników listy. Jeśli treść, której stylujesz, tak naprawdę jest listą. Zmiana wyglądu elementu na element listy nie zmienia sposobu, w jaki usługi ułatwień dostępu odczytują i rozpoznają dany element, dlatego nie zostanie on odczytany przez czytniki ekranu ani na inne urządzenie. Zawsze używaj znaczników semantycznych i w miarę możliwości twórz listy za pomocą właściwości <li>.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o listach

Element poprzedzający element listy jest nazywany elementem

::kropka
Spróbuj ponownie.
::ołówek
Spróbuj ponownie.
::znacznik
Dobrze!
::licznik
Spróbuj ponownie.

Trzy typy list HTML to

<dl>
Dobrze!
<lo>
Spróbuj ponownie.
<ol>
Dobrze!
<li>
Spróbuj ponownie.
<ul>
Dobrze!
<list>
Spróbuj ponownie.

Które dwa style z tej listy będą miały zastosowanie do znaczników ::marker?

transition
Dobrze!
background-color
Spróbuj ponownie.
color
Dobrze!
display
Spróbuj ponownie.

Zasoby