:: CSS desde o início ::
Autor: Joe Gillespie
URL do original: https://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
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
Lista ordenada com opção de numeral romano minúsculo
- Item 1 da lista ordenada
- Item 2 da lista ordenada
- 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....
Sabemos sobre pessoas.
Navegação pelo tutorial
- » Introdução - página básica
- » Folha de estilos
- » Estilizando texto
- » Mais texto
- » As listas
- » Os links
- » Boxes CSS
- » DIV's
- » Juntando tudo
- » DOCTYPE
- » Estilos externos
- » Estilizando tabelas
- » Estilizando formulários
- » Browsers
- » O futuro
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
Criado em: 2005-04-11