Podcast 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 informacji jest lista. Jak jednak 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 lub od elementu <ul>
, gdzie elementy listy zakupów (elementy: <li>
) były elementami podrzędnymi. Jeśli przyjrzysz się elementom <li>
, zobaczysz, że wszystkie zawierają element display: list-item
, dlatego przeglądarka domyślnie renderuje tag ::marker
.
li {
display: list-item;
}
Istnieją 2 inne typy list.
Porządkowanie list można tworzyć za pomocą funkcji <ol>
. W takim przypadku element listy będzie wyświetlać liczbę jako ::marker
.
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
Listy opisów są tworzone za pomocą funkcji <dl>
, ale ten typ listy nie zawiera elementu listy <li>
.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
Style listy
Wiesz już, jak utworzyć listę, możesz więc ustalić jej styl. Pierwsze wykryte właściwości CSS to te, które zostały zastosowane do całej listy.
Aby określić styl przykładu, możesz użyć trzech właściwości stylu listy: list-style-position
, list-style-image
i list-style-type
.
list-style-position
list-style-position
umożliwia przeniesienie punktora do zawartości elementu inside
lub outside
elementu listy. Wartość domyślna outside
oznacza, że punktor nie jest uwzględniany w zawartości elementów listy, a inside
przenosi pierwszy element wśród zawartości elementu listy.
list-style-image
list-style-image
umożliwia zastępowanie punktów na liście obrazami. Umożliwia to ustawienie obrazu, np. url
lub none
, i ustawianie punktorów jako obrazu, SVG lub GIF-a. Możesz też użyć dowolnego typu nośników, a nawet identyfikatora URI danych.
Przyjrzyjmy się, jak dodać zdjęcie każdego z naszych artykułów spożywczych jako list-style-image
:
list-style-type
Ostatnią opcją jest określenie stylu elementu list-style-type
– w tym przypadku lista zostanie zmieniona na słowa kluczowe w znanym stylu, ciągi niestandardowe, emotikony i inne elementy. 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 umieścić wszystkie style list w jednym wierszu:
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
Funkcja list-style
umożliwia zadeklarowanie kombinacji jednej, dwóch lub trzech właściwości list-style
w dowolnej kolejności. Jeśli ustawione są zarówno list-style-type
, jak i list-style-image
, obraz list-style-type
jest używany jako obraz zastępczy, gdy obraz jest 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ść stylów list omówionych w tej sekcji. Jedną z popularnych zastosowań jest list-style: none
do ukrywania stylów domyślnych. Style domyślne pochodzą z przeglądarki i często można zauważyć, że arkusze stylów są resetowane, usuwając style listy, takie jak dopełnienie i marginesy. Możesz także użyć tego skrótu, aby określić style, np. list-style: square inside;
Do tej pory przykłady koncentrowały się na stylu całej listy i jej elementów, ale co z bardziej szczegółowym podejściem?
::marker
pseudoelement
Znacznik list-item
to kropka, łącznik lub cyfra rzymska, która ułatwia oznaczenie każdej pozycji na liście.
Jeśli sprawdzisz listę w Narzędziach deweloperskich, zobaczysz element ::marker
w przypadku każdego elementu listy, mimo że żaden element nie został zadeklarowany w kodzie HTML. Jeśli przyjrzysz się bliżej tagowi ::marker
, zobaczysz domyślny styl 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;
}
Przy zadeklarowaniu listy każdy element otrzymuje znacznik, mimo że w kodzie HTML nie ma kropki ani cyfry rzymskiej. Jest to pseudoelement, ponieważ przeglądarka generuje go dla Ciebie i udostępnia interfejs API do określania stylu w ograniczonym zakresie, który umożliwia mu kierowanie. Więcej informacji o budowie listy punktowanej CSS ::marker
ma ograniczoną obsługę przeglądarki Safari.
Pudełko z markerem
W modelu układu CSS znaczniki elementów listy są reprezentowane przez pole znacznika powiązanego z każdym elementem listy. Pole znacznika to pojemnik, który zwykle zawiera punktor lub numer.
Aby zmienić styl pola znacznika, możesz użyć selektora ::marker
. W ten sposób możesz wybrać tylko znacznik zamiast określania stylu na podstawie całej listy.
Style znaczników
Po wybraniu znacznika przyjrzyjmy się właściwościom stylu dostępnym w tym selektorze. Więcej informacji o niestandardowych punktorach z zastosowaniem CSS ::marker znajdziesz na stronie web.dev.
Jest sporo dozwolonych właściwości CSS ::marker
:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Wyświetl typ
Wszystkie właściwości list-style
i ::marker
określają styl elementów <li>
, ponieważ ich domyślna wartość wyświetlania to element list-item. Możesz też tworzyć elementy listy z elementów innych niż <li>
.
W tym celu dodaj usługę display: list-item
. Zastosowanie display: list-item
pozwala na przykład uzyskać w nagłówku wycinek z zawieszeniem, tak aby móc zmienić go na inny element za pomocą polecenia ::marker
. Poniższy przykład pokazuje nagłówek, w którym zastosowano display: list-item
do określenia stylu, z listą zawierającą prawidłowe znaczniki listy.
Za pomocą funkcji display
możesz zamienić dowolny widok listy w widok elementów, ale jeśli stylizowana treść to naprawdę lista, nie należy używać tego zamiast prawidłowych znaczników listy. Zmiana wyglądu elementu na element listy nie zmienia sposobu, w jaki usługi ułatwień dostępu odczytują i rozpoznają ten element. Nie zostanie on więc odczytany jako element listy na czytniki ekranu ani na inne urządzenia. Gdy tylko jest to możliwe, używaj znaczników semantycznych i twórz listy za pomocą atrybutu <li>
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o listach
Element poprzedzający element listy jest nazywany
::marker
::bullet
::pencil
::counter
Trzy typy list HTML to
<ol>
<ul>
<lo>
<li>
<dl>
<list>
Które 2 style z tej listy będą stosować style do elementu ::marker
?
color
transition
display
background-color