Lista do CSS

Lista não ordenada:

  • Café
  • Chá
  • Coca Cola
  • Café
  • Chá
  • Coca Cola

Lista ordenada:

  1. Café
  2. Chá
  3. Coca Cola
  1. Café
  2. Chá
  3. Coca Cola

Listas HTML e propriedades de lista do CSS

No HTML, há dois tipos principais de listas:

  • Lista não ordenada (ul) - os itens da lista são marcados por pontos de lista
  • Lista ordenada (ol) - os itens da lista são marcados por números ou letras

As propriedades de lista do CSS permitem que você:

  • Definir diferentes marcadores de itens de lista para lista ordenada
  • Definir diferentes marcadores de itens de lista para lista não ordenada
  • Definir imagem como marcador do item da lista
  • Adicionar cor de fundo para lista e item da lista

Diferentes marcadores de itens de lista

list-style-type A propriedade especifica o tipo do marcador do item da lista.

O exemplo a seguir mostra alguns marcadores de itens de lista disponíveis:

Exemplo

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;
}

Experimente você mesmo

Nota:Alguns valores são usados para listas não ordenadas, enquanto outros são usados para listas ordenadas.

A imagem como marcador do item da lista

list-style-image A propriedade especifica uma imagem como marcador do item da lista:

Exemplo

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

Experimente você mesmo

Posicionar o marcador do item da lista

list-style-position A propriedade especifica a posição do marcador do item da lista (ponto de lista).

"list-style-position: outside;" significa que o ponto de lista estará fora do item da lista. O início de cada linha do item da lista será alinhado verticalmente. Isso é o padrão:

  • Café - Bebida infusão feita com grãos de café torrado
  • Chá
  • Coca-cola

"list-style-position: inside;" Significa que o marcador de lista estará dentro do item da lista. Como é parte do item da lista, ele se tornará parte do texto e será empurrado para a frente do texto:

  • Café - Bebida infusão feita com grãos de café torrado
  • Chá
  • Coca-cola

Exemplo

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

Experimente você mesmo

Remover configurações padrão

list-style-type:none A propriedade também pode ser usada para remover marcadores/símbolos. Observe que a lista também possui margem e preenchimento padrão. Para remover esse conteúdo, adicione em <ul> ou <ol>: margin:0 e padding:0 :

Exemplo

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

Experimente você mesmo

Lista - Atributo abreviado

list-style A propriedade é um atributo abreviado. Ele é usado para definir todos os atributos de lista em uma declaração:

Exemplo

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

Experimente você mesmo

Ao usar atributos abreviados, a ordem dos valores dos atributos é:

  • list-style-type(Se for especificado list-style-image e a imagem não puder ser exibida por algum motivo, este valor será exibido)
  • list-style-position(Especificar se o marcador de item deve ser exibido dentro ou fora da corrente de conteúdo)
  • list-style-image(Especificar a imagem como marcador de item da lista)

Se falta algum dos valores de propriedade acima, será inserido o valor padrão ausente (se houver).

Configurar estilo de cor da lista

Também podemos usar configurações de cor para definir estilos de lista, tornando-as mais interessantes.

Qualquer estilo adicionado a <ol> ou <ul> afetará toda a lista, enquanto as propriedades adicionadas a <li> afetarão cada item da lista:

Exemplo

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;
}

Resultado:

  1. Café
  2. Chá
  3. Coca Cola
  • Café
  • Chá
  • Coca Cola

Experimente você mesmo

Mais exemplos

Lista personalizada com borda esquerda vermelha
Este exemplo demonstra como criar uma lista com borda esquerda vermelha.
Lista de borda de largura total da tela
Este exemplo demonstra como criar uma lista com borda mas sem marcadores de lista.
Todos os diferentes tipos de marcadores de itens da lista
Este exemplo demonstra todos os diferentes tipos de marcadores de itens da lista no CSS.

Todas as propriedades de lista CSS

Propriedade Descrição
list-style Atributo abreviado. Define todas as propriedades da lista em uma declaração.
list-style-image Especifica uma imagem como marcador da lista de itens.
list-style-position Especifica a posição do marcador da lista de itens (ponto de lista).
list-style-type Especifica o tipo de marcador da lista de itens.