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.

Now answer the exercise about the content:

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

You are right! Congratulations, now go to the next page

You missed! Try again.

Next page of the Free Ebook:

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

Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!

This article belongs to the Free Ebook:

Curso completo de CSS

Free online courses on

Free online courses on

Carry knowledge in your pocket.
Download the Cursa app.

Download the Cursa app

to have free access to the course:

After downloading, search for the course name in the application.

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

Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!

This article belongs to the Free Ebook:

Curso completo de CSS

Free online courses on

Free online courses on

Carry knowledge in your pocket.Download the Cursa app.

Download the Cursa app

to have free access to the course:

After downloading, search for the course name in the application.

Carry knowledge in your pocket.
Download the Cursa app.