CSS: Listas

Vamos continuar com mais um tutorial de CSS, hoje falaremos sobres as listas. Como vocês devem saber, no HTML, existem dois tipos de lista: as numeradas (<ol>) e as não-numeradas (<ul>). O lado bom é que todas as configuração são as mesmas. Somente os valores da configuração dos marcadores que são diferentes por motivos óbvios, já que os numerados tem que ser marcadores que indicam sequência. Enfim, vamos começar:

1. Alterando os Marcadores
Já que comecei a falar dos marcadores, vamos continuar falando sobre eles. Para mudar os marcadores nós utilizamos a definição list-style-type e dizemos o que queremos como marcador. Os valores são diferentes para listas ordenadas e não-ordenadas, então vou citá-las algumas:

Para as listas não ordenadas:

• circle: o marcador é um círculo sem preenchimento;
• disc: o marcador é um círculo preenchido;
• square: marcador é um quadrado;
• none: não é utilizado marcador;

Já para as listas ordenadas, temos:

• armenian: usa o alfabeto armênio;
• cjk-ideographic: usa os números japoneses;
• decimal: utiliza os números decimais;
• decimal-leading-zero: o mesmo que decimal, porém, preenchendo com 0 à esquerda;
• georgian: utiliza o alfabeto georgiano;
• hebrew: utiliza o alfabeto hebraico;
• hiragana: utiliza o alfabeto japonês hiragana;
• hiragana-iroha: utiliza o alfabeto japonês hiragana, porém usando a sequência iroha;
• katakana: utiliza o alfabeto japonês katakana;
• katakana-iroha: utiliza o alfabeto japonês katakana, porém usando a sequência iroha;
• lower-alpha: utiliza o alfabeto tradicional (nosso) em caixa baixa;
• lower-greek: utiliza o alfabeto grego em caixa baixa;
• lower-latin: utiliza o alfabeto latino (que é identico ao alpha), inclusive a caixa baixa;
• lower-roman: utiliza os números romanos em caixa baixa;
• upper-alpha: utiliza o nosso alfabeto tradicional em caixa alta;
• upper-greek: utiliza o alfabeto grego em caixa alta;
• upper-latin: utiliza o alfabeto latino em caixa alta;
• upper-roman: utiliza os números romanos em caixa alta;
• none: não utiliza marcadores.

Bem, só avisando que algumas dessas opções podem não estar disponível para todos os navegadores. Enfim, vamos colocar um exemplo de cada:

ul.a {
 list-style-type:square;
}
 
ol.b {
 list-style-type:lower-alpha;
}

2. Posição do Marcador
Esse é um conceito mais simples, o list-style-position é uma configuração que diz que se queremos que os marcadores fiquem fora (outside, que é o padrão) ou dentro (inside) da margem.

ul.a {
 list-style-type:square;
 list-style-position: inside;
}
 
3. Imagem como Marcador
Para inserir uma imagem como marcador, utilizamos o comando list-style-image com a url da imagem que queremos mostrar.

ul.a {
 list-style-type:square;
 list-style-position: inside;  list-style-image: url('minhaImagem.gif');
}

4. Forma Curta
A forma curta é o comando que utilizamos para configurar a lista com um único comando, que é list-style. Os valores devem ser sempre colocado na ordem list-style-type, list-style-position e list-style-image. Caso não necessite inserir um valor para a propriedade, pode omitir, desde que as ordens dos valores continue o mesmo. Exemplo:

ul.a {
 list-style-type:square;
 list-style-position: inside;  list-style-image: url('minhaImagem.gif');
}

pode ser resumido em:

ul.a {
 list-style:square inside url('minhaImagem.gif');
}