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

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: http://maujor.com/tutorial/sintaxetut.php Tutorial seletores CSS 2.1: http://maujor.com/tutorial/seletores _css21_parte1.php http://maujor.com/tutorial/seletores _css21_parte1.php Recomendação W3C do CSS 2.1 (em Inglês): http://www.w3.org/TR/CSS21/selector.html #pattern-matching http://www.w3.org/TR/CSS21/selector.html #pattern-matching

4 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: http://kimblim.dk/css-tests/selectors/ Documentação sobre seletores do site da Microsoft: http://msdn.microsoft.com/en- us/library/aa358816(VS.85).aspx http://msdn.microsoft.com/en- 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: ;<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 2.1 17

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: http://kimblim.dk/css-tests/selectors/http://kimblim.dk/css-tests/selectors/

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 2.1 24

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: http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the- link-states/ http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the- 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 IE7. 55 13/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: http://microformats.org/wiki/rel-tag-pt-br

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: http://googlediscovery.com/2007/08/18/aprenda-a-usar-o-relnofollow-e-evite-ser-punido-pelo-google/

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: http://maujor.com/tutorial/sintaxetut.php Tutorial seletores CSS 2.1: http://maujor.com/tutorial/seletores _css21_parte1.php http://maujor.com/tutorial/seletores _css21_parte1.php Recomendação W3C do CSS 2.1 (em Inglês): http://www.w3.org/TR/CSS21/selector.html #pattern-matching http://www.w3.org/TR/CSS21/selector.html #pattern-matching

81 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulos_amo stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: http://kimblim.dk/css-tests/selectors/ Documentação sobre seletores do site da Microsoft: http://msdn.microsoft.com/en- us/library/aa358816(VS.85).aspx http://msdn.microsoft.com/en- 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