-
Vamos mudar de rosquinhas para cenouras,
um dos alimentos mais saudáveis do mundo.
-
Além disso, o alimento favorito
dos coelhos.
-
Você sabia que cenouras não são só
da cor laranja?
-
Elas eram originalmente roxas.
Algumas delas ainda são.
-
Temos esta página com uma lista de
cores de cenoura
-
e uma frase sobre suas origens roxas.
-
E usamos classes para estilizar os nomes
de cores para a cor apropriada.
-
Gosto de como os estilos
aparecem na lista,
-
mas não tenho certeza se gosto de
como o estilo "roxo" está no texto.
-
Acho que prefiro não usar uma cor de
fundo, e sim uma coloração mais sutil ali.
-
Como poderia dizer ao navegador para
estilizar o texto roxo aqui
-
de forma diferente do que o texto
roxo aqui?
-
Eles têm os mesmos nomes de classe,
por isso não podemos usar a classe,
-
a menos que criemos uma nova classe.
-
Eles também têm a mesma tag:
ambas são .
-
Não podemos usar o seletor elemento
mais classe que acabamos de aprender.
-
Há mais alguma coisa diferente sobre eles?
-
Uma coisa é que esta está dentro
de uma ,
-
e esta está dentro de uma .
-
A diferença é a tag pai delas, as
tags que estão acima delas.
-
Podemos usar essa informação para fazer
uma regra CSS,
-
usando o que é chamado de
um seletor descendente
-
Uma forma de selecionar elementos com
base na sua posição no documento.
-
Por exemplo, para selecionar apenas o
roxo dentro do parágrafo
-
vamos escrever p, e em seguida, um espaço.
O espaço é realmente importante
-
e, em seguida, a classe .purple
-
e agora vamos adicionar as propriedades
que nos darão a coloração mais sutil.
-
background-color: transparent,
substitui o que era antes.
-
Legal.
-
Nós mudamos este texto roxo
sem afetar também este texto roxo.
-
E agora sempre que usarmos a classe
purple dentro de um parágrafo como este,
-
ele vai ter esses estilos aplicados nele.
-
Podemos usar esse espaço para ir fundo
em nosso documento.
-
Digamos que queremos aplicar um estilo só
para tags que estão em .
-
Começamos com a tag pai e depois
espaço, e depois .
-
E talvez daremos uma altura de linha
diferente para melhorar o espaçamento.
-
Poderíamos até mesmo adicionar um
em frente ao , se quiséssemos,
-
para certificar que não seria aplicado às
's dentro de um .
-
Para usar seletores descendentes,
-
precisamos pensar bem sobre a estrutura
do nosso documento
-
e quais tags estão dentro de
outras tags.
-
Se você estiver indentando bem,
então isso deve ser fácil de fazer
-
porque o sua indentação refletirá a
hierarquia das tags.
-
Temos esta , e indentado dentro
dela temos um ,
-
e no interior desta temos a .
-
Se não está indentando muito bem,
arrume isso agora
-
porque será muito mais fácil para você
entender a estrutura de sua página
-
e criar seletores CSS com
base nessa estrutura.
-
Você pode usar esse espaço entre
quaisquer tipos de seletores.
-
Como encontrar um tipo de tag especial
sob um elemento que tem uma certa id,
-
ou encontrar um id específico sob os
elementos com uma classe particular,
-
qualquer combinação que precise usar.
-
O ponto para lembrar é: se a
estrutura de sua página muda,
-
suas regras CSS antigas podem
não ser aplicáveis.
-
Pense com cuidado quando usá-las, e quão
à prova de mudanças será seu CSS.
-
Você sempre pode usar classes
-
se quiser ser menos dependente da
estrutura da sua página.
-
Vamos voltar para regras que criei
e pensar sobre elas.
-
Esta primeira regra estiliza todos os
elementos com classe purple
-
dentro de parágrafos de certo modo.
-
Se eu adicionar novos parágrafos com
elementos com classe purple no futuro,
-
eu iria querer que tivessem essas
propriedades?
-
Sim, porque eu acho que elas sempre
ficarão melhor no parágrafo.
-
Preciso de uma regra mais específica?
-
Talvez se estes parágrafos estivessem
sempre dentro
-
de algum elemento com uma classe "artigo",
eu poderia acrescentá-la na regra.
-
Mas, por agora, este é o mais específico
que posso ser.
-
A segunda regra dá a todos os elementos
-
dentro de uma lista, uma certa altura de
linha.
-
Sempre vou querer que itens
dentro de
-
tenham esse aumento na altura da linha?
-
Talvez não. Esta regra pode ser
muito genérica.
-
Já que não tenho certeza, vou adicionar
uma classe para esta
-
e depois, mudar este aqui para ul.spacey
-
que a torna muito mais específica.
-
No futuro, à medida que minha
página web cresce,
-
eu poderia fazer a regra mais ou
menos específica.
-
Coloque esta ferramenta em sua sempre
crescente caixa de ferramentas CSS
-
e pratique, de modo que você possa
usá-la quando fizer sentido.
-
[legendado por: Pablo Vieira]
