laboratório de informática listas 1º semestre 2010 > pucpr > bsi bruno c. de paula
TRANSCRIPT
![Page 1: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/1.jpg)
Laboratório de InformáticaListas
1º Semestre 2010 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/2.jpg)
Resumo da aula
Na aula hoje, vamos aprender como criar listas de diferentes tipos em nossas páginas.
![Page 3: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/3.jpg)
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/
![Page 4: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/4.jpg)
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>;
![Page 5: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/5.jpg)
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.
![Page 6: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/6.jpg)
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;
![Page 7: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/7.jpg)
7
Lista não ordenada (<ul> e <li>)
![Page 8: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/8.jpg)
8
Lista ordenada (<ol> e <li>)
![Page 9: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/9.jpg)
9
Lista de definição (<dl>, <dt>, <dd>)
![Page 10: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/10.jpg)
10
Listas aninhadas
![Page 11: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/11.jpg)
11
Alterar o início de uma lista ordenada (atributo start)
![Page 12: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/12.jpg)
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.
![Page 13: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/13.jpg)
13
![Page 14: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/14.jpg)
14
CSS: Escolher o tipo de bullet em uma lista ordenada
![Page 15: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/15.jpg)
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!
![Page 16: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/16.jpg)
16
![Page 17: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/17.jpg)
17
CSS: Mudar o marcador (propriedade list-style-image)Ruim! Posição exata não pode ser
determinada! Depende do navegador.
![Page 18: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/18.jpg)
1811/04/23
Firefox
Internet Explorer
![Page 19: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/19.jpg)
19
11/04/23
CSS: Mudando o marcador (propriedade background-image)Veremos mais detalhes sobre esta
abordagem futuramente!
![Page 20: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/20.jpg)
20
CSS: ocultando uma lista (propriedade display)
![Page 21: Laboratório de Informática Listas 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula](https://reader035.vdocuments.com.br/reader035/viewer/2022070310/552fc0fe497959413d8bbac7/html5/thumbnails/21.jpg)
21