-
Eu amo a arte dos museus. Mas não tenho
tempo para ir a um todo dia.
-
Felizmente, eu posso encontrar ótimas
pinturas na internet.
-
Como várias aqui no Khan Academy,
na nossa sessão de arte histórica.
-
Fiz então esta página com lista de
pinturas famosas,
-
com um cabeçalho e listas para cada arte,
e links para o artigo de cada uma delas.
-
Para fazer essa página ficar mais chique
-
usei regras CSS para mudar a família
da fonte dos títulos < h1 > e < h2 >
-
Eu gosto de cursiva, mas fantasy pode
ficar melhor, vamos mudar para ver.
-
Preciso mudar também aqui,
porque temos duas regras.
-
Eu sempre quero meus cabeçalhos nesta
página tendo a mesma família de fonte
-
e eu não quero ter que mudar a fonte
em dois lugares quando mudar de ideia.
-
Qual é a solução aqui para colocar
as duas regras CSS em uma só?
-
Pense um pouco nisso.
-
Você poderia sugerir a adição da mesma
classe no < h1 > e < h2 >.
-
E realmente funcionaria, teríamos apenas
uma regra CSS para aquela classe.
-
Mas no final daria mais trabalho
-
porque precisaríamos lembrar de adicionar
a classe em cada < h1 > ou < h2 >.
-
Felizmente, existe um jeito melhor. Basta
agrupar nossos seletores usando vírgulas.
-
Apenas adicionamos vírgula após este h1,
e escrevemos h2.
-
Agora podemos deletar esta outra regra,
pois unimos nesta primeira.
-
Olha só, nossa página está igual!
-
Agora quando queremos mudar de fonte,
eu posso fazer isso em apenas um lugar.
-
Aqui, irá mudar de volta à cursiva,
e agora todas são cursiva.
-
Cuidado com esta vírgula. O seletor deve
ser separado por vírgula, não espaço.
-
Um espaço pega seletores descendentes,
o que é totalmente diferente em CSS.
-
Agrupar seletores pode ser ótimo para
reduzir a redundância de seletores.
-
Mas não use com excesso. Não agrupe-os só
porque quer algumas propriedades em comum.
-
Você deve agrupá-los se você sempre quer
que tenham sempre as mesmas propriedades.
-
Normalmente porque eles são
semanticamente parecidos entre si.
-
Neste caso, meu seletor é para todos os
cabeçalhos, quais quero os mesmos estilos.
-
Fique ligado para mais um uso comum
de grupos de seletores.
-
Traduzido por [Paulo Trentin]
Revisado por [Fernando dos Reis]
