Laboratório de InformáticaSeletoresSeletores do CSS 1.0

1º Semestre 2009 > 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;

311/04/23

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 aulaCapítulo do Livro CSS – Guia de Bolso:

–http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf

Tabela com resumo de todos os seletores do CSS e sua compatibilidade:–http://kimblim.dk/css-tests/selectors/

411/04/23

Material referente ao assunto da aula

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

apítulo.

511/04/23

611/04/23

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

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

711/04/23

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

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

811/04/23

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

911/04/23

Exemplos da aula

Seletor de elementoSeletor de classeSeletor de idAgrupamento de seletoresSeletor contextual

Exemplos da aula

Pseudo-classe âncora (:link)Pseudo-classe âncora (:visited)Pseudo-classe âncora (:active)Pseudo-elemento letra inicial (:first-lette

r)Pseudo-elemento primeira linha (:first-li

ne)Exemplo de “Classititis”Seletores no jQuery

1011/04/23

Anteriormente em nossa 1ª aula...

1111/04/23

1211/04/23

1311/04/23

1411/04/23

Separação entre camadasHTML:

–Conteúdo;–Dados e estrutura;

CSS: –Apresentação;–Formatação, layout, cores, fontes,

posicionamento.JavaScript:

–Comportamentos;–Programação.

1511/04/23

Relembrando CSS...

1611/04/23

1711/04/23

Versões do CSS

1.0: Todos os navegadores do mercado implementam. Aula de hoje;

1811/04/23

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

1911/04/23

Folha de estilo = Regras CSS

Coleção de regras;No exemplo abaixo, temos 2 regras;

2011/04/23

Regra CSS

Alterar todos os <h1> para a cor azul:

2111/04/23

Regra = Seletor + Declaração

<style type="text/css">

h1 { color:blue;}</style>

2211/04/23

Declaração = Propriedade + Valor de Propriedade

<style type="text/css">

h1 { color:blue;}</style>

2311/04/23

Regra = Seletor + Propriedade + Valor de Propriedade

<style type="text/css">

h1 { color:blue;}</style>

2411/04/23

2511/04/23

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

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

2611/04/23

Seletores não são exclusivos do CSS

2711/04/23

Seletores em JavaScript

Exemplo usando a biblioteca jQuery;

2811/04/23

Seletores em JavaScriptFaz com que quando o usuário clica em

um parágrafo a mensagem “ops” seja exibida:

2911/04/23

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

3011/04/23

3111/04/23

Use sem medo!

Lista dos Seletores do CSS 1.0

3211/04/23

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

3411/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;

3511/04/23

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

3611/04/23

3711/04/23

Seletor Classe (.E)

Definem conjuntos de regras que podem ser aplicadas a diferentes elementos;

Caractere .;Atributo class

no HTML.

3811/04/23

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

3911/04/23

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

4011/04/23

4111/04/23

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

4211/04/23

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;4311/04/23

4411/04/23

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

4511/04/23

4611/04/23

Nomes Ruins e Nomes Bons

Ruim:–Vermelho–MenuEsquerda–Topo

Bom:–Erro;–MenuPrincipal;–NavegacaoPrincipal.

4711/04/23

Agrupamento de Seletores (E, F)

Reduz tamanho da folha de estilo;Evita repetição;Caractere ,;Aplica uma regra para mais de um

seletor simples;

4811/04/23

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

4911/04/23

5011/04/23

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.

5111/04/23

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

5211/04/23

5311/04/23

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.

5411/04/23

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

5511/04/23

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

5611/04/23

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

5711/04/23

5811/04/23

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.

5911/04/23

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

6011/04/23

6111/04/23

6211/04/23

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.

6311/04/23

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

6411/04/23

6511/04/23

6611/04/23

Clique!

Solta!

Ordem correta de aplicação das pseudo-classes de link

Link, Visited, Hover, Active;Mnemônico: LoVeHAte;Hover: CSS 2.1

6711/04/23

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.

6811/04/23

ie6

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

6911/04/23

7011/04/23

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.

7111/04/23

ie6

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

7211/04/23

7311/04/23

7411/04/23

Material referente ao assunto da aulaTutorial sobre regras CSS:

–http://maujor.com/tutorial/sintaxetut.php

Recomendação W3C do CSS 1.0:–http://www.maujor.com/tutorialcss1/

css1tut.shtml

Material referente ao assunto da aulaCapítulo do Livro CSS – Guia de Bolso:

–http://altabooks.tempsite.ws/capitulos_amostra/00_cssbolso.pdf

Tabela com resumo de todos os seletores do CSS e sua compatibilidade:–http://kimblim.dk/css-tests/selectors/

7511/04/23

Material referente ao assunto da aula

7611/04/23

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

capítulo.

7711/04/23

Próximas aulas de CSS

Seletores CSS 2.1;Seletores CSS 3.0;Textos e Fontes.