1.1 Seletor universal;
Nessa imagem mostra que, todos os elementos que tiverem
algum texto, o texto sera da cor vemelha.
1.2 Seletor de tipo de elemento;
O seletor de tipo de elemento é um comando CSS que usa um elemento especifico para receber todas as configurações.
Nesse imagem mostra, dois textos, cada um dentro de uma tag
diferente o texto que está dentro da tag <p> está com a cor vemelha e
tamanho 80.
1.3 Seletor contextual;
O seletor contextual é um comando CSS que funciona da seguinte forma, o elemento só funciona se ele estiver dentro do outro elemento especificado.
Nessa imagem mostra que a
tag <p> só recebe as configurações do CSS se ela estiver dentro da tag
<h1>.
1.4 Seletor de elementos filho;
O seletor de elementos filho configura somente os elemenstros que estiverem dentro de uma tag determinada, porém se colocar uma tag entre essas duas tag a configuração não funciona como na imagem a seguir.
1.5 Seletor adjacente;
O seletor adjacente é uma configuração CSS que só configura um elemento que estiver seguido do outro, como na imagem abaixo por exemplo.
1.6 Seletor de classe;
O seletor de classe é uma configuração do CSS que só funciona com o elemento que estiver com o nome da classe como na imagem abaixo.
1.7 Seletor de id;
O seletor de id, só aplica as configurações CSS no elemento que estiver com o nome do id correto, caso o elemento não esteja com o nome do id que está no CSS as configurações não são aplicadas nele como mostra a imagem.
Como mostra na imagem a
configuração só funciona se o elemento e o id for o mesmo da página HTML.
1.8 Agrupamento de seletores;
O agrumapendo de seletores funciona da seguinte maneira, caso você use a mesma configuração em dois elementos diferentes você pode fazer da seguinte forma.
Perceba que somente os
elementos que estão agrupados h1 e h2 recebem as configurações HTML.
1.9 Seletores de atributo;
O seletores de atributo funciona da seguinte forma, o elemento só recebe as configurações do CSS, se o atributo for o mesmo da pagina, como mostra a imagem abaixo.
1.10 Pseudo-classes;
O Pseudo-classes é um comando CSS que funciona da seguinte forma, seleciona o primeiro elemento descendente, como na imagem abaixo.
1.11 Pseudo-elementos;
O Pseudo-elementos é um comando CSS que configura só a primeila linha do texto como mostra a imagem.
Como mostra a imagem somente a primeira linha fica com a cor
vemelha e a fonte formatada.
Nenhum comentário:
Postar um comentário