Todos os cursos > Informática ( TI ) > Programação Front-End ::

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

Item A
Item B
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.

Próxima página do Ebook Gratuito:

Estilização de listas em CSS

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

14Estilização de tabelas em CSS

Ganhe seu Certificado deste Curso Gratuitamente! ao baixar o aplicativo Cursa e ler o ebook por lá. Disponível na Google Play ou App Store!

Este artigo pertence ao Ebook Gratuito:

Curso completo de CSS

Cursos online gratuitos sobreProgramação Front-End

Cursos online gratuitos sobreInformática ( TI )

Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.

Baixe o aplicativo Cursa

para ter acesso gratuito ao curso:

Após baixar, pesquise pelo nome do curso no aplicativo.

Estilização de listas em CSS

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

14Estilização de tabelas em CSS

Ganhe seu Certificado deste Curso Gratuitamente! ao baixar o aplicativo Cursa e ler o ebook por lá. Disponível na Google Play ou App Store!

Este artigo pertence ao Ebook Gratuito:

Curso completo de CSS

Cursos online gratuitos sobreProgramação Front-End

Cursos online gratuitos sobreInformática ( TI )

Leve o conhecimento no seu bolso.Baixe o aplicativo Cursa.

Baixe o aplicativo Cursa

para ter acesso gratuito ao curso:

Após baixar, pesquise pelo nome do curso no aplicativo.

Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.