Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

2 Resumo da aula Na aula hoje, vamos aprender como criar listas de diferentes tipos em nossas páginas.

3 3 Material extra referente ao assunto da aula Sobre listas: http://www.w3schools.com/ht ml/html_lists.asp http://www.w3schools.com/ht ml/html_lists.asp http://dev.opera.com/articles/vi ew/16-html-lists/ http://dev.opera.com/articles/vi ew/16-html-lists/ Links e listas em CSS: http://dev.opera.com/articles/vi ew/32-styling-lists-and-links/ http://dev.opera.com/articles/vi ew/32-styling-lists-and-links/

4 4 Tags HTML referenciadas na aula Português (site Referenciando)Referenciando Tipos de lista:,,, Itens:,, ; Inglês (site SitePoint):SitePoint Tipos de lista:,,, Itens:,, ;

5 5 Propriedades CSS referenciadas na aula (em Inglês –site SitePoint)SitePoint list-style-type: define o estilo da lista; list-style-type list-style-position: define a posição do marcador em relação ao conteúdo da lista; list-style-position list-style-image: escolhe a imagem do marcador; list-style-image display: define o modo de exibição de um elemento. Exemplo: display: none oculta um elemento; display background-image: escolhe imagem de fundo. background-image

6 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 7 Lista não ordenada ( e )

8 8 Lista ordenada ( e )

9 9 Lista de definição (,, )

10 10 Listas aninhadas

11 11 Alterar o início de uma lista ordenada (atributo start)

12 12 CSS: Escolher o tipo de bullet em uma lista não ordenada CSS list-style-type;list-style-type Tipos disponíveis: square, circle, disc, none; Outro tipo? Só com CSS: Propriedade list-style- image ou background- image.list-style- imagebackground- image

13 13

14 14 CSS: Escolher o tipo de bullet em uma lista ordenada

15 15 CSS: Escolher a posição do marcador em relação ao conteúdo da lista (list-style- position)list-style- position Cada navegador implementa um espaçamento diferente!

16 16

17 17 CSS: Mudar o marcador (propriedade list-style-image) list-style-image Ruim! Posição exata não pode ser determinada! Depende do navegador.

18 1813/1/2014 Firefox Internet Explorer

19 19 13/1/2014 CSS: Mudando o marcador (propriedade background-image)background-image Veremos mais detalhes sobre esta abordagem futuramente!

20 20 CSS: ocultando uma lista (propriedade display)display

21 21