laboratório de informática listas 1º semestre 2010 > pucpr > bsi bruno c. de paula
TRANSCRIPT
Laboratório de InformáticaListas
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
Resumo da aula
Na aula hoje, vamos aprender como criar listas de diferentes tipos em nossas páginas.
3
Material extra referente ao assunto da aulaSobre listas:
http://www.w3schools.com/html/html_lists.asp
http://dev.opera.com/articles/view/16-html-lists/
Links e listas em CSS:http://dev.opera.com/articl
es/view/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>;
5
Propriedades CSS referenciadas na aula (em Inglês –site SitePoint) list-style-type: 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>)
9
Lista de definição (<dl>, <dt>, <dd>)
10
Listas aninhadas
11
Alterar o início de uma lista ordenada (atributo start)
12
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-
style-image ou background-image.
13
14
CSS: Escolher o tipo de bullet em uma lista ordenada
15CSS: Escolher a posição do marcador em relação ao conteúdo da lista (list-style-position) Cada navegador implementa um
espaçamento diferente!
16
17
CSS: Mudar o marcador (propriedade list-style-image)Ruim! Posição exata não pode ser
determinada! Depende do navegador.
1811/04/23
Firefox
Internet Explorer
19
11/04/23
CSS: Mudando o marcador (propriedade background-image)Veremos mais detalhes sobre esta
abordagem futuramente!
20
CSS: ocultando uma lista (propriedade display)
21