laboratório de informática seletores seletores do css 1.0 1º semestre 2009 > pucpr > bsi...
TRANSCRIPT
![Page 1: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/1.jpg)
Laboratório de InformáticaSeletoresSeletores do CSS 1.0
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/2.jpg)
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;
![Page 3: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/3.jpg)
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
![Page 4: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/4.jpg)
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
![Page 5: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/5.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
511/04/23
![Page 6: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/6.jpg)
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>.
![Page 7: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/7.jpg)
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>;
![Page 8: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/8.jpg)
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);
![Page 9: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/9.jpg)
911/04/23
Exemplos da aula
Seletor de elementoSeletor de classeSeletor de idAgrupamento de seletoresSeletor contextual
![Page 10: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/10.jpg)
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
![Page 11: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/11.jpg)
Anteriormente em nossa 1ª aula...
1111/04/23
![Page 12: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/12.jpg)
1211/04/23
![Page 13: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/13.jpg)
1311/04/23
![Page 14: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/14.jpg)
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.
![Page 15: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/15.jpg)
1511/04/23
![Page 16: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/16.jpg)
Relembrando CSS...
1611/04/23
![Page 17: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/17.jpg)
1711/04/23
![Page 18: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/18.jpg)
Versões do CSS
1.0: Todos os navegadores do mercado implementam. Aula de hoje;
1811/04/23
![Page 19: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/19.jpg)
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
![Page 20: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/20.jpg)
Folha de estilo = Regras CSS
Coleção de regras;No exemplo abaixo, temos 2 regras;
2011/04/23
![Page 21: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/21.jpg)
Regra CSS
Alterar todos os <h1> para a cor azul:
2111/04/23
![Page 22: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/22.jpg)
Regra = Seletor + Declaração
<style type="text/css">
h1 { color:blue;}</style>
2211/04/23
![Page 23: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/23.jpg)
Declaração = Propriedade + Valor de Propriedade
<style type="text/css">
h1 { color:blue;}</style>
2311/04/23
![Page 24: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/24.jpg)
Regra = Seletor + Propriedade + Valor de Propriedade
<style type="text/css">
h1 { color:blue;}</style>
2411/04/23
![Page 25: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/25.jpg)
2511/04/23
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
![Page 26: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/26.jpg)
Aula de hoje: só seletores!E do CSS 1.0
2611/04/23
![Page 27: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/27.jpg)
Seletores não são exclusivos do CSS
2711/04/23
![Page 28: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/28.jpg)
Seletores em JavaScript
Exemplo usando a biblioteca jQuery;
2811/04/23
![Page 29: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/29.jpg)
Seletores em JavaScriptFaz com que quando o usuário clica em
um parágrafo a mensagem “ops” seja exibida:
2911/04/23
![Page 30: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/30.jpg)
Os seletores do CSS 1.0 são implementados por todas as plataformas
3011/04/23
![Page 31: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/31.jpg)
3111/04/23
Use sem medo!
![Page 32: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/32.jpg)
Lista dos Seletores do CSS 1.0
3211/04/23
![Page 33: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/33.jpg)
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
![Page 34: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/34.jpg)
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
![Page 35: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/35.jpg)
Seletor Elemento (E)
Casamento com um elemento (tag) qualquer E;
3511/04/23
![Page 36: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/36.jpg)
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
![Page 37: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/37.jpg)
3711/04/23
![Page 38: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/38.jpg)
Seletor Classe (.E)
Definem conjuntos de regras que podem ser aplicadas a diferentes elementos;
Caractere .;Atributo class
no HTML.
3811/04/23
![Page 39: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/39.jpg)
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
![Page 40: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/40.jpg)
Significado: trocar para vermelho (red) a cor de todos os parágrafos (tag <p>) cuja classe for igual a c1
4011/04/23
![Page 41: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/41.jpg)
4111/04/23
![Page 42: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/42.jpg)
“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
![Page 43: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/43.jpg)
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
![Page 44: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/44.jpg)
4411/04/23
![Page 45: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/45.jpg)
Significado: trocar para vermelho a cor de fundo do elemento identificado com o id “elemento1”
4511/04/23
![Page 46: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/46.jpg)
4611/04/23
![Page 47: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/47.jpg)
Nomes Ruins e Nomes Bons
Ruim:–Vermelho–MenuEsquerda–Topo
Bom:–Erro;–MenuPrincipal;–NavegacaoPrincipal.
4711/04/23
![Page 48: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/48.jpg)
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
![Page 49: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/49.jpg)
Significado: trocar para vermelho o fundo do elemento com id igual a elemento1 E de todos os elementos da classe c1.
4911/04/23
![Page 50: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/50.jpg)
5011/04/23
![Page 51: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/51.jpg)
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
![Page 52: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/52.jpg)
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
![Page 53: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/53.jpg)
5311/04/23
![Page 54: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/54.jpg)
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
![Page 55: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/55.jpg)
Significado: Aumentar a letra de todos os links (font-size: xx-large) e colocar a cor vermelha (red)
5511/04/23
![Page 56: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/56.jpg)
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
![Page 57: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/57.jpg)
Significado: alterar a fonte e a cor de todos os links que forem da classe c1
5711/04/23
![Page 58: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/58.jpg)
5811/04/23
![Page 59: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/59.jpg)
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
![Page 60: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/60.jpg)
Significado: alterar a fonte e a cor dos links visitados.
6011/04/23
![Page 61: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/61.jpg)
6111/04/23
![Page 62: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/62.jpg)
6211/04/23
Clique!
![Page 63: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/63.jpg)
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
![Page 64: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/64.jpg)
Significado: alterar a cor e a fonte do link sendo clicado.
6411/04/23
![Page 65: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/65.jpg)
6511/04/23
![Page 66: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/66.jpg)
6611/04/23
Clique!
Solta!
![Page 67: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/67.jpg)
Ordem correta de aplicação das pseudo-classes de link
Link, Visited, Hover, Active;Mnemônico: LoVeHAte;Hover: CSS 2.1
6711/04/23
![Page 68: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/68.jpg)
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
![Page 69: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/69.jpg)
Significado: alterar a cor e o tamanho da primeira letra de todos os parágrafos
6911/04/23
![Page 70: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/70.jpg)
7011/04/23
![Page 71: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/71.jpg)
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
![Page 72: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/72.jpg)
Significado: fazer com que o fundo da primeira linha visualizada fique da cor verde
7211/04/23
![Page 73: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/73.jpg)
7311/04/23
![Page 74: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/74.jpg)
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
![Page 75: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/75.jpg)
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
![Page 76: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/76.jpg)
Material referente ao assunto da aula
7611/04/23
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um
capítulo.
![Page 77: Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader034.vdocuments.net/reader034/viewer/2022042814/552fc0fe497959413d8bbab9/html5/thumbnails/77.jpg)
7711/04/23
Próximas aulas de CSS
Seletores CSS 2.1;Seletores CSS 3.0;Textos e Fontes.