CSS - Pseudo-classes, Seletores e Media-queries

579 visualizações

Publicada em

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
579
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS - Pseudo-classes, Seletores e Media-queries

  1. 1. CSS - Pseudo-classes, Seletores e Media- queries Willian Massami Watanabe wwatanabe@utfpr.edu.br 1
  2. 2. Sumário• pseudo-classes• seletores• media-queries 2
  3. 3. pseudo-classes 3
  4. 4. pseudo-classes• Pseudo-classes • Pseudo-classes e pseudo-elements são utilizados junto com os seletores para determinar regras mais específicas de elementos • Exemplos: hover, link, visited, active, first-child, focus, first-line, first-letter, entre outros. 4
  5. 5. pseudo-classes 5
  6. 6. pseudo-classes 6
  7. 7. pseudo-classes 7
  8. 8. pseudo-classes 8
  9. 9. pseudo-classespseudo-elements 9
  10. 10. seletores 10
  11. 11. seletores 11
  12. 12. seletores 12
  13. 13. seletores 13
  14. 14. seletores Menos específico 14
  15. 15. seletores 15
  16. 16. seletores Menos específico 16
  17. 17. seletores• Efeito cascata do CSS • as propriedades declaradas com os seletores mais específicos prevalecem • possibilidade de usar a chamada !important para mudar esse comportamento, mas esse tipo de atribuição não é recomendada 17
  18. 18. media-queries 18
  19. 19. media-queries• Utilizadas para definir regras de CSS diferentes para diferentes tipos de mídia 19
  20. 20. media-querieshttp://tableless.com.br 20
  21. 21. media-querieshttp://tableless.com.br 21
  22. 22. media-queries 22
  23. 23. media-queries 23
  24. 24. media-queries 24
  25. 25. media-queries Menos específico 25
  26. 26. Exercício• Exercício seletores e pseudo-classes: faça um código HTML e CSS que apresente o seguinte layout 26
  27. 27. Exercício• Exercício seletores e pseudo-classes: faça um código HTML e CSS que apresente o seguinte layout 27
  28. 28. Exercício• Exercício seletores e pseudo-classes: faça um código HTML e CSS que apresente o seguinte layout • DICA: http://bryanhadaway.com/testing/simple-css-only- dropdown-menu.html 28

×