Ostatnia aktualizacja 31 stycznia, 2024
CSS udostępnia możliwość stylizowania list za pomocą właściwości list-style. Wspomniana właściwość pozwala na zmianę wyglądu znaczników, ich pozycjonowanie, a nawet zastąpienie ich obrazami. Niniejszy artykuł przybliża sposób użycia właściwości list-style w kontekście personalizacji oraz tworzenia atrakcyjnych i funkcjonalnych list w dokumentach HTML. Zapoznaj się z poniższymi przykładami kodu.
CSS list-style a typy list
list-style-type pozwala na zmianę typu znaczników listy. Oto kilka przykładów:
Domyślny
ul {
list-style-type: disc;
}Powyższy fragment kodu CSS nakazuje przeglądarce wyświetlać wszystkie elementy <ul> na stronie z punktorami w postaci pełnych kółek (disc). To podstawowy sposób na dodanie stylizacji do list nieuporządkowanych, co czyni treść bardziej czytelną i estetycznie przyjemną. Wyjaśniając bardziej szczegółowo poszczególne elementy:
- Selektor (
ul): Ten selektor CSS wskazuje na wszystkie elementy<ul>w dokumencie HTML.<ul>oznacza “unordered list” czyli listę nieuporządkowaną, która zwykle wyświetlana jest z punktorami. - Deklaracja (
list-style-type: disc;): Wewnątrz nawiasów klamrowych{}znajduje się deklaracja CSS, która określa, jak elementy wybranego selektora (ulw tym przypadku) powinny być stylizowane.- Właściwość (
list-style-type): Ta właściwość CSS odpowiada za wygląd punktorów listy. Kontroluje ona, jakiego typu znaczniki będą użyte dla elementów listy. - Wartość (
disc):discjest jedną z wielu wartości, które można przypisać dolist-style-type. Oznacza to, że punktory listy będą wyświetlane jako pełne kółka (dyski). Jest to domyślny styl punktorów dla list nieuporządkowanych w większości przeglądarek internetowych.
- Właściwość (
Koła
ul {
list-style-type: circle;
}Ten fragment kodu CSS instruuje przeglądarkę, aby wyświetlała wszystkie elementy <ul> z pustymi kółkami (circle) jako punktory.
Kwadraty
ul {
list-style-type: square;
}Kod powyżej daje instrukcję przeglądarce, aby elementy <ul> wyświetlała z punktorami w kształcie kwadratów. Wybór stylu punktorów zależy od designu całej strony oraz preferencji projektanta.
Pozycjonowanie znaczników we właściwości list-style
Właściwość list-style-position kontroluje, gdzie znaczniki listy będą umieszczone w stosunku do treści. Przykłady kodu mogą wyglądać następująco:
ul {
list-style-position: outside;
}Domyślny format to umiejscowienie znaczników na zewnątrz linii tekstu. Dzięki temu treść listy jest lekko wcięta względem punktorów, co pomaga w wizualnym oddzieleniu punktorów od treści i zwiększa czytelność listy. To. powszechnie stosowana metoda stylizacji list, która nadaje dokumentom HTML uporządkowany i estetycznie przyjemny wygląd.
ul {
list-style-position: inside;
}Ten fragment kodu CSS kieruje przeglądarkę do wyświetlania punktorów listy <ul> wewnątrz linii treści. Prowadzi to do bardziej zwartej prezentacji listy i może być użyteczne w różnych kontekstach projektowania stron internetowych.
Obrazy jako znaczniki
Możesz użyć obrazów jako znaczników listy za pomocą list-style-image.
ul {
list-style-image: url('path/to/image.png');
}W tym miejscu CSS instruuje przeglądarkę, aby punktory reprezentowała wskazana w ścieżce grafika. Nie jest to jednak optymalny sposób np. przez możliwość zaistnienia problemów z wyświetlaniem danego obrazu.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
