Lista w CSS umożliwia uporządkowanie informacji w sposób przejrzysty i łatwy do zrozumienia. Poniżej przedstawię, jak tworzyć listy w HTML oraz jak je stylizować za pomocą CSS, aby nadać im atrakcyjny wygląd.
Tworzenie list w HTML
HTML obsługuje dwa główne typy list:
- Listy nieuporządkowane (
<ul>
) - Listy uporządkowane (
<ol>
)
Listy nieuporządkowane (<ul>
)
Listy nieuporządkowane są używane, gdy kolejność elementów nie ma znaczenia. Co więcej każdy element listy jest poprzedzony punktorami (bullet points).
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
Listy uporządkowane (<ol>
)
Listy uporządkowane są używane, gdy elementy mają być numerowane. W tym przypadku każdy element listy jest oznaczony za pomocą numeru.
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
Stylizowanie list za pomocą CSS
Przede wszystkim CSS daje nam wiele możliwości stylizowania list, w tym zmiany typu punktorów, odstępów, kolorów i innych aspektów wyglądu. Dlatego niżej omówię kilka podstawowych właściwości CSS, które są używane do stylizacji list.
Właściwość list-style-type
list-style-type
określa typ markera używanego dla elementów listy.
Przykłady:
disc
– domyślny punktor (kropka) dla list nieuporządkowanychcircle
– okrągły punktorsquare
– kwadratowy punktornone
– brak markeradecimal
– domyślny numer dla list uporządkowanychroman
– numery rzymskie (duże litery)lower-alpha
– małe litery alfabetu
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-alpha;
}
Właściwość list-style-image
list-style-image
pozwala użyć obrazu jako punktor listy.
ul {
list-style-image: url('path/to/image.png');
}
Właściwość list-style-position
list-style-position
określa, gdzie ma być wyświetlany punktor – wewnątrz (inside
) lub na zewnątrz (outside
) elementu listy.
ul {
list-style-position: inside;
}
Właściwość list-style
list-style
jest skrótem umożliwiającym jednoczesne ustawienie list-style-type
, list-style-position
oraz list-style-image
.
ul {
list-style: square inside url('path/to/image.png');
}
Stylizowanie list CSS – przykłady
Niestandardowe punkty listy
Stylizowanie listy z kwadratowymi punktorami i wyrównaniem wewnętrznym.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista z kwadratowymi punktorami</title>
<style>
ul.custom-list {
list-style-type: square;
list-style-position: inside;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul class="custom-list">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
</body>
</html>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Obrazki jako punkty listy
Stylizowanie listy z obrazkami jako punktorami.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista z obrazkami jako punktorami</title>
<style>
ul.image-list {
list-style-image: url('path/to/image.png');
padding: 10px;
}
</style>
</head>
<body>
<ul class="image-list">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
</body>
</html>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Listy uporządkowane z numeracją rzymską
Stylizowanie listy uporządkowanej z numeracją rzymską.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista uporządkowana z numeryzacją rzymską</title>
<style>
ol.roman-list {
list-style-type: upper-roman;
padding: 10px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<ol class="roman-list">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
</body>
</html>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Zagnieżdżone listy
Listy mogą być również zagnieżdżane, co oznacza, że możemy umieszczać listy wewnątrz innych list. Co więcej stylizacja takich zagnieżdżonych list może być dostosowana do różnych poziomów.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zagnieżdżone Listy</title>
<style>
ul.nested-list {
list-style-type: disc;
}
ul.nested-list ul {
list-style-type: circle;
padding-left: 20px;
}
ul.nested-list ul ul {
list-style-type: square;
padding-left: 20px;
}
</style>
</head>
<body>
<ul class="nested-list">
<li>Punkt pierwszy
<ul>
<li>Punkt pierwszy.1
<ul>
<li>Punkt pierwszy.1.1</li>
<li>Punkt pierwszy.1.2</li>
</ul>
</li>
<li>Punkt pierwszy.2</li>
</ul>
</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
</body>
</html>
- Punkt pierwszy
- Punkt pierwszy.1
- Punkt pierwszy.1.1
- Punkt pierwszy.1.2
- Punkt pierwszy.2
- Punkt pierwszy.1
- Punkt drugi
- Punkt trzeci
W powyższym przykładzie mamy trzy poziomy list, z różnymi stylami punktorów dla każdego poziomu.
Dodawanie odstępów i tła
Dzięki CSS możemy również dodawać odstępy między elementami listy oraz definiować tła.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odstępy i Tło Listy</title>
<style>
ul.styled-list {
list-style-type: disc;
padding: 20px;
background-color: #f9f9f9;
}
ul.styled-list li {
margin-bottom: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
</style>
</head>
<body>
<ul class="styled-list">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
</body>
</html>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
W tym przykładzie dodaliśmy odstępy między elementami listy oraz tło, aby lista wyglądała bardziej estetycznie.
Niestandardowe punktory za pomocą ::before
Aby uzyskać pełną kontrolę nad wyglądem punktorów, możemy użyć pseudoelementu ::before
. Dzięki temu możemy wstawić dowolny znak lub obraz przed każdym elementem listy.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Niestandardowy Punktator</title>
<style>
ul.custom-bullet {
list-style: none; /* Ukrywa domyślne punktory */
padding-left: 0; /* Usuwa domyślne wcięcie */
}
ul.custom-bullet li {
position: relative; /* Ustawia kontekst pozycyjny dla ::before */
padding-left: 20px; /* Odstęp dla niestandardowego punktora */
}
ul.custom-bullet li::before {
content: '★'; /* Ustawia niestandardowy znak */
position: absolute;
left: 0;
top: 0;
color: gold;
}
</style>
</head>
<body>
<ul class="custom-bullet">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
</body>
</html>
- Punkt pierwszy
- Punkt drugi
- Punkt trzeci
Sprawdź również inne znaki specjalne.
Lista CSS – podsumowanie
Podsumowując listy w HTML i CSS ułatwiają organizowanie i prezentowanie informacji w sposób uporządkowany i estetyczny. Dlatego zrozumienie podstaw tworzenia i stylizacji list umożliwia tworzenie bardziej zorganizowanych i czytelnych stron internetowych. Co więcej praktyka i eksperymentowanie z różnymi stylami i właściwościami CSS pomogą opanować te techniki i tworzyć bardziej zaawansowane układy. Sprawdź również jak zmienić domyślny kolor i styl wypunktowania listy. Pamiętaj, aby testować swoje projekty w różnych przeglądarkach, aby upewnić się, że wyglądają i działają zgodnie z oczekiwaniami użytkowników.