Aula 21. estilização de listas

232 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
232
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 21. estilização de listas

  1. 1. Estilização de Listas CSS - Style Sheet Professor: Jolvani Aula 21
  2. 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. 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. 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. 5. Estilização de Listas - CSS  Marcação de forma abreviada:  list-style: “tipo” “recuo” “imagem”
  6. 6. Próxima Aula: Menus com JQuery

×