css - pseudo-classes, seletores e media-queries
TRANSCRIPT
2
Sumário
• pseudo-classes
• seletores
• media-queries
3
pseudo-classes
4
• 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.
pseudo-classes
5
pseudo-classes
6
pseudo-classes
7
pseudo-classes
8
pseudo-classes
9
pseudo-classespseudo-elements
10
seletores
11
seletores
12
seletores
13
seletores
14
seletoresMenos
específico
15
seletores
16
seletoresMenos
específico
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
18
media-queries
19
• Utilizadas para definir regras de CSS diferentes para diferentes tipos de mídia
media-queries
20
• http://tableless.com.br
media-queries
22
media-queries
23
media-queries
24
media-queries
25
media-queries
Menos específico
26
Exercício
• Exercício seletores e pseudo-classes: faça um código HTML e CSS que apresente o seguinte layout
27
Exercício
• Exercício seletores e pseudo-classes: faça um código HTML e CSS que apresente o seguinte layout
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