Banner propaganda da DevMedia - Cursos de desenvolvimento web

:: 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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

Criado em: 2005-04-11

topo