Aula 06, 07 e 08 seletores compostos e pseudo seletores

159 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
159
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 06, 07 e 08 seletores compostos e pseudo seletores

  1. 1. Seletores Compostos – CSS Style Sheet Professor: Jolvani Aula 06 e 07
  2. 2. Seletores Compostos- CSS  Olá, Na aula passada vimos os seletores simples (universal, seletor elemento, classe, id, seletor atributo) ...  Nesta aula vamos conhecer os seletores compostos.  Seletor Simples: composto por um único “seletor”  Composto: contém mais de um seletor...  Iniciamos Removendo todos os seletores e deixando nossa página no formato padrão do browser.  Seletor Composto Descendente: Aplicado no elemento do documento que descende de outro.
  3. 3. Seletores Compostos- CSS  Ex: <em> esta dentro diretamente de <p> e também esta dentro indiretamente de <div>  Alcançar todo elemento <em> dentro de uma <div> não precisa estar diretamente dentro de <div>  Seletores Composto filho – “Precisa estar diretamente dentro”  Informa a posição ou caminho correto da localização do elemento filho.  Usando o sinal de > (maior)  Ex: Somente será aplicado se o <em> estiver dentro da <div> veja o resultado.
  4. 4. Seletores Compostos- CSS  Seletor Irmão Adjacente: Aplicado diretamente após, ou a próxima tag depois do irmão.  Ex:  Com mais uma tag (irmão);  Aplicou a primeira tag <h2> depois de <p>
  5. 5. Seletores Compostos- CSS  Nesta aula conhecemos os três tipos de seletores compostos:  Seletores descendentes;  Seletor filhos;  Seletores Irmão Adjacentes.
  6. 6. Pseudo Seletores – CSS – Aula 07  Na aula anterior vimos Seletores compostos (seletores descendente, filhos e irmãos), agora Pseudo Seletores (pseudo elementos e pseudo classes)  Na w3school encontramos as pseudo classes e pseudo elementos  Esses componentes permitem estilizar informações inacessíveis na “árvore” do documento html.  Pseudo Classe – ocupa qualquer posição do seletor  Pseudo Elemento – deve ser colocado após o último seletor simples.
  7. 7. Pseudo Seletores – CSS – Aula 07  Modificamos nossa Aula04.html para:  Queremos criar um estilo css para o primeiro filho do <div>, ou seja dos elementos <h1>, <h2>, <p> dentro do <div>. Qual o elemento “primeiro filho” o <h1>.
  8. 8. Pseudo Classes – CSS – Aula 07  Alterando nosso estilo.css  Alterar somente se h1 for o primeiro filho, usa-se a pseudo classe denominada “first-child”.  Se usarmos h2 veja o que acontece... (h2 é primeiro filho?)
  9. 9. Pseudo Classes – CSS – Aula 07  Vamos alterar nosso html, para links visitados e não visitados  Por padrão o browser marca em roxo o link visitado, e o não visitado fica em azul. Podemos marcar os links não visitados, vejamos. (estilo.css)  E na tag visitada usamos a pseudo classe “visited”.
  10. 10. Pseudo Classes – CSS – Aula 07  Vamos alterar nosso html, agora para label e input text.  Pseudo classes dinâmicas... Ocorre quando eu passar o mouse por um elemento, dar o foco para ele, etc...  Porem queremos que ele fique em amarelo somente quando passarmos o mouse no elemento. Usamos pseudo classe focus.
  11. 11. Pseudo Classes – CSS – Aula 07  Porem queremos que ele fique em amarelo somente quando passarmos o mouse no elemento. Usamos pseudo classe focus.  Somente quando clicar no elemento (irá receber o foco)  Pseudo classe hover no elemento label, ao passar o mouse sobre ele Vejamos:
  12. 12. Pseudo Classes – CSS – Aula 07  Podemos ainda colocar como se estivesse ativando a label, ou o link.
  13. 13. Pseudo Classes – CSS – Aula 07  Adicionamos ao link, o atributo lang que adiciona a língua que será adotada para o conteúdo.  Com a pseudo classe lang.
  14. 14. Pseudo Elementos – CSS – Aula 08  Alteramos nossa Aula04.html com um elemento em bloco <p>  Usaremos o pseudo elemento first-line que aplica o efeito na primeira linha da tag, mas essa tag tem que ser um elemento em bloco. Dependendo do tamanho da linha seu efeito pode mudar observe...  Aumentar o tamanho do browser....
  15. 15. Pseudo Elementos – CSS – Aula 08  Aplicar efeito a primeira letra do texto do elemento de bloco first-letter  Não podendo ter imagens anteriormente, Ex: Capitular.  Pseudo elementos Before e After: destinam-se a inserir conteúdo no documento. Então vamos adicionar no final do conteúdo algum texto....
  16. 16. Pseudo Elementos – CSS – Aula 08  Inserindo no fim do texto: after:  Inserindo no inicio do texto: before:  Também podemos adicionar imagens, e vários outros tipos de conteúdos.  Na w3schools vc pode encontrar tudo isso + em CC References.
  17. 17. Próxima Aula: Efeito Cascata e Herança

×