Seletores Simples

CSS
Style Sheet
Professor: 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 declarao 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

Constitudo 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 so alvo desse seletor

Representao...

Seletores Simples- CSS

Representamos pelo * (asterisco).

Nesse seletor, as declarao que aplicarmos nele so refletidas em todos

os elementos. A no se que tenhamos uma regra mais especifica
(especificidade em outra aula).

Aplicando o estilo, primeiro no 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

padres como as margens veja o exemplo.

Seletores Simples Elemento (j visto) (color:#0000CC;)

Seletores Simples- CSS

Seletores Simples Classe (seletor prioritrio)

Para usar o seletor classe precisamos usar o atributo xhtml class em nosso
cdigo html.

Lembram: quando eu queria usar um atributo in-line eu usava o style ....

Seletores Simples- CSS

Seletores Simples Classe (seletor prioritrio)

Podemos ter vrias 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 pgina esse deve ser nico, no

posso usar o mesmo identificado para outro elemento ex: id=introduo

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 Opo: Elemento[atributo~=Valor separado por espao]

Continua

aplicando nos elementos que contem empresa no atributo

Seletores Simples- CSS

Seletores Simples Atributo

Usar: Elemento[atributo=Valor]

Outra Opo: Elemento[atributo~=Valor separado por espao]

Outra Opo: Elemento[atributo|=Valor separado por hfen]

Continua

aplicando nos elementos que contem empresa no atributo

Prxima Aula: Seletores Compostos