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

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 Material referente ao assunto da aula Tutorial sobre regras CSS: Recomendação W3C do CSS 1.0: t.shtml t.shtml

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: 4

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 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

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

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

Anteriormente em nossa 1ª aula... 9

10

11

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

Relembrando CSS... 14

15

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

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

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

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

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

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

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

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

Aula de hoje: só seletores! E do CSS

Seletores não são exclusivos do CSS 25

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

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

28 Use sem medo!

Lista dos Seletores do CSS

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

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

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

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

34

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

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

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

38

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

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

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

43

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

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

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

47

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

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

50

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

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

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

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

55

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

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

58

59 Clique!

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

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

62

63 Clique! Solta!

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

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

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

67

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

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

70

71 Material referente ao assunto da aula Tutorial sobre regras CSS: Recomendação W3C do CSS 1.0: t.shtml t.shtml

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

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