Esta página descreve como você pode usar as CSS para especificar a aparência das listas.
Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.
Informação: Listas
Se você resolveu o desafio da última página (Conteúdo), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.
CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.
Para especificar o estilo para uma lista, use a propriedade list-style para especificar o tipo de marcador.
O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, LI), ou isto pode selecionar o elemento primário da lista (por exemplo, UL). Então os elementos da lista herdam o estilo.
Listas não ordenadas
Em uma lista não ordenada, cada item da lista é marcado da mesma maneira.
CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:
disccirclesquare
Alternativamente, você pode especificar a URL de uma imagem.
Estas regras especificam diferentes marcadores para diferentes classes de itens da lista:
li.open {list-style: circle;}
li.closed {list-style: disc;}
Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed): <UL> <LI class="open">Lorem ipsum</LI> <LI class="closed">Dolor sit</LI> <LI class="closed">Amet consectetuer</LI> <LI class="open">Magna aliquam</LI> <LI class="closed">Autem veleum</LI> </UL> O resultado será parecido com:
|
Listas ordenadas
Em uma lista ordenada, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.
Use a propriedade list-style para especificar o tipo de marcador:
decimallower-romanupper-romanlower-latinupper-latin
Esta regra especifica os elementos OL com a classe info, os itens são identificados com letras maiúsculas.
ol.info {list-style: upper-latin;}
Os elementos LI na lista herdam este estilo:
|
A propriedade list-style é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja Lists na CSS Specification.
Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (UL) e ordenadas (OL), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer UL mostrar ordenado e OL para mostrar não ordenado se você precisar. Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores. |
Contadores
Note: Alguns navegadores não suportam contadores.
Você pode usar contadores para numerar quaisquer elementos, não somente itens listados. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.
Para especificar uma numeração, você precisa de um contador com um nome que você especifica.
Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade counter-reset e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.
Em cada elemento que o contador incrementar, use a propriedade counter-increment e o nome do seu contador.
Para mostrar seu contador, adicione :before ou :after ao seletor e use a propriedade content (como fez na página anterior, Conteúdo).
No valor da propriedade content, especifique counter() com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em Listas ordenadas.
Normalmente o elemento que mostra o contador também incrementa isto.
Esta regra inicializa um contador para cada elemento H3 com a classe numbered:
h3.numbered {counter-reset: mynum;}
Esta regra mostra e incrementa o contador para cada elemento P com a classe
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;}
O resultado se parece com isto:
|
| Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta.
Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não. Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja Automatic counters and numbering em CSS Specification. |
Ação: Listas denominadas
Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Documento de amostra 2</TITLE> <LINK rel="stylesheet" type="text/css" href="style2.css"> </HEAD> <BODY> <H3 id="oceans">Os oceanos</H3> <UL> <LI>Ártico</LI> <LI>Atlântico</LI> <LI>Pacífico</LI> <LI>Índico</LI> <LI>Antártico</LI> </UL> <H3 class="numbered">Numbered paragraphs</H3> <P class="numbered">Lorem ipsum</P> <P class="numbered">Dolor sit</P> <P class="numbered">Amet consectetuer</P> <P class="numbered">Magna aliquam</P> <P class="numbered">Autem veleum</P> </BODY> </HTML>
Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:
/* parágrafos numerados */
h3.numbered {counter-reset: mynum;}
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;}
Se a disposição e o comentário não estiver ao seu gosto, mude-os.
Abra o documento no seu navegador. Se o seu navegador suporta contadores, você verá algo semelhante ao exemplo abaixo. Se o seu navegador não suporta contadores, então você não verá os números (e provavelmente nem sequer os dois pontos (:)):
|
Os oceanos
Parágrafos numerados 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v:
|
O que vem depois?
Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.
Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.
A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: Caixas