Bruno C. de Paula
Laboratório de Informática
Listas
1º Semestre 2010 > PUCPR > BSI
Resumo da aula
Na
aula hoje, vamos aprender
como criar listas de diferentes
tipos em nossas páginas.
Material extra referente ao assunto
da aula
Sobre listas:
3
http://www.w3schools.com/ht
ml/html_lists.asp
http://dev.opera.com/articles/v
iew/16-html-lists/
Links e listas em CSS:
http://dev.opera.com/articles/v
iew/32-styling-lists-and-links/
4
Tags HTML referenciadas na aula
Português
(site Referenciando)
Tipos de lista: <ul>, <ol>, <dl>,
Itens: <li>, <dt>, <dd>;
Inglês (site SitePoint):
Tipos
de lista: <ul>, <ol>, <dl>,
Itens: <li>, <dt>, <dd>;
Propriedades CSS referenciadas na aula
(em Inglês –site SitePoint)
 list-style-type:
5
define o estilo da lista;
 list-style-position: define a posição do
marcador em relação ao conteúdo da lista;
 list-style-image:
escolhe a imagem do
marcador;
 display: define o modo de exibição de um
elemento. Exemplo: display: none oculta
um elemento;
 background-image: escolhe imagem de
fundo.
6
Tipos de Listas
 Listas
não ordenadas: agrupam itens
sem ordem definida;
 Listas ordenadas: agrupam itens
relacionados por uma ordem
numérica;
 Listas de definição: exibem itens
organizados em termo e definições;
7
Lista não ordenada (<ul> e <li>)
8
Lista ordenada (<ol> e <li>)
Lista de definição (<dl>, <dt>,
<dd>)
9
10
Listas aninhadas
Alterar o início de uma lista
ordenada (atributo start)
11
CSS: Escolher o tipo de bullet em
uma lista não ordenada
 CSS
list-style-type;
 Tipos disponíveis:
square, circle, disc,
none;
 Outro tipo? Só com CSS:
Propriedade list-styleimage ou backgroundimage.
12
13
CSS: Escolher o tipo de bullet em
uma lista ordenada
14
CSS: Escolher a posição do marcador em
relação ao conteúdo da lista (list-styleposition)
 Cada navegador implementa um
espaçamento diferente!
15
16
CSS: Mudar o marcador
(propriedade list-style-image)
 Ruim!
Posição exata não pode ser
determinada! Depende do navegador.
17
Firefox
Internet Explorer
05/11/2015
18
CSS: Mudando o marcador
(propriedade background-image)
 Veremos
19
mais detalhes sobre esta abordagem
futuramente!
05/11/2015
CSS: ocultando uma lista
(propriedade display)
20
21