Estilizao de Listas

CSS - Style Sheet

Professor: Jolvani
Aula 21

Estilizao de Listas - CSS

Nesta aula Vamos aprender a estilizar listas.

Elas so usadas para criar menus

Para criar uma lista usamos as tags

<ul> <li></li> </ul>

Criar um arquivo css e html para estiliza nossa lista ao lado;

No css, usar a propriedade list-style-type, cfe codificao abaixo, veja o

que acontece.

Aps altere o valor para circle e disc.

Estilizao de Listas - CSS

Marcao Numrica

Altere o valor para decimal

decimal-leading-zero

lower-roman, upper-roman, georgian, armenian;

Usando o alfabeto: valor: lower-latin, lower-alpha, upper-alpha;

Caracteres gregos: lower-greek

Na pagina da w3c encontramos as referencias das listas:

http://www.w3schools.com/css/css_list.asp
http://www.w3schools.com/cssref/pr_list-style-type.asp

Estilizao de Listas - CSS

Para retirar a marcao de lista use o valor none;

Colocando imagem como marcao:

ul {
list-style-type : none;
list-style-image : url(img/seta.png);
}

Outras propriedades:

list-style-position: define posio do box que contem o marcador da lista:

outsite

e inside; verifique a diferena:

Estilizao de Listas - CSS

Marcao de forma abreviada:

list-style: tipo recuo imagem

Prxima Aula: Menus com JQuery