WEBVTT

00:00:00.531 --> 00:00:04.192
Nós conseguimos fazer muito até agora
com os seletores que vimos em CSS:

00:00:04.192 --> 00:00:08.006
selecionando elementos pelo nome da tag,
pelo ID e pelo nome da classe.

00:00:08.690 --> 00:00:11.028
Vamos revisá-los por um segundo
nessa página da web.

00:00:11.547 --> 00:00:13.655
Essa página da web tem tudo sobre donuts.

00:00:13.789 --> 00:00:15.963
E tem um título, parágrafos...

00:00:15.963 --> 00:00:18.944
e alguns dos parágrafos são
fatos com menos de uma linha.

00:00:19.242 --> 00:00:23.142
O CSS começa com a regra de selecionar
toda a tag '' da página,

00:00:23.142 --> 00:00:25.611
e dá a eles
a fonte sans-serif.

00:00:26.074 --> 00:00:30.063
Vou mudar para fonte "monospace",
para que você veja tudo que é selecionado.

00:00:30.785 --> 00:00:31.808
está vendo?

00:00:34.102 --> 00:00:37.836
A próxima regra seleciona qualquer
elemento que tenha a ID 'donut-header'.

00:00:38.034 --> 00:00:41.913
E sabemos que está escolhendo pela ID,
pois começa com o símbolo '#'.

00:00:42.029 --> 00:00:43.759
Já que a ID é bem descritiva,

00:00:43.759 --> 00:00:46.681
me parece estar selecionando
o título maior no topo

00:00:46.688 --> 00:00:47.645
e mudando sua fonte.

00:00:47.974 --> 00:00:51.153
Mas vou apenas confirmar
que '' tem a ID.

00:00:51.153 --> 00:00:53.184
sim, aqui está.

00:00:53.387 --> 00:00:56.790
A última regra seleciona todos os elementos
que tem a classe 'fact'.

00:00:56.896 --> 00:01:00.384
E sabemos que procura por uma classe,
pois começa com um ponto.

00:01:00.488 --> 00:01:02.956
Para saber quais elementos
possuem essa classe,

00:01:02.956 --> 00:01:04.740
eu posso olhar o que
a regra está fazendo--

00:01:04.740 --> 00:01:07.143
adicionando uma borda
no topo e no final e colchetes--

00:01:07.833 --> 00:01:10.462
ou eu posso através de meu HTML
pelo nome da classe.

00:01:10.619 --> 00:01:13.148
Posso ver que o nome da classe
está neste parágrafo

00:01:13.148 --> 00:01:14.300
e nesse parágrafo...

00:01:14.300 --> 00:01:16.461
nos dois parágrafos
com fatos de uma linha

00:01:16.461 --> 00:01:18.315
e é por isso que eles tem a borda.

00:01:18.448 --> 00:01:19.778
classes são incríveis,

00:01:19.778 --> 00:01:23.007
pois eles nos deixam usar o mesmo estilo
através de múltiplos elementos.

00:01:23.033 --> 00:01:25.346
Mas ainda podemos 
fazer mais com as classes,

00:01:25.346 --> 00:01:26.348
e é isso que irei mostrar agora.

00:01:27.230 --> 00:01:29.136
Então, temos a página sobre donuts,

00:01:29.136 --> 00:01:31.361
mas donuts não são
nada saudáveis para você.

00:01:31.436 --> 00:01:34.007
Eles podem ser uma das coisas
menos saudáveis para você.

00:01:34.030 --> 00:01:36.963
E são meio que viciantes,
por causa do açúcar.

00:01:37.009 --> 00:01:38.964
Então se teremos uma página
falando sobre eles,

00:01:38.964 --> 00:01:42.051
devemos alertar as pessoas
a respeito de seus malefícios.

00:01:42.539 --> 00:01:47.257
Que tal se fizermos esse fato em vermelho,
para mostrar que é um aviso?

00:01:47.626 --> 00:01:49.015
Como faremos isso?

00:01:49.200 --> 00:01:53.401
Começamos adicionando a 
propriedade 'color' na regra 'fact' do CSS,

00:01:53.401 --> 00:01:55.099
e vamos ver o que isso faz.

00:01:55.650 --> 00:02:00.326
Mas faz com que ambos os fatos fiquem 
vermelhos, e o segundo não é um aviso.

00:02:00.326 --> 00:02:01.847
É apenas algo de ortografia.

00:02:02.051 --> 00:02:03.845
Então não queremos que fique vermelho.

00:02:04.169 --> 00:02:05.578
Podemos adicionar uma ID,

00:02:05.578 --> 00:02:09.573
mas então se quisermos por uma cor
a outras coisas que eram avisos depois

00:02:09.573 --> 00:02:10.958
e adicionar mais avisos,

00:02:10.958 --> 00:02:14.185
então teríamos que continuar adicionando
ID's e regras para essas IDs.

00:02:15.041 --> 00:02:19.806
Em um caso como esse, a melhor coisa a fazer
é adicionar outra classe a tag ''.

00:02:20.694 --> 00:02:24.151
Navegadores nos deixam adicionar
quantas classes quisermos para uma única tag.

00:02:25.071 --> 00:02:28.532
Para isso, colocamos o cursor
depois da última classe,

00:02:28.532 --> 00:02:33.196
Damos um espaço, e escrevemos
uma nova classe, como 'warning'.

00:02:33.984 --> 00:02:36.329
Agora podemos fazer uma regra para 'warning'.

00:02:37.119 --> 00:02:40.243
e mover a propriedade 'color'
para dentro da regra.

00:02:40.835 --> 00:02:44.001
Agora o fato em cima está vermelho,
e o segundo não está.

00:02:44.038 --> 00:02:44.891
Lindo.

00:02:45.852 --> 00:02:49.285
Podemos por a classe
em outros elementos, como antes.

00:02:49.643 --> 00:02:54.121
Talvez queiramos colorir 
o texto em negrito, "deep fried"...

00:02:54.121 --> 00:02:56.986
nós o queremos de vermelho,
pois, coisas fritas

00:02:56.986 --> 00:02:59.872
são muitas vezes ligadas a não estar bem.

00:03:00.025 --> 00:03:03.692
Então adicionamos
'class="warning" '...

00:03:03.692 --> 00:03:04.626
também vermelho.

00:03:05.035 --> 00:03:11.900
Note que esse aviso aqui
tem a cor vermelha,

00:03:11.900 --> 00:03:14.653
e que também tem a 'border:top'
e 'border:bottom' .

00:03:14.795 --> 00:03:16.995
É isso que ocorre quando
se usam múltiplas classes...

00:03:16.995 --> 00:03:19.338
o navegador vai olhar
todas as regras que se aplicam a elas

00:03:19.338 --> 00:03:21.600
e aplicar todos os estilos apropriados.

00:03:22.733 --> 00:03:26.810
Devemos tomar cuidado com usar apenas
cores para expressar significados,

00:03:26.810 --> 00:03:28.563
pois alguma pessoas não as enxergam.

00:03:29.216 --> 00:03:31.298
Existem pessoas que mal
podem dizer a diferença

00:03:31.298 --> 00:03:33.255
entre vermelho e preto
e talvez você seja uma delas.

00:03:33.899 --> 00:03:37.173
Então vamos mudar nossa classe
para ficar mais visível para todos.

00:03:38.070 --> 00:03:40.711
Vamos mudar essa cor
para 'background color'.

00:03:40.711 --> 00:03:44.470
Pois qualquer um pode dizer
qual algo tem um plano de fundo.

00:03:45.104 --> 00:03:47.564
Esse é um contraste muito pequeno,
o vermelho e preto.

00:03:47.564 --> 00:03:51.290
E contraste também é importante
para tornar a leitura da página melhor.

00:03:51.290 --> 00:03:54.080
Então, vamos deixar a cor branca.

00:03:54.785 --> 00:03:56.811
Ok, agora temos grandes contrastes,

00:03:56.811 --> 00:03:59.611
e um fundo vermelho
para pessoas que podem ver vermelho.

00:03:59.994 --> 00:04:04.497
e já que usamos uma classe, ambos
os avisos estão com o mesmo estilo.

00:04:04.774 --> 00:04:07.787
Graças a flexibilidade 
das classes do CSS,

00:04:07.787 --> 00:04:10.722
podemos salvar o mundo inteiro dos donuts.

00:04:10.722 --> 00:04:15.132
Traduzido por [Alef Almeida] 
Revisado por [Gabriel Mello Fernandes]