Laboratório de Informática Seletores Seletores do CSS 1.0 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula

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;

313/1/2014 Material referente ao assunto da aula Tutorial sobre regras CSS: – php php Recomendação W3C do CSS 1.0: – css1tut.shtml css1tut.shtml

Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: – s_amostra/00_cssbolso.pdf s_amostra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: – /1/2014

Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 513/1/2014

6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

713/1/2014 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

813/1/2014 Seletores CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Seletor de Elemento; Seletor de Elemento Seletor de Classe (.); Seletor de Classe Seletor de Id (#); Seletor de Id Agrupamento de seletores (,); Agrupamento de seletores Seletor contextual (descendente); Seletor contextual Pseudo-classe âncora (:link, :visited, :active);linkvisitedactive Pseudo-elemento letra inicial (:first-letter);first-letter Pseudo-elemento linha inicial (:first-line);first-line

913/1/2014 Exemplos da aula Seletor de elemento Seletor de classe Seletor de id Agrupamento de seletores Seletor contextual

Exemplos da aula Pseudo-classe âncora (:link) Pseudo-classe âncora (:visited) Pseudo-classe âncora (:active) Pseudo-elemento letra inicial (:first- letter) Pseudo-elemento letra inicial (:first- letter) Pseudo-elemento primeira linha (:first- line) Pseudo-elemento primeira linha (:first- line) Exemplo de Classititis Seletores no jQuery 1013/1/2014

Anteriormente em nossa 1ª aula /1/2014

1213/1/2014

1313/1/2014

1413/1/2014 Separação entre camadas HTML: – Conteúdo; – Dados e estrutura; CSS: – Apresentação; – Formatação, layout, cores, fontes, posicionamento. JavaScript: – Comportamentos; – Programação.

1513/1/2014

Relembrando CSS /1/2014

1713/1/2014

Versões do CSS 1.0: Todos os navegadores do mercado implementam. Aula de hoje; 1813/1/2014

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); 1913/1/2014

Folha de estilo = Regras CSS Coleção de regras; No exemplo abaixo, temos 2 regras; 2013/1/2014

Regra CSS Alterar todos os para a cor azul: 2113/1/2014

Regra = Seletor + Declaração h1 { color:blue; } 2213/1/2014

Declaração = Propriedade + Valor de Propriedade h1 { color:blue; } 2313/1/2014

Regra = Seletor + Propriedade + Valor de Propriedade h1 { color:blue; } 2413/1/2014

2513/1/2014 Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

Aula de hoje: só seletores! E do CSS /1/2014

Seletores não são exclusivos do CSS 2713/1/2014

Seletores em JavaScript Exemplo usando a biblioteca jQuery;biblioteca jQuery 2813/1/2014

Seletores em JavaScript Faz com que quando o usuário clica em um parágrafo a mensagem ops seja exibida: 2913/1/2014

Os seletores do CSS 1.0 são implementados por todas as plataformas 3013/1/2014

3113/1/2014 Use sem medo!

Lista dos Seletores do CSS /1/2014

3313/1/2014 SeletorTipoObservações EElemento.CLASSEClasseCuidado com classititis, dê nomes significativos #IDIdTem que ser único, dê nomes significativos E, FAgrupamento de seletores E FDescendente

3413/1/2014 SeletorTipoObservaçõe s a:linkPseudo-classe link LoVeHAte a:visitedPseudo-classe link visitado LoVeHAte a:activePseudo-classe link selecionado LoVeHAte :first-letterPseudo-elemento primeira letra :first-linePseudo-elemento primeira linha ie6

Seletor Elemento (E) Casamento com um elemento (tag) qualquer E; 3513/1/2014

Significado: coloque a cor da letra de todos os parágrafos (tag com a cor amarela (yellow) e fundo azul (blue) 3613/1/2014

3713/1/2014

Seletor Classe (.E) Definem conjuntos de regras que podem ser aplicadas a diferentes elementos; Caractere.; Atributo class no HTML. 3813/1/2014

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

Significado: trocar para vermelho (red) a cor de todos os parágrafos (tag ) cuja classe for igual a c1 4013/1/2014

4113/1/2014

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. 4213/1/2014

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; 4313/1/2014

4413/1/2014

Significado: trocar para vermelho a cor de fundo do elemento identificado com o id elemento1 4513/1/2014

4613/1/2014

Nomes Ruins e Nomes Bons Ruim: – Vermelho – MenuEsquerda – Topo Bom: – Erro; – MenuPrincipal; – NavegacaoPrincipal. 4713/1/2014

Agrupamento de Seletores (E, F) Reduz tamanho da folha de estilo; Evita repetição; Caractere,; Aplica uma regra para mais de um seletor simples; 4813/1/2014

Significado: trocar para vermelho o fundo do elemento com id igual a elemento1 E de todos os elementos da classe c /1/2014

5013/1/2014

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. 5113/1/2014

Significado: trocar para azul todos os elementos que são descendentes de um parágrafo. Ou seja, que estão dentro de ; 5213/1/2014

5313/1/2014

Pseudo-classe âncora 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. 5413/1/2014

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

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

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

5813/1/2014

Pseudo-classe âncora (a:visited) 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. 5913/1/2014

Significado: alterar a fonte e a cor dos links visitados. 6013/1/2014

6113/1/2014

6213/1/2014 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. 6313/1/2014

Significado: alterar a cor e a fonte do link sendo clicado. 6413/1/2014

6513/1/2014

6613/1/2014 Clique! Solta!

Ordem correta de aplicação das pseudo-classes de link Link, Visited, Hover, Active; Mnemônico: LoVeHAte; Hover: CSS /1/2014

Pseudo-elemento tipográfico de letra inicial (:first-letterPseudo-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. 6813/1/2014 ie6

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

7013/1/2014

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. 7113/1/2014 ie6

Significado: fazer com que o fundo da primeira linha visualizada fique da cor verde 7213/1/2014

7313/1/2014

7413/1/2014 Material referente ao assunto da aula Tutorial sobre regras CSS: – php php Recomendação W3C do CSS 1.0: – css1tut.shtml css1tut.shtml

Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: – s_amostra/00_cssbolso.pdf s_amostra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: – /1/2014

Material referente ao assunto da aula 7613/1/2014 CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo

7713/1/2014 Próximas aulas de CSS Seletores CSS 2.1; Seletores CSS 3.0; Textos e Fontes.