[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.08,Default,,0000,0000,0000,,Vamos dar uma olhada na nossa página
Dialogue: 0,0:00:02.28,0:00:04.54,Default,,0000,0000,0000,,Tem esses cabeçalhos
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,tem parágrafos descrevendo coelhos
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,e agora ela tem na verdade\Nvários parágrafos
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,com as letras das minhas músicas\Nfavoritas sobre coelhos.
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,Da última vez, nós estilizamos\Na primeira letra usando id.
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,Mas agora tenho vários\Nparágrafos de letras
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,Eu quero que todos eles tenham\Naquele fundo amarelo.
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,Como poderíamos fazer \Nisso com o que sabemos até agora?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,A primeira coisa que aprendemos a fazer
Dialogue: 0,0:00:30.37,0:00:33.23,Default,,0000,0000,0000,,foi como selecionar todas as tags\Nde um tipo específico,
Dialogue: 0,0:00:33.23,0:00:34.66,Default,,0000,0000,0000,,como o seletor "p".
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,Mas aquilo coloriu todos \Nos parágrafos, não somente das letras.
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,Precisamos fazer algo ainda\Nmais específico.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Então aprendemos como \Nselecionar tags com um id específico,
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,como selecionar o parágrafo\Ncom o id "rabbit-song".
Dialogue: 0,0:00:48.73,0:00:50.92,Default,,0000,0000,0000,,Mas aquilo selecionou só\No primeiro parágrafo.
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,Não podemos adicionar \Naquele id a outros parágrafos,
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,porque não é possível usar \No mesmo id em mais de uma tag.
Dialogue: 0,0:00:57.87,0:01:00.14,Default,,0000,0000,0000,,Se quisermos selecionar outro parágrafo
Dialogue: 0,0:01:00.14,0:01:02.55,Default,,0000,0000,0000,,teremos que dar a cada um deles um novo ID
Dialogue: 0,0:01:02.70,0:01:05.72,Default,,0000,0000,0000,,como "song-lyrics2", e "song-lyric3",
Dialogue: 0,0:01:05.72,0:01:07.36,Default,,0000,0000,0000,,porque todo ID deve ser único.
Dialogue: 0,0:01:07.36,0:01:09.56,Default,,0000,0000,0000,,E temos que adicionar regras\Na cada um deles.
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,Poderíamos fazer isso.\NMas é muito trabalhoso!
Dialogue: 0,0:01:12.40,0:01:14.53,Default,,0000,0000,0000,,E cada vez que adicionamos\Numa nova música
Dialogue: 0,0:01:14.53,0:01:17.11,Default,,0000,0000,0000,,temos que lembrar de \Nadicionar outro ID ao HTML
Dialogue: 0,0:01:17.11,0:01:19.02,Default,,0000,0000,0000,,e outro ID para as regras de CSS,
Dialogue: 0,0:01:19.02,0:01:22.40,Default,,0000,0000,0000,,e se nós adicionarmos centenas \Nde versos, seria exaustivo.
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,Então adivinha?
Dialogue: 0,0:01:24.49,0:01:27.14,Default,,0000,0000,0000,,Há um jeito melhor, chamado "classes".
Dialogue: 0,0:01:27.50,0:01:29.01,Default,,0000,0000,0000,,Uma classe é basicamente:
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,Um modo de associar um \Nelemento particular a um grupo.
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,E você pode associar quantos\Nelementos você quiser ao grupo.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,Para adicionar uma classe, adicionamos o\Natributo "class", como fizemos com os IDs.
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,Primeiro, deletamos esse ID,\Njá que irei substituí-lo.
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Agora tenho meu cursor\Nno começo da tag '< p >'
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,Vou adicionar um espaço\Ne escrever: class = ''
Dialogue: 0,0:01:53.18,0:01:55.33,Default,,0000,0000,0000,,Agora precisamos dar um nome\Npara a classe.
Dialogue: 0,0:01:55.33,0:01:56.79,Default,,0000,0000,0000,,Um nome bom e descritivo.
Dialogue: 0,0:01:56.93,0:01:59.29,Default,,0000,0000,0000,,Vamos chamar de "song-lyrics".
Dialogue: 0,0:01:59.66,0:02:01.45,Default,,0000,0000,0000,,Vou digitar aqui.
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,Que outros elementos \Ndevem ter esse mesmo nome?
Dialogue: 0,0:02:04.42,0:02:06.42,Default,,0000,0000,0000,,Bem, todos os outros parágrafos letras.
Dialogue: 0,0:02:06.51,0:02:09.15,Default,,0000,0000,0000,,Vamos ir até o final da página,
Dialogue: 0,0:02:09.15,0:02:12.78,Default,,0000,0000,0000,,e adicionar o atributo a cada um dos\Nparágrafos classes.
Dialogue: 0,0:02:13.06,0:02:14.54,Default,,0000,0000,0000,,("song-lyrics")
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,Agora estamos prontos para\Nadicionar a regra de CCS.
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,Vamos voltar ao nossa a tag "< style >"
Dialogue: 0,0:02:20.54,0:02:24.57,Default,,0000,0000,0000,,e deletar o seletor id\Nque adicionamos antes
Dialogue: 0,0:02:24.57,0:02:26.10,Default,,0000,0000,0000,,pois estamos o trocando.
Dialogue: 0,0:02:26.16,0:02:28.78,Default,,0000,0000,0000,,Agora precisamos criar\Nnossa classe seletora.
Dialogue: 0,0:02:28.90,0:02:34.04,Default,,0000,0000,0000,,Para criar a classe seletora,\Nusamos um ponto.
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,Então escrevemos o nome \Nda classe depois: song-lyrics,
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,E como sempre: chaves, propriedade,\Ndois pontos, valor.
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,Pronto!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,Todas as letras agora têm fundo amarelo.
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,O que aconteceria se deixarmos\Naqui maiúsculo?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,Não funcionaria.
Dialogue: 0,0:02:56.49,0:02:58.83,Default,,0000,0000,0000,,Porque o nome das classe não é maiúsculo.
Dialogue: 0,0:02:58.88,0:03:01.77,Default,,0000,0000,0000,,Fará diferença se as letras \Nforem maiúsculas ou minúsculas.
Dialogue: 0,0:03:01.77,0:03:03.49,Default,,0000,0000,0000,,Assim como os ID´s.
Dialogue: 0,0:03:04.24,0:03:08.30,Default,,0000,0000,0000,,O que aconteceria se usássemos o sinal do\Njogo da velha (#) ao invés de ponto?
Dialogue: 0,0:03:08.54,0:03:09.67,Default,,0000,0000,0000,,Não funcionaria.
Dialogue: 0,0:03:09.77,0:03:12.80,Default,,0000,0000,0000,,Porque o browser pensaria\Nque "song-lyrics" é um ID,
Dialogue: 0,0:03:12.90,0:03:16.31,Default,,0000,0000,0000,,e quando não encontrasse \Nnada no atributo id da song-lyrics,
Dialogue: 0,0:03:16.31,0:03:17.58,Default,,0000,0000,0000,,não faria nada.
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,O que aconteceria se colocássemos\Nespaços nos nomes das classes?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,Bem, também não funcionaria,
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,porque classes não podem ter\Nespaços em branco.
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,Como descobriremos mais tarde
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,espaços tem um significado \Nbem especial no CSS.
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,Então, vamos arrumar novamente.
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,Então, mais uma vez:
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,Quando queremos adicionar uma classe,
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,temos que criar um nome,
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,e incluir as classes nos\Natributos do HTML.
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,E então escrevemos nossa regra de estilo,
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,começando pelo ponto e nome da classe.
Dialogue: 0,0:03:55.22,0:03:58.02,Default,,0000,0000,0000,,E agora seu CSS pode ser melhorado!
Dialogue: 0,0:03:58.02,0:04:00.00,Default,,0000,0000,0000,,Legendado por [Valter Bigeli]\NRevisado por [Fernando dos Reis]