Estilos CSS em Listas: As Propriedades list-style-type e list-style-position (Tutorial)

Neste tutorial de nosso Curso de CSS, vamos aprender como aplicar estilos em listas, tanto as listas ordenadas (<ol>) como as não ordenadas (<ul>), através das propriedades list-style-type (para alterarmos os tipos de listas) e da list-style-position (posição dos bullets e números).

Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

• Apostila HTML Progressivo: Fazer download

CSS em Listas: A propriedade list-style-type

Já aprendemos, no tutorial de HTML sobre listas, a usar as tags <ul>, <ol> e a <li> (estude agora, se não tiver estudado ou não se lembrar).
Com elas, criamos listas simples (com os bullets), listas numeradas e ordenadas alfabeticamente.

Porém, como sempre, o HTML puro tem suas limitações, e o pior: elas variam de navegador para navegador, ou até mesmo dependendo do sistema operacional e dispositivo.

Mas, como tudo, o CSS nos permite definir e estilizar do jeito que mais nos convém, e não seria diferente para as listas, já que são elementos importantíssimos e extremamente usados na criação de sites.

A formatação das listas usando CSS é feita, basicamente, usando duas propriedades de estilo.
O "list-style-type" nos permite escolher estilos de listas que podem ser:

Lista não-ordenada: <ul>

Podemos usar três tipos de listas não ordenadas, com disco (disc), quadrado (square) e círculo (circle), que são os possíveis valores da propriedade list-style-type.
Vejamos a sintaxe:

list-style-type: disc

list-style-type: square

list-style-type: circle

Uma lista que apresenta três itens (<li>), cada um com o bullet em formato diferente, é feita usando o seguinte código de CSS e HTML:

<ul>
 <li style="list-style-type: disc">Lista com disc</li>
 <li style="list-style-type: square">Lista com square</li>
 <li style="list-style-type: circle">Lista com circle</li>
</ul>

Cujo efeito é:

• Lista com disc
• Lista com square
• Lista com disco

Lista ordenada: <ol>

Caso queiramos usar alguma tipo de lista que forneça uma ordem ou numeração, devemos usar a tag <ol>, onde os itens podem ser:

• decimal (decimal)
• decimal com zero na frente (decimal-leading-zero)
• numeração romana minúscula (lower-roman)
• numeração romana maiúscula (upper-roman)
• alfabeto minúsculo (lower-alpha)
• alfabeto maiúsculo (upper-alpha)

Vejamos um exemplo de código HTML & CSS que mostra todos os tipos de listas ordenadas:

<ol>
 <li style="list-style-type: decimal">Lista com decimal</li>
 <li style="list-style-type: decimal-leading-zero">Lista com decimal-leading-zero</li>
 <li style="list-style-type: lower-roman">Lista com lower-roman</li>
 <li style="list-style-type: upper-roman">Lista com upper-roman</li>
 <li style="list-style-type: lower-alpha">Lista com lower-alpha</li>
 <li style="list-style-type: upper-alpha">Lista com upper-alpha</li>
</ol>

O efeito é:

1. Lista com decimal
2. Lista com decimal-leading-zero
3. Lista com lower-roman
4. Lista com upper-roman
5. Lista com lower-alpha
6. Lista com upper-alpha

Posição da Lista em CSS: A propriedade list-style-position

O CSS é uma linguagem de estilo tão poderosa, que ela trabalha até mesmo em pequenos detalhes, nos possibilitando fazer tudo que quisermos com nossos sites.

Um belo exemplo disso é a propriedade list-style-position, que nos permite posicionar o local do bullet (círculo, quadrado ou disco) ou da numeração/ordem alfabética da lista.

Há dois locais (e valores) possíveis das lista:
inside - A lista faz parte do texto
outsite - A lista é separada, indentada, do texto

Vejamos um exemplo onde a lista faz parte do conteúdo, pois usam,os list-style-position: inside

<ol>
 <li style="list-style-position: inside">Os bullets dessa<br />lista estão
  <br />dentro do conteúdo<br />de texto
 </li>
 <li style="list-style-position: inside">Note como<br />a numeração da lista
  <br />faz parte do texto<br />
 </li>
</ol>

O efeito deste código HTML & CSS é:

1. Os bullets dessa
   lista estão
   dentro do conteúdo
   de texto
2. Note como
   a indentação da lista
   faz parte do texto, sem margem entre o bullet e o texto
   

Agora veja o que ocorre com os bullets caso usemos list-style-position: outside

<ul>
 <li style="list-style-position: outside">Os bullets dessa<br />lista estão
  <br />fora do conteúdo<br />de texto
 </li>
 <li style="list-style-position: outside">Note como<br />os bullets da lista
  <br />não faz parte do texto<br />
 </li>
</ul>

O resultado é:

• Os bullets dessa
  lista estão
  fora do conteúdo
  de texto
• Note como
  os bullets da lista
  não faz parte do texto
  

Neste ´ultimo caso, a numeração/bullets ficam à parte, em local diferente do texto.