Aula 04 e 05. seletores simples

182 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
182
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 04 e 05. seletores simples

  1. 1. Seletores Simples – CSS Style Sheet Professor: Jolvani Aula 04 e 05
  2. 2. Seletores Simples- CSS  Olá, Nesta aula veremos mais sobre seletores...  Na aula 2 nos aprendemos a sintaxe do CSS, vimos que o CSS é composto pelo seu seletor e sua declaração que vai entre chaves, esta é composta de propriedades e valores separados por (;).  Nesta aula focaremos nos seletores  Existem 3 tipos de seletores
  3. 3. Seletores Simples- CSS  Existem 3 tipos de seletores:  Simples  Compostos  Pseudo Seletores.  Seletores Simples  Constituído de um único elemento  Pode estar associado com uma classe(class), um id ou pseudo classe  Criar arquivo: Aula04.html, add texto....  Adicionar no css:
  4. 4. Seletores Simples- CSS  Dentro dos seletores simples encontramos 5 tipos diferentes:  Seletor universal  Seletor elemento  Seletor classe  Seletor id  Seletor Atributo.  Seletores Simples - Universal  Aplicado a todos os elementos dentro do documento  Todas as instancias de todos os elemento são alvo desse seletor  Representação...
  5. 5. Seletores Simples- CSS  Representamos pelo * (asterisco).  Nesse seletor, as declaração que aplicarmos nele são refletidas em todos os elementos. A não se que tenhamos uma regra mais especifica (especificidade em outra aula).  Aplicando o estilo, primeiro não criamos nenhuma propriedade...  Depois aplicamos a cor.... Observe que foi aplicado a todos os elementos.
  6. 6. Seletores Simples- CSS  O seletor universal é muitas vezes usado para remover alguns valores padrões como as margens veja o exemplo.  Seletores Simples – Elemento (já visto) (color:#0000CC;)
  7. 7. Seletores Simples- CSS  Seletores Simples – Classe (seletor prioritário)  Para usar o seletor classe precisamos usar o atributo xhtml class em nosso código html.  Lembram: quando eu queria usar um atributo in-line eu usava o style ....
  8. 8. Seletores Simples- CSS  Seletores Simples – Classe (seletor prioritário)  Podemos ter várias classes aplicadas ao mesmo elemento
  9. 9. Seletores Simples- CSS  Seletores Simples – id “aidi”  Id é o identificador único do elemento;  Quando eu usar um id para um elemento na página esse deve ser único, não posso usar o mesmo identificado para outro elemento ex: id=“introdução”
  10. 10. Seletores Simples- CSS  Seletores Simples – Atributo  Usado no elemento que possui um determinado atributo;  Ex: <em title=“Empresa”> Minha Empresa <em>
  11. 11. Seletores Simples- CSS  Seletores Simples – Atributo  Usar: Elemento[atributo=Valor]  Outra Opção: Elemento[atributo~=Valor separado por espaço]  Continua aplicando nos elementos que contem empresa no atributo
  12. 12. Seletores Simples- CSS  Seletores Simples – Atributo  Usar: Elemento[atributo=Valor]  Outra Opção: Elemento[atributo~=Valor separado por espaço]  Outra Opção: Elemento[atributo|=Valor separado por hífen]  Continua aplicando nos elementos que contem empresa no atributo
  13. 13. Próxima Aula: Seletores Compostos

×