A propriedade CSS list

Publicado em: 12/12/2003

Mudando o estilo das listas HTML

A propriedade list define as características (valores) das listas HTML.

As propriedades list são as listadas abaixo:

  • list-style-image............. imagem como marcador da lista;
  • list-style-position..........onde o marcador da lista é posicionado;
  • list-style-type...............tipo do marcador da lista;
  • list-style........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do lista

  • list-style-image:
    1. none
    2. URL: url(caminho/marcador.gif)
  • list-style-position:
    1. outside: marcador fora do alinhamento do texto
    2. inside: marcador alinhado com texto
  • list-style-type:
    1. none: sem marcador
    2. disc: círculo (bolinha cheia)
    3. circle: circunferência (bolinha vazia)
    4. square: quadrado cheio
    5. decimal: números 1, 2, 3, 4, ...
    6. decimal-leading-zero
    7. lower-roman: romano minúsculo i, ii, iii, iv, ...
    8. upper-roman: romano maiúsculo I, II, III, IV, ...
    9. lower-alpha: letra minúscula a, b, c, d, ...
    10. upper-alpha: letra maiúscula A, B, C, D, ...
    11. lower-greek
    12. lower-latin
    13. upper-latin
    14. hebrew
    15. armenian
    16. georgian
    17. cjk-ideographic
    18. hiragana
    19. katakana
    20. hiragana-iroha
    21. katakana-iroha

Os tipos de 11 a 21 são de uso específico e sem suporte total pelos navegadores atuais e não serão tratados neste tutorial.

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito do tutorial.

list-style-image...imagem para marcadores de lista

Este exemplo demonstra como definir uma imagem de marcador de listas

<html>
<head>
<style type="text/css">
ul {
	list-style-image: url("seta.gif");
	}
</style>
</head>
<body>
<ul>
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ul>
</body>
</html>

A folha de estilo acima resultará nesta lista:

  • Item um
  • Item dois
  • Item tres

list-style-position...posição dos marcadores de lista

Este exemplo demonstra como posicionar os marcadores de listas

<html>
<head>
<style type="text/css">
ul.inside {
	list-style-position: inside;
	}
ul.outside {
	list-style-position: outside;
	}
</style>
</head>
<body>
<ul class="inside">
	<li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li>
	<li>E aqui continuamos com mais texto para  fixar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
	<li>Este texto destina-se a demonstrar o  valor: "outside" dos marcadores de listas.</li>
	<li>E aqui continuamos com mais texto para  fixar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>

A folha de estilo acima resultará nesta lista:

  • Este texto destina-se a demonstrar o valor: "inside" dos marcadores
  • E aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores de listas.
  • Este texto destina-se a demonstrar o valor: "outside" dos marcadores
  • E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.

list-style-type...os tipos de marcadores de lista

Definir os marcadores de listas não ordenadas

Este exemplo demonstra como definir os marcadores de listas não ordenadas.

<html>
<head>
<style type="text/css">
ul.none {
	list-style-type: none;
	}
ul.disc {
	list-style-type: disc;
	}
ul.circle {
	list-style-type: circle;
	}
ul.square {
	list-style-type: square;
	}
</style>
</head>
<body>
<ul class="none">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ul>
<ul class="disc">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ul>
<ul class="circle">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ul>
<ul class="square">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ul>
</body>
</html>

Este é o efeito da folha de estilo acima:

  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres

Definir os marcadores de listas ordenadas

Este exemplo demonstra como definir os marcadores de listas ordenadas.

<html>
<head>
<style type="text/css">
ol.decimal {
	list-style-type: decimal;
	}
ol.lroman {
	list-style-type: lower-roman;
	}
ol.uroman {
	list-style-type: upper-roman;
	}
ol.lalpha {
	list-style-type: lower-alpha;
	}
ol.ualpha {
	list-style-type: upper-alpha;
	}
</style>
</head>
<body>
<ol class="decimal">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ol>
<ol class="lroman">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ol>
<ol class="uroman">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ol>
<ol class="lalpha">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ol>
<ol class="ualpha">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item tres</li>
</ol>
</body>
</html>

Este é o efeito da folha de estilo acima:

  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres

list-style...duas propriedades das listas em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades das listas.

Você pode declarar duas das propriedades estudadas em uma regra única:

A sintaxe geral é esta: list-style: position; imagem ou list-style: position; type podendo inverter a ordem.

Veja o exemplo abaixo:

<html>
<head>
<style type="text/css">
ul {
	list-style: inside url("seta.gif");
	}
</style>
</head>
<body>
<ul>
	<li>Texto para demonstrar a propriedade de declaração única  para listas usando CSS - Folhas de Estilo em Cascata;</li>
	<li>Item dois;</li>
	<li>Item tres.</li>
</ul>
</body>
</html>

A folha de estilo acima resultará nesta lista:

  • Texto para demonstrar a propriedade de declaração única para listas usando CSS - Folhas de Estilo em Cascata;
  • Item dois;
  • Item tres.