Listy CSS

Lista nies排序owa:

  • Kawa
  • Herbata
  • Coca Cola
  • Kawa
  • Herbata
  • Coca Cola

Lista uporządkowana:

  1. Kawa
  2. Herbata
  3. Coca Cola
  1. Kawa
  2. Herbata
  3. Coca Cola

Listy w HTML i atrybuty CSS

W HTML istnieją dwa główne typy list:

  • Lista nies排序owa (ul) - elementy listy są oznaczone znakami punktowymi
  • Lista uporządkowana (ol) - elementy listy są oznaczone liczbami lub literami

Atrybuty listy w CSS pozwalają na:

  • Ustawianie różnych znaczników elementów listy dla listy sortowanych
  • Ustawianie różnych znaczników elementów listy dla listy nies排序owych
  • Ustawianie obrazu jako znacznika elementu listy
  • Dodawanie tła do listy i elementów listy

Różne znaczniki elementów listy

list-style-type Atrybut określa typ znacznika elementu listy.

Poniższy przykład pokazuje dostępne znaczniki 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;
}

Spróbuj sam

Komentarz:Niektóre wartości są używane dla listy nies排序owych, a inne dla listy sortowanych.

Obraz jako znacznik elementu listy

list-style-image Atrybut przypisuje obraz jako znacznik elementu listy:

Przykład

ul {
  list-style-image: url('sqpurple.gif');
}

Spróbuj sam

Umieszczanie znacznika elementu listy

list-style-position Atrybut określa pozycję znacznika elementu listy (punktu listy).

"list-style-position: outside;" oznacza, że punkt listy będzie poza elementem listy. Początek każdej linii elementu listy będzie wyrównany wertykalnie. Jest to domyślne:

  • Kawa - napój parzony z uprażonych ziaren kawy
  • Herbata
  • Coca-cola

"list-style-position: inside;" Oznacza to, że znacznik punktu listy będzie wewnątrz punktu listy. Jako część punktu listy, stanie się częścią tekstu i zostanie wysunięty na początku:

  • Kawa - napój parzony z uprażonych ziaren kawy
  • Herbata
  • Coca-cola

Przykład

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Spróbuj sam

Usuwanie domyślnych ustawień

list-style-type:none Atrybuty te mogą również być używane do usunięcia znacznika/listy punktów. Proszę zauważyć, że lista ma również domyślne marginesy i wewnętrzne marginesy. Aby usunąć te wartości, dodaj do <ul> lub <ol> margin:0 i padding:0 :

Przykład

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Spróbuj sam

Lista - atrybut skrócony

list-style Atrybut jest atrybutem skróconym. Używa się go do ustawienia wszystkich atrybutów listy w jednym wyrażeniu:

Przykład

ul {
  list-style: square inside url("sqpurple.gif");
}

Spróbuj sam

Podczas użycia uproszczonych atrybutów kolejność wartości atrybutów wynosi:

  • list-style-type(Jeśli ustawiono list-style-image, a obraz nie może być wyświetlony z jakiegoś powodu, zostanie wyświetlona wartość tego atrybutu)
  • list-style-position(Ustawienie, czy znacznik punktu listy powinien być wyświetlany wewnątrz, czy na zewnątrz strumienia treści)
  • list-style-image(Ustawienie obrazu jako znacznika punktu listy)

Jeśli brakuje jednej z tych wartości atrybutów, zostanie użyta domyślna wartość (jeśli istnieje).

Ustawienia kolorystyczne listy

Możemy również użyć ustawień kolorów, aby stylizować listy, aby wyglądały bardziej interesująco.

Każdy styl dodany do znaczników <ol> lub <ul> wpływa na całą listę, podczas gdy atrybuty dodane do znacznika <li> wpływają na poszczególne punkty 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:

  1. Kawa
  2. Herbata
  3. Coca Cola
  • Kawa
  • Herbata
  • Coca Cola

Spróbuj sam

Więcej przykładów

Niestandardowa lista z czerwonym boku
Ten przykład pokazuje, jak utworzyć listę z czerwonym boku
Lista z paskiem boku pełnej szerokości
Ten przykład pokazuje, jak utworzyć listę z brakującymi punktami i ramką.
Wszystkie różne znaczniki listy
Ten przykład pokazuje wszystkie różne znaczniki listy w CSS.

Wszystkie atrybuty listy CSS

Atrybut Opis
list-style Atrybut skrócony. Ustawia wszystkie atrybuty listy w jednym deklaracji.
list-style-image Określa obraz jako znacznik listy.
list-style-position Określa pozycję znacznika listy (punktów).
list-style-type Określa typ znacznika listy.