[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,Nesta página, estamos usando CSS
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,com o estilo de parágrafos "< h2 >"
Dialogue: 0,0:00:04.60,0:00:08.92,Default,,0000,0000,0000,,de modo que todos os "< h2 >" são verdes\Ne todos os parágrafos são roxos.
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,Mas o que fazer para selecionar só\No primeiro "< h2 >"
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,ou apenas o estilo do segundo parágrafo?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,Precisaríamos de uma maneira de dizer\Nao navegador exatamente quais
Dialogue: 0,0:00:19.87,0:00:21.51,Default,,0000,0000,0000,,elementos que estamos selecionando
Dialogue: 0,0:00:21.51,0:00:24.93,Default,,0000,0000,0000,,pra que ele não aplique os estilos para\Ntodos, como está agora.
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,Uma maneira de fazer isso é\Nselecionar pelo ID.
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,Podemos ter um 'tag' em nossa\Npágina com uma ID
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,e então podemos dizer ao CSS:
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,"Escute aqui: Só quero aplicar esses\Nestilos para os elementos com estes IDs,
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,não em qualquer um dos\Noutros elementos".
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,Para isso, o primeiro passo é na realidade\Nmodificar o HTML
Dialogue: 0,0:00:41.28,0:00:45.13,Default,,0000,0000,0000,,para adicionar atributos ID para as tags\Nque desejamos selecionar especificamente.
Dialogue: 0,0:00:45.74,0:00:48.37,Default,,0000,0000,0000,,Vamos começar com o segundo\Nparágrafo aqui.
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,Para adicionar um atributo ID,\Ncolocamos o cursor
Dialogue: 0,0:00:50.90,0:00:53.42,Default,,0000,0000,0000,,no início da tag "< p >" logo após o 'p',
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,em seguida, adicione um espaço,\Ne depois digite id = " "
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Agora precisamos preencher este\Natributo ID com um valor.
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,Que ID eu deveria dar?
Dialogue: 0,0:01:04.18,0:01:06.45,Default,,0000,0000,0000,,Ele deve ser descritivo e único.
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,Nada mais nesta página deve\Nter o mesmo ID.
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,Já que esta é uma canção sobre coelhos,\Nchamarei de canção-coelhos (rabbits-song).
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,Não pode ter espaços nas ID's, por isso,\Nse eles têm várias palavras como estas
Dialogue: 0,0:01:19.84,0:01:22.24,Default,,0000,0000,0000,,você deve sempre usar hifens\Nou sublinhados.
Dialogue: 0,0:01:22.60,0:01:24.72,Default,,0000,0000,0000,,Eu mesmo gosto de hifens.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Agora temos uma maneira de identificar\Nesse ponto de forma exclusiva.
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,Assim, podemos adicionar uma\Nregra CSS.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,Vamos voltar para a nossa tag "< style > "\Npara a segunda etapa.
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,Vamos adicionar uma nova linha\Napós a última regra.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Lembre-se, a primeira parte\Nde uma regra CSS é o seletor:
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,a parte que diz ao navegador\No que selecionar.
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,Até aqui, nas nossas regras anteriores\Nusamos seletores como "< h2 >" e "< p >"
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,para selecionar todos os\N"< h2 >" e "< p >" na página.
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,Agora, para fazer um seletor que\Nsó seleciona elementos
Dialogue: 0,0:01:57.20,0:01:58.67,Default,,0000,0000,0000,,com um ID particular,
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,temos que começar o seletor\Ncom um sinal " # ".
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,Isso informa ao navegador que tudo o que\Nvem a seguir é um ID.
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,Vamos escrever a nossa ID: canção-coelhos.
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,O resto da regra é a mesma de antes.
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,Abrimos e fechamos com chaves "{ }",
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,adicionamos uma propriedade,\Ncomo cor do fundo (background-color)...
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,...e pronto! Funcionou!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Somente o parágrafo canção\Ntem a cor de fundo amarelo,
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,e no primeiro parágrafo\Npermaneceu o mesmo.
Dialogue: 0,0:02:26.57,0:02:30.76,Default,,0000,0000,0000,,Vamos fazer isso de novo,\Nprimeiro para a seleção "< h2 >".
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,Consegue lembrar o primeiro passo?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,Está certo. Precisamos na realidade\Nmodificar este HTML
Dialogue: 0,0:02:36.59,0:02:38.14,Default,,0000,0000,0000,,para adicionar o atributo "ID".
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,Colocamos nosso cursor na 'tag' de início,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,damos um espaço, tipo id = " "
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,e, em seguida, digite um\NID único e descritivo.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,Como "coelhos-info-titulo"\N(rabbits-info-heading).
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Segunda etapa.\NVoltemos em nossa 'tag' de estilo
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,e adicionamos uma nova linha,\Nescreva o sinal " # ",
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,então o nosso ID, "coelhos-info-titulo"\N(rabbits-info-heading).
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,e em seguida, colocamos nossas\Npropriedades dentro das chaves "{ "
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,background-color: purple; }\N(cor-do-fundo: roxo)
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,Não funcionou. Quer ver o que deu errado?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,Será que eu digitei do mesmo jeito?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,rabbits-info-Heading,\Nrabbits-info-heading...
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,para que eles fiquem praticamente o mesmo.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Eu poderia compará-los letra por letra
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,para descobrir o que está errado,
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,mas eu gosto de fazer é só ir em baixo\Ne selecione a ID no HTML,
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,e copiar e colar aqui para ter certeza\Nque é exatamente o mesmo.
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,E...funcionou!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,Meu "< h2 >" tem um fundo.\NVocê notou o que mudou?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Foi o "h". Os h's costumavam\Nser um "H" maiúsculo
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,que o navegador não considera\Nser a mesma coisa.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,Tem de ser "h" minúsculo para\Ncoincidir com o código HTML.
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,Isso é porque os ID's são case-sensitive.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,Então você tem que escrevê-los da mesma\Nforma em todos os lugares.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,Acho que é melhor usar sempre minúsculas\Npara cada letra em meus IDs
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,então não tenho que pensar\Nsobre que nome que usei.
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Vou dar agora um último aviso:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,IDs devem ser exclusivos!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,Se você tem 2 tags em sua página\Ncom exatamente a mesma ID
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,o navegador pode usar os dois,\Nmas também pode usar apenas um deles.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,E você não quer que isso aconteça.
Dialogue: 0,0:04:20.41,0:04:22.46,Default,,0000,0000,0000,,ID descritivos são bons e únicos.
Dialogue: 0,0:04:22.25,0:04:25.00,Default,,0000,0000,0000,,Traduzido por [Fernando dos Reis]