Bruno C. de Paula
Laboratório de Informática
Seletores
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 JavaScript;
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 W3C do CSS 1.0:
– http://www.maujor.com/tutorialcss1/
css1tut.shtml
05/11/2015
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/
05/11/2015
4
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
5
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
05/11/2015
6
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
05/11/2015
7
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);
05/11/2015
8
Exemplos da aula
Seletor de elemento
Seletor de classe
Seletor de id
Agrupamento de seletores
Seletor contextual
05/11/2015
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 jQuery
05/11/2015
10
Anteriormente em nossa 1ª
aula...
05/11/2015
11
05/11/2015
12
05/11/2015
13
Separação
entre camadas
HTML:
– Conteúdo;
– Dados e estrutura;
CSS:
– Apresentação;
– Formatação, layout, cores, fontes,
posicionamento.
JavaScript:
– Comportamentos;
– Programação.
05/11/2015
14
05/11/2015
15
Relembrando CSS...
05/11/2015
16
05/11/2015
17
Versões do CSS
1.0: Todos os navegadores do
mercado implementam. Aula de
hoje;
05/11/2015
18
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);
05/11/2015
19
Folha de estilo = Regras CSS
Coleção de regras;
No exemplo abaixo, temos 2 regras;
05/11/2015
20
Regra CSS
Alterar todos os <h1> para a cor azul:
05/11/2015
21
Regra = Seletor + Declaração
<style type="text/css">
h1 {
color:blue;
}
</style>
05/11/2015
22
Declaração = Propriedade +
Valor de Propriedade
<style type="text/css">
h1 {
color:blue;
}
</style>
05/11/2015
23
Regra = Seletor + Propriedade +
Valor de Propriedade
<style type="text/css">
h1 {
color:blue;
}
</style>
05/11/2015
24
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
05/11/2015
25
Aula de hoje: só seletores!
E do CSS 1.0
05/11/2015
26
Seletores não são
exclusivos do CSS
05/11/2015
27
Seletores em JavaScript
Exemplo usando a biblioteca jQuery;
05/11/2015
28
Seletores em JavaScript
Faz com que quando o usuário clica em
um parágrafo a mensagem “ops” seja
exibida:
05/11/2015
29
Os seletores do CSS 1.0
são implementados por
todas as plataformas
05/11/2015
30
Use sem medo!
05/11/2015
31
Lista dos Seletores do CSS 1.0
05/11/2015
32
Seletor
Tipo
E
Elemento
.CLASSE
Classe
#ID
Id
E, F
Agrupamento de
seletores
Descendente
EF
05/11/2015
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
LoVeHAte
a:visited
Pseudo-classe
link visitado
LoVeHAte
a:active
Pseudo-classe
link selecionado
LoVeHAte
:first-letter
Pseudo-elemento
primeira letra
:first-line
05/11/2015
Pseudo-elemento
primeira linha
ie6
ie6
34
Seletor Elemento (E)
Casamento com um elemento (tag)
qualquer E;
05/11/2015
35
Significado: coloque a cor da
letra de todos os parágrafos (tag
<p> com a cor amarela (yellow)
e fundo azul (blue)
05/11/2015
36
05/11/2015
37
Seletor Classe (.E)
Definem
conjuntos de
regras que
podem ser
aplicadas a
diferentes
elementos;
Caractere .;
Atributo class
no HTML.
05/11/2015
38
Significado: trocar para cinza
(#ccc) a cor de fundo de todos
os elementos da classe c1, ou
seja, marcados com o atributo
class=“c1”
05/11/2015
39
Significado: trocar para vermelho
(red) a cor de todos os
parágrafos (tag <p>) cuja classe
for igual a c1
05/11/2015
40
05/11/2015
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.
05/11/2015
42
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;
05/11/2015
43
05/11/2015
44
Significado: trocar para vermelho
a cor de fundo do elemento
identificado com o id
“elemento1”
05/11/2015
45
05/11/2015
46
Nomes Ruins e Nomes Bons
Ruim:
– Vermelho
– MenuEsquerda
– Topo
Bom:
– Erro;
– MenuPrincipal;
– NavegacaoPrincipal.
05/11/2015
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;
05/11/2015
48
Significado: trocar para vermelho
o fundo do elemento com id igual
a elemento1 E de todos os
elementos da classe c1.
05/11/2015
49
05/11/2015
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.
05/11/2015
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>;
05/11/2015
52
05/11/2015
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.
05/11/2015
54
Significado: Aumentar a letra de
todos os links (font-size: xxlarge) e colocar a cor vermelha
(red)
05/11/2015
55
Significado: diminuir a letra de
todos os links que estão dentro
de um parágrafo e alterar a cor
para verde
05/11/2015
56
Significado: alterar a fonte e a
cor de todos os links que forem
da classe c1
05/11/2015
57
05/11/2015
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.
05/11/2015
59
Significado: alterar a fonte e a
cor dos links visitados.
05/11/2015
60
05/11/2015
61
Clique!
05/11/2015
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.
05/11/2015
63
Significado: alterar a cor e a
fonte do link sendo clicado.
05/11/2015
64
05/11/2015
65
Clique!
Solta!
05/11/2015
66
Ordem correta de aplicação das
pseudo-classes de link
Link, Visited, Hover, Active;
Mnemônico: LoVeHAte;
Hover: CSS 2.1
05/11/2015
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.
05/11/2015
ie6
68
Significado: alterar a cor e o
tamanho da primeira letra de
todos os parágrafos
05/11/2015
69
05/11/2015
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.
05/11/2015
ie6
71
Significado: fazer com que o
fundo da primeira linha
visualizada fique da cor verde
05/11/2015
72
05/11/2015
73
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/
css1tut.shtml
05/11/2015
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/
05/11/2015
75
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
76
Próximas aulas de CSS
Seletores CSS 2.1;
Seletores CSS 3.0;
Textos e Fontes.
05/11/2015
77