WEBVTT

00:00:00.095 --> 00:00:02.336
Nesta página, estamos usando CSS

00:00:02.336 --> 00:00:04.600
com o estilo de parágrafos "< h2 >"

00:00:04.600 --> 00:00:08.920
de modo que todos os "< h2 >" são verdes
e todos os parágrafos são roxos.

00:00:09.537 --> 00:00:13.460
Mas o que fazer para selecionar só
o primeiro "< h2 >"

00:00:13.460 --> 00:00:16.462
ou apenas o estilo do segundo parágrafo?

00:00:16.716 --> 00:00:19.867
Precisaríamos de uma maneira de dizer
ao navegador exatamente quais

00:00:19.867 --> 00:00:21.513
elementos que estamos selecionando

00:00:21.513 --> 00:00:24.931
pra que ele não aplique os estilos para
todos, como está agora.

00:00:25.333 --> 00:00:27.945
Uma maneira de fazer isso é
selecionar pelo ID.

00:00:28.265 --> 00:00:30.525
Podemos ter um 'tag' em nossa
página com uma ID

00:00:30.525 --> 00:00:32.176
e então podemos dizer ao CSS:

00:00:32.176 --> 00:00:36.297
"Escute aqui: Só quero aplicar esses
estilos para os elementos com estes IDs,

00:00:36.297 --> 00:00:38.208
não em qualquer um dos
outros elementos".

00:00:38.455 --> 00:00:41.281
Para isso, o primeiro passo é na realidade
modificar o HTML

00:00:41.281 --> 00:00:45.132
para adicionar atributos ID para as tags
que desejamos selecionar especificamente.

00:00:45.741 --> 00:00:48.371
Vamos começar com o segundo
parágrafo aqui.

00:00:48.529 --> 00:00:50.896
Para adicionar um atributo ID,
colocamos o cursor

00:00:50.896 --> 00:00:53.415
no início da tag "< p >" logo após o 'p',

00:00:53.415 --> 00:00:58.357
em seguida, adicione um espaço,
e depois digite id = " "

00:00:58.982 --> 00:01:02.667
Agora precisamos preencher este
atributo ID com um valor.

00:01:02.812 --> 00:01:04.180
Que ID eu deveria dar?

00:01:04.180 --> 00:01:06.452
Ele deve ser descritivo e único.

00:01:06.508 --> 00:01:09.229
Nada mais nesta página deve
ter o mesmo ID.

00:01:09.479 --> 00:01:15.080
Já que esta é uma canção sobre coelhos,
chamarei de canção-coelhos (rabbits-song).

00:01:15.422 --> 00:01:19.837
Não pode ter espaços nas ID's, por isso,
se eles têm várias palavras como estas

00:01:19.837 --> 00:01:22.237
você deve sempre usar hifens
ou sublinhados.

00:01:22.596 --> 00:01:24.717
Eu mesmo gosto de hifens.

00:01:25.650 --> 00:01:28.941
Agora temos uma maneira de identificar
esse ponto de forma exclusiva.

00:01:29.016 --> 00:01:31.646
Assim, podemos adicionar uma
regra CSS.

00:01:31.746 --> 00:01:35.479
Vamos voltar para a nossa tag "< style > "
para a segunda etapa.

00:01:35.598 --> 00:01:38.428
Vamos adicionar uma nova linha
após a última regra.

00:01:39.478 --> 00:01:43.255
Lembre-se, a primeira parte
de uma regra CSS é o seletor:

00:01:43.255 --> 00:01:45.840
a parte que diz ao navegador
o que selecionar.

00:01:46.098 --> 00:01:51.130
Até aqui, nas nossas regras anteriores
usamos seletores como "< h2 >" e "< p >"

00:01:51.130 --> 00:01:54.031
para selecionar todos os
"< h2 >" e "< p >" na página.

00:01:54.554 --> 00:01:57.203
Agora, para fazer um seletor que
só seleciona elementos

00:01:57.203 --> 00:01:58.671
com um ID particular,

00:01:58.671 --> 00:02:00.862
temos que começar o seletor
com um sinal " # ".

00:02:01.293 --> 00:02:04.547
Isso informa ao navegador que tudo o que
vem a seguir é um ID.

00:02:05.147 --> 00:02:08.798
Vamos escrever a nossa ID: canção-coelhos.

00:02:09.603 --> 00:02:11.882
O resto da regra é a mesma de antes.

00:02:11.934 --> 00:02:13.722
Abrimos e fechamos com chaves "{ }",

00:02:13.722 --> 00:02:17.844
adicionamos uma propriedade,
como cor do fundo (background-color)...

00:02:18.364 --> 00:02:20.574
...e pronto! Funcionou!

00:02:20.873 --> 00:02:23.934
Somente o parágrafo canção
tem a cor de fundo amarelo,

00:02:23.934 --> 00:02:26.093
e no primeiro parágrafo
permaneceu o mesmo.

00:02:26.574 --> 00:02:30.764
Vamos fazer isso de novo,
primeiro para a seleção "< h2 >".

00:02:31.133 --> 00:02:32.866
Consegue lembrar o primeiro passo?

00:02:33.515 --> 00:02:36.586
Está certo. Precisamos na realidade
modificar este HTML

00:02:36.586 --> 00:02:38.145
para adicionar o atributo "ID".

00:02:38.300 --> 00:02:40.693
Colocamos nosso cursor na 'tag' de início,

00:02:40.693 --> 00:02:43.520
damos um espaço, tipo id = " "

00:02:43.580 --> 00:02:46.691
e, em seguida, digite um
ID único e descritivo.

00:02:46.791 --> 00:02:49.944
Como "coelhos-info-titulo"
(rabbits-info-heading).

00:02:50.690 --> 00:02:54.043
Segunda etapa.
Voltemos em nossa 'tag' de estilo

00:02:54.043 --> 00:02:57.429
e adicionamos uma nova linha,
escreva o sinal " # ",

00:02:57.429 --> 00:03:01.840
então o nosso ID, "coelhos-info-titulo"
(rabbits-info-heading).

00:03:01.840 --> 00:03:04.947
e em seguida, colocamos nossas
propriedades dentro das chaves "{ "

00:03:04.947 --> 00:03:08.625
background-color: purple; }
(cor-do-fundo: roxo)

00:03:08.945 --> 00:03:13.260
Não funcionou. Quer ver o que deu errado?

00:03:13.420 --> 00:03:15.279
Será que eu digitei do mesmo jeito?

00:03:15.359 --> 00:03:18.305
rabbits-info-Heading,
rabbits-info-heading...

00:03:18.485 --> 00:03:21.049
para que eles fiquem praticamente o mesmo.

00:03:21.160 --> 00:03:23.374
Eu poderia compará-los letra por letra

00:03:23.374 --> 00:03:25.079
para descobrir o que está errado,

00:03:25.079 --> 00:03:29.633
mas eu gosto de fazer é só ir em baixo
e selecione a ID no HTML,

00:03:29.679 --> 00:03:33.810
e copiar e colar aqui para ter certeza
que é exatamente o mesmo.

00:03:33.887 --> 00:03:35.481
E...funcionou!

00:03:35.561 --> 00:03:39.825
Meu "< h2 >" tem um fundo.
Você notou o que mudou?

00:03:40.085 --> 00:03:44.474
Foi o "h". Os h's costumavam
ser um "H" maiúsculo

00:03:44.474 --> 00:03:47.003
que o navegador não considera
ser a mesma coisa.

00:03:47.103 --> 00:03:50.231
Tem de ser "h" minúsculo para
coincidir com o código HTML.

00:03:50.315 --> 00:03:52.850
Isso é porque os ID's são case-sensitive.

00:03:52.930 --> 00:03:57.143
Então você tem que escrevê-los da mesma
forma em todos os lugares.

00:03:57.513 --> 00:04:01.753
Acho que é melhor usar sempre minúsculas
para cada letra em meus IDs

00:04:01.753 --> 00:04:04.645
então não tenho que pensar
sobre que nome que usei.

00:04:05.158 --> 00:04:08.404
Vou dar agora um último aviso:

00:04:08.404 --> 00:04:10.530
IDs devem ser exclusivos!

00:04:10.648 --> 00:04:13.444
Se você tem 2 tags em sua página
com exatamente a mesma ID

00:04:13.444 --> 00:04:17.835
o navegador pode usar os dois,
mas também pode usar apenas um deles.

00:04:17.962 --> 00:04:20.341
E você não quer que isso aconteça.

00:04:20.411 --> 00:04:22.460
ID descritivos são bons e únicos.

00:04:22.248 --> 00:04:25.000
Traduzido por [Fernando dos Reis]