Estilização de listas em CSS

Página 13

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.

Ahora responde el ejercicio sobre el contenido:

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

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Siguiente página del libro electrónico gratuito:

14Estilização de tabelas em CSS

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!

Disponible en Google Play Disponible en App Store

+ 6,5 millones
estudiantes

Certificado gratuito y
válido con código QR

48 mil ejercicios
gratis

Calificación de 4.8/5
en tiendas de aplicaciones

Cursos gratuitos de
vídeo, audio y texto.