Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula
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.