A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Laboratório de Informática CSS Seletores Seletores do CSS 2.1 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula.

Apresentações semelhantes


Apresentação em tema: "Laboratório de Informática CSS Seletores Seletores do CSS 2.1 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática CSS Seletores Seletores do CSS 2.1 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

2 Resumo da aula Continuaremos nosso trabalho com a linguagem de seletores; Hoje trabalharemos com os seletores introduzidos no CSS 2.1; Devemos ter especial cuidado com estes seletores: seu suporte é restrito no Internet Explorer 6 e 7; Conheceremos, porém, maneiras de contornar esta limitação através da linguagem JavaScript.

3 3 Material referente ao assunto da aula Tutorial sobre regras CSS: Tutorial seletores CSS 2.1: _css21_parte1.php _css21_parte1.php Recomendação W3C do CSS 2.1 (em Inglês): #pattern-matching #pattern-matching

4 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: Documentação sobre seletores do site da Microsoft: us/library/aa358816(VS.85).aspx us/library/aa358816(VS.85).aspx 4

5 Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo 5

6 6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

7 7 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;

8 8 Seletores CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Seletor universal (*);* Seletor filho (E > F);> Seletor irmão adjacente (E + F);+ Pseudo-classe dinâmica sobre o elemento (E:hover);:hover Pseudo-classe dinâmica foco (E:focus);:focus

9 Seletores CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Pseudo-classe primeiro filho (E:first-child);:first-child Pseudo-classe idioma (E:lang(c));:lang Pseudo-elemento de conteúdo inserido antes de outro (E:before);:before Pseudo-elemento de conteúdo inserido depois de outro (:after).:after 9

10 Seletores CSS referenciados na aula – Seletores de Atributo Seletor de elemento com atributo existente (existência): E[atr]; E[atr] Seletor de elemento com valor de atributo igual ao valor especificado (igualdade): E[atr=val]. E[atr=val] 10

11 Seletores CSS referenciados na aula – Seletores de Atributo Seletor de elemento com valor de atributo contido em uma lista separada por espaços (espaço em branco); E[atr~=val] Seletor de elemento com valor de atributo iniciando com o prefixo seguido de - (hífen): E[atr|=val]. E[atr|=val] 11

12 Relembrando a aula passada... 12

13 13

14 Versões do CSS 1.0: Todos os navegadores do mercado implementam. 14

15 Versões do CSS (retrocompatíveis) 2.0/2.1: Implementado em grande parte dos navegadores (implementação parcial: ie7, quase nula: ie6); Aula de hoje. 3.0: Em discussão avançada, implementação parcial em alguns navegadores (Opera, Firefox, Safari, Chrome, IE 8 e 9); 15

16 16 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

17 Assunto de hoje: só seletores! E do CSS

18 Os seletores do CSS 2.1 são implementados por todas as plataformas principais (menos IE6)! 18

19 19 Use com cuidado! ie6

20 CSS 2.1 funciona bem no IE8 e IE9! 20

21 Tabela de compatibilidade CSS 2.1 x Navegadores 21 Fonte: fonte:

22 Ie6 pode ser um navegador importante no mercado por algum tempo! Soluções: Ignorar ie6; Criar interface específica para ie6; Emular alguns recursos do CSS 2.1 via JavaScript para transformar o navegador; Emular alguns recursos do CSS 2.1 via JavaScript 22

23 Transformação de ie5.5 para IE9 23

24 Lista dos Seletores do CSS

25 2513/1/2014 SeletorTipoObservações *Universal* Uso em CSS Reset * Funciona no ie6 E > FFilho E + FIrmão adjacente E:hoverHover (mouse sobre) No ie6 só a:hover funciona! E:focusFoco no tecladoForms e links ie7

26 2613/1/2014 SeletorTipoObservações E:first-childPrimeiro filho E:lang(C)Idioma E:beforeInserção de conteúdo antes E:afterInserção de conteúdo depois ie7

27 2713/1/2014 SeletorTipoObservações E[atr]Atributo existente E[atr=val]Atributo igualdade E[atr~=val]Atributo espaço em branco Com atributo class não precisa E[atr|=val]Atributo prefixoUsar com tag a e atributo hreflang

28 Seletor universal (*) Casamento com elemento de qualquer tipo; 28 13/1/2014

29 Significado: coloque a cor amarela e o fundo azul em todos os elementos dentro de um div, independente do tipo 29

30 30

31 CSS Reset 31 * { margin: 0; padding: 0; } Elimina margens e espaçamentos padrão de todos os elementos

32 Localização / Depuração de elementos CSS 32

33 Seletor filho (E > F) Casamento com todos os elementos filhos imediatos de um elemento; Diferente do seletor descendente! 33

34 Significado: deixar em verde e com fonte grande todos os filhos imediatos de um div 34

35 35

36 Seletor irmão adjacente (E + F) Casamento com um elemento irmão e adjacente (F) ao primeiro elemento (E); Elementos com mesmo pai; Primeiro elemento no mesmo nível do segundo; Útil para seleção de inputs após labels (label+input); 36

37 Significado: trocar o fundo de todos os parágrafos imediatamente colocados após um elemento 37

38 Significado: sublinhar todos os parágrafos depois de um parágrafo, ou seja, em uma lista de parágrafos, formatar todos menos o 1º 38

39 39

40 Pseudo-classe dinâmica sobre o elemento (E:hover) Casamento com um elemento cujo mouse está sobre ele; No IE6 funciona o a:hover! 40 ie6

41 Significado: quando o mouse passar sobre um link (tag ), troque o fundo para vermelho e elimine qualquer tipo de sublinhado 41

42 42

43 43

44 Ordem correta de aplicação das pseudo-classes de link Link, Visited, Hover, Active; Mnemônico: LoVeHAte; Se considerar o focus: LoVe Fears HAte; 44

45 Pseudo-classe dinâmica foco (E:focus) Casamento com elemento que está com o foco para digitação; Não funciona no IE7. 45 ie7

46 Significado: quando o usuário estiver com o foco de teclado em uma área de texto qualquer, troque o fundo da área para vermelho 46

47 47

48 Ordem correta de aplicação das pseudo-classes de link (com focus) Link, Visited, Hover, Focus, Active; 48 13/1/2014 Ver mais detalhes em: link-states/ link-states/

49 Pseudo-classe primeiro filho (E:first- child) Casamento com um elemento quando ele é o primeiro filho de seu pai; 49

50 Significado: muda para vermelho a cor de fundo de todos os que são o primeiro filho de seu elemento pai 50

51 51

52 Pseudo-classe idioma (E:lang(C)) Seleciona o elemento com o idioma indicado; Para especificar o idioma, usar atributo lang. Não funciona ie7. 52 ie7

53 Significado: mudar para vermelho a cor de fundo de todos os elementos da língua Português e suas variantes 53

54 54

55 Pseudo-elemento de conteúdo inserido antes de outro (:before) Gera conteúdo antes do elemento especificado através da propriedade content;da propriedade content Comportamento complexo, mas poderoso; Comportamento complexo Não funciona no IE /1/2014 ie7

56 Significado: Coloca o texto Pais: antes de todos os parágrafos. 56

57 57

58 Pseudo-elemento de conteúdo inserido depois de outro (:after) Gera conteúdo depois do elemento especificado; Não funciona no IE7; 58 ie7

59 Significado: Coloca o texto indicado após todos os parágrafos. 59

60 60

61 Seletor de elemento com atributo existente (existência) (E[atr]) Seleciona um elemento quando o atributo especificado entre colchetes [] existir;

62 Significado: coloca sublinhado em todos os parágrafos que tiverem o atributo id

63 Significado: deixa verde qualquer elemento que possua o atributo title

64 Significado: coloca mensagem após todo elemento que possui título

65

66

67 Seletor de elemento com valor de atributo igual (igualdade) (E[atr=val]) Seleciona um elemento quando o valor do atributo especificado na regra for igual ao valor encontrado no elemento;

68 Significado: coloca uma borda em todos os links cujo atributo rel seja igual ao valor tag Para mais detalhes sobre o significado de rel=tag, acesse o link:

69 Significado: coloque um tachado (linha cortando) todos os links com valor de atributo rel igual a nofollow Para mais detalhes sobre o significado de rel=nofollow, acesse o link:

70

71 Alteração de todos os inputs de um certo tipo

72 Seletor de elemento com valor de atributo contido em lista (espaço) (E[atr~=val]) Seleciona um elemento quando o valor do atributo especificado na regra estiver contido dentro de uma lista separada por espaços no valor do atributo do elemento selecionado;

73 Significado: seleciona todos os parágrafos nos quais, dentro do atributo title contiver uma lista separada por espaços e a palavra microsoft

74

75 75 O seletor E[atr~=val] não é necessário quando se precisa aplicar 2 (ou mais) classes a um elemento. Separe as classes por espaço no atributo class.

76 76

77 Seletor de elemento com prefixo (hífen) (E[atr|=val]) Faz o casamento com elementos cujo valor de atributo seja igual, ou opcionalmente, seguido por um hífen; Usado, geralmente com atributo hreflang (indica o idioma do conteúdo linkado).atributo hreflang Não use com o atributo lang!

78 Significado: seleciona o link cujo idioma de destino seja o Português

79

80 80 Material referente ao assunto da aula Tutorial sobre regras CSS: Tutorial seletores CSS 2.1: _css21_parte1.php _css21_parte1.php Recomendação W3C do CSS 2.1 (em Inglês): #pattern-matching #pattern-matching

81 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: Documentação sobre seletores do site da Microsoft: us/library/aa358816(VS.85).aspx us/library/aa358816(VS.85).aspx 81

82 Material referente ao assunto da aula 82 CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo


Carregar ppt "Laboratório de Informática CSS Seletores Seletores do CSS 2.1 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula."

Apresentações semelhantes


Anúncios Google