CSS - Pseudo-classes, Seletores e Media-

queries

Willian Massami Watanabewwatanabe@utfpr.edu.br

1

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

21

• 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