0:00:00.531,0:00:04.192 Nós conseguimos fazer muito até agora[br]com os seletores que vimos em CSS: 0:00:04.192,0:00:08.006 selecionando elementos pelo nome da tag,[br]pelo ID e pelo nome da classe. 0:00:08.690,0:00:11.028 Vamos revisá-los por um segundo[br]nessa página da web. 0:00:11.547,0:00:13.655 Essa página da web tem tudo sobre donuts. 0:00:13.789,0:00:15.963 E tem um título, parágrafos... 0:00:15.963,0:00:18.944 e alguns dos parágrafos são[br]fatos com menos de uma linha. 0:00:19.242,0:00:23.142 O CSS começa com a regra de selecionar[br]toda a tag '' da página, 0:00:23.142,0:00:25.611 e dá a eles[br]a fonte sans-serif. 0:00:26.074,0:00:30.063 Vou mudar para fonte "monospace",[br]para que você veja tudo que é selecionado. 0:00:30.785,0:00:31.808 está vendo? 0:00:34.102,0:00:37.836 A próxima regra seleciona qualquer[br]elemento que tenha a ID 'donut-header'. 0:00:38.034,0:00:41.913 E sabemos que está escolhendo pela ID,[br]pois começa com o símbolo '#'. 0:00:42.029,0:00:43.759 Já que a ID é bem descritiva, 0:00:43.759,0:00:46.681 me parece estar selecionando[br]o título maior no topo 0:00:46.688,0:00:47.645 e mudando sua fonte. 0:00:47.974,0:00:51.153 Mas vou apenas confirmar[br]que '' tem a ID. 0:00:51.153,0:00:53.184 sim, aqui está. 0:00:53.387,0:00:56.790 A última regra seleciona todos os elementos[br]que tem a classe 'fact'. 0:00:56.896,0:01:00.384 E sabemos que procura por uma classe,[br]pois começa com um ponto. 0:01:00.488,0:01:02.956 Para saber quais elementos[br]possuem essa classe, 0:01:02.956,0:01:04.740 eu posso olhar o que[br]a regra está fazendo-- 0:01:04.740,0:01:07.143 adicionando uma borda[br]no topo e no final e colchetes-- 0:01:07.833,0:01:10.462 ou eu posso através de meu HTML[br]pelo nome da classe. 0:01:10.619,0:01:13.148 Posso ver que o nome da classe[br]está neste parágrafo 0:01:13.148,0:01:14.300 e nesse parágrafo... 0:01:14.300,0:01:16.461 nos dois parágrafos[br]com fatos de uma linha 0:01:16.461,0:01:18.315 e é por isso que eles tem a borda. 0:01:18.448,0:01:19.778 classes são incríveis, 0:01:19.778,0:01:23.007 pois eles nos deixam usar o mesmo estilo[br]através de múltiplos elementos. 0:01:23.033,0:01:25.346 Mas ainda podemos [br]fazer mais com as classes, 0:01:25.346,0:01:26.348 e é isso que irei mostrar agora. 0:01:27.230,0:01:29.136 Então, temos a página sobre donuts, 0:01:29.136,0:01:31.361 mas donuts não são[br]nada saudáveis para você. 0:01:31.436,0:01:34.007 Eles podem ser uma das coisas[br]menos saudáveis para você. 0:01:34.030,0:01:36.963 E são meio que viciantes,[br]por causa do açúcar. 0:01:37.009,0:01:38.964 Então se teremos uma página[br]falando sobre eles, 0:01:38.964,0:01:42.051 devemos alertar as pessoas[br]a respeito de seus malefícios. 0:01:42.539,0:01:47.257 Que tal se fizermos esse fato em vermelho,[br]para mostrar que é um aviso? 0:01:47.626,0:01:49.015 Como faremos isso? 0:01:49.200,0:01:53.401 Começamos adicionando a [br]propriedade 'color' na regra 'fact' do CSS, 0:01:53.401,0:01:55.099 e vamos ver o que isso faz. 0:01:55.650,0:02:00.326 Mas faz com que ambos os fatos fiquem [br]vermelhos, e o segundo não é um aviso. 0:02:00.326,0:02:01.847 É apenas algo de ortografia. 0:02:02.051,0:02:03.845 Então não queremos que fique vermelho. 0:02:04.169,0:02:05.578 Podemos adicionar uma ID, 0:02:05.578,0:02:09.573 mas então se quisermos por uma cor[br]a outras coisas que eram avisos depois 0:02:09.573,0:02:10.958 e adicionar mais avisos, 0:02:10.958,0:02:14.185 então teríamos que continuar adicionando[br]ID's e regras para essas IDs. 0:02:15.041,0:02:19.806 Em um caso como esse, a melhor coisa a fazer[br]é adicionar outra classe a tag ''. 0:02:20.694,0:02:24.151 Navegadores nos deixam adicionar[br]quantas classes quisermos para uma única tag. 0:02:25.071,0:02:28.532 Para isso, colocamos o cursor[br]depois da última classe, 0:02:28.532,0:02:33.196 Damos um espaço, e escrevemos[br]uma nova classe, como 'warning'. 0:02:33.984,0:02:36.329 Agora podemos fazer uma regra para 'warning'. 0:02:37.119,0:02:40.243 e mover a propriedade 'color'[br]para dentro da regra. 0:02:40.835,0:02:44.001 Agora o fato em cima está vermelho,[br]e o segundo não está. 0:02:44.038,0:02:44.891 Lindo. 0:02:45.852,0:02:49.285 Podemos por a classe[br]em outros elementos, como antes. 0:02:49.643,0:02:54.121 Talvez queiramos colorir [br]o texto em negrito, "deep fried"... 0:02:54.121,0:02:56.986 nós o queremos de vermelho,[br]pois, coisas fritas 0:02:56.986,0:02:59.872 são muitas vezes ligadas a não estar bem. 0:03:00.025,0:03:03.692 Então adicionamos[br]'class="warning" '... 0:03:03.692,0:03:04.626 também vermelho. 0:03:05.035,0:03:11.900 Note que esse aviso aqui[br]tem a cor vermelha, 0:03:11.900,0:03:14.653 e que também tem a 'border:top'[br]e 'border:bottom' . 0:03:14.795,0:03:16.995 É isso que ocorre quando[br]se usam múltiplas classes... 0:03:16.995,0:03:19.338 o navegador vai olhar[br]todas as regras que se aplicam a elas 0:03:19.338,0:03:21.600 e aplicar todos os estilos apropriados. 0:03:22.733,0:03:26.810 Devemos tomar cuidado com usar apenas[br]cores para expressar significados, 0:03:26.810,0:03:28.563 pois alguma pessoas não as enxergam. 0:03:29.216,0:03:31.298 Existem pessoas que mal[br]podem dizer a diferença 0:03:31.298,0:03:33.255 entre vermelho e preto[br]e talvez você seja uma delas. 0:03:33.899,0:03:37.173 Então vamos mudar nossa classe[br]para ficar mais visível para todos. 0:03:38.070,0:03:40.711 Vamos mudar essa cor[br]para 'background color'. 0:03:40.711,0:03:44.470 Pois qualquer um pode dizer[br]qual algo tem um plano de fundo. 0:03:45.104,0:03:47.564 Esse é um contraste muito pequeno,[br]o vermelho e preto. 0:03:47.564,0:03:51.290 E contraste também é importante[br]para tornar a leitura da página melhor. 0:03:51.290,0:03:54.080 Então, vamos deixar a cor branca. 0:03:54.785,0:03:56.811 Ok, agora temos grandes contrastes, 0:03:56.811,0:03:59.611 e um fundo vermelho[br]para pessoas que podem ver vermelho. 0:03:59.994,0:04:04.497 e já que usamos uma classe, ambos[br]os avisos estão com o mesmo estilo. 0:04:04.774,0:04:07.787 Graças a flexibilidade [br]das classes do CSS, 0:04:07.787,0:04:10.722 podemos salvar o mundo inteiro dos donuts. 0:04:10.722,0:04:15.132 Traduzido por [Alef Almeida] [br]Revisado por [Gabriel Mello Fernandes]