1. Seletores Simples –
CSS
Style Sheet
Professor: Jolvani
Aula 04 e 05

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. Seletores Simples- CSS

Existem 3 tipos de seletores:


Compostos


Simples
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. Seletores Simples- CSS

Dentro dos seletores simples encontramos 5 tipos diferentes:


Seletor elemento

Seletor classe

Seletor id


Seletor universal
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. 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. 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. 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. Seletores Simples- CSS

Seletores Simples – Classe (seletor prioritário)

Podemos ter várias classes aplicadas ao mesmo elemento

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. Seletores Simples- CSS

Seletores Simples – Atributo

Usado no elemento que possui um determinado atributo;

Ex: <em title=“Empresa”> Minha Empresa <em>

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. 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. Próxima Aula: Seletores Compostos