Estilização de listas em CSS

Capítulo 13

Tempo estimado de leitura: 2 minutos

+ Exercício
Audio Icon

Ouça em áudio

0:00 / 0:00
As listas são elementos muito comuns em páginas web, e muitas vezes precisamos estilizá-las para que se adaptem ao design do site. Felizmente, o CSS nos oferece várias opções para personalizar o visual de nossas listas. A primeira coisa que podemos fazer é mudar o estilo dos marcadores (ou bullets) das listas. Por padrão, as listas não ordenadas usam um bullet circular e as listas ordenadas usam números. Mas podemos mudar isso usando a propriedade "list-style-type". Por exemplo, para usar um bullet quadrado em uma lista não ordenada, podemos fazer o seguinte: ```html
  • Item 1
  • Item 2
  • Item 3
``` Já para usar letras maiúsculas em vez de números em uma lista ordenada, podemos usar o valor "upper-alpha": ```html
  1. Item A
  2. Item B
  3. Item C
``` Além disso, podemos remover completamente os marcadores das listas usando o valor "none": ```html
  • Item 1
  • Item 2
  • Item 3
``` Outra propriedade útil para estilizar listas é a "list-style-position". Por padrão, os marcadores ficam à esquerda do texto do item da lista, mas podemos movê-los para a direita usando o valor "inside". Isso pode ser útil, por exemplo, se quisermos criar uma lista de links que fique alinhada à direita da página: ```html ``` Por fim, podemos também estilizar os itens da lista em si, usando as propriedades de CSS que já conhecemos, como "color", "font-size", "background-color", etc. Por exemplo, para criar uma lista com fundo cinza e texto branco, podemos fazer o seguinte: ```html
  • Item 1
  • Item 2
  • Item 3
``` Em resumo, a estilização de listas em CSS é bastante versátil e nos permite criar listas com diferentes estilos e layouts. Vale a pena explorar as opções disponíveis e experimentar diferentes combinações para encontrar a que melhor se adapta ao nosso projeto.

Agora responda o exercício sobre o conteúdo:

_Qual propriedade de CSS podemos usar para mudar o estilo dos marcadores das listas?

Você acertou! Parabéns, agora siga para a próxima página

Você errou! Tente novamente.

A propriedade list-style-type é usada para alterar o estilo dos marcadores das listas, como alterar bullets para quadrados ou usar letras em listas ordenadas.

Próximo capitúlo

Estilização de tabelas em CSS

Arrow Right Icon
Capa do Ebook gratuito Curso completo de CSS
37%

Curso completo de CSS

5

(1)

35 páginas

Baixe o app para ganhar Certificação grátis e ouvir os cursos em background, mesmo com a tela desligada.