< Return to Video

Agrupando seletores CSS

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

more » « less
Video Language:
English
Duration:
02:34

Portuguese, Brazilian subtitles

Revisions