[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.53,0:00:04.19,Default,,0000,0000,0000,,Nós conseguimos fazer muito até agora\Ncom os seletores que vimos em CSS:
Dialogue: 0,0:00:04.19,0:00:08.01,Default,,0000,0000,0000,,selecionando elementos pelo nome da tag,\Npelo ID e pelo nome da classe.
Dialogue: 0,0:00:08.69,0:00:11.03,Default,,0000,0000,0000,,Vamos revisá-los por um segundo\Nnessa página da web.
Dialogue: 0,0:00:11.55,0:00:13.66,Default,,0000,0000,0000,,Essa página da web tem tudo sobre donuts.
Dialogue: 0,0:00:13.79,0:00:15.96,Default,,0000,0000,0000,,E tem um título, parágrafos...
Dialogue: 0,0:00:15.96,0:00:18.94,Default,,0000,0000,0000,,e alguns dos parágrafos são\Nfatos com menos de uma linha.
Dialogue: 0,0:00:19.24,0:00:23.14,Default,,0000,0000,0000,,O CSS começa com a regra de selecionar\Ntoda a tag '' da página,
Dialogue: 0,0:00:23.14,0:00:25.61,Default,,0000,0000,0000,,e dá a eles\Na fonte sans-serif.
Dialogue: 0,0:00:26.07,0:00:30.06,Default,,0000,0000,0000,,Vou mudar para fonte "monospace",\Npara que você veja tudo que é selecionado.
Dialogue: 0,0:00:30.78,0:00:31.81,Default,,0000,0000,0000,,está vendo?
Dialogue: 0,0:00:34.10,0:00:37.84,Default,,0000,0000,0000,,A próxima regra seleciona qualquer\Nelemento que tenha a ID 'donut-header'.
Dialogue: 0,0:00:38.03,0:00:41.91,Default,,0000,0000,0000,,E sabemos que está escolhendo pela ID,\Npois começa com o símbolo '#'.
Dialogue: 0,0:00:42.03,0:00:43.76,Default,,0000,0000,0000,,Já que a ID é bem descritiva,
Dialogue: 0,0:00:43.76,0:00:46.68,Default,,0000,0000,0000,,me parece estar selecionando\No título maior no topo
Dialogue: 0,0:00:46.69,0:00:47.64,Default,,0000,0000,0000,,e mudando sua fonte.
Dialogue: 0,0:00:47.97,0:00:51.15,Default,,0000,0000,0000,,Mas vou apenas confirmar\Nque '' tem a ID.
Dialogue: 0,0:00:51.15,0:00:53.18,Default,,0000,0000,0000,,sim, aqui está.
Dialogue: 0,0:00:53.39,0:00:56.79,Default,,0000,0000,0000,,A última regra seleciona todos os elementos\Nque tem a classe 'fact'.
Dialogue: 0,0:00:56.90,0:01:00.38,Default,,0000,0000,0000,,E sabemos que procura por uma classe,\Npois começa com um ponto.
Dialogue: 0,0:01:00.49,0:01:02.96,Default,,0000,0000,0000,,Para saber quais elementos\Npossuem essa classe,
Dialogue: 0,0:01:02.96,0:01:04.74,Default,,0000,0000,0000,,eu posso olhar o que\Na regra está fazendo--
Dialogue: 0,0:01:04.74,0:01:07.14,Default,,0000,0000,0000,,adicionando uma borda\Nno topo e no final e colchetes--
Dialogue: 0,0:01:07.83,0:01:10.46,Default,,0000,0000,0000,,ou eu posso através de meu HTML\Npelo nome da classe.
Dialogue: 0,0:01:10.62,0:01:13.15,Default,,0000,0000,0000,,Posso ver que o nome da classe\Nestá neste parágrafo
Dialogue: 0,0:01:13.15,0:01:14.30,Default,,0000,0000,0000,,e nesse parágrafo...
Dialogue: 0,0:01:14.30,0:01:16.46,Default,,0000,0000,0000,,nos dois parágrafos\Ncom fatos de uma linha
Dialogue: 0,0:01:16.46,0:01:18.32,Default,,0000,0000,0000,,e é por isso que eles tem a borda.
Dialogue: 0,0:01:18.45,0:01:19.78,Default,,0000,0000,0000,,classes são incríveis,
Dialogue: 0,0:01:19.78,0:01:23.01,Default,,0000,0000,0000,,pois eles nos deixam usar o mesmo estilo\Natravés de múltiplos elementos.
Dialogue: 0,0:01:23.03,0:01:25.35,Default,,0000,0000,0000,,Mas ainda podemos \Nfazer mais com as classes,
Dialogue: 0,0:01:25.35,0:01:26.35,Default,,0000,0000,0000,,e é isso que irei mostrar agora.
Dialogue: 0,0:01:27.23,0:01:29.14,Default,,0000,0000,0000,,Então, temos a página sobre donuts,
Dialogue: 0,0:01:29.14,0:01:31.36,Default,,0000,0000,0000,,mas donuts não são\Nnada saudáveis para você.
Dialogue: 0,0:01:31.44,0:01:34.01,Default,,0000,0000,0000,,Eles podem ser uma das coisas\Nmenos saudáveis para você.
Dialogue: 0,0:01:34.03,0:01:36.96,Default,,0000,0000,0000,,E são meio que viciantes,\Npor causa do açúcar.
Dialogue: 0,0:01:37.01,0:01:38.96,Default,,0000,0000,0000,,Então se teremos uma página\Nfalando sobre eles,
Dialogue: 0,0:01:38.96,0:01:42.05,Default,,0000,0000,0000,,devemos alertar as pessoas\Na respeito de seus malefícios.
Dialogue: 0,0:01:42.54,0:01:47.26,Default,,0000,0000,0000,,Que tal se fizermos esse fato em vermelho,\Npara mostrar que é um aviso?
Dialogue: 0,0:01:47.63,0:01:49.02,Default,,0000,0000,0000,,Como faremos isso?
Dialogue: 0,0:01:49.20,0:01:53.40,Default,,0000,0000,0000,,Começamos adicionando a \Npropriedade 'color' na regra 'fact' do CSS,
Dialogue: 0,0:01:53.40,0:01:55.10,Default,,0000,0000,0000,,e vamos ver o que isso faz.
Dialogue: 0,0:01:55.65,0:02:00.33,Default,,0000,0000,0000,,Mas faz com que ambos os fatos fiquem \Nvermelhos, e o segundo não é um aviso.
Dialogue: 0,0:02:00.33,0:02:01.85,Default,,0000,0000,0000,,É apenas algo de ortografia.
Dialogue: 0,0:02:02.05,0:02:03.84,Default,,0000,0000,0000,,Então não queremos que fique vermelho.
Dialogue: 0,0:02:04.17,0:02:05.58,Default,,0000,0000,0000,,Podemos adicionar uma ID,
Dialogue: 0,0:02:05.58,0:02:09.57,Default,,0000,0000,0000,,mas então se quisermos por uma cor\Na outras coisas que eram avisos depois
Dialogue: 0,0:02:09.57,0:02:10.96,Default,,0000,0000,0000,,e adicionar mais avisos,
Dialogue: 0,0:02:10.96,0:02:14.18,Default,,0000,0000,0000,,então teríamos que continuar adicionando\NID's e regras para essas IDs.
Dialogue: 0,0:02:15.04,0:02:19.81,Default,,0000,0000,0000,,Em um caso como esse, a melhor coisa a fazer\Né adicionar outra classe a tag ''.
Dialogue: 0,0:02:20.69,0:02:24.15,Default,,0000,0000,0000,,Navegadores nos deixam adicionar\Nquantas classes quisermos para uma única tag.
Dialogue: 0,0:02:25.07,0:02:28.53,Default,,0000,0000,0000,,Para isso, colocamos o cursor\Ndepois da última classe,
Dialogue: 0,0:02:28.53,0:02:33.20,Default,,0000,0000,0000,,Damos um espaço, e escrevemos\Numa nova classe, como 'warning'.
Dialogue: 0,0:02:33.98,0:02:36.33,Default,,0000,0000,0000,,Agora podemos fazer uma regra para 'warning'.
Dialogue: 0,0:02:37.12,0:02:40.24,Default,,0000,0000,0000,,e mover a propriedade 'color'\Npara dentro da regra.
Dialogue: 0,0:02:40.84,0:02:44.00,Default,,0000,0000,0000,,Agora o fato em cima está vermelho,\Ne o segundo não está.
Dialogue: 0,0:02:44.04,0:02:44.89,Default,,0000,0000,0000,,Lindo.
Dialogue: 0,0:02:45.85,0:02:49.28,Default,,0000,0000,0000,,Podemos por a classe\Nem outros elementos, como antes.
Dialogue: 0,0:02:49.64,0:02:54.12,Default,,0000,0000,0000,,Talvez queiramos colorir \No texto em negrito, "deep fried"...
Dialogue: 0,0:02:54.12,0:02:56.99,Default,,0000,0000,0000,,nós o queremos de vermelho,\Npois, coisas fritas
Dialogue: 0,0:02:56.99,0:02:59.87,Default,,0000,0000,0000,,são muitas vezes ligadas a não estar bem.
Dialogue: 0,0:03:00.02,0:03:03.69,Default,,0000,0000,0000,,Então adicionamos\N'class="warning" '...
Dialogue: 0,0:03:03.69,0:03:04.63,Default,,0000,0000,0000,,também vermelho.
Dialogue: 0,0:03:05.04,0:03:11.90,Default,,0000,0000,0000,,Note que esse aviso aqui\Ntem a cor vermelha,
Dialogue: 0,0:03:11.90,0:03:14.65,Default,,0000,0000,0000,,e que também tem a 'border:top'\Ne 'border:bottom' .
Dialogue: 0,0:03:14.80,0:03:16.100,Default,,0000,0000,0000,,É isso que ocorre quando\Nse usam múltiplas classes...
Dialogue: 0,0:03:16.100,0:03:19.34,Default,,0000,0000,0000,,o navegador vai olhar\Ntodas as regras que se aplicam a elas
Dialogue: 0,0:03:19.34,0:03:21.60,Default,,0000,0000,0000,,e aplicar todos os estilos apropriados.
Dialogue: 0,0:03:22.73,0:03:26.81,Default,,0000,0000,0000,,Devemos tomar cuidado com usar apenas\Ncores para expressar significados,
Dialogue: 0,0:03:26.81,0:03:28.56,Default,,0000,0000,0000,,pois alguma pessoas não as enxergam.
Dialogue: 0,0:03:29.22,0:03:31.30,Default,,0000,0000,0000,,Existem pessoas que mal\Npodem dizer a diferença
Dialogue: 0,0:03:31.30,0:03:33.26,Default,,0000,0000,0000,,entre vermelho e preto\Ne talvez você seja uma delas.
Dialogue: 0,0:03:33.90,0:03:37.17,Default,,0000,0000,0000,,Então vamos mudar nossa classe\Npara ficar mais visível para todos.
Dialogue: 0,0:03:38.07,0:03:40.71,Default,,0000,0000,0000,,Vamos mudar essa cor\Npara 'background color'.
Dialogue: 0,0:03:40.71,0:03:44.47,Default,,0000,0000,0000,,Pois qualquer um pode dizer\Nqual algo tem um plano de fundo.
Dialogue: 0,0:03:45.10,0:03:47.56,Default,,0000,0000,0000,,Esse é um contraste muito pequeno,\No vermelho e preto.
Dialogue: 0,0:03:47.56,0:03:51.29,Default,,0000,0000,0000,,E contraste também é importante\Npara tornar a leitura da página melhor.
Dialogue: 0,0:03:51.29,0:03:54.08,Default,,0000,0000,0000,,Então, vamos deixar a cor branca.
Dialogue: 0,0:03:54.78,0:03:56.81,Default,,0000,0000,0000,,Ok, agora temos grandes contrastes,
Dialogue: 0,0:03:56.81,0:03:59.61,Default,,0000,0000,0000,,e um fundo vermelho\Npara pessoas que podem ver vermelho.
Dialogue: 0,0:03:59.99,0:04:04.50,Default,,0000,0000,0000,,e já que usamos uma classe, ambos\Nos avisos estão com o mesmo estilo.
Dialogue: 0,0:04:04.77,0:04:07.79,Default,,0000,0000,0000,,Graças a flexibilidade \Ndas classes do CSS,
Dialogue: 0,0:04:07.79,0:04:10.72,Default,,0000,0000,0000,,podemos salvar o mundo inteiro dos donuts.
Dialogue: 0,0:04:10.72,0:04:15.13,Default,,0000,0000,0000,,Traduzido por [Alef Almeida] \NRevisado por [Gabriel Mello Fernandes]