:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: http://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 5 - Listas

Outra técnica de formatação muito usada em páginas Web é a lista ('list'). Ela é como um parágrafo, porém tem uns detalhes adicionais.

HTML define listas que podem ser do tipo com marcadores (bullets - listas não numeradas) ou listas ordenadas <ul>...</ul> <ol>...</ol> com numeração no início de cada item da lista <li>...</li> . Cada tipo de lista é fornecido com algumas opções, que podem ser definidas no HTML - <li type="square"> coloca um marcador tipo um 'quadradinho', <li type="i"> coloca um numeral romano minúsculo.

Lista não ordenada padrão.

  • Item da lista não ordenada
  • Item da lista não ordenada
  • Item da lista não ordenada

Lista não ordenada com opção de marcador tipo 'quadradinho'

  • Item da lista não ordenada
  • Item da lista não ordenada
  • Item da lista não ordenada

Lista ordenada padrão

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Lista ordenada com opção de numeral romano minúsculo

  1. Item 1 da lista ordenada
  2. Item 2 da lista ordenada
  3. Item 3 da lista ordenada

CSS possibilita mais opções e controle sobre as listas - basta você criar regras de estilo para ol ou ul .


  ol {
  list-style-type: lower-roman;
  margin: 1em 0 1em 40px
     }

O efeito destas definições de estilo é o mesmo que o de colocar a opção em cada item da lista no HTML com a vantagem de proporcionar muito mais controle sobre as margens em volta da lista. Os quatro valores : 1em 0 1em 40px são respectivamente para as margens de cima, à direita, em baixo e à esquerda e podem ser definidos em ems, percentagens ou pixels.

Se você deseja controle sobre os itens da lista, você poderá definir as margens para eles também - para aumentar o espaçamento entre eles por exemplo.....


  ol li { margin: .5em 0 .5em 0 }

esta definição adiciona um espaço extra de 0.5 em acima e abaixo de cada item da lista ordenada. Para uma lista não ordenada, bastaria você substituir o seletor por ul li .

E, melhor ainda, você pode definir seu próprio marcador usando uma imagem.


  ul { list-style-image: url(smiley.gif) }
  ul li { margin: 1em 0 1em 0}
  •   Se você gostou deste
  •   Vai gostar deste também
  •   E que tal este ?

E, por fim, uma imagem para cada item da lista...


  <li style="list-style-image: url(icon1.gif); 
  margin: 1em 0 1em 0">Sabemos sobre pessoas</li>
  <li style="list-style-image: url(icon2.gif); 
  margin: 1em 0 1em 0">Sabemos sobre imagens</li>
  <li style="list-style-image: url(icon3.gif); 
  margin: 1em 0 1em 0">Sabemos sobre idéias</li>
  <li style="list-style-image: url(icon4.gif); 
  margin: 1em 0 1em 0">Sabemos escrever</li>
  •   Sabemos sobre pessoas
  •   Sabemos sobre imagens
  •   Sabemos sobre idéias
  •   Sabemos escrever

Estilos definidos entre as tags head do documento aplicam-se à toda a página, o que não é o caso aqui. Para aplicar estilos individualmente aos itens de uma lista, devemos definí-los nos itens ou 'inline'. Os estilos são definidos na tag HTML de abertura <li> no corpo (body) da página. Notar que o IE6 (Windows) coloca os ícones muito próximos ao texto do item. Eu adicionei um espaço em branco para compensar isto, conforme mostro abaixo....

&nbsp; Sabemos sobre pessoas.

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Criado em: 2005-04-11

topo