[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:02.90,Default,,0000,0000,0000,,Aprendemos como se faz uma bela página web completa,
Dialogue: 0,0:00:02.90,0:00:05.15,Default,,0000,0000,0000,,bonita com todos os tipos de marcações, como textos e imagens,
Dialogue: 0,0:00:05.15,0:00:07.50,Default,,0000,0000,0000,,mas falta uma coisa: estilo.
Dialogue: 0,0:00:07.84,0:00:10.71,Default,,0000,0000,0000,,Minha página se parece com a que você está fazendo.
Dialogue: 0,0:00:10.97,0:00:13.84,Default,,0000,0000,0000,,Texto preto, fundo branco, mesma fonte,
Dialogue: 0,0:00:13.84,0:00:15.60,Default,,0000,0000,0000,,tudo feito de cima pra baixo
Dialogue: 0,0:00:15.60,0:00:17.77,Default,,0000,0000,0000,,Você já esteve na web e\Nviu que as páginas são
Dialogue: 0,0:00:17.77,0:00:19.70,Default,,0000,0000,0000,,muito diferentes umas das outras.
Dialogue: 0,0:00:19.70,0:00:21.85,Default,,0000,0000,0000,,Olhe ao seu redor na Khan Academy
Dialogue: 0,0:00:21.85,0:00:24.11,Default,,0000,0000,0000,,todas as diferentes cores, \Nfontes e tamanhos.
Dialogue: 0,0:00:24.11,0:00:26.54,Default,,0000,0000,0000,,Na verdade, vamos fazer isso agora.
Dialogue: 0,0:00:26.68,0:00:29.71,Default,,0000,0000,0000,,Pause esse vídeo e olhe para\Nalguns sites diferentes.
Dialogue: 0,0:00:29.71,0:00:31.42,Default,,0000,0000,0000,,O que tem de diferente em cada um deles?
Dialogue: 0,0:00:31.42,0:00:34.22,Default,,0000,0000,0000,,O que você gosta ou não gosta\Nsobre o seus estilos?
Dialogue: 0,0:00:34.22,0:00:36.32,Default,,0000,0000,0000,,Vou esperar aqui.
Dialogue: 0,0:00:38.14,0:00:40.73,Default,,0000,0000,0000,,É importante ver como as páginas web\Npodem ser diferentes
Dialogue: 0,0:00:40.73,0:00:41.63,Default,,0000,0000,0000,,porque em breve
Dialogue: 0,0:00:41.63,0:00:44.41,Default,,0000,0000,0000,,você vai descobrir como fazer suas páginas web diferente
Dialogue: 0,0:00:44.41,0:00:46.86,Default,,0000,0000,0000,,e você quer fazer isso de um jeito que te agrade,
Dialogue: 0,0:00:46.86,0:00:48.07,Default,,0000,0000,0000,,porque representa você,
Dialogue: 0,0:00:48.07,0:00:50.25,Default,,0000,0000,0000,,mas também faz os outros\Nusuários feliz.
Dialogue: 0,0:00:51.14,0:00:53.08,Default,,0000,0000,0000,,Para instalar nossa\Npágina web é preciso
Dialogue: 0,0:00:53.08,0:00:55.28,Default,,0000,0000,0000,,aprender uma nova linguagem: o CSS.
Dialogue: 0,0:00:55.31,0:00:57.87,Default,,0000,0000,0000,,CSS significa Cascading Style Sheets,
Dialogue: 0,0:00:57.87,0:01:00.02,Default,,0000,0000,0000,,é uma maneira de definir que\Nestilo aplicaremos
Dialogue: 0,0:01:00.02,0:01:01.35,Default,,0000,0000,0000,,para diferentes partes\Nda nossa página web.
Dialogue: 0,0:01:01.63,0:01:06.00,Default,,0000,0000,0000,,Embutimos ele dentro do HTML,\Nmas ele não é HTML.
Dialogue: 0,0:01:06.00,0:01:08.09,Default,,0000,0000,0000,,Temos que aprender uma nova linguagem
Dialogue: 0,0:01:08.09,0:01:10.50,Default,,0000,0000,0000,,e tentar não confundir o HTML com CSS.
Dialogue: 0,0:01:11.07,0:01:13.24,Default,,0000,0000,0000,,Veremos como usar CSS em todos
Dialogue: 0,0:01:13.24,0:01:16.57,Default,,0000,0000,0000,,os aspectos da nossa página web como\Nas fontes, tamanhos e layouts.
Dialogue: 0,0:01:16.63,0:01:20.10,Default,,0000,0000,0000,,Mas vamos começar com algo que é\Nmuito divertido: cor.
Dialogue: 0,0:01:20.10,0:01:22.07,Default,,0000,0000,0000,,Que tal mudar alguns cabeçalhos
Dialogue: 0,0:01:22.07,0:01:24.85,Default,,0000,0000,0000,,na nossa página web para um\Nagradável verde grama?
Dialogue: 0,0:01:25.45,0:01:27.90,Default,,0000,0000,0000,,Para começar, precisamos inserir\Numa tag de estilo
Dialogue: 0,0:01:27.90,0:01:29.48,Default,,0000,0000,0000,,ao cabeçalho da nossa página.
Dialogue: 0,0:01:31.72,0:01:34.42,Default,,0000,0000,0000,,Quando o navegador vê isso, \Npensará que está tudo ok.
Dialogue: 0,0:01:34.42,0:01:37.11,Default,,0000,0000,0000,,Tudo aqui dentro é CSS.
Dialogue: 0,0:01:37.32,0:01:40.10,Default,,0000,0000,0000,,Vou usar meu conversor de CSS\Npara compreendê-lo
Dialogue: 0,0:01:40.15,0:01:42.01,Default,,0000,0000,0000,,em vez do meu conversor de HTML.
Dialogue: 0,0:01:43.39,0:01:48.03,Default,,0000,0000,0000,,Aqui dentro, vamos adicionar\Numa regra de estilo CSS.
Dialogue: 0,0:01:48.03,0:01:50.99,Default,,0000,0000,0000,,Uma regra de estilo tem um seletor\Nque informa ao navegador
Dialogue: 0,0:01:50.99,0:01:53.56,Default,,0000,0000,0000,,qual é o estilo da parte da página web\Ne declarações
Dialogue: 0,0:01:53.100,0:01:55.84,Default,,0000,0000,0000,,que dizem ao navegador como\Narrumar essa parte.
Dialogue: 0,0:01:56.74,0:01:59.69,Default,,0000,0000,0000,,Se queremos todo o estilo em h2\Nna nossa página,
Dialogue: 0,0:01:59.69,0:02:03.16,Default,,0000,0000,0000,,vamos digitar esse seletor h2.
Dialogue: 0,0:02:03.86,0:02:05.95,Default,,0000,0000,0000,,e vamos digitar as chaves.
Dialogue: 0,0:02:05.95,0:02:08.43,Default,,0000,0000,0000,,Tenha certeza que são chaves "{ }"\Ne não colchetes "[ ]".
Dialogue: 0,0:02:08.43,0:02:09.31,Default,,0000,0000,0000,,Pois ele não vai funcionar.
Dialogue: 0,0:02:10.10,0:02:12.34,Default,,0000,0000,0000,,Dentro delas, vamos colocar\Nnossas declarações
Dialogue: 0,0:02:12.52,0:02:14.32,Default,,0000,0000,0000,,que possuem propriedades e valores.
Dialogue: 0,0:02:14.32,0:02:17.82,Default,,0000,0000,0000,,Para mudar a cor do texto, usamos\Na propriedade de cor.
Dialogue: 0,0:02:19.28,0:02:22.54,Default,,0000,0000,0000,,Colocamos dois pontos e um valor.
Dialogue: 0,0:02:22.71,0:02:25.37,Default,,0000,0000,0000,,Precisamos dizer ao navegador\Nque cor nós queremos.
Dialogue: 0,0:02:25.52,0:02:28.56,Default,,0000,0000,0000,,Poderíamos escrever apenas\N'verde' (green).
Dialogue: 0,0:02:28.56,0:02:31.86,Default,,0000,0000,0000,,Ele vai entender porque o verde\Né uma cor comum.
Dialogue: 0,0:02:32.17,0:02:33.96,Default,,0000,0000,0000,,Mas isso não é o verde que eu queria.
Dialogue: 0,0:02:33.96,0:02:35.50,Default,,0000,0000,0000,,Eu quero um verde grama.
Dialogue: 0,0:02:35.97,0:02:38.16,Default,,0000,0000,0000,,Se eu escrever 'verde grama'\N(grassy green),
Dialogue: 0,0:02:38.16,0:02:41.38,Default,,0000,0000,0000,,agora o navegador fica confuso
Dialogue: 0,0:02:41.38,0:02:43.13,Default,,0000,0000,0000,,e faz com que os títulos fiquem preto de novo,
Dialogue: 0,0:02:43.13,0:02:44.100,Default,,0000,0000,0000,,porque nunca\Nouviu falar de verde grama.
Dialogue: 0,0:02:45.52,0:02:48.26,Default,,0000,0000,0000,,Se queremos poder especificar\Nqualquer cor,
Dialogue: 0,0:02:48.26,0:02:51.42,Default,,0000,0000,0000,,precisamos usar algo chamado de\Nespectro RGB
Dialogue: 0,0:02:51.42,0:02:53.57,Default,,0000,0000,0000,,que talvez você já ouviu falar\Nna aulas de artes.
Dialogue: 0,0:02:53.57,0:02:55.84,Default,,0000,0000,0000,,Você não precisa ser um especialista,
Dialogue: 0,0:02:55.84,0:02:57.96,Default,,0000,0000,0000,,porque temos um seletor de\Ncores RGB aqui pra você.
Dialogue: 0,0:02:58.87,0:03:03.68,Default,,0000,0000,0000,,Para usá-lo, é só substituir a cor\Npor "rgb( )".
Dialogue: 0,0:03:03.68,0:03:05.43,Default,,0000,0000,0000,,O seletor de cores aparecerá
Dialogue: 0,0:03:05.43,0:03:09.47,Default,,0000,0000,0000,,e você pode mover o mouse para\Ndentro dela e escolher uma cor
Dialogue: 0,0:03:09.47,0:03:11.65,Default,,0000,0000,0000,,e você verá a atualização\Nda cor em tempo real.
Dialogue: 0,0:03:11.65,0:03:13.88,Default,,0000,0000,0000,,E quando estiver satisfeito, clique nela.
Dialogue: 0,0:03:14.50,0:03:16.99,Default,,0000,0000,0000,,Agora, você sabe como os três números
Dialogue: 0,0:03:16.99,0:03:19.90,Default,,0000,0000,0000,,são alterados em nossas parênteses RGB?
Dialogue: 0,0:03:19.90,0:03:23.39,Default,,0000,0000,0000,,Esse é o vermelho (red), \Nverde (green) e azul (blue)
Dialogue: 0,0:03:23.39,0:03:24.74,Default,,0000,0000,0000,,que compõem essa cor.
Dialogue: 0,0:03:26.76,0:03:29.91,Default,,0000,0000,0000,,Uma coisa interessante sobre\Neste selector h2 do CSS
Dialogue: 0,0:03:29.91,0:03:33.42,Default,,0000,0000,0000,,que usamos, é que ele gosta de\Ntodos os h2 na página.
Dialogue: 0,0:03:33.81,0:03:36.30,Default,,0000,0000,0000,,Assim, podemos mudar várias\Nlinhas, porque queremos
Dialogue: 0,0:03:36.30,0:03:40.46,Default,,0000,0000,0000,,que todos esses h2 estejam\Nverdes e consistentes
Dialogue: 0,0:03:40.46,0:03:42.93,Default,,0000,0000,0000,,para todos aqueles h2 que\Nencontrar na página.
Dialogue: 0,0:03:43.37,0:03:44.99,Default,,0000,0000,0000,,Se você continuar com CSS\Npode aprender sobre
Dialogue: 0,0:03:44.99,0:03:47.23,Default,,0000,0000,0000,,muitas outras maneiras,\Ncomo outras partes da página,
Dialogue: 0,0:03:47.23,0:03:49.32,Default,,0000,0000,0000,,como se você só quisesse um desses h2.
Dialogue: 0,0:03:49.89,0:03:53.18,Default,,0000,0000,0000,,Você pode ir longe com esses\Ntipos de seletores básicos.
Dialogue: 0,0:03:54.41,0:03:55.98,Default,,0000,0000,0000,,Veremos outro estilo CSS.
Dialogue: 0,0:03:56.39,0:03:58.59,Default,,0000,0000,0000,,Desta vez para fazer a cor do fundo \Nde céu azul.
Dialogue: 0,0:03:58.89,0:04:01.53,Default,,0000,0000,0000,,Como poderíamos colorir o\Nfundo em uma página?
Dialogue: 0,0:04:01.88,0:04:05.11,Default,,0000,0000,0000,,Que 'tag' abrange toda a página?
Dialogue: 0,0:04:05.34,0:04:07.19,Default,,0000,0000,0000,,Não são as tags 'h1'.
Dialogue: 0,0:04:07.65,0:04:09.39,Default,,0000,0000,0000,,Não são os o P's, não é a imagem.
Dialogue: 0,0:04:10.53,0:04:15.68,Default,,0000,0000,0000,,Lembre-se, tudo dentro dessa \Ntag 'body' (corpo) é visível.
Dialogue: 0,0:04:16.04,0:04:18.19,Default,,0000,0000,0000,,Se queremos mudar o estilo\Nda página toda,
Dialogue: 0,0:04:18.49,0:04:21.97,Default,,0000,0000,0000,,precisamos usar um seletor\Npara selecionar essa tag.
Dialogue: 0,0:04:22.62,0:04:24.97,Default,,0000,0000,0000,,Então, vamos escrever 'body' (corpo).
Dialogue: 0,0:04:26.80,0:04:30.06,Default,,0000,0000,0000,,Agora, em vez de cor, escrevemos\Ncor do fundo (background-color)
Dialogue: 0,0:04:31.86,0:04:35.78,Default,,0000,0000,0000,,dois pontos e, \Nem seguida, o "rgb( )".
Dialogue: 0,0:04:36.31,0:04:40.88,Default,,0000,0000,0000,,Começamos o nosso seletor de cores e vou\Ncolocá-la para cima e escolher um azul
Dialogue: 0,0:04:40.88,0:04:44.85,Default,,0000,0000,0000,,que me faz pensar em coelhos \Nfunky e nas nuvens cumulus.
Dialogue: 0,0:04:45.39,0:04:46.28,Default,,0000,0000,0000,,Pronto!
Dialogue: 0,0:04:46.61,0:04:48.65,Default,,0000,0000,0000,,Veja minha elegante página.
Dialogue: 0,0:04:48.89,0:04:51.46,Default,,0000,0000,0000,,Existem mais de centenas de\Npropriedades CSS
Dialogue: 0,0:04:51.46,0:04:53.68,Default,,0000,0000,0000,,além da cor e cor de fundo
Dialogue: 0,0:04:53.68,0:04:56.09,Default,,0000,0000,0000,,mas eles são mais divertidos de se usar.
Dialogue: 0,0:04:56.54,0:04:58.17,Default,,0000,0000,0000,,Depois que eu terminar
Dialogue: 0,0:04:58.17,0:05:00.55,Default,,0000,0000,0000,,brinque com as cores que escolhi\N
Dialogue: 0,0:05:00.55,0:05:03.32,Default,,0000,0000,0000,,e personalize esta página para ser mais\No seu estilo que o meu.
Dialogue: 0,0:05:04.10,0:05:05.70,Default,,0000,0000,0000,,Certo? Então vamos lá!
Dialogue: 0,0:05:05.70,0:05:09.00,Default,,0000,0000,0000,,Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]