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