Aula 04 e 05. seletores simples
-
Upload
jolvani-morgan -
Category
Documents
-
view
136 -
download
2
Transcript of Aula 04 e 05. seletores simples
![Page 1: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/1.jpg)
Seletores Simples –
CSS
Style SheetProfessor: Jolvani
Aula 04 e 05
![Page 2: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/2.jpg)
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
![Page 3: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/3.jpg)
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:
![Page 4: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/4.jpg)
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...
![Page 5: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/5.jpg)
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.
![Page 6: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/6.jpg)
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;)
![Page 7: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/7.jpg)
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 ....
![Page 8: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/8.jpg)
Seletores Simples- CSS
Seletores Simples – Classe (seletor prioritário)
Podemos ter várias classes aplicadas ao mesmo elemento
![Page 9: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/9.jpg)
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”
![Page 10: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/10.jpg)
Seletores Simples- CSS
Seletores Simples – Atributo
Usado no elemento que possui um determinado atributo;
Ex: <em title=“Empresa”> Minha Empresa <em>
![Page 11: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/11.jpg)
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
![Page 12: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/12.jpg)
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
![Page 13: Aula 04 e 05. seletores simples](https://reader035.fdocumentos.tips/reader035/viewer/2022080213/559e6ca51a28abcc458b4745/html5/thumbnails/13.jpg)
Próxima Aula: Seletores Compostos