Laboratório de InformáticaCSS SeletoresSeletores do CSS 1.0

1º Semestre 2010 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

Resumo da aulaPara 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:http://maujor.com/tutorial/sintaxetut.p

hpRecomendação W3C do CSS 1.0:

http://www.maujor.com/tutorialcss1/css1tut.shtml

Material referente ao assunto da aula

Capítulo do Livro CSS – Guia de Bolso:http://altabooks.tempsite.ws/capitulos

_amostra/00_cssbolso.pdfTabela com resumo de todos os

seletores do CSS e sua compatibilidade:http://kimblim.dk/css-tests/selectors/

4

Material referente ao assunto da aula

CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um

capítulo.

5

6

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

7

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

8

Seletores CSS referenciados na aula (em Inglês –site SitePoint)

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

Anteriormente em nossa 1ª aula...

9

10

11

12

Separação entre camadasHTML:

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 CSS1.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 <h1> para a cor azul:

19

11/04/23

Regra = Seletor + Declaração

<style type="text/css">

h1 { color:blue;}</style>

20

Declaração = Propriedade + Valor de Propriedade

<style type="text/css">

h1 { color:blue;}</style>

21

11/04/23

Regra = Seletor + Propriedade + Valor de Propriedade

<style type="text/css">

h1 { color:blue;}</style>

22

11/04/23

23

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

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

24

Seletores não são exclusivos do CSS

25

Seletores em JavaScript

Exemplo usando a biblioteca jQuery;Usaremos a versão do jQuery

hospedada no 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 1.0

29

3011/04/23

Seletor Tipo Observações

E Elemento

.CLASSE Classe Cuidado com classititis, dê nomes significativos

#ID Id Tem que ser único, dê nomes significativos

E, F Agrupamento de seletores

E F Descendente

3111/04/23

Seletor Tipo Observações

a:link Pseudo-classe link

LoVeHAte

a:visited Pseudo-classe link visitado

LoVeHAte

a:active Pseudo-classe link selecionado

LoVeHAte

:first-letter Pseudo-elemento primeira letra

:first-line Pseudo-elemento primeira linha

ie6

ie6

Seletor Elemento (E)

Casamento com um elemento (tag) qualquer E;

32

Significado: coloque a cor da letra de todos os parágrafos (tag <p> 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 <p>) 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:VermelhoMenuEsquerdaTopo

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 <em> que são descendentes de um parágrafo <p>.

Ou seja, <em> que estão dentro de <p>;

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 2.1

64

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:http://maujor.com/tutorial/

sintaxetut.phpRecomendação W3C do CSS 1.0:

http://www.maujor.com/tutorialcss1/css1tut.shtml

Material referente ao assunto da aula

Capítulo do Livro CSS – Guia de Bolso:http://altabooks.tempsite.ws/

capitulos_amostra/00_cssbolso.pdfTabela com resumo de todos os

seletores do CSS e sua compatibilidade:http://kimblim.dk/css-tests/selectors/

72

Material referente ao assunto da aula73

CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um

capítulo.