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

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

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

2 Resumo da aula Para que a ligação do CSS seja feita com os elementos de uma página HTML será necessário o conhecimento da linguagem de seletores; Tal linguagem será útil não apenas no trabalho com CSS, mas também permitirá a alteração do comportamento de elementos em JavaScript; Hoje trabalharemos com os seletores introduzidos do CSS 1.0;

3 313/1/2014 Material referente ao assunto da aula Tutorial sobre regras CSS: – http://maujor.com/tutorial/sintaxetut. php http://maujor.com/tutorial/sintaxetut. php Recomendação W3C do CSS 1.0: – http://www.maujor.com/tutorialcss1/ css1tut.shtml http://www.maujor.com/tutorialcss1/ css1tut.shtml

4 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: – http://altabooks.tempsite.ws/capitulo s_amostra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulo s_amostra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: – http://kimblim.dk/css-tests/selectors/ http://kimblim.dk/css-tests/selectors/ 413/1/2014

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

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

7 713/1/2014 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

8 813/1/2014 Seletores CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Seletor de Elemento; Seletor de Elemento Seletor de Classe (.); Seletor de Classe Seletor de Id (#); Seletor de Id Agrupamento de seletores (,); Agrupamento de seletores Seletor contextual (descendente); Seletor contextual Pseudo-classe âncora (:link, :visited, :active);linkvisitedactive Pseudo-elemento letra inicial (:first-letter);first-letter Pseudo-elemento linha inicial (:first-line);first-line

9 913/1/2014 Exemplos da aula Seletor de elemento Seletor de classe Seletor de id Agrupamento de seletores Seletor contextual

10 Exemplos da aula Pseudo-classe âncora (:link) Pseudo-classe âncora (:visited) Pseudo-classe âncora (:active) Pseudo-elemento letra inicial (:first- letter) Pseudo-elemento letra inicial (:first- letter) Pseudo-elemento primeira linha (:first- line) Pseudo-elemento primeira linha (:first- line) Exemplo de Classititis Seletores no jQuery 1013/1/2014

11 Anteriormente em nossa 1ª aula... 1113/1/2014

12 1213/1/2014

13 1313/1/2014

14 1413/1/2014 Separação entre camadas HTML: – Conteúdo; – Dados e estrutura; CSS: – Apresentação; – Formatação, layout, cores, fontes, posicionamento. JavaScript: – Comportamentos; – Programação.

15 1513/1/2014

16 Relembrando CSS... 1613/1/2014

17 1713/1/2014

18 Versões do CSS 1.0: Todos os navegadores do mercado implementam. Aula de hoje; 1813/1/2014

19 Versões do CSS (retrocompatíveis) 2.0/2.1: Implementado em grande parte dos navegadores (implementação parcial: ie6 e ie7); 3.0: Em discussão, implementação parcial em alguns navegadores (Opera, Firefox, Safari, Chrome); 1913/1/2014

20 Folha de estilo = Regras CSS Coleção de regras; No exemplo abaixo, temos 2 regras; 2013/1/2014

21 Regra CSS Alterar todos os para a cor azul: 2113/1/2014

22 Regra = Seletor + Declaração h1 { color:blue; } 2213/1/2014

23 Declaração = Propriedade + Valor de Propriedade h1 { color:blue; } 2313/1/2014

24 Regra = Seletor + Propriedade + Valor de Propriedade h1 { color:blue; } 2413/1/2014

25 2513/1/2014 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

26 Aula de hoje: só seletores! E do CSS 1.0 2613/1/2014

27 Seletores não são exclusivos do CSS 2713/1/2014

28 Seletores em JavaScript Exemplo usando a biblioteca jQuery;biblioteca jQuery 2813/1/2014

29 Seletores em JavaScript Faz com que quando o usuário clica em um parágrafo a mensagem ops seja exibida: 2913/1/2014

30 Os seletores do CSS 1.0 são implementados por todas as plataformas 3013/1/2014

31 3113/1/2014 Use sem medo!

32 Lista dos Seletores do CSS 1.0 3213/1/2014

33 3313/1/2014 SeletorTipoObservações EElemento.CLASSEClasseCuidado com classititis, dê nomes significativos #IDIdTem que ser único, dê nomes significativos E, FAgrupamento de seletores E FDescendente

34 3413/1/2014 SeletorTipoObservaçõe s a:linkPseudo-classe link LoVeHAte a:visitedPseudo-classe link visitado LoVeHAte a:activePseudo-classe link selecionado LoVeHAte :first-letterPseudo-elemento primeira letra :first-linePseudo-elemento primeira linha ie6

35 Seletor Elemento (E) Casamento com um elemento (tag) qualquer E; 3513/1/2014

36 Significado: coloque a cor da letra de todos os parágrafos (tag com a cor amarela (yellow) e fundo azul (blue) 3613/1/2014

37 3713/1/2014

38 Seletor Classe (.E) Definem conjuntos de regras que podem ser aplicadas a diferentes elementos; Caractere.; Atributo class no HTML. 3813/1/2014

39 Significado: trocar para cinza (#ccc) a cor de fundo de todos os elementos da classe c1, ou seja, marcados com o atributo class=c1 3913/1/2014

40 Significado: trocar para vermelho (red) a cor de todos os parágrafos (tag ) cuja classe for igual a c1 4013/1/2014

41 4113/1/2014

42 Classititis Mania de colocar classe em tudo; Doença comum em quem só sabe usar ferramentas de edição visual para alterar código CSS. 4213/1/2014

43 Seletor id (#E) Único para alterar o comportamento de 1 e apenas 1 elemento da página; Útil em JavaScript; Caractere #; Atributo id do HTML; 4313/1/2014

44 4413/1/2014

45 Significado: trocar para vermelho a cor de fundo do elemento identificado com o id elemento1 4513/1/2014

46 4613/1/2014

47 Nomes Ruins e Nomes Bons Ruim: – Vermelho – MenuEsquerda – Topo Bom: – Erro; – MenuPrincipal; – NavegacaoPrincipal. 4713/1/2014

48 Agrupamento de Seletores (E, F) Reduz tamanho da folha de estilo; Evita repetição; Caractere,; Aplica uma regra para mais de um seletor simples; 4813/1/2014

49 Significado: trocar para vermelho o fundo do elemento com id igual a elemento1 E de todos os elementos da classe c1. 4913/1/2014

50 5013/1/2014

51 Seletor Contextual (E F) Seletor Descendente Seleciona o elemento F que é descendente de outro elemento E; Ou seja, o seletor F deve estar dentro de E. 5113/1/2014

52 Significado: trocar para azul todos os elementos que são descendentes de um parágrafo. Ou seja, que estão dentro de ; 5213/1/2014

53 5313/1/2014

54 Pseudo-classe âncora Pseudo-classe âncora (a:link) Usado para definir um estilo a um link no seu estado inicial; Exclusivo para links; Caractere : e pseudo-classe link. 5413/1/2014

55 Significado: Aumentar a letra de todos os links (font-size: xx- large) e colocar a cor vermelha (red) 5513/1/2014

56 Significado: diminuir a letra de todos os links que estão dentro de um parágrafo e alterar a cor para verde 5613/1/2014

57 Significado: alterar a fonte e a cor de todos os links que forem da classe c1 5713/1/2014

58 5813/1/2014

59 Pseudo-classe âncora (a:visited) Pseudo-classe âncora (a:visited) Usado para definir um estilo a um link após ser visitado; Exclusivo para links; Caractere : e pseudo-classe visited. 5913/1/2014

60 Significado: alterar a fonte e a cor dos links visitados. 6013/1/2014

61 6113/1/2014

62 6213/1/2014 Clique!

63 Pseudo-classe âncora (a:active) Usado para definir um estilo a um link ativo (sendo selecionado); Exclusivo para links; Caractere : e pseudo-classe active. 6313/1/2014

64 Significado: alterar a cor e a fonte do link sendo clicado. 6413/1/2014

65 6513/1/2014

66 6613/1/2014 Clique! Solta!

67 Ordem correta de aplicação das pseudo-classes de link Link, Visited, Hover, Active; Mnemônico: LoVeHAte; Hover: CSS 2.1 6713/1/2014

68 Pseudo-elemento tipográfico de letra inicial (:first-letterPseudo-elemento tipográfico de letra inicial (:first-letter) Define o estilo para a primeira letra de um elemento; Pode ser aplicado em qualquer elemento; Caractere : e pseudo-elemento first-letter. 6813/1/2014 ie6

69 Significado: alterar a cor e o tamanho da primeira letra de todos os parágrafos 6913/1/2014

70 7013/1/2014

71 Pseudo-elemento tipográfico de primeira linha (:first-line) Define o estilo para a primeira linha de um elemento; Pode ser aplicado em qualquer elemento; Caractere : e pseudo-elemento first-line. 7113/1/2014 ie6

72 Significado: fazer com que o fundo da primeira linha visualizada fique da cor verde 7213/1/2014

73 7313/1/2014

74 7413/1/2014 Material referente ao assunto da aula Tutorial sobre regras CSS: – http://maujor.com/tutorial/sintaxetut. php http://maujor.com/tutorial/sintaxetut. php Recomendação W3C do CSS 1.0: – http://www.maujor.com/tutorialcss1/ css1tut.shtml http://www.maujor.com/tutorialcss1/ css1tut.shtml

75 Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: – http://altabooks.tempsite.ws/capitulo s_amostra/00_cssbolso.pdf http://altabooks.tempsite.ws/capitulo s_amostra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: – http://kimblim.dk/css-tests/selectors/ http://kimblim.dk/css-tests/selectors/ 7513/1/2014

76 Material referente ao assunto da aula 7613/1/2014 CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo

77 7713/1/2014 Próximas aulas de CSS Seletores CSS 2.1; Seletores CSS 3.0; Textos e Fontes.