» » A propriedade list

quinta-feira, 18 de março de 2010

A propriedade list

Tag
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 20 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.
Postado por Helton Carlos às 12:32
Marcadores:

0 comentários:

Postar um comentário

Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).

Assinar: Postar comentários (Atom)