1
00:00:00,095 --> 00:00:02,336
Nesta página, estamos usando CSS

2
00:00:02,336 --> 00:00:04,600
com o estilo de parágrafos "< h2 >"

3
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.

4
00:00:09,537 --> 00:00:13,460
Mas o que fazer para selecionar só
o primeiro "< h2 >"

5
00:00:13,460 --> 00:00:16,462
ou apenas o estilo do segundo parágrafo?

6
00:00:16,716 --> 00:00:19,867
Precisaríamos de uma maneira de dizer
ao navegador exatamente quais

7
00:00:19,867 --> 00:00:21,513
elementos que estamos selecionando

8
00:00:21,513 --> 00:00:24,931
pra que ele não aplique os estilos para
todos, como está agora.

9
00:00:25,333 --> 00:00:27,945
Uma maneira de fazer isso é
selecionar pelo ID.

10
00:00:28,265 --> 00:00:30,525
Podemos ter um 'tag' em nossa
página com uma ID

11
00:00:30,525 --> 00:00:32,176
e então podemos dizer ao CSS:

12
00:00:32,176 --> 00:00:36,297
"Escute aqui: Só quero aplicar esses
estilos para os elementos com estes IDs,

13
00:00:36,297 --> 00:00:38,208
não em qualquer um dos
outros elementos".

14
00:00:38,455 --> 00:00:41,281
Para isso, o primeiro passo é na realidade
modificar o HTML

15
00:00:41,281 --> 00:00:45,132
para adicionar atributos ID para as tags
que desejamos selecionar especificamente.

16
00:00:45,741 --> 00:00:48,371
Vamos começar com o segundo
parágrafo aqui.

17
00:00:48,529 --> 00:00:50,896
Para adicionar um atributo ID,
colocamos o cursor

18
00:00:50,896 --> 00:00:53,415
no início da tag "< p >" logo após o 'p',

19
00:00:53,415 --> 00:00:58,357
em seguida, adicione um espaço,
e depois digite id = " "

20
00:00:58,982 --> 00:01:02,667
Agora precisamos preencher este
atributo ID com um valor.

21
00:01:02,812 --> 00:01:04,180
Que ID eu deveria dar?

22
00:01:04,180 --> 00:01:06,452
Ele deve ser descritivo e único.

23
00:01:06,508 --> 00:01:09,229
Nada mais nesta página deve
ter o mesmo ID.

24
00:01:09,479 --> 00:01:15,080
Já que esta é uma canção sobre coelhos,
chamarei de canção-coelhos (rabbits-song).

25
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

26
00:01:19,837 --> 00:01:22,237
você deve sempre usar hifens
ou sublinhados.

27
00:01:22,596 --> 00:01:24,717
Eu mesmo gosto de hifens.

28
00:01:25,650 --> 00:01:28,941
Agora temos uma maneira de identificar
esse ponto de forma exclusiva.

29
00:01:29,016 --> 00:01:31,646
Assim, podemos adicionar uma
regra CSS.

30
00:01:31,746 --> 00:01:35,479
Vamos voltar para a nossa tag "< style > "
para a segunda etapa.

31
00:01:35,598 --> 00:01:38,428
Vamos adicionar uma nova linha
após a última regra.

32
00:01:39,478 --> 00:01:43,255
Lembre-se, a primeira parte
de uma regra CSS é o seletor:

33
00:01:43,255 --> 00:01:45,840
a parte que diz ao navegador
o que selecionar.

34
00:01:46,098 --> 00:01:51,130
Até aqui, nas nossas regras anteriores
usamos seletores como "< h2 >" e "< p >"

35
00:01:51,130 --> 00:01:54,031
para selecionar todos os
"< h2 >" e "< p >" na página.

36
00:01:54,554 --> 00:01:57,203
Agora, para fazer um seletor que
só seleciona elementos

37
00:01:57,203 --> 00:01:58,671
com um ID particular,

38
00:01:58,671 --> 00:02:00,862
temos que começar o seletor
com um sinal " # ".

39
00:02:01,293 --> 00:02:04,547
Isso informa ao navegador que tudo o que
vem a seguir é um ID.

40
00:02:05,147 --> 00:02:08,798
Vamos escrever a nossa ID: canção-coelhos.

41
00:02:09,603 --> 00:02:11,882
O resto da regra é a mesma de antes.

42
00:02:11,934 --> 00:02:13,722
Abrimos e fechamos com chaves "{ }",

43
00:02:13,722 --> 00:02:17,844
adicionamos uma propriedade,
como cor do fundo (background-color)...

44
00:02:18,364 --> 00:02:20,574
...e pronto! Funcionou!

45
00:02:20,873 --> 00:02:23,934
Somente o parágrafo canção
tem a cor de fundo amarelo,

46
00:02:23,934 --> 00:02:26,093
e no primeiro parágrafo
permaneceu o mesmo.

47
00:02:26,574 --> 00:02:30,764
Vamos fazer isso de novo,
primeiro para a seleção "< h2 >".

48
00:02:31,133 --> 00:02:32,866
Consegue lembrar o primeiro passo?

49
00:02:33,515 --> 00:02:36,586
Está certo. Precisamos na realidade
modificar este HTML

50
00:02:36,586 --> 00:02:38,145
para adicionar o atributo "ID".

51
00:02:38,300 --> 00:02:40,693
Colocamos nosso cursor na 'tag' de início,

52
00:02:40,693 --> 00:02:43,520
damos um espaço, tipo id = " "

53
00:02:43,580 --> 00:02:46,691
e, em seguida, digite um
ID único e descritivo.

54
00:02:46,791 --> 00:02:49,944
Como "coelhos-info-titulo"
(rabbits-info-heading).

55
00:02:50,690 --> 00:02:54,043
Segunda etapa.
Voltemos em nossa 'tag' de estilo

56
00:02:54,043 --> 00:02:57,429
e adicionamos uma nova linha,
escreva o sinal " # ",

57
00:02:57,429 --> 00:03:01,840
então o nosso ID, "coelhos-info-titulo"
(rabbits-info-heading).

58
00:03:01,840 --> 00:03:04,947
e em seguida, colocamos nossas
propriedades dentro das chaves "{ "

59
00:03:04,947 --> 00:03:08,625
background-color: purple; }
(cor-do-fundo: roxo)

60
00:03:08,945 --> 00:03:13,260
Não funcionou. Quer ver o que deu errado?

61
00:03:13,420 --> 00:03:15,279
Será que eu digitei do mesmo jeito?

62
00:03:15,359 --> 00:03:18,305
rabbits-info-Heading,
rabbits-info-heading...

63
00:03:18,485 --> 00:03:21,049
para que eles fiquem praticamente o mesmo.

64
00:03:21,160 --> 00:03:23,374
Eu poderia compará-los letra por letra

65
00:03:23,374 --> 00:03:25,079
para descobrir o que está errado,

66
00:03:25,079 --> 00:03:29,633
mas eu gosto de fazer é só ir em baixo
e selecione a ID no HTML,

67
00:03:29,679 --> 00:03:33,810
e copiar e colar aqui para ter certeza
que é exatamente o mesmo.

68
00:03:33,887 --> 00:03:35,481
E...funcionou!

69
00:03:35,561 --> 00:03:39,825
Meu "< h2 >" tem um fundo.
Você notou o que mudou?

70
00:03:40,085 --> 00:03:44,474
Foi o "h". Os h's costumavam
ser um "H" maiúsculo

71
00:03:44,474 --> 00:03:47,003
que o navegador não considera
ser a mesma coisa.

72
00:03:47,103 --> 00:03:50,231
Tem de ser "h" minúsculo para
coincidir com o código HTML.

73
00:03:50,315 --> 00:03:52,850
Isso é porque os ID's são case-sensitive.

74
00:03:52,930 --> 00:03:57,143
Então você tem que escrevê-los da mesma
forma em todos os lugares.

75
00:03:57,513 --> 00:04:01,753
Acho que é melhor usar sempre minúsculas
para cada letra em meus IDs

76
00:04:01,753 --> 00:04:04,645
então não tenho que pensar
sobre que nome que usei.

77
00:04:05,158 --> 00:04:08,404
Vou dar agora um último aviso:

78
00:04:08,404 --> 00:04:10,530
IDs devem ser exclusivos!

79
00:04:10,648 --> 00:04:13,444
Se você tem 2 tags em sua página
com exatamente a mesma ID

80
00:04:13,444 --> 00:04:17,835
o navegador pode usar os dois,
mas também pode usar apenas um deles.

81
00:04:17,962 --> 00:04:20,341
E você não quer que isso aconteça.

82
00:04:20,411 --> 00:04:22,460
ID descritivos são bons e únicos.

83
00:04:22,248 --> 00:04:25,000
Traduzido por [Fernando dos Reis]