[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.83,0:00:05.21,Default,,0000,0000,0000,,Voltamos com a página da web com os\Nlinks para as listas de pinturas famosas.
Dialogue: 0,0:00:05.21,0:00:11.74,Default,,0000,0000,0000,,O CSS começa com uma regra que define\Numa fonte para tudo, que é a {\i1}sans-serif{\i0}.
Dialogue: 0,0:00:11.74,0:00:17.11,Default,,0000,0000,0000,,E uma regra para agrupar os seletores \Nque muda a fonte {\i1}< h1 >{\i0} e {\i1}< h2 >{\i0}
Dialogue: 0,0:00:17.11,0:00:22.27,Default,,0000,0000,0000,,E temos um monte de regras que você \Nprovavelmente ainda não viu
Dialogue: 0,0:00:22.27,0:00:24.57,Default,,0000,0000,0000,,e pode parecer um pouco engraçado.
Dialogue: 0,0:00:24.57,0:00:29.97,Default,,0000,0000,0000,,Todas elas começam com {\i1}a{\i0}, seguido de\Ndois pontos, e depois, uma palavra.
Dialogue: 0,0:00:30.61,0:00:35.50,Default,,0000,0000,0000,,O que os dois pontos significam?\NO que estas regras poderiam selecionar?
Dialogue: 0,0:00:36.83,0:00:41.06,Default,,0000,0000,0000,,Todas essas coisas que começam com dois\Npontos são chamados de pseudo-classes.
Dialogue: 0,0:00:41.06,0:00:44.01,Default,,0000,0000,0000,,Uma pseudo-classe é usada para \Nselecionar elementos
Dialogue: 0,0:00:44.01,0:00:48.22,Default,,0000,0000,0000,,com base em informações que não \Nsão parte da estrutura da página
Dialogue: 0,0:00:48.23,0:00:51.61,Default,,0000,0000,0000,,ou simplesmente não pode ser expresso\Nusando outros seletores.
Dialogue: 0,0:00:51.83,0:00:57.43,Default,,0000,0000,0000,,Aqui estou usando pseudo-classes para\Nestilizar os links baseados em seu estado.
Dialogue: 0,0:00:57.43,0:01:03.45,Default,,0000,0000,0000,,A pseudo-classe {\i1}link{\i0} selecionará todos os\Nlinks da página que o usuário não visitou.
Dialogue: 0,0:01:03.45,0:01:06.58,Default,,0000,0000,0000,,Que na maioria dos navegadores\No padrão é azul.
Dialogue: 0,0:01:06.58,0:01:10.40,Default,,0000,0000,0000,,A pseudo-classe {\i1}visited{\i0} selecionará\Ntodos os links que o usuário visitou.
Dialogue: 0,0:01:10.40,0:01:13.29,Default,,0000,0000,0000,,Que na maioria dos navegadores\No padrão é roxo.
Dialogue: 0,0:01:13.29,0:01:16.12,Default,,0000,0000,0000,,Se quisermos, podemos mudar as cores.
Dialogue: 0,0:01:16.12,0:01:18.08,Default,,0000,0000,0000,,Mas você deve ter uma boa razão pra isso.\N
Dialogue: 0,0:01:18.08,0:01:22.95,Default,,0000,0000,0000,,As pessoas se acostumaram a associar azul\Ne roxo com coisas que eles viram ou não.
Dialogue: 0,0:01:22.95,0:01:25.67,Default,,0000,0000,0000,,As pessoas gostam de saber quais\Npáginas elas visitaram.
Dialogue: 0,0:01:25.67,0:01:28.38,Default,,0000,0000,0000,,Então você não deve tirar isso sem\Nter uma boa razão.
Dialogue: 0,0:01:28.38,0:01:31.09,Default,,0000,0000,0000,,Vou apenas apagar essas duas regras.
Dialogue: 0,0:01:31.09,0:01:34.22,Default,,0000,0000,0000,,Porque não acho que é uma boa ideia\Nbrincar com elas.
Dialogue: 0,0:01:35.53,0:01:38.97,Default,,0000,0000,0000,,A próxima regra é divertida: {\i1}a:hover{\i0}.
Dialogue: 0,0:01:39.94,0:01:43.60,Default,,0000,0000,0000,,A pseudo-classe {\i1}hover{\i0} selecionará um\Nelemento enquanto o usuário
Dialogue: 0,0:01:43.60,0:01:45.59,Default,,0000,0000,0000,,passar o mouse sobre ele.
Dialogue: 0,0:01:45.59,0:01:48.41,Default,,0000,0000,0000,,Assim as propriedades só serão\Naplicadas depois.
Dialogue: 0,0:01:48.41,0:01:53.35,Default,,0000,0000,0000,,Pause esse vídeo e passe o mouse\Nsobre os links e veja o que acontece.
Dialogue: 0,0:01:53.35,0:01:56.04,Default,,0000,0000,0000,,Pode pausar, eu espero...
Dialogue: 0,0:01:57.41,0:02:01.16,Default,,0000,0000,0000,,Viu que mudou a cor de fundo?\NÉ um efeito muito legal.
Dialogue: 0,0:02:01.16,0:02:05.07,Default,,0000,0000,0000,,E você pode usar essa pseudo-classe {\i1}hover{\i0}\Nem qualquer elemento, não só em links.
Dialogue: 0,0:02:05.07,0:02:07.66,Default,,0000,0000,0000,,Lembre-se que ele não funciona\Nem todos os dispositivos
Dialogue: 0,0:02:07.66,0:02:11.42,Default,,0000,0000,0000,,Se você estiver em um telefone você não\Ntem uma hover. Só tem toque e não toque.
Dialogue: 0,0:02:11.42,0:02:15.30,Default,,0000,0000,0000,,É ótimo ter um efeito {\i1}hover{\i0} como\Num bônus, mas não confie nele.
Dialogue: 0,0:02:15.30,0:02:17.89,Default,,0000,0000,0000,,E sobre estes dois últimos aqui?
Dialogue: 0,0:02:17.89,0:02:20.48,Default,,0000,0000,0000,,Eles são semelhantes ao {\i1}hover{\i0}.
Dialogue: 0,0:02:20.48,0:02:23.07,Default,,0000,0000,0000,,Eles dependem do que o usuário está\Nfazendo no momento
Dialogue: 0,0:02:23.07,0:02:27.19,Default,,0000,0000,0000,,A pseudo-classe {\i1}active{\i0} seleciona\Nelementos que estão sendo ativados.
Dialogue: 0,0:02:27.19,0:02:30.100,Default,,0000,0000,0000,,Como em um link, se o usuário está \Nclicando nele,
Dialogue: 0,0:02:30.100,0:02:34.02,Default,,0000,0000,0000,,antes de mudar a página.
Dialogue: 0,0:02:34.46,0:02:38.61,Default,,0000,0000,0000,,A pseudo-classe {\i1}focus{\i0} seleciona\Nelementos que atualmente têm o foco,
Dialogue: 0,0:02:38.61,0:02:42.39,Default,,0000,0000,0000,,o que geralmente acontece se usar a\Ntecla Tab para navegar na tela.
Dialogue: 0,0:02:42.39,0:02:48.08,Default,,0000,0000,0000,,Pause o vídeo, clique e segure nos links \Ne pressine Tab para ver o que acontece.
Dialogue: 0,0:02:48.89,0:02:51.39,Default,,0000,0000,0000,,Viu a mudança de cor do fundo\Nquando você fez isso?
Dialogue: 0,0:02:51.53,0:02:56.42,Default,,0000,0000,0000,,Escolhi a mesma propriedade para {\i1}hover{\i0}, \N{\i1}active{\i0} e {\i1}focus{\i0} porque são a mesma coisa.
Dialogue: 0,0:02:56.42,0:02:58.84,Default,,0000,0000,0000,,O usuário tem como alvo o link\Nde alguma forma.
Dialogue: 0,0:02:58.84,0:03:03.66,Default,,0000,0000,0000,,Por isso muitos web designers utilizam as\Nmesmas propriedades nesses três estados.
Dialogue: 0,0:03:03.66,0:03:07.11,Default,,0000,0000,0000,,E se eu decidir que quero mudar\Na cor de fundo?
Dialogue: 0,0:03:07.11,0:03:10.04,Default,,0000,0000,0000,,Poderia entrar em cada um deles
Dialogue: 0,0:03:10.04,0:03:12.85,Default,,0000,0000,0000,,e alterar um por um.
Dialogue: 0,0:03:13.08,0:03:15.72,Default,,0000,0000,0000,,ou poderia fazer o que acabamos\Nde aprender.
Dialogue: 0,0:03:15.72,0:03:20.14,Default,,0000,0000,0000,,Posso agrupar os seletores colocando-os\Nem uma regra, separados por vírgulas.
Dialogue: 0,0:03:20.38,0:03:27.21,Default,,0000,0000,0000,,Colocamos nossa vírgula assim, \N{\i1}a:active{\i0} e depois {\i1}a:focus{\i0}.
Dialogue: 0,0:03:27.95,0:03:37.11,Default,,0000,0000,0000,,Agora eu posso excluir esses dois e mudar\Ntodos esses três de uma só vez.
Dialogue: 0,0:03:37.11,0:03:40.26,Default,,0000,0000,0000,,Estas são as primeiras aulas de \Npseudo-classes que apresentamos,
Dialogue: 0,0:03:40.26,0:03:41.65,Default,,0000,0000,0000,,mas não são as únicas.
Dialogue: 0,0:03:41.65,0:03:45.12,Default,,0000,0000,0000,,Você pode procurar por CSS Pseudo-classes\Nna internet pra saber mais
Dialogue: 0,0:03:45.12,0:03:47.47,Default,,0000,0000,0000,,ou esperar para aprender mais aqui.
Dialogue: 0,0:03:47.47,0:03:49.00,Default,,0000,0000,0000,,[Traduzido por Fernando dos Reis]\N[Revisado por Pablo Vieira]