CSS - Pseudo-classes, Seletores e Media-       queries    Willian Massami Watanabe    wwatanabe@utfpr.edu.br               1
Sumário•   pseudo-classes•   seletores•   media-queries                     2
pseudo-classes      3
pseudo-classes•   Pseudo-classes    •   Pseudo-classes e pseudo-elements são        utilizados junto com os seletores para...
pseudo-classes      5
pseudo-classes      6
pseudo-classes      7
pseudo-classes      8
pseudo-classespseudo-elements          9
seletores    10
seletores            11
seletores    12
seletores    13
seletores             Menos            específico    14
seletores    15
seletores    Menos            específico    16
seletores• Efeito cascata do CSS • as propriedades declaradas com os seletores      mais específicos prevalecem  •   possib...
media-queries      18
media-queries•   Utilizadas para definir regras de CSS diferentes    para diferentes tipos de mídia                      19
media-querieshttp://tableless.com.br                          20
media-querieshttp://tableless.com.br                          21
media-queries      22
media-queries            23
media-queries            24
media-queries           Menos          específico             25
Exercício• Exercício seletores e pseudo-classes: faça um código  HTML e CSS que apresente o seguinte layout               ...
Exercício• Exercício seletores e pseudo-classes: faça um código  HTML e CSS que apresente o seguinte layout               ...
Exercício• Exercício seletores e pseudo-classes: faça um código  HTML e CSS que apresente o seguinte layout  • DICA: http:...
Próximos SlideShares
Carregando em…5
×

CSS - Pseudo-classes, Seletores e Media-queries

618 visualizações

Publicada em

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
618
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
1
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

×