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

Apresentação em tema: "Laboratório de Informática CSS Seletores Seletores do CSS 1.0 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 1.0 1º Semestre 2010 > 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 3 Material referente ao assunto da aula Tutorial sobre regras CSS: http://maujor.com/tutorial/sintaxetut.php Recomendação W3C do CSS 1.0: http://www.maujor.com/tutorialcss1/css1tu t.shtml http://www.maujor.com/tutorialcss1/css1tu t.shtml

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/ 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 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 Anteriormente em nossa 1ª aula... 9

10 10

11 11

12 12 Separação entre camadas HTML: Conteúdo; Dados e estrutura; CSS: Apresentação; Formatação, layout, cores, fontes, posicionamento. JavaScript: Comportamentos; Programação.

13 13

14 Relembrando CSS... 14

15 15

16 Versões do CSS 1.0: Todos os navegadores do mercado implementam. Aula de hoje; 16

17 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); 17

18 Folha de estilo = Regras CSS Coleção de regras; No exemplo abaixo, temos 2 regras; 18

19 Regra CSS Alterar todos os para a cor azul: 19 13/1/2014

20 Regra = Seletor + Declaração h1 { color:blue; } 20

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

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

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

24 Aula de hoje: só seletores! E do CSS 1.0 24

25 Seletores não são exclusivos do CSS 25

26 Seletores em JavaScript Exemplo usando a biblioteca jQuery;biblioteca jQuery Usaremos a versão do jQuery hospedada no CDN do Google; CDN do Google CDN = Content Delivery Network; Ao clicar em qualquer parágrafo, exibe a mensagem. 26

27 Os seletores do CSS 1.0 são implementados por todas as plataformas 27

28 28 Use sem medo!

29 Lista dos Seletores do CSS 1.0 29

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

31 3113/1/2014 SeletorTipoObservações a:linkPseudo-classe linkLoVeHAte a:visitedPseudo-classe link visitado LoVeHAte a:activePseudo-classe link selecionado LoVeHAte :first-letterPseudo-elemento primeira letra :first-linePseudo-elemento primeira linha ie6

32 Seletor Elemento (E) Casamento com um elemento (tag) qualquer E; 32

33 Significado: coloque a cor da letra de todos os parágrafos (tag com a cor amarela (yellow) e fundo azul (blue) 33

34 34

35 Seletor Classe (.E) Definem conjuntos de regras que podem ser aplicadas a diferentes elementos; Caractere.; Atributo class no HTML. 35

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

37 Significado: trocar para vermelho (red) a cor de todos os parágrafos (tag ) cuja classe for igual a c1 37

38 38

39 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. 39

40 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; 40

41 41

42 Significado: trocar para vermelho a cor de fundo do elemento identificado com o id elemento1 42

43 43

44 Nomes Ruins e Nomes Bons Ruim: Vermelho MenuEsquerda Topo Bom: Erro; MenuPrincipal; NavegacaoPrincipal. 44

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

46 Significado: trocar para vermelho o fundo do elemento com id igual a elemento1 E de todos os elementos da classe c1. 46

47 47

48 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. 48

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

50 50

51 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. 51

52 Significado: Aumentar a letra de todos os links (font-size: xx-large) e colocar a cor vermelha (red) 52

53 Significado: diminuir a letra de todos os links que estão dentro de um parágrafo e alterar a cor para verde 53

54 Significado: alterar a fonte e a cor de todos os links que forem da classe c1 54

55 55

56 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. 56

57 Significado: alterar a fonte e a cor dos links visitados. 57

58 58

59 59 Clique!

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

61 Significado: alterar a cor e a fonte do link sendo clicado. 61

62 62

63 63 Clique! Solta!

64 Ordem correta de aplicação das pseudo-classes de link Link, Visited, Hover, Active; Mnemônico: LoVeHAte / LoVe Fears HAte; Hover e Focus: CSS 2.1 64

65 Pseudo-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. 65 ie6

66 Significado: alterar a cor e o tamanho da primeira letra de todos os parágrafos 66

67 67

68 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. 68 ie6

69 Significado: fazer com que o fundo da primeira linha visualizada fique da cor verde 69

70 70

71 71 Material referente ao assunto da aula Tutorial sobre regras CSS: http://maujor.com/tutorial/sintaxetut.php Recomendação W3C do CSS 1.0: http://www.maujor.com/tutorialcss1/css1tu t.shtml http://www.maujor.com/tutorialcss1/css1tu t.shtml

72 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/ 72

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