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).


Obtenha seu Certificado de Webmaster para trabalhar criando sites!

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.

2 comentários:

Abilton Gadelha Dias disse...

Primeiramente gostaria de agradecer por compartilhar seus conhecimentos conosco. E estou muito agradecido por me ajudar nos meus estudos...
Mas faltou comentar sobre a Estilização de Lista com imagens... Não vi ainda seus outros artigos, mais esse ficou faltando isso...

Desde já muito obrigado!

jorge soares disse...

muito bom esse tuturial , gostei muito me ajudou muito fico grato não deixe de postar mais sse possivel sobre PHP como criar divs com php