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
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.
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.
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
Trzy typy list HTML to
<dl>
<lo>
<ol>
<li>
<ul>
<list>
Które dwa style z tej listy będą miały zastosowanie do znaczników ::marker?
transition
background-color
color
display