Este documento discute como estilizar listas usando CSS, incluindo como alterar o tipo de marcador de lista para números, círculos ou discos e como adicionar imagens como marcadores de lista. Também explica como posicionar a marcação da lista dentro ou fora da lista e como abreviar a propriedade list-style.

1. Estilização de Listas
CSS - Style Sheet
Professor: Jolvani
Aula 21

2. Estilização de Listas - CSS
 Nesta aula Vamos aprender a estilizar listas.
 Elas são 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 codificação abaixo, veja o
que acontece.
 Após altere o valor para “circle” e “disc”.

3. Estilização de Listas - CSS
 Marcação Numérica
 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

4. Estilização de Listas - CSS
 Para retirar a marcação de lista use o valor “none”;
 Colocando imagem como marcação:
ul {
list-style-type : none;
list-style-image : url(img/seta.png);
}
 Outras propriedades:
 list-style-position: define posição do box que contem o marcador da lista:
 “outsite” e “inside”; verifique a diferença:

5. Estilização de Listas - CSS
 Marcação de forma abreviada:
 list-style: “tipo” “recuo” “imagem”

6. Próxima Aula: Menus com JQuery