Listy CSS
Listy nieuporządkowane:
- Kawa
- Herbata
- Koks
- Kawa
- Herbata
- Koks
Listy uporządkowane:
- Kawa
- Herbata
- Koks
- Kawa
- Herbata
- Koks
Listy HTML i właściwości list CSS
W HTML istnieją dwa główne typy list:
- listy nieuporządkowane (<ul>) - pozycje listy są oznaczone punktorami
- listy uporządkowane (<ol>) - pozycje listy oznaczane są cyframi lub literami
Właściwości listy CSS umożliwiają:
- Ustaw różne znaczniki pozycji listy dla uporządkowanych list
- Ustaw różne znaczniki elementów listy dla nieuporządkowanych list
- Ustaw obraz jako znacznik elementu listy
- Dodaj kolory tła do list i elementów list
Różne znaczniki pozycji listy
Właściwość list-style-typeokreśla typ znacznika elementu listy.
Poniższy przykład przedstawia niektóre z dostępnych znaczników elementów listy:
Przykład
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Uwaga: Niektóre wartości dotyczą list nieuporządkowanych, a niektóre list uporządkowanych.
Obraz jako znacznik elementu listy
Właściwość list-style-imageokreśla obraz jako znacznik elementu listy:
Przykład
ul
{
list-style-image: url('sqpurple.gif');
}
Umieść znaczniki pozycji na liście
Właściwość list-style-positionokreśla położenie znaczników pozycji listy (punktów).
"list-style-position: outside;" oznacza, że punktory będą znajdować się poza elementem listy. Początek każdego wiersza elementu listy zostanie wyrównany w pionie. To jest domyślne:
- Kawa - Warzony napój przygotowany z palonych ziaren kawy...
- Herbata
- Koks
"list-style-position: inside;" oznacza, że punktory będą znajdować się wewnątrz elementu listy. Ponieważ jest częścią elementu listy, będzie częścią tekstu i popchnie tekst na początku:
- Kawa - Warzony napój przygotowany z palonych ziaren kawy...
- Herbata
- Koks
Przykład
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Usuń ustawienia domyślne
Właściwość list-style-type:nonemoże być również wykorzystana do usunięcia znaczników/pocisków. Zauważ, że lista ma również domyślny margines i dopełnienie. Aby to usunąć, dodaj margin:0i padding:0do <ul> lub <ol>:
Przykład
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Lista - Własność skrócona
Właściwość list-stylejest własnością skróconą. Służy do ustawienia wszystkich właściwości listy w jednej deklaracji:
Przykład
ul
{
list-style: square inside url("sqpurple.gif");
}
Podczas korzystania z właściwości skróconej kolejność wartości właściwości jest następująca:
list-style-type(jeśli określono obraz w stylu listy, wartość tej właściwości zostanie wyświetlona, jeśli obraz z jakiegoś powodu nie może zostać wyświetlony)list-style-position(określa, czy znaczniki elementów listy powinny pojawiać się wewnątrz lub na zewnątrz przepływu treści)list-style-image(określa obraz jako znacznik elementu listy)
Jeśli brakuje jednej z powyższych wartości właściwości, zostanie wstawiona wartość domyślna brakującej właściwości, jeśli taka istnieje.
Lista stylizacji z kolorami
Możemy również stylizować listy kolorami, aby wyglądały trochę ciekawiej.
Wszystko dodane do znacznika <ol> lub <ul> wpływa na całą listę, podczas gdy właściwości dodane do znacznika <li> będą miały wpływ na poszczególne elementy listy:
Przykład
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
Wynik:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Więcej przykładów
Ten przykład pokazuje, jak utworzyć listę z czerwonym lewym obramowaniem.
W tym przykładzie pokazano, jak utworzyć listę z obramowaniem bez punktorów.
Ten przykład ilustruje wszystkie różne znaczniki list-item w CSS.
Wszystkie właściwości listy CSS
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |