1
00:00:00,700 --> 00:00:01,960
Olá e bem vindo de volta.

2
00:00:01,960 --> 00:00:06,880
Então, a primeira coisa a fazer será criar nosso primeiro arquivo CSSA.

3
00:00:07,240 --> 00:00:12,320
Então entre em sua pasta CSSA estática e crie um novo arquivo.

4
00:00:12,470 --> 00:00:16,390
Se você vir a folha de estilo nesse menu, crie uma nova folha de estilos.

5
00:00:16,430 --> 00:00:21,670
Se não simplesmente criar um novo arquivo chamado Main dot CSSA, você pode nomear o que quiser, é claro.

6
00:00:23,690 --> 00:00:30,660
E agora aqui vamos ter que fazer algo para definir o estilo dos nossos campos.

7
00:00:31,100 --> 00:00:35,480
Então, se você se lembra do último vídeo da AM,

8
00:00:45,120 --> 00:00:52,070
nós temos um site muito básico, então temos dois campos e eles enviam o botão.

9
00:00:52,210 --> 00:00:59,650
Esses são os campos padrão do EM e o botão de envio do McQuistan, que é o que estou usando se você estiver usando a

10
00:00:59,650 --> 00:01:01,500
revisão do Windows em um explorador.

11
00:01:01,690 --> 00:01:06,730
Eles podem ser um pouco diferentes e estão aqui no canto superior esquerdo da página.

12
00:01:06,730 --> 00:01:08,350
Eles são todos muito próximos.

13
00:01:08,380 --> 00:01:11,360
Não é uma visão muito bonita, essencialmente.

14
00:01:11,540 --> 00:01:16,830
Então, o que queremos fazer primeiro é garantir que eles não apareçam no topo da página.

15
00:01:16,840 --> 00:01:19,000
Então, como faríamos isso?

16
00:01:19,930 --> 00:01:27,570
Bem, a primeira coisa que temos que perceber é que a Sierre diz que pode interagir com qualquer elemento da sua

17
00:01:27,570 --> 00:01:30,550
página, desde que saiba como chegar a ela.

18
00:01:30,870 --> 00:01:32,620
Então vamos entrar nisso.

19
00:01:32,630 --> 00:01:38,100
Além disso, se eu puder descobrir onde esta forma de log é assim, há mais coisas para mim.

20
00:01:38,130 --> 00:01:46,680
Dentro do bloco de HDMI que está dentro do bloco de corpo e então está dentro de um formulário e então nós temos os

21
00:01:46,680 --> 00:01:48,660
três tipos de entrada lá.

22
00:01:48,660 --> 00:01:57,370
Então, como podemos ver, temos mensagens de ódio, em seguida, corpo e, em seguida, formar e, em seguida, o produto final.

23
00:01:57,750 --> 00:02:06,870
Este formulário não tem como identificá-lo como único, o que significa que podemos essencialmente interagir com o

24
00:02:06,870 --> 00:02:09,110
formulário como uma entidade.

25
00:02:09,300 --> 00:02:14,940
E se tivéssemos mais, interagiríamos com todos ao mesmo tempo, ou poderíamos fornecer um identificador

26
00:02:15,210 --> 00:02:18,550
único e, então, poderíamos interagir com esse formulário específico.

27
00:02:18,590 --> 00:02:27,800
Portanto, se optássemos por interagir com todas as formas, se tivéssemos outra forma, ambas as formas

28
00:02:27,800 --> 00:02:28,750
seriam interagidas.

29
00:02:28,940 --> 00:02:36,230
Se dermos a ele um identificador único, podemos interagir apenas com este.

30
00:02:36,300 --> 00:02:42,170
Então, vamos dar a ele um identificador único de logging dush e explicarei realmente o que quero dizer

31
00:02:42,170 --> 00:02:47,730
com interagir com todos eles ou apenas um deles em nosso principal não nos vê como arquivo.

32
00:02:47,910 --> 00:02:49,710
Nós podemos fazer algo assim.

33
00:02:49,710 --> 00:02:50,190
Forma

34
00:02:53,530 --> 00:02:58,330
e, em seguida, podemos definir alguns estilos dentro desses colchetes.

35
00:02:58,360 --> 00:03:01,240
Agora forma é um C e diz entidade.

36
00:03:01,240 --> 00:03:03,530
É essa coisa aqui.

37
00:03:04,470 --> 00:03:12,450
Então, se fizemos isso e definimos alguns estilos para essa palavra-chave, todos os formulários em nosso

38
00:03:12,660 --> 00:03:14,640
site usariam os estilos.

39
00:03:14,910 --> 00:03:20,490
Então, isso pode ser o que queremos ou talvez queiramos que o formulário de loggin tenha um conjunto diferente de

40
00:03:20,490 --> 00:03:23,290
estilos no formulário de registro ou no formulário Fale conosco.

41
00:03:24,000 --> 00:03:29,170
Se os tivermos, ao invés de interagir com todos os formulários ou com o site,

42
00:03:29,170 --> 00:03:32,420
nós interagiremos com apenas um dos fóruns de registro.

43
00:03:32,420 --> 00:03:35,610
Eu vou copiar isso e então vou enfrentar isso.

44
00:03:36,160 --> 00:03:41,770
Mas é claro que a CSL precisa de uma maneira de saber que essa não é a entidade DML.

45
00:03:42,040 --> 00:03:47,730
Isso é diferente de apenas formulário porque esse é um formulário específico para fazer isso.

46
00:03:47,800 --> 00:03:50,030
Colocamos o símbolo de hash na frente.

47
00:03:50,200 --> 00:03:55,050
E isso nos diz que vamos interagir com um elemento com esse ID.

48
00:03:55,100 --> 00:03:59,690
Então agora descobrimos que esta é a nossa forma e podemos dar alguns estilos.

49
00:03:59,720 --> 00:04:02,850
Então, a primeira coisa que queremos fazer como dissemos antes é que estamos separados um pouco do topo.

50
00:04:02,870 --> 00:04:05,350
Então, para fazer isso, vamos dar

51
00:04:08,100 --> 00:04:18,060
uma margem para que digamos margem de topht chamada 25 x e ponto-e-vírgula 25 pixels e, em seguida, vamos salvar isso e se fôssemos entrar

52
00:04:18,060 --> 00:04:22,080
em Crome e executar isso agora realmente não vejo diferença alguma.

53
00:04:22,080 --> 00:04:23,230
Eu vou atualizar isso.

54
00:04:23,320 --> 00:04:25,700
E agora ainda está no canto superior esquerdo.

55
00:04:25,790 --> 00:04:31,830
Então escrevemos nosso arquivo de documentos principal, mas não o vinculamos onde eu sou alfa.

56
00:04:31,880 --> 00:04:38,900
Então nós entramos em nossa base e pegamos o e-mail e aqui, sob o título, vamos dizer que queremos

57
00:04:39,050 --> 00:04:43,420
vincular este discurso ao sucesso que caiu, usando os estilos definidos nele.

58
00:04:43,610 --> 00:04:50,300
Então, dizemos ferroviário de link e esse é o tipo de elementos que estamos vinculando.

59
00:04:50,300 --> 00:04:56,700
Então, é uma folha de estilo e, em seguida, odeio xerife é onde o documento mora.

60
00:04:58,180 --> 00:05:03,360
Usando o Flast, queremos usar uma maneira específica de referenciar esses elementos.

61
00:05:03,730 --> 00:05:08,580
Então, abra e feche chaves.

62
00:05:08,690 --> 00:05:19,130
Dois deles e, em seguida, vamos dizer que você está na escola por estática e, em seguida, nome do arquivo é igual a sucesso.

63
00:05:19,180 --> 00:05:20,770
Slash significa Dorsey diz e

64
00:05:24,090 --> 00:05:25,680
então podemos fechar o que

65
00:05:29,260 --> 00:05:30,240
fizemos aqui.

66
00:05:31,190 --> 00:05:35,660
Nós definimos um link para a folha de estilos com a seguinte referência.

67
00:05:35,660 --> 00:05:40,590
Você quer que eu cite para eles.

68
00:05:40,740 --> 00:05:48,690
Hinos que você teria para a pasta estática no nome do arquivo é uma barra de CSSA que faz com que digam isso

69
00:05:48,700 --> 00:05:50,770
Isso nos leva para a frente.

70
00:05:50,830 --> 00:05:51,460
Arquivo sim.

71
00:05:52,560 --> 00:06:01,860
E para que a razão de fazermos isso seja porque o flask vai ver isso em nossa página e dizer ah, você

72
00:06:02,070 --> 00:06:05,310
quer algo que esteja em uma pasta diferente.

73
00:06:05,310 --> 00:06:11,940
Então eu vou substituir isso pelo ódio no meu código que te levaria até lá.

74
00:06:12,910 --> 00:06:16,740
Então, o que HDMI nos levaria lá.

75
00:06:16,800 --> 00:06:23,850
Estamos no basestar engatou o arquivo dela, então teríamos que ir dentro da pasta de templates com base nos arquivos

76
00:06:23,850 --> 00:06:30,750
HDMI, então teríamos que subir uma pasta para a pasta de origem e então ir para a pasta estática

77
00:06:30,750 --> 00:06:34,280
e ir para a pasta CSSA. na porta principal falhou.

78
00:06:34,350 --> 00:06:42,970
Então, ao invés disto, o que nós teríamos que fazer é pontilhar para subir uma pasta e então estática e então

79
00:06:42,970 --> 00:06:50,870
ver como tem suas dasi principais como teria que fazer se nós não quiséssemos usar o método você é

80
00:06:51,050 --> 00:06:54,490
L4, mas porque nós temos Jinja podemos fazer isso.

81
00:06:54,490 --> 00:06:59,570
Lembre-se, se você acabou de fazer um arquivo HDMI você não pode fazer isso, você só pode

82
00:07:00,560 --> 00:07:07,880
fazer isso com o Flask e o Jinja, nós podemos fazer isso, o que simplifica o processo, porque se movermos nosso template para outro lugar.

83
00:07:08,080 --> 00:07:13,150
Normalmente, se mudássemos o nosso modelo para outro lugar, teríamos que fazer algo assim subir para as pastas e, em seguida,

84
00:07:13,150 --> 00:07:15,280
começar de novo e ver que os militares dizem.

85
00:07:15,300 --> 00:07:22,180
Então, se mudarmos nossos modelos, teríamos que acrescentar dois pontos antes de todas as nossas referências.

86
00:07:22,180 --> 00:07:26,050
Então agora nós só temos um, mas se tivéssemos mais, então isso seria um pouco incômodo.

87
00:07:26,050 --> 00:07:31,230
Então, em vez disso, simplesmente dizemos a Ginger para calcular isso para nós.

88
00:07:31,550 --> 00:07:33,160
E é assim que fazemos.

89
00:07:33,520 --> 00:07:38,380
OK, então agora vamos voltar para o cromo e para você fresco isso e agora podemos ver

90
00:07:38,410 --> 00:07:39,790
que a forma realmente caiu.

91
00:07:39,790 --> 00:07:46,660
Então, nós vinculamos a folha de estilo à base e o loggin estende a base que também está vinculada

92
00:07:46,660 --> 00:07:50,320
a ela e agora o formulário tem o Stuy Okay.

93
00:07:50,340 --> 00:07:53,540
Então, o que é significativo para digerir e apenas um vídeo.

94
00:07:53,640 --> 00:07:57,420
Então vamos deixar isso lá por agora e então eu vou te ver no próximo,

95
00:07:57,540 --> 00:08:00,010
mas vamos estar realmente fazendo algo com o log in.

96
00:08:00,240 --> 00:08:01,110
Então eu vejo você lá.