< Return to Video

CSS: Selecionando por classe

  • 0:00 - 0:02
    Vamos dar uma olhada na nossa página
  • 0:02 - 0:05
    Tem esses cabeçalhos
  • 0:05 - 0:08
    tem parágrafos descrevendo coelhos
  • 0:08 - 0:11
    e agora ela tem na verdade
    vários parágrafos
  • 0:11 - 0:13
    com as letras das minhas músicas
    favoritas sobre coelhos.
  • 0:14 - 0:18
    Da última vez, nós estilizamos
    a primeira letra usando id.
  • 0:18 - 0:21
    Mas agora tenho vários
    parágrafos de letras
  • 0:21 - 0:24
    Eu quero que todos eles tenham
    aquele fundo amarelo.
  • 0:25 - 0:28
    Como poderíamos fazer
    isso com o que sabemos até agora?
  • 0:28 - 0:30
    A primeira coisa que aprendemos a fazer
  • 0:30 - 0:33
    foi como selecionar todas as tags
    de um tipo específico,
  • 0:33 - 0:35
    como o seletor "p".
  • 0:35 - 0:39
    Mas aquilo coloriu todos
    os parágrafos, não somente das letras.
  • 0:39 - 0:41
    Precisamos fazer algo ainda
    mais específico.
  • 0:42 - 0:45
    Então aprendemos como
    selecionar tags com um id específico,
  • 0:45 - 0:48
    como selecionar o parágrafo
    com o id "rabbit-song".
  • 0:49 - 0:51
    Mas aquilo selecionou só
    o primeiro parágrafo.
  • 0:51 - 0:54
    Não podemos adicionar
    aquele id a outros parágrafos,
  • 0:54 - 0:58
    porque não é possível usar
    o mesmo id em mais de uma tag.
  • 0:58 - 1:00
    Se quisermos selecionar outro parágrafo
  • 1:00 - 1:03
    teremos que dar a cada um deles um novo ID
  • 1:03 - 1:06
    como "song-lyrics2", e "song-lyric3",
  • 1:06 - 1:07
    porque todo ID deve ser único.
  • 1:07 - 1:10
    E temos que adicionar regras
    a cada um deles.
  • 1:10 - 1:12
    Poderíamos fazer isso.
    Mas é muito trabalhoso!
  • 1:12 - 1:15
    E cada vez que adicionamos
    uma nova música
  • 1:15 - 1:17
    temos que lembrar de
    adicionar outro ID ao HTML
  • 1:17 - 1:19
    e outro ID para as regras de CSS,
  • 1:19 - 1:22
    e se nós adicionarmos centenas
    de versos, seria exaustivo.
  • 1:23 - 1:24
    Então adivinha?
  • 1:24 - 1:27
    Há um jeito melhor, chamado "classes".
  • 1:28 - 1:29
    Uma classe é basicamente:
  • 1:29 - 1:32
    Um modo de associar um
    elemento particular a um grupo.
  • 1:32 - 1:35
    E você pode associar quantos
    elementos você quiser ao grupo.
  • 1:35 - 1:40
    Para adicionar uma classe, adicionamos o
    atributo "class", como fizemos com os IDs.
  • 1:40 - 1:45
    Primeiro, deletamos esse ID,
    já que irei substituí-lo.
  • 1:45 - 1:48
    Agora tenho meu cursor
    no começo da tag '< p >'
  • 1:48 - 1:52
    Vou adicionar um espaço
    e escrever: class = ''
  • 1:53 - 1:55
    Agora precisamos dar um nome
    para a classe.
  • 1:55 - 1:57
    Um nome bom e descritivo.
  • 1:57 - 1:59
    Vamos chamar de "song-lyrics".
  • 2:00 - 2:01
    Vou digitar aqui.
  • 2:02 - 2:04
    Que outros elementos
    devem ter esse mesmo nome?
  • 2:04 - 2:06
    Bem, todos os outros parágrafos letras.
  • 2:07 - 2:09
    Vamos ir até o final da página,
  • 2:09 - 2:13
    e adicionar o atributo a cada um dos
    parágrafos classes.
  • 2:13 - 2:15
    ("song-lyrics")
  • 2:15 - 2:18
    Agora estamos prontos para
    adicionar a regra de CCS.
  • 2:18 - 2:21
    Vamos voltar ao nossa a tag "< style >"
  • 2:21 - 2:25
    e deletar o seletor id
    que adicionamos antes
  • 2:25 - 2:26
    pois estamos o trocando.
  • 2:26 - 2:29
    Agora precisamos criar
    nossa classe seletora.
  • 2:29 - 2:34
    Para criar a classe seletora,
    usamos um ponto.
  • 2:34 - 2:39
    Então escrevemos o nome
    da classe depois: song-lyrics,
  • 2:39 - 2:46
    E como sempre: chaves, propriedade,
    dois pontos, valor.
  • 2:47 - 2:48
    Pronto!
  • 2:48 - 2:51
    Todas as letras agora têm fundo amarelo.
  • 2:51 - 2:55
    O que aconteceria se deixarmos
    aqui maiúsculo?
  • 2:55 - 2:56
    Não funcionaria.
  • 2:56 - 2:59
    Porque o nome das classe não é maiúsculo.
  • 2:59 - 3:02
    Fará diferença se as letras
    forem maiúsculas ou minúsculas.
  • 3:02 - 3:03
    Assim como os ID´s.
  • 3:04 - 3:08
    O que aconteceria se usássemos o sinal do
    jogo da velha (#) ao invés de ponto?
  • 3:09 - 3:10
    Não funcionaria.
  • 3:10 - 3:13
    Porque o browser pensaria
    que "song-lyrics" é um ID,
  • 3:13 - 3:16
    e quando não encontrasse
    nada no atributo id da song-lyrics,
  • 3:16 - 3:18
    não faria nada.
  • 3:18 - 3:25
    O que aconteceria se colocássemos
    espaços nos nomes das classes?
  • 3:25 - 3:27
    Bem, também não funcionaria,
  • 3:27 - 3:30
    porque classes não podem ter
    espaços em branco.
  • 3:30 - 3:32
    Como descobriremos mais tarde
  • 3:32 - 3:35
    espaços tem um significado
    bem especial no CSS.
  • 3:36 - 3:39
    Então, vamos arrumar novamente.
  • 3:40 - 3:41
    Então, mais uma vez:
  • 3:41 - 3:43
    Quando queremos adicionar uma classe,
  • 3:43 - 3:46
    temos que criar um nome,
  • 3:46 - 3:49
    e incluir as classes nos
    atributos do HTML.
  • 3:49 - 3:51
    E então escrevemos nossa regra de estilo,
  • 3:51 - 3:55
    começando pelo ponto e nome da classe.
  • 3:55 - 3:58
    E agora seu CSS pode ser melhorado!
  • 3:58 - 4:00
    Legendado por [Valter Bigeli]
    Revisado por [Fernando dos Reis]
Title:
CSS: Selecionando por classe
Video Language:
English
Duration:
04:00

Portuguese, Brazilian subtitles

Revisions