Embed Size (px)
Citation preview
Seletores Simples – CSS
Style SheetProfessor: Jolvani
Aula 04 e 05
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
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:
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...
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.
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;)
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
....
Seletores Simples- CSS
Seletores Simples – Classe (seletor prioritário) Podemos ter várias classes aplicadas ao mesmo elemento
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”
Seletores Simples- CSS
Seletores Simples – Atributo Usado no elemento que possui um determinado atributo; Ex: <em title=“Empresa”> Minha Empresa <em>
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
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
Próxima Aula: Seletores Compostos
