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