1
00:00:01,020 --> 00:00:06,030
Então, neste vídeo, vamos nos concentrar em três seletores CSSA.

2
00:00:06,030 --> 00:00:08,490
Esses são ID de elemento na classe.

3
00:00:08,610 --> 00:00:11,610
Portanto, há mais opções para selecionar elementos.

4
00:00:11,730 --> 00:00:15,630
Nós vamos aprender sobre eles mais tarde, vamos nos concentrar nestes três para começar.

5
00:00:15,960 --> 00:00:21,980
E quando eu digo que o seletor responda a esta regra geral sobre a qual conversamos sobre o

6
00:00:21,980 --> 00:00:28,370
início do início da CSSA alguns vídeos, onde temos um seletor e, em seguida, chaves e, em seguida, algumas propriedades.

7
00:00:28,860 --> 00:00:32,660
Então, vamos ver alguns seletores diferentes que podemos colocar aqui.

8
00:00:33,030 --> 00:00:37,440
E do jeito que nós vamos fazer, nós realmente vamos construir uma lista muito simples de fazer juntos.

9
00:00:38,340 --> 00:00:39,980
Então vou fazer um novo arquivo.

10
00:00:40,170 --> 00:00:44,580
Eu vou salvá-lo e eu vou chamar isso para fazer a lista de HMO uma

11
00:00:48,270 --> 00:00:51,740
vez que temos isso, então vamos em frente e adicionar o HMO.

12
00:00:52,530 --> 00:00:54,930
E do jeito que vai funcionar, será

13
00:00:58,080 --> 00:01:01,550
um H1 e então teremos um bem com os aliados.

14
00:01:02,010 --> 00:01:08,880
Mas em cada aliado vamos ter algum texto e vamos ter uma pequena caixa de seleção, então veja

15
00:01:08,880 --> 00:01:18,960
se você pode se lembrar de como fazer caixa de seleção é tipo de entrada igual a caixa de seleção e depois abaixo ou depois disso teremos

16
00:01:18,960 --> 00:01:20,090
nosso texto .

17
00:01:20,220 --> 00:01:30,210
Então, vamos ficar enferrujados, então vou duplicar isso.

18
00:01:30,210 --> 00:01:39,020
Então, vamos ter três deles aqui caminhando Rusty apenas para comprar mantimentos.

19
00:01:40,590 --> 00:01:41,490
E, finalmente,

20
00:01:45,150 --> 00:01:48,660
terminar de gravar, veja avaliar a Phidias.

21
00:01:48,960 --> 00:01:54,990
Então, se abrimos isso em um navegador, veremos uma versão suave e estilosa do nosso produto final, mas

22
00:01:55,440 --> 00:01:56,940
o esqueleto está lá.

23
00:01:57,090 --> 00:02:01,520
Nós temos os nossos dois e cada um que é uma pequena caixa de seleção ao lado.

24
00:02:02,650 --> 00:02:03,390
ESTÁ BEM.

25
00:02:04,050 --> 00:02:08,590
Então, a próxima coisa que queremos fazer é conectar uma folha de estilo.

26
00:02:09,060 --> 00:02:17,190
Então, para fazer isso, vamos começar ligando uma folha de estilo não existente e então vamos continuar e criar uma

27
00:02:17,400 --> 00:02:18,480
folha de estilo.

28
00:02:18,480 --> 00:02:23,970
Então, algumas pessoas chamariam esse desenvolvimento orientado por erro, onde escrevemos algo que sabemos que

29
00:02:23,970 --> 00:02:26,960
não funcionará e, depois, o fazemos funcionar depois.

30
00:02:26,970 --> 00:02:34,060
Então, eu vou chamar isso para fazer a avaliação introduzir C ver avaliar o que não existe.

31
00:02:34,670 --> 00:02:40,820
A próxima coisa que vamos fazer é seguir em frente e fazer esse arquivo para Dewes que C avalia.

32
00:02:40,920 --> 00:02:43,860
E isso precisa estar no mesmo lugar para fazer um estudo.

33
00:02:43,860 --> 00:02:48,550
Tim vou salvar isso e apenas para ter certeza de que ele está conectado.

34
00:02:48,660 --> 00:02:55,980
Vamos fazer algo como laranja de fundo do corpo e você sabe que isso é realmente o que eu estava

35
00:02:55,980 --> 00:02:57,870
falando no vídeo a cores.

36
00:02:57,870 --> 00:03:01,380
Esta é uma das únicas vezes que eu realmente usaria uma cor como a laranja.

37
00:03:01,380 --> 00:03:06,780
Além de ensinar, eu apenas usaria isso para garantir que algo estivesse conectado Eu só quero uma cor brilhante.

38
00:03:06,930 --> 00:03:11,760
Quero ver se isso é que o C Ss está sendo consultado corretamente aqui.

39
00:03:11,820 --> 00:03:12,920
Então, se nós frescos.

40
00:03:13,170 --> 00:03:16,320
Ok, excelentes coisas estão conectadas.

41
00:03:16,320 --> 00:03:23,580
Então, o que vamos fazer é voltar para os slides aqui e falar sobre o seletor de elementos primeiro, que

42
00:03:23,580 --> 00:03:27,180
é o que realmente dedicamos muito tempo para estar pronto.

43
00:03:27,180 --> 00:03:35,100
É basicamente o tipo de ataques que você especifica div ou parágrafo ou corpo e, em seguida, selecionará todos os elementos

44
00:03:35,100 --> 00:03:38,240
correspondentes todas as instâncias que correspondam a isso.

45
00:03:38,610 --> 00:03:46,620
Então, neste caso, temos dois divs e cada div tem dois parágrafos e, portanto, configuramos todos os divs em que

46
00:03:46,620 --> 00:03:53,730
fundo roxo recebemos dois dispositivos roxos, estabelecemos todo o parágrafo para ser COLOR AMARELO, recebemos quatro parágrafos amarelos.

47
00:03:55,140 --> 00:03:57,840
Então é isso que estamos fazendo aqui quando selecionamos o corpo.

48
00:03:57,840 --> 00:04:08,190
Nós também poderíamos fazê-lo para todos os ALWIS e dar-lhes uma ordem ou deixar um limite de dois pixels de cor sólida.

49
00:04:10,910 --> 00:04:14,560
Agora, claro, isso funciona em todos os aliados.

50
00:04:15,360 --> 00:04:15,970
ESTÁ BEM.

51
00:04:16,380 --> 00:04:24,180
Então, a próxima coisa que podemos querer fazer é soltar um aliado ou um H-1 ou um exemplo de algo.

52
00:04:24,870 --> 00:04:30,510
Então, neste exemplo, estamos selecionando a terceira mentira e ficando amarelo.

53
00:04:30,690 --> 00:04:37,020
E a maneira como fazemos isso é realmente alterando ligeiramente a equipe e, em seguida, usando um gancho que adicionamos aos H

54
00:04:37,020 --> 00:04:41,800
T M L e R C Ss, todos se referem a ele e acendem-no em amarelo.

55
00:04:42,180 --> 00:04:45,700
Então, o primeiro passo é adicionar esse gancho chamado ID.

56
00:04:46,050 --> 00:04:52,420
E assim, a maneira como uma idéia funciona, você adiciona isso como um atributo a qualquer ID de elemento igual.

57
00:04:52,440 --> 00:04:57,120
E então, entre citações, qualquer nome que você deseja, pode ser qualquer coisa.

58
00:04:57,360 --> 00:05:03,860
E então, o que fazemos é se referir a isso depois, escrevendo um sinal de Octa Thorpe ou hash e, em seguida,

59
00:05:03,870 --> 00:05:08,420
o nome do ID e que selecionará o elemento que corresponda ao nome da ID.

60
00:05:08,820 --> 00:05:18,510
Então, como exemplo, digamos que eu quero esse aliado final aqui para parecer um pouco diferente.

61
00:05:19,080 --> 00:05:23,790
O que eu poderia fazer é ir aqui Ally e vamos dar uma identificação.

62
00:05:23,970 --> 00:05:25,860
E isso pode ser qualquer nome.

63
00:05:25,950 --> 00:05:27,030
chamando de especial,

64
00:05:29,620 --> 00:05:35,650
não é realmente um ótimo nome, mas mostra que o ponto de usar um ID é soltar algo.

65
00:05:35,650 --> 00:05:40,210
Vamos chamar isso de especial e a razão pela qual estou dizendo que estou

66
00:05:40,330 --> 00:05:46,490
É uma forma de segmentar um elemento individual e uma nota sobre um ID.

67
00:05:46,560 --> 00:05:49,300
Só pode aparecer em uma página uma vez.

68
00:05:49,480 --> 00:05:56,270
Então, se eu fizer isso e depois tentar e dar a ID especial para dois elementos que, na verdade, são inválidos HMO.

69
00:05:56,530 --> 00:05:58,920
Portanto, sempre deve estar lá uma vez na página.

70
00:05:59,130 --> 00:06:02,640
É puramente usado para soltar um único elemento.

71
00:06:02,680 --> 00:06:09,280
No entanto, podemos ter várias IDs em uma página, desde que não apareçam mais de uma vez.

72
00:06:09,590 --> 00:06:09,830
ESTÁ BEM.

73
00:06:09,850 --> 00:06:12,180
Então vamos com este especial.

74
00:06:12,240 --> 00:06:17,180
Agora vamos fazer isso, vamos ver isso aqui.

75
00:06:17,350 --> 00:06:18,550
É este último aqui.

76
00:06:18,790 --> 00:06:20,390
Vamos dar uma cor de fundo.

77
00:06:20,650 --> 00:06:24,470
Então, para fazer isso, o nome é especial.

78
00:06:24,490 --> 00:06:32,670
Nós vamos ao nosso arquivo CSSA e nós escrevemos especial e colocamos uma oitava na frente dele e

79
00:06:32,950 --> 00:06:37,220
isso apenas nos diz que estamos falando sobre uma ID.

80
00:06:37,500 --> 00:06:48,020
Então, então, tudo o que fazemos é escrever ou C S S aqui, então vamos fazer a cor do plano de fundo e vamos deixá-lo amarelo.

81
00:06:48,250 --> 00:06:54,730
Salve a atualização do arquivo e você só pode ver isso quando é amarelo.

82
00:06:54,790 --> 00:06:56,770
Então, há algumas coisas que eu quero salientar.

83
00:06:56,830 --> 00:06:59,890
O primeiro é que esse código ainda está funcionando.

84
00:06:59,880 --> 00:07:01,760
Ele gera todos os aliados.

85
00:07:01,930 --> 00:07:05,310
Isso lhes dá uma borda vermelha, incluindo essa a última.

86
00:07:05,650 --> 00:07:12,010
E, em seguida, estamos adicionando em cima disso, adicionando um fundo amarelo apenas ao último

87
00:07:12,000 --> 00:07:15,520
baseado fora desse gancho que adicionamos e chamamos ID.

88
00:07:15,580 --> 00:07:21,930
um elemento, você só pode usar um ID uma vez por página, mas podemos ter o maior número de IDs que queremos em uma página.

89
00:07:21,940 --> 00:07:24,480
Então, para resumir uma ideia como uma forma de separar

90
00:07:24,730 --> 00:07:30,820
Então, os IDs são ótimos para separar elementos individuais, mas muitas vezes queremos ter vários elementos que

91
00:07:30,810 --> 00:07:34,380
parecem semelhantes, mas não queremos todos os aliados, por exemplo.

92
00:07:34,450 --> 00:07:41,320
Então, digamos que queria modelar metade dos Aliados de um jeito e metade deles de outra maneira, poderíamos

93
00:07:41,320 --> 00:07:43,410
usar uma aula para conseguir isso.

94
00:07:43,420 --> 00:07:48,970
Então, a maneira como uma classe funciona é como uma ID, exceto que ela é chamada de classe e podemos

95
00:07:49,020 --> 00:07:51,410
aplicá-la a qualquer número de elementos em uma página.

96
00:07:51,430 --> 00:07:57,850
e, em seguida, nos referimos a ele em nosso sucesso com um ponto em vez de uma oitava Thorpe.

97
00:07:57,850 --> 00:08:05,240
Então, como você pode ver aqui, estamos aplicando uma classe chamada de destaque para o primeiro parágrafo e o terceiro parágrafo

98
00:08:05,250 --> 00:08:12,750
Então, novamente para contrastar que aqui para selecionar uma ID, usamos o sinal de hash ou o Octave Thorpe aqui para selecionar

99
00:08:12,750 --> 00:08:13,350
uma classe.

100
00:08:13,380 --> 00:08:14,540
Usamos ponto.

101
00:08:14,710 --> 00:08:16,600
Caso contrário, eles funcionam do mesmo jeito.

102
00:08:16,660 --> 00:08:19,030
Então, vamos fazer um exemplo.

103
00:08:19,230 --> 00:08:26,050
Eu vou adicionar uma classe e do jeito que eu quero que isso funcione, vamos fingir que essas

104
00:08:27,310 --> 00:08:28,390
duas são verificadas.

105
00:08:28,480 --> 00:08:32,720
Então eu quero que haja uma linha através do texto.

106
00:08:32,760 --> 00:08:38,800
Então, quando olhamos para comprar mantimentos e caminhamos resti, deve haver uma greve através do

107
00:08:38,800 --> 00:08:40,810
texto, mas não o último.

108
00:08:40,840 --> 00:08:44,320
Então, a maneira como fazemos isso ou uma maneira de fazer isso é com a classe.

109
00:08:44,400 --> 00:08:52,720
Então, voltei, vou seguir em frente e adicionar uma aula e vai chamar isso de conclusão e outra

110
00:08:52,720 --> 00:08:58,050
uma classe igualada e eu vou salvar isso e se eu atualizar.

111
00:08:58,170 --> 00:09:00,560
Nada acontece porque eu não tenho nenhum estilo.

112
00:09:00,900 --> 00:09:09,580
vou para o meu C Ss e eu ponto direito e, em seguida, o nome da classe completou cintas curly e agora estilo.

113
00:09:09,650 --> 00:09:10,850
Então, agora eu

114
00:09:11,050 --> 00:09:18,030
Então, vou apresentar algo novo aqui chamado de decoração de texto e decoração de texto é uma

115
00:09:18,040 --> 00:09:19,920
maneira de adicionar uma linha.

116
00:09:20,080 --> 00:09:22,030
Mas há algumas coisas que você pode fazer.

117
00:09:22,020 --> 00:09:28,710
Você pode adicionar um sublinhado e você pode adicionar um sublinhado ondulado. Aparentemente, não sabia

118
00:09:29,200 --> 00:09:35,800
que uma linha e uma linha por cima, como um sublinhado, exceto no topo.

119
00:09:35,800 --> 00:09:40,560
Então, vamos usar a linha e isso deve ser.

120
00:09:40,810 --> 00:09:42,060
Então, se eu atualizar.

121
00:09:42,120 --> 00:09:44,420
Mantenha seus olhos nos dois primeiros.

122
00:09:44,470 --> 00:09:46,400
Agora conseguimos uma linha.

123
00:09:46,840 --> 00:09:49,680
Ótimo.

124
00:09:49,990 --> 00:09:56,340
Uma nota rápida enquanto estou aqui é que, se eu quiser que essas caixas de seleção sejam verificadas quando a página é carregada.

125
00:09:56,500 --> 00:10:01,420
Então, agora, eles não são verificados e eu tenho que verificá-los manualmente, mas se eu quiser que

126
00:10:02,470 --> 00:10:06,410
os dois primeiros sejam verificados, posso ir aqui e adicionar um atributo chamado checado.

127
00:10:06,550 --> 00:10:10,370
E isso funciona em entradas de caixa de seleção.

128
00:10:10,380 --> 00:10:15,580
Então, fazendo isso se eu estivesse fresco. Agora, quando a página está carregada, eles são verificados.

129
00:10:15,750 --> 00:10:20,450
Então, não vejamos avaliar, mas é importante apenas saber que você pode fazer isso.

130
00:10:20,830 --> 00:10:21,100
ESTÁ BEM.

131
00:10:21,100 --> 00:10:24,140
Então, vamos embrulhar isso rapidamente.

132
00:10:24,250 --> 00:10:28,680
Nós temos o seletor de elementos para selecionar todo um determinado elemento.

133
00:10:28,720 --> 00:10:31,780
Todos ALWIS todos divs todos os parágrafos.

134
00:10:32,120 --> 00:10:39,730
Nós temos o seletor ID que selecionará o único elemento com o ID correspondente e sempre precisamos usar uma

135
00:10:39,730 --> 00:10:41,120
oitava para isso.

136
00:10:41,240 --> 00:10:42,590
Ou um símbolo de hash.

137
00:10:42,970 --> 00:10:48,300
E então, temos o seletor de classe que é muito parecido com o seletor de identificação, exceto que selecionamos com base em

138
00:10:48,310 --> 00:10:54,010
um nome de classe e uma classe pode ocorrer tantas vezes como desejamos em uma determinada página ao contrário de uma ID que é

139
00:10:54,000 --> 00:10:54,790
apenas uma vez