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.
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”