[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.81,0:00:05.43,Default,,0000,0000,0000,,Vamos mudar de rosquinhas para cenouras, \Num dos alimentos mais saudáveis do mundo.
Dialogue: 0,0:00:05.43,0:00:07.90,Default,,0000,0000,0000,,Além disso, o alimento favorito \Ndos coelhos.
Dialogue: 0,0:00:07.90,0:00:10.53,Default,,0000,0000,0000,,Você sabia que cenouras não são só\Nda cor laranja?
Dialogue: 0,0:00:10.53,0:00:13.54,Default,,0000,0000,0000,,Elas eram originalmente roxas. \NAlgumas delas ainda são.
Dialogue: 0,0:00:13.54,0:00:16.94,Default,,0000,0000,0000,,Temos esta página com uma lista de \Ncores de cenoura
Dialogue: 0,0:00:16.94,0:00:19.84,Default,,0000,0000,0000,,e uma frase sobre suas origens roxas.
Dialogue: 0,0:00:19.84,0:00:25.27,Default,,0000,0000,0000,,E usamos classes para estilizar os nomes \Nde cores para a cor apropriada.
Dialogue: 0,0:00:25.27,0:00:27.88,Default,,0000,0000,0000,,Gosto de como os estilos \Naparecem na lista,
Dialogue: 0,0:00:27.88,0:00:31.80,Default,,0000,0000,0000,,mas não tenho certeza se gosto de \Ncomo o estilo "roxo" está no texto.
Dialogue: 0,0:00:31.98,0:00:36.36,Default,,0000,0000,0000,,Acho que prefiro não usar uma cor de \Nfundo, e sim uma coloração mais sutil ali.
Dialogue: 0,0:00:36.96,0:00:40.56,Default,,0000,0000,0000,,Como poderia dizer ao navegador para \Nestilizar o texto roxo aqui
Dialogue: 0,0:00:40.56,0:00:44.14,Default,,0000,0000,0000,,de forma diferente do que o texto \Nroxo aqui?
Dialogue: 0,0:00:44.14,0:00:47.55,Default,,0000,0000,0000,,Eles têm os mesmos nomes de classe,\Npor isso não podemos usar a classe,
Dialogue: 0,0:00:47.55,0:00:49.56,Default,,0000,0000,0000,,a menos que criemos uma nova classe.
Dialogue: 0,0:00:49.99,0:00:52.92,Default,,0000,0000,0000,,Eles também têm a mesma tag: \Nambas são {\i1}{\i0}.
Dialogue: 0,0:00:53.27,0:00:58.01,Default,,0000,0000,0000,,Não podemos usar o seletor {\b1}elemento{\b0}\Nmais {\b1}classe{\b0} que acabamos de aprender.
Dialogue: 0,0:00:58.01,0:01:00.38,Default,,0000,0000,0000,,Há mais alguma coisa diferente sobre eles?
Dialogue: 0,0:01:01.17,0:01:06.38,Default,,0000,0000,0000,,Uma coisa é que esta {\i1}{\i0} está dentro \Nde uma {\i1}{\i0}{\i1}{\i0},
Dialogue: 0,0:01:06.38,0:01:10.98,Default,,0000,0000,0000,,e esta {\i1}{\i0} está dentro de uma {\i1}{\i0}{\i1}{\i0}.
Dialogue: 0,0:01:10.98,0:01:15.58,Default,,0000,0000,0000,,A diferença é a tag pai delas, as\Ntags que estão acima delas.
Dialogue: 0,0:01:15.58,0:01:18.64,Default,,0000,0000,0000,,Podemos usar essa informação para fazer \Numa regra CSS,
Dialogue: 0,0:01:18.64,0:01:21.32,Default,,0000,0000,0000,,usando o que é chamado de \Num {\b1}seletor descendente{\b0}
Dialogue: 0,0:01:21.32,0:01:24.83,Default,,0000,0000,0000,,Uma forma de selecionar elementos com \Nbase na sua posição no documento.
Dialogue: 0,0:01:25.22,0:01:30.39,Default,,0000,0000,0000,,Por exemplo, para selecionar apenas o \N{\i1}{\i0} roxo dentro do parágrafo
Dialogue: 0,0:01:30.62,0:01:35.78,Default,,0000,0000,0000,,vamos escrever {\i1}p{\i0}, e em seguida, um espaço.\NO espaço é realmente importante
Dialogue: 0,0:01:35.78,0:01:40.38,Default,,0000,0000,0000,,e, em seguida, a classe {\i1}.purple{\i0}
Dialogue: 0,0:01:40.38,0:01:46.11,Default,,0000,0000,0000,,e agora vamos adicionar as propriedades \Nque nos darão a coloração mais sutil.
Dialogue: 0,0:01:46.11,0:01:50.31,Default,,0000,0000,0000,,{\i1}background-color{\i0}: {\i1}transparent{\i0}, \Nsubstitui o que era antes.
Dialogue: 0,0:01:50.45,0:01:51.45,Default,,0000,0000,0000,,Legal.
Dialogue: 0,0:01:51.79,0:01:58.74,Default,,0000,0000,0000,,Nós mudamos este texto roxo \Nsem afetar também este texto roxo.
Dialogue: 0,0:01:58.74,0:02:02.88,Default,,0000,0000,0000,,E agora sempre que usarmos a classe \N{\i1}purple{\i0} dentro de um parágrafo como este,
Dialogue: 0,0:02:02.88,0:02:05.32,Default,,0000,0000,0000,,ele vai ter esses estilos aplicados nele.
Dialogue: 0,0:02:06.04,0:02:09.59,Default,,0000,0000,0000,,Podemos usar esse espaço para ir fundo \Nem nosso documento.
Dialogue: 0,0:02:09.59,0:02:15.73,Default,,0000,0000,0000,,Digamos que queremos aplicar um estilo só \Npara tags {\i1}{\i0} que estão em {\i1}{\i0}{\i1}{\i0}.
Dialogue: 0,0:02:16.39,0:02:22.89,Default,,0000,0000,0000,,Começamos com a tag pai {\i1}{\i0}{\i1}{\i0} e depois \Nespaço, e depois {\i1}{\i0}.
Dialogue: 0,0:02:23.32,0:02:28.07,Default,,0000,0000,0000,,E talvez daremos uma altura de linha \Ndiferente para melhorar o espaçamento.
Dialogue: 0,0:02:29.43,0:02:34.07,Default,,0000,0000,0000,,Poderíamos até mesmo adicionar um \N{\i1}{\i0}{\i1}{\i0} em frente ao {\i1}{\i0}{\i1}{\i0}, se quiséssemos,
Dialogue: 0,0:02:34.07,0:02:38.52,Default,,0000,0000,0000,,para certificar que não seria aplicado às \N{\i1}{\i0}'s dentro de um {\i1}{\i0}{\i1} {\i0}{\i1}{\i0}.
Dialogue: 0,0:02:38.52,0:02:40.79,Default,,0000,0000,0000,,Para usar seletores descendentes,
Dialogue: 0,0:02:40.79,0:02:43.58,Default,,0000,0000,0000,,precisamos pensar bem sobre a estrutura\Ndo nosso documento
Dialogue: 0,0:02:43.58,0:02:46.10,Default,,0000,0000,0000,,e quais tags estão dentro de \Noutras tags.
Dialogue: 0,0:02:46.10,0:02:49.51,Default,,0000,0000,0000,,Se você estiver indentando bem, \Nentão isso deve ser fácil de fazer
Dialogue: 0,0:02:49.51,0:02:52.51,Default,,0000,0000,0000,,porque o sua indentação refletirá a \Nhierarquia das tags.
Dialogue: 0,0:02:52.51,0:02:56.96,Default,,0000,0000,0000,,Temos esta {\i1}{\i0}{\i1}{\i0}, e indentado dentro \Ndela temos um {\i1}{\i0}{\i1}{\i0},
Dialogue: 0,0:02:56.96,0:02:59.34,Default,,0000,0000,0000,,e no interior desta temos a {\i1}{\i0}.
Dialogue: 0,0:02:59.34,0:03:02.93,Default,,0000,0000,0000,,Se não está indentando muito bem, \Narrume isso agora
Dialogue: 0,0:03:02.93,0:03:07.02,Default,,0000,0000,0000,,porque será muito mais fácil para você \Nentender a estrutura de sua página
Dialogue: 0,0:03:07.02,0:03:10.10,Default,,0000,0000,0000,,e criar seletores CSS com \Nbase nessa estrutura.
Dialogue: 0,0:03:10.61,0:03:13.60,Default,,0000,0000,0000,,Você pode usar esse espaço entre \Nquaisquer tipos de seletores.
Dialogue: 0,0:03:13.97,0:03:18.96,Default,,0000,0000,0000,,Como encontrar um tipo de tag especial \Nsob um elemento que tem uma certa id,
Dialogue: 0,0:03:18.96,0:03:22.46,Default,,0000,0000,0000,,ou encontrar um id específico sob os \Nelementos com uma classe particular,
Dialogue: 0,0:03:22.46,0:03:24.99,Default,,0000,0000,0000,,qualquer combinação que precise usar.
Dialogue: 0,0:03:25.33,0:03:29.43,Default,,0000,0000,0000,,O ponto para lembrar é: se a \Nestrutura de sua página muda,
Dialogue: 0,0:03:29.43,0:03:32.84,Default,,0000,0000,0000,,suas regras CSS antigas podem \Nnão ser aplicáveis.
Dialogue: 0,0:03:32.84,0:03:37.18,Default,,0000,0000,0000,,Pense com cuidado quando usá-las, e quão \Nà prova de mudanças será seu CSS.
Dialogue: 0,0:03:37.18,0:03:38.72,Default,,0000,0000,0000,,Você sempre pode usar classes
Dialogue: 0,0:03:38.72,0:03:41.54,Default,,0000,0000,0000,,se quiser ser menos dependente da \Nestrutura da sua página.
Dialogue: 0,0:03:41.70,0:03:45.61,Default,,0000,0000,0000,,Vamos voltar para regras que criei \Ne pensar sobre elas.
Dialogue: 0,0:03:45.86,0:03:49.05,Default,,0000,0000,0000,,Esta primeira regra estiliza todos os \Nelementos com classe {\i1}purple{\i0}
Dialogue: 0,0:03:49.05,0:03:51.61,Default,,0000,0000,0000,,dentro de parágrafos de certo modo.
Dialogue: 0,0:03:51.61,0:03:55.39,Default,,0000,0000,0000,,Se eu adicionar novos parágrafos com \Nelementos com classe {\i1}purple{\i0} no futuro,
Dialogue: 0,0:03:55.39,0:03:57.96,Default,,0000,0000,0000,,eu iria querer que tivessem essas \Npropriedades?
Dialogue: 0,0:03:57.96,0:04:02.33,Default,,0000,0000,0000,,Sim, porque eu acho que elas sempre \Nficarão melhor no parágrafo.
Dialogue: 0,0:04:02.33,0:04:04.40,Default,,0000,0000,0000,,Preciso de uma regra mais específica?
Dialogue: 0,0:04:04.40,0:04:07.34,Default,,0000,0000,0000,,Talvez se estes parágrafos estivessem \Nsempre dentro
Dialogue: 0,0:04:07.34,0:04:10.96,Default,,0000,0000,0000,,de algum elemento com uma classe "{\i1}artigo{\i0}",\Neu poderia acrescentá-la na regra.
Dialogue: 0,0:04:10.96,0:04:14.25,Default,,0000,0000,0000,,Mas, por agora, este é o mais específico \Nque posso ser.
Dialogue: 0,0:04:14.25,0:04:17.90,Default,,0000,0000,0000,,A segunda regra dá a todos os elementos \N{\i1}{\i0}
Dialogue: 0,0:04:17.90,0:04:21.10,Default,,0000,0000,0000,,dentro de uma lista, uma certa altura de \Nlinha.
Dialogue: 0,0:04:21.42,0:04:24.27,Default,,0000,0000,0000,,Sempre vou querer que itens {\i1}{\i0}\Ndentro de {\i1}{\i0}{\i1}{\i0}
Dialogue: 0,0:04:24.27,0:04:26.23,Default,,0000,0000,0000,,tenham esse aumento na altura da linha?
Dialogue: 0,0:04:27.39,0:04:30.65,Default,,0000,0000,0000,,Talvez não. Esta regra pode ser \Nmuito genérica.
Dialogue: 0,0:04:30.93,0:04:36.78,Default,,0000,0000,0000,,Já que não tenho certeza, vou adicionar \Numa classe para esta {\i1}{\i0}{\i1}{\i0}
Dialogue: 0,0:04:36.78,0:04:42.03,Default,,0000,0000,0000,,e depois, mudar este aqui para {\i1}ul.spacey{\i0}
Dialogue: 0,0:04:42.35,0:04:44.47,Default,,0000,0000,0000,,que a torna muito mais específica.
Dialogue: 0,0:04:44.47,0:04:46.75,Default,,0000,0000,0000,,No futuro, à medida que minha\Npágina web cresce,
Dialogue: 0,0:04:46.75,0:04:50.16,Default,,0000,0000,0000,,eu poderia fazer a regra mais ou \Nmenos específica.
Dialogue: 0,0:04:50.16,0:04:53.63,Default,,0000,0000,0000,,Coloque esta ferramenta em sua sempre \Ncrescente caixa de ferramentas CSS
Dialogue: 0,0:04:53.63,0:04:56.59,Default,,0000,0000,0000,,e pratique, de modo que você possa\Nusá-la quando fizer sentido.
Dialogue: 0,0:04:56.59,0:04:58.00,Default,,0000,0000,0000,,[legendado por: Pablo Vieira]\N