Bruno C de Paula Laboratrio de Informtica Seletores

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

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 Java. Script; üHoje trabalharemos com os seletores introduzidos do CSS 1. 0;

Material referente ao assunto da aula ü Tutorial sobre regras CSS: – http: //maujor. com/tutorial/sintaxetut. php ü Recomendação W 3 C do CSS 1. 0: – http: //www. maujor. com/tutorialcss 1/ css 1 tut. shtml 20/12/2021 3

Material referente ao assunto da aula ü Capítulo do Livro CSS – Guia de Bolso: – 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/ 20/12/2021 4

Material referente ao assunto da aula ü CSS – Guia de Bolso; – Editora Alta. Books; – 2008; – Download de um capítulo. 20/12/2021 5

Tags HTML referenciadas na aula (em Português –site Referenciando) üTag de estilo: <style>; üTag de link: <link>; üTag de script: <script>. 20/12/2021 6

Tags HTML referenciadas na aula (em Inglês – site Site. Point) üTag de estilo: <style>; üTag de link: <link>; üTag de script: <script>; 20/12/2021 7

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

Exemplos da aula üSeletor de elemento üSeletor de classe üSeletor de id üAgrupamento de seletores üSeletor contextual 20/12/2021 9

Exemplos da aula ü Pseudo-classe âncora (: link) ü Pseudo-classe âncora (: visited) ü Pseudo-classe âncora (: active) ü Pseudo-elemento letra inicial (: firstletter) ü Pseudo-elemento primeira linha (: firstline) ü Exemplo de “Classititis” ü Seletores no j. Query 20/12/2021 10

Anteriormente em nossa 1ª aula. . . 20/12/2021 11

20/12/2021 12

20/12/2021 13

Separação entre camadas ü HTML: – Conteúdo; – Dados e estrutura; ü CSS: – Apresentação; – Formatação, layout, cores, fontes, posicionamento. ü Java. Script: – Comportamentos; – Programação. 20/12/2021 14

20/12/2021 15

Relembrando CSS. . . 20/12/2021 16

20/12/2021 17

Versões do CSS ü 1. 0: Todos os navegadores do mercado implementam. Aula de hoje; 20/12/2021 18

Versões do CSS (retrocompatíveis) ü 2. 0/2. 1: Implementado em grande parte dos navegadores (implementação parcial: ie 6 e ie 7); ü 3. 0: Em discussão, implementação parcial em alguns navegadores (Opera, Firefox, Safari, Chrome); 20/12/2021 19

Folha de estilo = Regras CSS ü Coleção de regras; ü No exemplo abaixo, temos 2 regras; 20/12/2021 20

Regra CSS ü Alterar todos os <h 1> para a cor azul: 20/12/2021 21

Regra = Seletor + Declaração <style type="text/css"> h 1 { color: blue; } </style> 20/12/2021 22

Declaração = Propriedade + Valor de Propriedade <style type="text/css"> h 1 { color: blue; } </style> 20/12/2021 23

Regra = Seletor + Propriedade + Valor de Propriedade <style type="text/css"> h 1 { color: blue; } </style> 20/12/2021 24

Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer 20/12/2021 25

Aula de hoje: só seletores! E do CSS 1. 0 20/12/2021 26

Seletores não são exclusivos do CSS 20/12/2021 27

Seletores em Java. Script ü Exemplo usando a biblioteca j. Query; 20/12/2021 28

Seletores em Java. Script ü Faz com que quando o usuário clica em um parágrafo a mensagem “ops” seja exibida: 20/12/2021 29

Os seletores do CSS 1. 0 são implementados por todas as plataformas 20/12/2021 30

Use sem medo! 20/12/2021 31

Lista dos Seletores do CSS 1. 0 20/12/2021 32

Seletor Tipo E Elemento . CLASSE Classe #ID Id E, F Agrupamento de seletores Descendente EF 20/12/2021 Observações Cuidado com classititis, dê nomes significativos Tem que ser único, dê nomes significativos 33

Seletor Tipo Observaçõe s a: link Pseudo-classe link Lo. Ve. HAte a: visited Pseudo-classe link visitado Lo. Ve. HAte a: active Pseudo-classe link selecionado Lo. Ve. HAte : first-letter Pseudo-elemento primeira letra : first-line 20/12/2021 Pseudo-elemento primeira linha ie 6 34

Seletor Elemento (E) ü Casamento com um elemento (tag) qualquer E; 20/12/2021 35

Significado: coloque a cor da letra de todos os parágrafos (tag <p> com a cor amarela (yellow) e fundo azul (blue) 20/12/2021 36

20/12/2021 37

Seletor Classe (. E) ü Definem conjuntos de regras que podem ser aplicadas a diferentes elementos; ü Caractere. ; ü Atributo class no HTML. 20/12/2021 38

Significado: trocar para cinza (#ccc) a cor de fundo de todos os elementos da classe c 1, ou seja, marcados com o atributo class=“c 1” 20/12/2021 39

Significado: trocar para vermelho (red) a cor de todos os parágrafos (tag <p>) cuja classe for igual a c 1 20/12/2021 40

20/12/2021 41

“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. 20/12/2021 42

Seletor id (#E) ü Único para alterar o comportamento de 1 e apenas 1 elemento da página; ü Útil em Java. Script; ü Caractere #; ü Atributo id do HTML; 20/12/2021 43

20/12/2021 44

Significado: trocar para vermelho a cor de fundo do elemento identificado com o id “elemento 1” 20/12/2021 45

20/12/2021 46

Nomes Ruins e Nomes Bons ü Ruim: – Vermelho – Menu. Esquerda – Topo ü Bom: – Erro; – Menu. Principal; – Navegacao. Principal. 20/12/2021 47

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

Significado: trocar para vermelho o fundo do elemento com id igual a elemento 1 E de todos os elementos da classe c 1. 20/12/2021 49

20/12/2021 50

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. 20/12/2021 51

Significado: trocar para azul todos os elementos <em> que são descendentes de um parágrafo <p>. Ou seja, <em> que estão dentro de <p>; 20/12/2021 52

20/12/2021 53

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. 20/12/2021 54

Significado: Aumentar a letra de todos os links (font-size: xxlarge) e colocar a cor vermelha (red) 20/12/2021 55

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

Significado: alterar a fonte e a cor de todos os links que forem da classe c 1 20/12/2021 57

20/12/2021 58

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. 20/12/2021 59

Significado: alterar a fonte e a cor dos links visitados. 20/12/2021 60

20/12/2021 61

Clique! 20/12/2021 62

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

Significado: alterar a cor e a fonte do link sendo clicado. 20/12/2021 64

20/12/2021 65

Clique! Solta! 20/12/2021 66

Ordem correta de aplicação das pseudo-classes de link üLink, Visited, Hover, Active; üMnemônico: Lo. Ve. HAte; üHover: CSS 2. 1 20/12/2021 67

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. 20/12/2021 ie 6 68

Significado: alterar a cor e o tamanho da primeira letra de todos os parágrafos 20/12/2021 69

20/12/2021 70

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. 20/12/2021 ie 6 71

Significado: fazer com que o fundo da primeira linha visualizada fique da cor verde 20/12/2021 72

20/12/2021 73

Material referente ao assunto da aula ü Tutorial sobre regras CSS: – http: //maujor. com/tutorial/sintaxetut. php ü Recomendação W 3 C do CSS 1. 0: – http: //www. maujor. com/tutorialcss 1/ css 1 tut. shtml 20/12/2021 74

Material referente ao assunto da aula ü Capítulo do Livro CSS – Guia de Bolso: – 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/ 20/12/2021 75