1
00:00:01,300 --> 00:00:04,270
OK, então é hora de realmente escrever alguns C S S.

2
00:00:04,290 --> 00:00:05,400
Muito exitante.

3
00:00:05,400 --> 00:00:09,000
Antes de fazer isso, ainda que precisemos ter algum velho ele Al que podemos modelar.

4
00:00:09,180 --> 00:00:16,470
Então, eu vou seguir em frente e sublime, criar um novo arquivo, salve-o, coloque o meu desktop por agora e

5
00:00:16,470 --> 00:00:18,140
vou chamar isso de mim.

6
00:00:18,220 --> 00:00:21,180
HMO.

7
00:00:22,470 --> 00:00:30,400
Use esse pequeno truque para obter o esqueleto da placa da caldeira e esta será uma página muito simples.

8
00:00:30,600 --> 00:00:34,500
Estou dizendo que agora não vai ficar lindo quando terminarmos aqui.

9
00:00:34,590 --> 00:00:36,110
Nós vamos mudar algumas cores.

10
00:00:36,210 --> 00:00:38,950
Estamos apenas examinando os princípios básicos de como tudo isso funciona em conjunto.

11
00:00:39,240 --> 00:00:44,820
Então eu vou e cada um sobre mim e então

12
00:00:48,450 --> 00:00:52,430
vamos dizer uma coceira por meus hobbies.

13
00:00:52,740 --> 00:00:55,150
Sinta-se livre para se adaptar a você mesmo.

14
00:00:55,530 --> 00:01:12,730
Vamos adicionar uma lista e alguns aliados e vamos fazer cozinhar e cozinhá-lo e salvar esse arquivo.

15
00:01:13,110 --> 00:01:14,180
Vamos apenas verificar novamente.

16
00:01:14,280 --> 00:01:16,870
Vamos abri-lo.

17
00:01:16,920 --> 00:01:17,480
Ótimo.

18
00:01:17,550 --> 00:01:19,970
Aqui está o nosso site maravilhoso que vamos usar.

19
00:01:20,580 --> 00:01:26,650
Então, antes de começar a escrever o sucesso, devemos decidir onde colocar o sucesso.

20
00:01:26,820 --> 00:01:28,520
E existem algumas escolhas.

21
00:01:28,860 --> 00:01:34,800
Então, nas notas, há dois que eu estou fazendo referência nesta página e o primeiro que eu vou contar

22
00:01:34,800 --> 00:01:36,840
agora não é uma boa idéia.

23
00:01:36,840 --> 00:01:41,100
Estou mostrando isso apenas para que você esteja ciente por dois motivos.

24
00:01:41,100 --> 00:01:47,430
da folha de estilo separada e, antes da CSSA, você realmente fez isso em todos os elementos.

25
00:01:47,490 --> 00:01:51,390
Uma dessas, é a única maneira de copiar os elementos antes

26
00:01:51,660 --> 00:01:55,380
Então, deixe-me mostrar um exemplo.

27
00:01:55,830 --> 00:01:59,140
Eu quero fazer essa primeira mentira roxa.

28
00:01:59,340 --> 00:02:08,000
Eu diria estilo e, em seguida, na citação, diga Color Purple e isso funcionará.

29
00:02:08,580 --> 00:02:10,800
E isso muda para ser roxo.

30
00:02:11,490 --> 00:02:18,780
Então, há um problema, porém, o que é se eu quero que os três sejam roxos eu preciso ir

31
00:02:18,780 --> 00:02:20,880
em frente e duplicar isso sempre.

32
00:02:20,880 --> 00:02:21,910
Qual é muito trabalho.

33
00:02:21,990 --> 00:02:27,300
E então, se eu decidir, não quero que eles sejam verdes, então preciso mudar três lugares diferentes para

34
00:02:27,870 --> 00:02:28,570
serem verdes.

35
00:02:28,770 --> 00:02:33,960
E, obviamente, esse problema é muito pior quando você tem centenas do mesmo elemento com o

36
00:02:34,170 --> 00:02:35,940
mesmo estilo em uma determinada página.

37
00:02:35,940 --> 00:02:37,200
Então, esta é uma má idéia.

38
00:02:37,470 --> 00:02:43,220
E a outra razão, esta não é uma ótima idéia, é que queremos separar nosso h tim L da RCA.

39
00:02:43,380 --> 00:02:46,050
É essa idéia da separação de preocupações.

40
00:02:46,200 --> 00:02:50,030
Queremos que nossa CSSA seja autônoma em seu próprio arquivo.

41
00:02:50,040 --> 00:02:53,270
Queremos envelhecer para ser seu próprio arquivo com apenas a estrutura.

42
00:02:53,290 --> 00:02:55,130
C Ss é apenas o estilo.

43
00:02:55,230 --> 00:02:58,490
Então, neste momento, essa é uma mistura estranha dos dois.

44
00:02:58,710 --> 00:03:07,010
Então eu vou me livrar disso e, no outro lado das notas, algo é chamado de ataque de estilo.

45
00:03:07,360 --> 00:03:13,740
Então, uma tag de estilo nos permite escrever a sintaxe C Ss, onde realmente selecionamos coisas e temos as chaves

46
00:03:14,040 --> 00:03:15,580
que não podíamos fazer aqui.

47
00:03:16,230 --> 00:03:20,590
Mas o que podemos fazer é fazer isso dentro de um documento h t m l.

48
00:03:20,700 --> 00:03:25,530
agora escrever algumas tags e seletores C Ss dentro daqui.

49
00:03:29,940 --> 00:03:40,620
Então, na cabeça, se avançarmos e simplesmente criar a etiqueta chamada de estilo e podemos dar-lhe esse tipo de atributo igual a barra

50
00:03:40,890 --> 00:03:43,260
de texto C Ss podemos

51
00:03:43,470 --> 00:03:52,620
Então lembre-se que temos este é o seletor de regras gerais e, então, temos propriedades dentro das chaves e então valor e,

52
00:03:52,650 --> 00:03:55,240
em seguida, um ponto e vírgula.

53
00:03:55,920 --> 00:03:58,990
Então, vou comentar isso, por sinal, para fazer comentários.

54
00:03:59,040 --> 00:04:03,870
SS usa barra e o asterisco e, em seguida, asterisco e barra.

55
00:04:04,230 --> 00:04:06,060
Então, quero dizer, vou deixar isso aqui.

56
00:04:06,270 --> 00:04:12,990
E vamos começar mudando o H-1 para ser roxo.

57
00:04:13,020 --> 00:04:16,810
Então, da forma como escrevemos isso, se seguimos esse padrão, selecioná-lo.

58
00:04:17,070 --> 00:04:23,670
Então vamos escrever cada uma e outra vez e passaremos muito tempo em diferentes tipos

59
00:04:23,670 --> 00:04:24,680
de seletores.

60
00:04:24,690 --> 00:04:29,640
Então, agora, estamos aprendendo sobre um chamado de seletor de elementos que levou a selecionar

61
00:04:29,760 --> 00:04:32,860
com base em um tipo de elemento que é H-1.

62
00:04:33,300 --> 00:04:38,550
Então, agora vamos adicionar uma propriedade aqui e neste vídeo, vamos apenas mantê-lo extremamente

63
00:04:38,550 --> 00:04:40,220
simples e usar cor.

64
00:04:40,740 --> 00:04:54,490
coisa que podemos fazer é mudar todos os aliados para serem laranja e fazer isso selecionamos com um seletor de elementos novamente e podemos fazer isso logo depois.

65
00:04:54,490 --> 00:05:03,430
Então eu digo cor e depois roxo e salve esse recarregamento ou página de volta e nós obtemos

66
00:05:03,430 --> 00:05:06,510
um H-1 roxo. Então, a próxima

67
00:05:06,520 --> 00:05:10,660
Não precisamos de vírgulas ou de qualquer outra pontuação.

68
00:05:10,660 --> 00:05:19,390
Nós apenas fazemos outra regra, aqui, aplicamos cintas curly e desta vez vamos dizer que a cor é laranja.

69
00:05:19,390 --> 00:05:25,780
Então, a razão pela qual estamos fazendo isso é que eu quero mostrar que esse seletor Elyse não

70
00:05:25,780 --> 00:05:28,500
apenas seleciona uma seleciona todas as mentiras.

71
00:05:28,600 --> 00:05:33,340
Então, atualizamos os três deles agora são laranja.

72
00:05:33,340 --> 00:05:36,220
Da mesma forma com a H-1 se tivéssemos muitas h.

73
00:05:36,310 --> 00:05:38,190
Então eu vou apenas adicionar três.

74
00:05:38,260 --> 00:05:42,210
Todos seriam roxos.

75
00:05:42,220 --> 00:05:48,850
Outra coisa que eu vou mostrar aqui é se eu precisar encontrar outro estilo para cada um depois e eu digo que

76
00:05:48,850 --> 00:05:50,380
ele deve ser azul, ele

77
00:05:54,130 --> 00:05:54,860
fica azul.

78
00:05:54,910 --> 00:05:56,020
Todos ficam azuis.

79
00:05:56,080 --> 00:06:00,400
E isso acontece com algo que aprenderemos muito mais sobre o que

80
00:06:00,400 --> 00:06:02,680
acontece quando há informações de estilo conflitantes.

81
00:06:02,680 --> 00:06:05,200
E, neste caso, mudamos todos para serem roxos.

82
00:06:05,410 --> 00:06:07,870
E depois, mudamos todos para serem azuis.

83
00:06:07,870 --> 00:06:12,510
Então, o que veio depois ganhou a batalha, acho.

84
00:06:13,560 --> 00:06:14,040
ESTÁ BEM.

85
00:06:14,050 --> 00:06:21,520
Então, o problema com o que acabamos de fazer, embora pareça bem, mas, infelizmente, ainda está em

86
00:06:21,520 --> 00:06:22,550
nosso HMO.

87
00:06:22,690 --> 00:06:27,940
E acabei de terminar dizendo há alguns minutos queremos separá-lo ou sair dele e R C S

88
00:06:27,940 --> 00:06:30,210
nós não queremos que eles estejam conectados.

89
00:06:30,320 --> 00:06:35,000
Bem, queremos que estejam conectados, não queremos que os CCs sejam aninhados dentro de seu HMO.

90
00:06:35,440 --> 00:06:38,630
Então funcionalmente funciona exatamente da mesma maneira.

91
00:06:38,800 --> 00:06:46,880
Nós não vemos nenhuma diferença visual, mas bem, o que realmente queremos fazer é usar uma tag de link.

92
00:06:47,290 --> 00:06:53,810
Então, o que uma etiqueta de link nos permite fazer é escrever ou ver SS em um arquivo totalmente separado e, em seguida, conectado

93
00:06:53,810 --> 00:06:59,830
com a etiqueta de link em vez de nossa cabeça, que basicamente irá obter o conteúdo desse arquivo e alma e estilo

94
00:07:00,190 --> 00:07:01,580
de tudo em nossa idade.

95
00:07:01,580 --> 00:07:05,090
Tim L. dado o conteúdo desse arquivo.

96
00:07:07,270 --> 00:07:13,780
e vamos colocar o RC SS aqui, então vamos salvá-lo e eu apenas vou chamar isso.

97
00:07:13,780 --> 00:07:17,630
Então, para escrever, podemos começar por fazer um novo arquivo

98
00:07:17,690 --> 00:07:25,420
C Ss você chama isso o que quiser, mas precisa ser dot C Ss e eu estou colocando

99
00:07:26,230 --> 00:07:28,960
no mesmo diretório que meu arquivo HDMI.

100
00:07:29,050 --> 00:07:37,360
A próxima coisa que vou fazer é apenas definir alguns estilos e aqui, então, H-1, digamos que

101
00:07:37,400 --> 00:07:42,630
a cor é vermelha e a cor das mentiras é verde.

102
00:07:43,240 --> 00:07:46,870
E enquanto estivermos aqui, vamos mudar isso também.

103
00:07:46,870 --> 00:07:49,330
Cor roxa.

104
00:07:49,870 --> 00:07:50,830
Ótimo.

105
00:07:50,980 --> 00:07:58,180
Então, nós temos o CSSA definido aqui, é claro, e vou comentar isso por enquanto.

106
00:07:58,180 --> 00:08:00,750
Claro, embora eles não estejam conectados agora.

107
00:08:01,120 --> 00:08:04,030
Então fizemos um arquivo, mas não está conectado.

108
00:08:04,180 --> 00:08:06,550
Então, para fazer isso, precisamos usar a tag do link.

109
00:08:06,880 --> 00:08:13,810
Então, eu gostaria de apenas digitar o link e, em seguida, clicar em aba e você pode ver que existe esse atributo importante que

110
00:08:14,210 --> 00:08:19,570
o texto sublime quer que preenchamos o que é chamado de A-Trak e funciona como a calha em

111
00:08:19,570 --> 00:08:22,110
uma tag de âncora e isso Dê uma chegada.

112
00:08:22,140 --> 00:08:24,900
Damos um lugar para encontrar o arquivo.

113
00:08:24,940 --> 00:08:35,140
Então, neste caso, este arquivo acaba de ser chamado para nós, então escrevemos seqüestros, sim, salvar e atualizar.

114
00:08:35,140 --> 00:08:42,540
Agora você pode ver que lemos H-1 uma página roxa 4 e aliados verdes, então vamos tudo o que vamos fazer.

115
00:08:42,540 --> 00:08:43,920
No que diz respeito ao estilo, por enquanto.

116
00:08:44,110 --> 00:08:50,440
Então, para recapitular aqui, a primeira coisa que discutimos é usar o atributo de estilo para adicionar estilo na linha,

117
00:08:50,620 --> 00:08:57,070
que parece que esse estilo é igual e depois dê uma propriedade e esta é uma má idéia por dois motivos.

118
00:08:57,160 --> 00:09:01,420
O primeiro dos quais é que não queremos desordenar ou H Tim L com um monte de estilos.

119
00:09:01,480 --> 00:09:02,890
Queremos que estejam separados.

120
00:09:03,160 --> 00:09:06,860
E a segunda razão é que é uma dor se queremos mudar as coisas.

121
00:09:07,150 --> 00:09:11,500
É uma grande duplicação se queremos fazer todos os 3H um tópico.

122
00:09:11,530 --> 00:09:14,850
Nós devemos copiar esse código para três lugares diferentes.

123
00:09:15,340 --> 00:09:21,550
A próxima coisa que aprendemos sobre o uso da etiqueta de estilo e a etiqueta de estilo nos permite escrever C S nós

124
00:09:21,640 --> 00:09:23,110
dentro do nosso h Timo.

125
00:09:23,410 --> 00:09:24,940
E funciona bem.

126
00:09:24,940 --> 00:09:30,010
Isso nos permite usar a sintaxe CSSA, onde podemos selecionar todos de uma vez.

127
00:09:30,010 --> 00:09:34,710
O problema com isso é que não queremos colocar R C S S diretamente enfurecido por ele.

128
00:09:35,230 --> 00:09:39,940
algo que deseja adicionar rapidamente alguns estilos, você não quer fazer um novo arquivo e depois conectado.

129
00:09:40,180 --> 00:09:42,880
Mas você usará isso ocasionalmente se você estiver apenas depurando

130
00:09:42,920 --> 00:09:44,480
Você acabará por excluí-lo depois.

131
00:09:44,590 --> 00:09:46,100
Então, esse é realmente o momento em que eu uso isso.

132
00:09:46,100 --> 00:09:48,530
É apenas para fins de demonstração rápida.

133
00:09:48,730 --> 00:09:53,670
Mas o que realmente queremos usar é o link que marca a tag do link.

134
00:09:53,860 --> 00:09:55,810
É apenas uma referência a outro arquivo.

135
00:09:55,960 --> 00:10:02,020
Então, precisamos de um arquivo preenchido com estilos que precisa terminar com o Dotsie, avalie-o e depois conecte-o com

136
00:10:02,020 --> 00:10:05,800
o atributo H ref e isso é tudo o que precisamos fazer.

137
00:10:05,800 --> 00:10:12,550
Uma coisa que eu esqueci de mencionar é que você definitivamente quer colocar tags e estilos de link na sua cabeça.

138
00:10:12,790 --> 00:10:17,110
Esse é realmente o ponto da cabeça é onde você coloca as coisas que na verdade não estão

139
00:10:17,110 --> 00:10:22,600
na página, não os elementos, mas as coisas que têm a ver com esses elementos, por isso, fontes que você está incluindo folhas

140
00:10:22,900 --> 00:10:24,190
de estilo e, eventualmente, javascript