A propriedade CSS list

Introdução

As propriedades para as listas, definem as características das listas e são as listadas a seguir:

Valores válidos para as propriedades das lista

Sintaxe

A definição dos marcadores de listas pode ser feita com uso do seletor-pai da lista (ul ou ol) ou com uso do seletor-filho (li), conforme mostrado no exemplo a seguir:

CSS
 ul { list-style-type: circle; }
 ol { list-style-type: circle; }
 li { list-style-type: circle; }

Usando-se o seletor-pai a declaração será válida para todos os items da lista. Usando-se o seletor-filho a declaração será válida somente para um item da lista.

Exemplos práticos

Vejamos a seguir alguns exemplos práticos.

list-style-image

Este exemplo demonstra como definir uma imagem para servir de marcador de listas.

HTML
<ul>
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ul>
CSS
ul {
  list-style-image: url("seta.gif");
}

Este é o efeito da folha de estilo acima:

  • Item um
  • Item dois
  • Item três

list-style-position

Este exemplo demonstra como posicionar os marcadores de listas

HTML
<ul class="inside square">
	<li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li>
	<li>E aqui continuamos com mais texto para  demonstrar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside square">
	<li>Este texto destina-se a demonstrar o  valor: "outside" dos marcadores de listas.</li>
	<li>E aqui continuamos com mais texto para  demonstrar o valor:"outside" dos marcadores de listas.</li>
</ul>
CSS
.inside {
  list-style-position: inside;
}
.outside {
  list-style-position: outside;
}

Este é o efeito da folha de estilo acima:

  • Este item destina-se a demonstrar o valor: "inside" dos marcadores
  • Aqui mais item para demonstrar o valor:"inside" dos marcadores de listas.
  • Este item destina-se a demonstrar o valor: "outside" dos marcadores
  • Aqui mais item para demonstrar o valor:"outside" dos marcadores de listas.

Nota: Inserimos uma borda cinza nos dois elementos ul que demonstram os valores inside e outside

list-style-type

Definir marcadores de listas não ordenadas

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

HTML
<ul class="none">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ul>
<ul class="disc">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ul>
<ul class="circle">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ul>
<ul class="square">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ul>
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;
	}

Este é o efeito da folha de estilo acima:

  • Item um
  • Item dois
  • Item três
  • Item um
  • Item dois
  • Item três
  • Item um
  • Item dois
  • Item três
  • Item um
  • Item dois
  • Item três

Definir marcadores de listas ordenadas

Este exemplo demonstra como definir marcadores de listas ordenadas.

<ol class="decimal">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="lroman">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="uroman">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="lalpha">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="ualpha">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
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;
	}

Este é o efeito da folha de estilo acima:

  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três
  1. Item um
  2. Item dois
  3. Item três

Mais marcadores de listas ordenadas

Este exemplo demonstra como definir mais marcadores de listas ordenadas.

HTML
<ol class="lower-greek">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="lower-latin">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="upper-latin">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="hebrew">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="armenian">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>
<ol class="georgian">
	<li>Item um</li>
	<li>Item dois</li>
	<li>Item três</li>
</ol>

CSS
ol.lower-greek {
	list-style-type: lower-greek;
	}
ol.lower-latin {
	list-style-type: lower-latin;
	}
ol.lower-latin {
	list-style-type: upper-latin;
	}
ol.hebrew {
	list-style-type: hebrew;
	}
ol.armenian {
	list-style-type: armenian;
	}
ol.georgian {
	list-style-type: georgian;
	}
/* mais cinco marcadores  */

Este é o efeito da folha de estilo acima:

lower-greek
  • Item um
  • Item dois
  • Item três
lower-latin
  • Item um
  • Item dois
  • Item três
upper-latin
  • Item um
  • Item dois
  • Item três
hebrew
  • Item um
  • Item dois
  • Item três
armenian
  • Item um
  • Item dois
  • Item três
georgian
  • Item um
  • Item dois
  • Item três
cjk-ideographic
  • Item um
  • Item dois
  • Item três
hiragana
  • Item um
  • Item dois
  • Item três
katakana
  • Item um
  • Item dois
  • Item três
hiragana-iroha
  • Item um
  • Item dois
  • Item três
katakana-iroha
  • Item um
  • Item dois
  • Item três

list-style

Esta é a maneira abreviada de se escrever uma só declaração para duas das propriedades para listas:

A sintaxe geral é esta: list-style: list-position list-image ou list-style: list-position list-type podendo-se inverter a ordem dos dois valores.

Observe o exemplo a seguir:

<ul>
	<li>Texto para demonstrar a propriedade de declaraçãoo única  para listas;</li>
	<li>Item dois;</li>
	<li>Item três.</li>
</ul>
CSS
ul {
	list-style: inside url("seta.gif");
	}

Este é o efeito da folha de estilo acima:

  • Texto para demonstrar a propriedade de declaração única para listas;
  • Item dois;
  • Item três.

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.