1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:04,500
>> [Música tocando]

3
00:00:04,500 --> 00:00:10,099

4
00:00:10,099 --> 00:00:12,224
ALLISON Buchholtz-AU: Entón
estamos basicamente só vai

5
00:00:12,224 --> 00:00:14,629
para darlle un resumo
CSS, porque sabemos

6
00:00:14,629 --> 00:00:16,420
que non foi cuberta
en todas as seccións.

7
00:00:16,420 --> 00:00:20,090
E nós realmente queremos estar seguro de que vostede
caras teñen esta ferramenta á súa disposición,

8
00:00:20,090 --> 00:00:24,790
porque ten a capacidade de facer
seus sitios ollar moito máis bonita.

9
00:00:24,790 --> 00:00:28,660
>> E se está construíndo un sitio, a continuación,
probablemente vai querer facela fermosa.

10
00:00:28,660 --> 00:00:31,372
Quero dicir, non ten que,
pero eu suxerín-lo. [Risas]

11
00:00:31,372 --> 00:00:35,430
Se quere que os usuarios de usalo, pode
queremos facelo un pouco [inaudível].

12
00:00:35,430 --> 00:00:39,130
Entón, imos tentar darlle só
algunhas ferramentas básicas e comprensión,

13
00:00:39,130 --> 00:00:42,340
de xeito que cando sae e está
buscando cousas sobre CSS,

14
00:00:42,340 --> 00:00:45,902
non é completar xerga,
como CSS, por veces, ser.

15
00:00:45,902 --> 00:00:47,240
>> TOMAS REIMERS: Yeah.

16
00:00:47,240 --> 00:00:49,930
Allison dixo que moi ben.

17
00:00:49,930 --> 00:00:53,250
Entón eu creo que o primeiro que
debe comezar co que é CSS?

18
00:00:53,250 --> 00:00:55,750
Entón CSS é impresionante.

19
00:00:55,750 --> 00:00:56,250
CSS--

20
00:00:56,250 --> 00:00:58,320
>> ALLISON Buchholtz-AU: Isto é
o nome do noso seminario.

21
00:00:58,320 --> 00:00:58,434
>> TOMAS REIMERS: Yeah.

22
00:00:58,434 --> 00:01:00,130
É moi importante que
Entende que ao entón.

23
00:01:00,130 --> 00:01:03,090
Se só se fai unha
cousa, é que o CSS se impresionante.

24
00:01:03,090 --> 00:01:06,180
Dous é CSS significa
CSS.

25
00:01:06,180 --> 00:01:10,380
Así, na súa esencia, é CSS
unha folla de estilo, o que significa

26
00:01:10,380 --> 00:01:13,200
el permite que para denominar unha páxina web.

27
00:01:13,200 --> 00:01:16,609
E entón o que iso significa, é unha
forma de engadir estilo para os seus sitios web.

28
00:01:16,609 --> 00:01:18,900
Entón, polo estilo, queremos dicir todo
que non está structural--

29
00:01:18,900 --> 00:01:24,350
así cousas como cores, fondo
imaxes, fronteiras, como, recheo,

30
00:01:24,350 --> 00:01:25,040
marxes.

31
00:01:25,040 --> 00:01:27,310
Imos falar sobre o que
todo isto significa que de aquí a pouco.

32
00:01:27,310 --> 00:01:30,110
>> Entón, nós temos só ir adiante e
abriu tanto daqueles en gedit.

33
00:01:30,110 --> 00:01:32,680
Polo tanto, este é index.html.

34
00:01:32,680 --> 00:01:34,800
E este é main.css.

35
00:01:34,800 --> 00:01:36,829
Entón main.css non ten nada.

36
00:01:36,829 --> 00:01:38,412
ALLISON Buchholtz-AU: No estilo ata agora.

37
00:01:38,412 --> 00:01:39,245
TOMAS REIMERS Ningún.

38
00:01:39,245 --> 00:01:42,577
E como vai ver, é
un sitio moi feo.

39
00:01:42,577 --> 00:01:44,160
ALLISON Buchholtz-AU: É simplemente.

40
00:01:44,160 --> 00:01:45,820
TOMAS REIMERS: Yeah.

41
00:01:45,820 --> 00:01:49,150
Si, non é feo,
é só minimalista.

42
00:01:49,150 --> 00:01:53,430
E entón aquí temos index.html.

43
00:01:53,430 --> 00:01:55,729
E así, a unha rápida
recapitulación do HTML, Allison,

44
00:01:55,729 --> 00:01:57,270
quere só falar sobre a páxina?

45
00:01:57,270 --> 00:01:58,395
>> ALLISON Buchholtz-AU: Yeah.

46
00:01:58,395 --> 00:02:01,100
Entón, obviamente, temos o noso HTML
tag, que acaba de ficheiro HTML nomes.

47
00:02:01,100 --> 00:02:07,080
Temos o noso cabeceira aquí, con CSS
Awesomeness, which-- se volver.

48
00:02:07,080 --> 00:02:07,720
Onde está iso?

49
00:02:07,720 --> 00:02:09,136
>> TOMAS REIMERS: Oh.

50
00:02:09,136 --> 00:02:10,301
Si, pode ver.

51
00:02:10,301 --> 00:02:12,092
ALLISON Buchholtz-AU:
E teña en conta a cabeceira

52
00:02:12,092 --> 00:02:14,120
é este cabeceira guía ata aquí.

53
00:02:14,120 --> 00:02:17,130
E, a continuación, "Ola, mundo!" é
o texto que temos só

54
00:02:17,130 --> 00:02:19,620
mostrando na web
páxina, que é-- volver.

55
00:02:19,620 --> 00:02:21,290
Volver.

56
00:02:21,290 --> 00:02:24,287
Cal é só no noso corpo
aqui-- o texto sen formato.

57
00:02:24,287 --> 00:02:26,120
Ademais, unha cousa a
notar, se ollar aquí,

58
00:02:26,120 --> 00:02:29,410
Tomas trocou-se estes
dous do noso foto.

59
00:02:29,410 --> 00:02:32,035
Entón, mentres ten todo
tres deles, está ben.

60
00:02:32,035 --> 00:02:34,044
Poden estar en calquera orde que eles queren.

61
00:02:34,044 --> 00:02:39,368
O que é máis importante é só iso
tes cada unha destas tres cousas.

62
00:02:39,368 --> 00:02:40,340
>> TOMAS REIMERS: Cool.

63
00:02:40,340 --> 00:02:41,111
Engadir un tipo doc?

64
00:02:41,111 --> 00:02:42,235
ALLISON Buchholtz-AU: Yeah.

65
00:02:42,235 --> 00:02:43,068
TOMAS REIMERS: Yeah.

66
00:02:43,068 --> 00:02:43,769
Con estilo.

67
00:02:43,769 --> 00:02:46,102
ALLISON Buchholtz-AU: Aparentemente,
meus micrófonos non gusta de min.

68
00:02:46,102 --> 00:02:49,650
TOMAS REIMERS: Oh, ofrécenos un segundo só
mentres Allison intercambio seu micrófono.

69
00:02:49,650 --> 00:02:50,500
Entón, si.

70
00:02:50,500 --> 00:02:52,030
Polo tanto, temos a nosa páxina principal.

71
00:02:52,030 --> 00:02:53,890
É unha especie de unstyled.

72
00:02:53,890 --> 00:02:54,780
Nós non temos moito.

73
00:02:54,780 --> 00:02:57,110
Nós só temos basicamente texto.

74
00:02:57,110 --> 00:02:59,470
Temos a folla de estilo.

75
00:02:59,470 --> 00:03:00,220
Temos o título.

76
00:03:00,220 --> 00:03:04,020
Entón, só bare-desossada
compoñentes facer un sitio.

77
00:03:04,020 --> 00:03:08,880
>> Entón, a partir de aí, imos
falar do que é CSS

78
00:03:08,880 --> 00:03:11,270
e que parece e todo iso.

79
00:03:11,270 --> 00:03:12,047
Así, por isso--

80
00:03:12,047 --> 00:03:13,755
ALLISON Buchholtz-AU:
Volver para os diapositivas.

81
00:03:13,755 --> 00:03:15,200
TOMAS REIMERS: Volver aos diapositivas.

82
00:03:15,200 --> 00:03:17,240
E Allison pode asumir.

83
00:03:17,240 --> 00:03:18,720
>> ALLISON Buchholtz-AU: Woo.

84
00:03:18,720 --> 00:03:19,220
Aceptar.

85
00:03:19,220 --> 00:03:22,360
Así, no seu arquivo CSS,
vai ter

86
00:03:22,360 --> 00:03:25,010
unha morea desas cousas chamados selectores.

87
00:03:25,010 --> 00:03:27,420
Este será só o
base do seu arquivo CSS.

88
00:03:27,420 --> 00:03:29,480
É só pasar a ser
moitos e moitos destes.

89
00:03:29,480 --> 00:03:30,780
Así, o selector de.

90
00:03:30,780 --> 00:03:32,649
Esta é só a anatomía xeral.

91
00:03:32,649 --> 00:03:35,190
Nós imos pasar por
exemplos, porque se nunca caras

92
00:03:35,190 --> 00:03:38,400
asistir miña sección, eu me sinto
como cousas en abstracto

93
00:03:38,400 --> 00:03:39,400
realmente non ten sentido.

94
00:03:39,400 --> 00:03:41,110
El sempre axuda a ver os exemplos.

95
00:03:41,110 --> 00:03:42,420
>> Polo tanto, temos algúns selector.

96
00:03:42,420 --> 00:03:49,120
Isto vai ser un identificador de
o que queremos que o estilo para aplicar.

97
00:03:49,120 --> 00:03:52,220
E entón podemos ter calquera
conxunto de regras e valores.

98
00:03:52,220 --> 00:03:55,680
Entón selectores que se pode ver
podería ser algo así como corpo,

99
00:03:55,680 --> 00:04:00,262
ou parágrafo con P,
ou cabeceira, ou o que quere,

100
00:04:00,262 --> 00:04:02,000
todo o que quere que os seus etiquetas HTML para ser.

101
00:04:02,000 --> 00:04:03,570
>> Polo tanto, neste caso, temos corpo.

102
00:04:03,570 --> 00:04:06,985
E nós temos unha regra,
que esta corresponde

103
00:04:06,985 --> 00:04:09,610
para o que o seu estilo é aplicable.

104
00:04:09,610 --> 00:04:12,720
Polo tanto, neste caso, temos
cor de fondo e peso da fonte.

105
00:04:12,720 --> 00:04:16,200
Entón, iso vai cambiar
o fondo de calquera cousa

106
00:04:16,200 --> 00:04:19,640
dentro de calquera etiqueta corpo do noso arquivo HTML.

107
00:04:19,640 --> 00:04:22,810
E vai dar
que este valor luz azul.

108
00:04:22,810 --> 00:04:24,820
>> Por iso, vai facer a
fondo azul claro.

109
00:04:24,820 --> 00:04:28,660
E entón calquera cousa dentro do corpo é
terá un peso negra.

110
00:04:28,660 --> 00:04:31,142
Por iso, só vai
negra todo o noso texto.

111
00:04:31,142 --> 00:04:32,970
E este é só un selector.

112
00:04:32,970 --> 00:04:34,680
Pero podería ter moito moitos destes.

113
00:04:34,680 --> 00:04:38,730
E como nós imos amosar
despois, un pouco máis sobre o xeito no que

114
00:04:38,730 --> 00:04:40,709
que as obras e máis exemplos de alí.

115
00:04:40,709 --> 00:04:41,750
Calquera cousa que quere engadir?

116
00:04:41,750 --> 00:04:42,499
>> TOMAS REIMERS: No.

117
00:04:42,499 --> 00:04:43,500
Allison ten.

118
00:04:43,500 --> 00:04:46,144
Nós só estamos indo a cortar unha
exemplo aquí no noso exemplo web.

119
00:04:46,144 --> 00:04:47,310
Entón imos realmente tomar esta.

120
00:04:47,310 --> 00:04:48,620
É perfecto.

121
00:04:48,620 --> 00:04:54,460
Entón, eu estou indo só para copiar e pegar
que a dereita no noso arquivo main.css.

122
00:04:54,460 --> 00:04:56,530
E eu estou indo a salvalo.

123
00:04:56,530 --> 00:04:59,190
E entón imos executalo.

124
00:04:59,190 --> 00:05:01,600
Así, nota lado, un dos
a maioría das cousas frustrantes

125
00:05:01,600 --> 00:05:04,490
é, se non gardar un arquivo, e
logo ti, como, actualizar a páxina,

126
00:05:04,490 --> 00:05:07,450
e como, por que non é
o cambio a suceder?

127
00:05:07,450 --> 00:05:07,950
Isto ocorre.

128
00:05:07,950 --> 00:05:14,230
Entón, aquí, vimos que fixemos a nosa
web un fondo azul claro

129
00:05:14,230 --> 00:05:16,560
e algún texto en negra.

130
00:05:16,560 --> 00:05:20,730
>> Quere tamén de mencionar, se
caras teñen preguntas sobre calquera cousa

131
00:05:20,730 --> 00:05:23,622
estamos facendo, faga o favor
libre para parar e preguntar-nos.

132
00:05:23,622 --> 00:05:25,330
Estamos totalmente dispostos
para responder preguntas.

133
00:05:25,330 --> 00:05:27,951

134
00:05:27,951 --> 00:05:31,930
>> ALLISON Buchholtz-AU: Obviamente, con
CSS, todo se basea en si.

135
00:05:31,930 --> 00:05:34,107
Polo tanto, se unha cousa non fai
ten sentido agora, nós

136
00:05:34,107 --> 00:05:35,690
Non quero que a afundilo lo máis tarde.

137
00:05:35,690 --> 00:05:38,390

138
00:05:38,390 --> 00:05:41,930
>> TOMAS REIMERS: Entón, imos
tipo de dissecar iso.

139
00:05:41,930 --> 00:05:44,210
Entón quere comezar
co selector aquí?

140
00:05:44,210 --> 00:05:45,979
>> ALLISON Buchholtz-AU: Yeah.

141
00:05:45,979 --> 00:05:48,270
Como eu estaba dicindo antes, o corpo
é só o noso selector aquí.

142
00:05:48,270 --> 00:05:50,950
Entón, se imos voltar á nosa ah index--.

143
00:05:50,950 --> 00:05:53,245
>> TOMAS REIMERS: Que eu só pechado.

144
00:05:53,245 --> 00:05:54,530
Dáme un segundo.

145
00:05:54,530 --> 00:05:58,286
Entón File, Open, index.html.

146
00:05:58,286 --> 00:05:59,410
ALLISON Buchholtz-AU: Cool.

147
00:05:59,410 --> 00:06:02,710
Entón, se observar aquí, nós
ter estas etiquetas do corpo, non?

148
00:06:02,710 --> 00:06:06,270
Así, o selector de só corresponde
as marcas que estamos a falar.

149
00:06:06,270 --> 00:06:07,670
Entón corpo aquí.

150
00:06:07,670 --> 00:06:10,315
Entón, o que estamos dicindo é
tudo-- podemos volver?

151
00:06:10,315 --> 00:06:12,065
Gustaríame poder só
como tocar na pantalla.

152
00:06:12,065 --> 00:06:14,410
Sería moito máis legal.

153
00:06:14,410 --> 00:06:17,150
>> Entón, calquera cousa dentro daqueles
tags do corpo, que vimos

154
00:06:17,150 --> 00:06:19,637
era só, como, o texto,
e o corpo en xeral

155
00:06:19,637 --> 00:06:20,970
refírese, así, ao fondo.

156
00:06:20,970 --> 00:06:22,720
Se quere
cambiar o fondo,

157
00:06:22,720 --> 00:06:25,090
que será nunha etiqueta corpo.

158
00:06:25,090 --> 00:06:27,120
Só ten esas regras aplicadas a eles.

159
00:06:27,120 --> 00:06:32,040
>> Entón, se tivésemos que ir
index.html correo en realidade,

160
00:06:32,040 --> 00:06:33,840
podemos ter algo
fóra do corpo?

161
00:06:33,840 --> 00:06:37,340
Se tivésemos, como, un pé
algo, non sería aplicable a este.

162
00:06:37,340 --> 00:06:40,900
Pero algo dentro
estas etiquetas do corpo vai

163
00:06:40,900 --> 00:06:44,960
a ser afectados por este órgano
selector que fixemos.

164
00:06:44,960 --> 00:06:47,405
Entón, se tivese que escribir
outra cousa há--

165
00:06:47,405 --> 00:06:49,400
>> TOMAS REIMERS: Imos conseguir isto.

166
00:06:49,400 --> 00:06:55,330
Entón, se tivésemos unha div-- de xeito que é
só outra marca que pode ter.

167
00:06:55,330 --> 00:06:56,350
Estou indo para a pechar.

168
00:06:56,350 --> 00:06:58,280
Ou imos facer deste un parágrafo.

169
00:06:58,280 --> 00:07:01,430
Entón p significa parágrafo.

170
00:07:01,430 --> 00:07:02,560
E dentro dese parágrafo.

171
00:07:02,560 --> 00:07:05,650
E entón eu digo: "Este é un texto."

172
00:07:05,650 --> 00:07:06,369
Con estilo.

173
00:07:06,369 --> 00:07:09,160
E entón eu fixen esa regra se aplica a
un punto no canto do corpo.

174
00:07:09,160 --> 00:07:12,390

175
00:07:12,390 --> 00:07:17,320
Vai ver como se aplica só a
o parágrafo recén formada, á dereita,

176
00:07:17,320 --> 00:07:18,892
non a cousa toda.

177
00:07:18,892 --> 00:07:20,090
Isto ten sentido?

178
00:07:20,090 --> 00:07:21,840
>> ALLISON Buchholtz-AU:
Entón, iso é todo o corpo,

179
00:07:21,840 --> 00:07:24,450
pero agora o noso selector só
corresponde ao parágrafo.

180
00:07:24,450 --> 00:07:27,050
Entón, nós só temos negra e azul
para este punto específico,

181
00:07:27,050 --> 00:07:30,760
porque esta é a única cousa
que é colocado dentro da etiqueta p.

182
00:07:30,760 --> 00:07:35,349
>> TOMAS REIMERS: Isto ten sentido clasificar
de como as cousas encapsulado outras cousas?

183
00:07:35,349 --> 00:07:38,140
ALLISON Buchholtz-AU: Ademais, só
para dicir, como, unha das mellores formas

184
00:07:38,140 --> 00:07:40,889
para realmente sentirse cómodo con CSS
é só facer cousas como esta,

185
00:07:40,889 --> 00:07:42,050
só probalo.

186
00:07:42,050 --> 00:07:46,700
É moi sinxelo de escribir algo
a fóra, prema en Actualizar, e ver que pasa.

187
00:07:46,700 --> 00:07:48,940
E como a maioría dos CS,
experimentación pode, moitas veces

188
00:07:48,940 --> 00:07:51,790
levar a unha moito mellor
comprensión intuitiva.

189
00:07:51,790 --> 00:07:54,432
Aínda máis do que nós só,
como, falando con vostede.

190
00:07:54,432 --> 00:07:58,350
>> TOMAS REIMERS: Absolutely
100% de acordo sobre este punto.

191
00:07:58,350 --> 00:08:02,430
Entón, se nós volver a este, imos comezar
dissecar o que estes dous fan.

192
00:08:02,430 --> 00:08:04,550
Polo tanto, temos dúas regras sobre este asunto.

193
00:08:04,550 --> 00:08:07,420
Así, o primeiro é a cor de fondo.

194
00:08:07,420 --> 00:08:10,590
E ve que nós configure-lo
igual a un valor, a luz azul.

195
00:08:10,590 --> 00:08:15,009
>> Así, en CSS, CSS é unha especie
de moi solto sobre como

196
00:08:15,009 --> 00:08:16,300
está autorizado a definir a cor.

197
00:08:16,300 --> 00:08:17,800
Así, pode define-los polo nome.

198
00:08:17,800 --> 00:08:20,650
Tamén pode facer algo como "vermello".

199
00:08:20,650 --> 00:08:25,270
E, a continuación, se volvemos a este,
vai ver que o fondo é vermello.

200
00:08:25,270 --> 00:08:29,040
Tamén pode obter realmente-- Creo que
pode ser moi creativo con iso,

201
00:08:29,040 --> 00:08:29,540
non pode?

202
00:08:29,540 --> 00:08:31,170
>> ALLISON Buchholtz-AU: I
creo que pode usar hex.

203
00:08:31,170 --> 00:08:31,250
Non pode?

204
00:08:31,250 --> 00:08:32,083
>> TOMAS REIMERS: Yeah.

205
00:08:32,083 --> 00:08:32,969
Logo, pode usar hex.

206
00:08:32,969 --> 00:08:34,490
Pero estou pensando-name sabio.

207
00:08:34,490 --> 00:08:35,385
Non están alí?

208
00:08:35,385 --> 00:08:37,260
ALLISON Buchholtz-AU:
Podes facer moi poucos.

209
00:08:37,260 --> 00:08:43,350
Moi parecido a maioría das cores que
pode nome-- como, eu creo que o salmón é un.

210
00:08:43,350 --> 00:08:45,322
>> TOMAS REIMERS: Imos tentar salmón.

211
00:08:45,322 --> 00:08:47,530
ALLISON Buchholtz-AU: I
creo Chartreuse está aí.

212
00:08:47,530 --> 00:08:48,050
TOMAS REIMERS: Yeah.

213
00:08:48,050 --> 00:08:48,550
Vexa?

214
00:08:48,550 --> 00:08:50,080
Entón podes estar moi creativo.

215
00:08:50,080 --> 00:08:52,246
>> ALLISON Buchholtz-AU: Vostede
podería ser moi creativo.

216
00:08:52,246 --> 00:08:55,750
Como, se pode pensar en
nome da cor, é probablemente alí.

217
00:08:55,750 --> 00:08:57,840
Se realmente quere multa
detalle, pode ir hex.

218
00:08:57,840 --> 00:08:58,673
>> TOMAS REIMERS: Yeah.

219
00:08:58,673 --> 00:08:59,390
Así hexadecimal.

220
00:08:59,390 --> 00:09:05,280
Se vós lembran esta de volta
do seu antigo PSET, Imaxe Solicitar,

221
00:09:05,280 --> 00:09:08,300
vostedes tiveron que tratar
con eses valores hexadecimais.

222
00:09:08,300 --> 00:09:15,280
E tipo de recapitular o que é iso,
hex ten tres valores almacenados nel.

223
00:09:15,280 --> 00:09:17,250
Polo tanto, é en grupos de dous incrementos.

224
00:09:17,250 --> 00:09:19,300
Os dous primeiros representan o valor vermello.

225
00:09:19,300 --> 00:09:22,420
O segundo representa
o valor de verde.

226
00:09:22,420 --> 00:09:25,020
E a última é azul?

227
00:09:25,020 --> 00:09:30,050
>> Entón FF acontece para representar
un hexadecimal 255.

228
00:09:30,050 --> 00:09:35,480
Entón tes 255 vermello, 255
verde, e 0 para azul.

229
00:09:35,480 --> 00:09:37,670
E os valores varían entre 0 e 255.

230
00:09:37,670 --> 00:09:38,350
>> Audiencia: Correcto.

231
00:09:38,350 --> 00:09:41,472
Entón, basicamente, poderíamos buscar
a Internet para calquera cor que queiramos,

232
00:09:41,472 --> 00:09:43,912
e identificar o certo coñecida
cor espectro de combinación,

233
00:09:43,912 --> 00:09:45,130
e, despois, pode poñelas?

234
00:09:45,130 --> 00:09:46,380
ALLISON Buchholtz-AU: Exactamente.

235
00:09:46,380 --> 00:09:52,900
Entón ten practicamente o control completo
sobre as cores que quere dentro CSS.

236
00:09:52,900 --> 00:09:55,069
Imos falar sobre
imaxes de fondo máis tarde?

237
00:09:55,069 --> 00:09:56,110
Ou queremos facer iso?

238
00:09:56,110 --> 00:09:56,240
>> TOMAS REIMERS: Yeah.

239
00:09:56,240 --> 00:09:57,010
Absolutamente.

240
00:09:57,010 --> 00:10:00,830
Entón, primeiro, só para mostrar que
vermello e verde é amarelo.

241
00:10:00,830 --> 00:10:03,120
E se precisa de
axuda para atopar isto,

242
00:10:03,120 --> 00:10:05,575
pode Google algo
como "Color Picker".

243
00:10:05,575 --> 00:10:07,200
ALLISON Buchholtz-AU: Oh, iso é tan bo.

244
00:10:07,200 --> 00:10:09,090
Eu amo o Color Picker.

245
00:10:09,090 --> 00:10:11,360
>> TOMAS REIMERS: colorpicker.com
é un bo exemplo.

246
00:10:11,360 --> 00:10:14,580
E aquí, vai ver que ten
un selector de cores Photoshop-like cheo.

247
00:10:14,580 --> 00:10:14,920
>> ALLISON Buchholtz-AU: Hum-hum.

248
00:10:14,920 --> 00:10:16,980
Ademais, as cousas legais que está
pode xerar esquemas de cores

249
00:10:16,980 --> 00:10:18,896
de xeito que non ten,
like, chocar cores.

250
00:10:18,896 --> 00:10:22,780
TOMAS REIMERS: E despois
aquí está o valor hexadecimal aquí enriba.

251
00:10:22,780 --> 00:10:27,800
Entón, sempre pode atopar en liña basicamente
lugares para obter o valor hexadecimal de.

252
00:10:27,800 --> 00:10:31,667
Non é unha especie de que só, como, nós
ver as cores do mundo en números.

253
00:10:31,667 --> 00:10:34,000
É máis que ir en liña
e atopar o que cor que queiramos,

254
00:10:34,000 --> 00:10:36,850
e, a continuación, levar o número cara a abaixo.

255
00:10:36,850 --> 00:10:39,590
Porque é só un realmente fácil
xeito de referenciar as cousas en CS.

256
00:10:39,590 --> 00:10:40,350
>> ALLISON Buchholtz-AU:
E despois hai Também--

257
00:10:40,350 --> 00:10:41,630
Eu esquezo o nome exacto do sitio.

258
00:10:41,630 --> 00:10:43,838
Pero hai sempre, I
pensar, algo do Adobe

259
00:10:43,838 --> 00:10:48,350
que xera esquemas de cores para ti,
que é moi legal, porque

260
00:10:48,350 --> 00:10:50,580
definitely-- ás veces é
difícil de descubrir,

261
00:10:50,580 --> 00:10:53,729
Oh, se eu queira utilizar esta cor,
o que podería ser un útil

262
00:10:53,729 --> 00:10:56,395
para usar noutros lugares no meu sitio para,
como, facelo agradable e cohesionada.

263
00:10:56,395 --> 00:11:00,430

264
00:11:00,430 --> 00:11:04,260
>> TOMAS REIMERS: Allison está falando
un por Adobe Kuler chamado, eu creo.

265
00:11:04,260 --> 00:11:04,885
É K-U-L-E-R.

266
00:11:04,885 --> 00:11:06,259
ALLISON Buchholtz-AU: Eu creo que si.

267
00:11:06,259 --> 00:11:07,610
Estou seguro de que é o único.

268
00:11:07,610 --> 00:11:11,050
>> TOMAS REIMERS: O meu favorito ten
sempre foi Color Scheme Deseño.

269
00:11:11,050 --> 00:11:13,998
>> ALLISON Buchholtz-AU: Ooh.

270
00:11:13,998 --> 00:11:16,010
>> TOMAS REIMERS: Cal é agora--

271
00:11:16,010 --> 00:11:16,860
>> ALLISON Buchholtz-AU:
Ah, iso é fermoso.

272
00:11:16,860 --> 00:11:18,818
>> TOMAS REIMERS: E
pode basicamente dicir, como,

273
00:11:18,818 --> 00:11:21,700
Quero tres cores á beira do outro.

274
00:11:21,700 --> 00:11:25,030
E entón imos facer algo de bo.

275
00:11:25,030 --> 00:11:29,210
E entón pode obter un exemplo
do que pode parecer.

276
00:11:29,210 --> 00:11:32,470
E entón se pasar o rato sobre calquera dos
Los, dálle o valor hexadecimal.

277
00:11:32,470 --> 00:11:35,010
>> Entón, así como unha boa forma de comezar
pensando en esquemas de cores

278
00:11:35,010 --> 00:11:39,570
ou o que as cores nunha web
pode ir ben en conxunto.

279
00:11:39,570 --> 00:11:45,655
Porque iso pode ser sorprendentemente
non é tan fácil de escoller como pensa.

280
00:11:45,655 --> 00:11:48,280
E, a continuación, a outra cousa legal
Sempre pensei sobre este sitio

281
00:11:48,280 --> 00:11:51,480
é se bater exemplos, que vai
amosar o que un sitio exemplo

282
00:11:51,480 --> 00:11:54,800
pode parecer a usar este esquema de cores.

283
00:11:54,800 --> 00:11:56,270
En fin.

284
00:11:56,270 --> 00:11:57,863
>> Volver CSS real.

285
00:11:57,863 --> 00:12:01,112
ALLISON Buchholtz-AU: Pero, obviamente, nós
Coñecemos esas referencias pode ser útil.

286
00:12:01,112 --> 00:12:03,195
TOMAS REIMERS: Non, eles
definitivamente pode ser útil.

287
00:12:03,195 --> 00:12:04,720
Así, a segunda regra, Allison?

288
00:12:04,720 --> 00:12:05,844
>> ALLISON Buchholtz-AU: Yeah.

289
00:12:05,844 --> 00:12:08,280
A segunda regra é só
correspondente a nosa fonte.

290
00:12:08,280 --> 00:12:11,520
Polo tanto, o peso da fonte é só un tipo
de-- xeito que o peso sería

291
00:12:11,520 --> 00:12:15,220
estar se quere só, como,
normal ou, como, fontes máis finas,

292
00:12:15,220 --> 00:12:17,251
ou, neste caso, como, negra.

293
00:12:17,251 --> 00:12:17,750
Eu esquezo.

294
00:12:17,750 --> 00:12:21,557
Cal é o se quería ele-- está aí
un máis fino do que só, como, normal?

295
00:12:21,557 --> 00:12:24,140
TOMAS REIMERS: Realmente non
saber se hai un máis fino.

296
00:12:24,140 --> 00:12:24,680
ALLISON Buchholtz-AU: Eu esquezo.

297
00:12:24,680 --> 00:12:26,300
Peso Entón font nós tipicamente
é só usar a negra.

298
00:12:26,300 --> 00:12:29,010
Se quere estar realmente en
Lo, imos amosar-lle.

299
00:12:29,010 --> 00:12:34,317
W3Schools ten todos os distintos
cousas que podes facer por fontes.

300
00:12:34,317 --> 00:12:36,900
Pero, basicamente, se quere
para cambiar algo sobre a pía bautismal,

301
00:12:36,900 --> 00:12:39,330
el sempre será,
como, font-algo.

302
00:12:39,330 --> 00:12:43,450
Entón será como, font-family se é
intentando cambiar o tipo real.

303
00:12:43,450 --> 00:12:47,390
Será font-style se
quero facelo como cursiva,

304
00:12:47,390 --> 00:12:49,710
ou cursiva, ou outros adornos.

305
00:12:49,710 --> 00:12:53,570
Ou mesmo font-cor, se
queriamos cambiar isto.

306
00:12:53,570 --> 00:12:55,621
>> TOMAS REIMERS: Yup.

307
00:12:55,621 --> 00:12:56,925
Así, pode cambiar isto.

308
00:12:56,925 --> 00:12:59,360
E medio que a
recapitulación agora, para que poida

309
00:12:59,360 --> 00:13:01,400
ver que temos o selector para arriba aquí.

310
00:13:01,400 --> 00:13:03,000
Temos esas claves.

311
00:13:03,000 --> 00:13:06,735
E entón temos regras
delimitado por punto e coma.

312
00:13:06,735 --> 00:13:08,100
Isto ten sentido?

313
00:13:08,100 --> 00:13:09,130
Si?

314
00:13:09,130 --> 00:13:10,500
Con estilo.

315
00:13:10,500 --> 00:13:13,200
Entón, se isto é boa--

316
00:13:13,200 --> 00:13:14,424
>> ALLISON Buchholtz-AU: Back.

317
00:13:14,424 --> 00:13:17,590
TOMAS REIMERS: Imos falar especificamente
sobre o tipo de selectores que temos.

318
00:13:17,590 --> 00:13:19,790
Porque agora temos
tipo de só mostra as etiquetas.

319
00:13:19,790 --> 00:13:21,696
Pero vós poderían velo plausible.

320
00:13:21,696 --> 00:13:23,570
Digamos que teña dous parágrafos
nunha páxina e

321
00:13:23,570 --> 00:13:26,087
Quere ser capaz de estilo
un, pero non o outro,

322
00:13:26,087 --> 00:13:29,170
só non quere limitar-se
ter que utilizar diferentes HTML real

323
00:13:29,170 --> 00:13:33,410
tags para darlles diferentes estilos.

324
00:13:33,410 --> 00:13:35,995
>> Polo tanto, temos tres básicos
tipos de selectores.

325
00:13:35,995 --> 00:13:37,120
ALLISON Buchholtz-AU: Yeah.

326
00:13:37,120 --> 00:13:39,828
Polo tanto, temos etiqueta, que é o que
estivemos falando no momento.

327
00:13:39,828 --> 00:13:42,430
Entón, que tipo de como o seu corpo ou p.

328
00:13:42,430 --> 00:13:46,280
E entón temos clase, que é
cando define-lo na nosa arquivo CSS,

329
00:13:46,280 --> 00:13:49,907
el sempre será punto, o que quere
quere que o nome da súa clase para ser.

330
00:13:49,907 --> 00:13:51,490
E isto pode aplicarse a moitas cousas.

331
00:13:51,490 --> 00:13:54,610

332
00:13:54,610 --> 00:13:57,610
>> Digamos que teña cinco parágrafos
e dúas das tres deles

333
00:13:57,610 --> 00:14:00,580
ten que ser o mesmo estilo,
vostede aplicaría unha clase a el.

334
00:14:00,580 --> 00:14:03,040
E esta é só a forma como o facemos.

335
00:14:03,040 --> 00:14:05,600
Nós imos dar-lle un exemplo de
onde esta realmente aparece.

336
00:14:05,600 --> 00:14:11,030
Pero se tivese quizais algunha etiqueta
p, tras el, vostede escribiría,

337
00:14:11,030 --> 00:14:14,170
clase é igual a calquera que sexan as clases
quere aplicar a el.

338
00:14:14,170 --> 00:14:19,280
Entón o que selectores de clase que queremos
aplicar a este punto específico,

339
00:14:19,280 --> 00:14:21,300
poderiamos escribir só como este.

340
00:14:21,300 --> 00:14:24,080
Claro, eu creo que un exemplo
pode facelo moito máis concreta.

341
00:14:24,080 --> 00:14:27,270
>> O outro temos
é id, que denotamos

342
00:14:27,270 --> 00:14:29,707
cun hash, ou libra, ou hashtag.

343
00:14:29,707 --> 00:14:30,790
TOMAS REIMERS: octothorpe.

344
00:14:30,790 --> 00:14:32,430
ALLISON Buchholtz-AU: octothorpe.

345
00:14:32,430 --> 00:14:34,550
Isto funciona tamén.

346
00:14:34,550 --> 00:14:36,640
E esta debe ser realmente único.

347
00:14:36,640 --> 00:14:39,880
Eles só deben aplicarse a
unha cousa na súa páxina.

348
00:14:39,880 --> 00:14:43,820
Entón, se isto é un parágrafo específico,
ou algún elemento nunha lista, ou o que quere,

349
00:14:43,820 --> 00:14:45,090
este debe ser único.

350
00:14:45,090 --> 00:14:48,730
E do mesmo xeito que acabamos
dicir, como, class = "class1 class2"

351
00:14:48,730 --> 00:14:51,577
isto pode ser só a id do que quere que temos.

352
00:14:51,577 --> 00:14:52,410
TOMAS REIMERS: Yeah.

353
00:14:52,410 --> 00:14:54,330
Entón, imos falar definitivamente
sobre exemplos aquí.

354
00:14:54,330 --> 00:14:58,170
E eu estou indo só para mergullo
directo ao seu código.

355
00:14:58,170 --> 00:15:02,090
Entón, imos ollar para o noso HTML.

356
00:15:02,090 --> 00:15:03,960
E por iso, agora ten un parágrafo.

357
00:15:03,960 --> 00:15:05,510
Este é un texto.

358
00:15:05,510 --> 00:15:09,151
Eu só vou para modificar
lo. "Este é un texto 1."

359
00:15:09,151 --> 00:15:11,150
E entón nós imos
ter unha "Este é un texto 2."

360
00:15:11,150 --> 00:15:12,525
>> ALLISON Buchholtz-AU: segunda.

361
00:15:12,525 --> 00:15:13,540
TOMAS REIMERS: Yup.

362
00:15:13,540 --> 00:15:16,810
Entón, nós temos agora "Este é un texto 2", non?

363
00:15:16,810 --> 00:15:21,560
E veremos que si recargar
a páxina, o que imos atopar

364
00:15:21,560 --> 00:15:23,067
é que nós imos find--

365
00:15:23,067 --> 00:15:24,150
ALLISON Buchholtz-AU: Ooh.

366
00:15:24,150 --> 00:15:24,983
TOMAS REIMERS: Yeah.

367
00:15:24,983 --> 00:15:27,570
Nós imos atopar un "Este é
text 1 "e" Este é un texto 2. "

368
00:15:27,570 --> 00:15:28,650
>> ALLISON Buchholtz-AU: E
a fermosa cor amarela.

369
00:15:28,650 --> 00:15:31,066
>> TOMAS REIMERS: E vai ver
que o noso selector de agora,

370
00:15:31,066 --> 00:15:34,940
que se aplica a p de, ou
parágrafos, afecta tanto,

371
00:15:34,940 --> 00:15:38,700
porque ambos atender a
condición de que ambos son unha etiqueta p.

372
00:15:38,700 --> 00:15:40,360
Isto ten sentido total.

373
00:15:40,360 --> 00:15:43,340
Entón a pregunta é, así, o que
se quixésemos só ten unha?

374
00:15:43,340 --> 00:15:46,350
Entón, exactamente como Allison estaba dicindo:
temos dúas outras formas de facelo.

375
00:15:46,350 --> 00:15:47,320
Vou comezar co id.

376
00:15:47,320 --> 00:15:48,405
>> ALLISON Buchholtz-AU:
Imos comezar co id.

377
00:15:48,405 --> 00:15:50,405
>> TOMAS REIMERS: E ambos
destes son atributos.

378
00:15:50,405 --> 00:15:53,200
Entón atributos existen HTML.

379
00:15:53,200 --> 00:15:55,600
E o que son é
algo que engadir

380
00:15:55,600 --> 00:15:58,840
dentro da marca que é
separar o nome da marca.

381
00:15:58,840 --> 00:16:01,301
Así, pode ter varios atributos.

382
00:16:01,301 --> 00:16:01,800
Si?

383
00:16:01,800 --> 00:16:03,950
>> ALLISON Buchholtz-AU: Eu só estaba indo
quere dicir, a partir do seu exemplo de PSET 7,

384
00:16:03,950 --> 00:16:06,650
se algún de vós tentar aliñar
cousas para o centro,

385
00:16:06,650 --> 00:16:08,550
pode usar
"Text align = center."

386
00:16:08,550 --> 00:16:10,550
E notou que probablemente
debería centrado

387
00:16:10,550 --> 00:16:12,650
seu texto ou a súa barra de navegación.

388
00:16:12,650 --> 00:16:15,499
Entón, iso é só tamén un atributo
que pode estar familiarizado.

389
00:16:15,499 --> 00:16:18,040
TOMAS REIMERS: Hai un grupo
de atributos que vai ver.

390
00:16:18,040 --> 00:16:18,539
Si.

391
00:16:18,539 --> 00:16:21,250
Como boa referencia para PSET 7.

392
00:16:21,250 --> 00:16:23,150
Temos id.

393
00:16:23,150 --> 00:16:25,080
Tamén pode ter
clase, cousas como esta.

394
00:16:25,080 --> 00:16:27,250
A única marca pode ter moitos atributos.

395
00:16:27,250 --> 00:16:33,140
Entón, comezando con id, imos finxir que
quero ter un id de-- eu non sei.

396
00:16:33,140 --> 00:16:35,140
Imos chamalo especial,
porque este, estamos

397
00:16:35,140 --> 00:16:37,867
vai facer negra e
subliñado, e calquera que sexa.

398
00:16:37,867 --> 00:16:39,950
ALLISON Buchholtz-AU: É
Será super especial.

399
00:16:39,950 --> 00:16:42,360
TOMAS REIMERS: Entón, iso
un, temos id especial.

400
00:16:42,360 --> 00:16:48,140
Así, a forma de seleccionar que, entón, é
en main.css, en vez de ter unha etiqueta p,

401
00:16:48,140 --> 00:16:51,500
fai #Special, OK?

402
00:16:51,500 --> 00:16:55,538
E que selecciona o
cousa con id especial.

403
00:16:55,538 --> 00:16:57,295
Será que isto ten sentido para todos?

404
00:16:57,295 --> 00:16:57,920
Audiencia: Yeah.

405
00:16:57,920 --> 00:16:59,110
TOMAS REIMERS: Cool.

406
00:16:59,110 --> 00:17:04,440
Polo tanto, agora imos volver,
imos see-- berros.

407
00:17:04,440 --> 00:17:06,240
Si.

408
00:17:06,240 --> 00:17:09,460
Imos ver o que selecciona só
aquel con id especial.

409
00:17:09,460 --> 00:17:10,622
Si?

410
00:17:10,622 --> 00:17:11,900
Soa ben.

411
00:17:11,900 --> 00:17:12,570
Si.

412
00:17:12,570 --> 00:17:15,456
>> Audiencia: Pode ter un algo
atributo de ambos clase e un id?

413
00:17:15,456 --> 00:17:16,359
>> TOMAS REIMERS: Si.

414
00:17:16,359 --> 00:17:16,900
Audiencia: Aceptar.

415
00:17:16,900 --> 00:17:20,887
E entón o que pasa se, a continuación, dar-
que algunhas regras das CSS que o conflito?

416
00:17:20,887 --> 00:17:21,970
TOMAS REIMERS: Absolutamente.

417
00:17:21,970 --> 00:17:23,940
Estamos indo definitivamente
para falar sobre iso.

418
00:17:23,940 --> 00:17:31,890
Entón o que estaba a recibir
en, tamén se pode ter clases.

419
00:17:31,890 --> 00:17:36,380
Entón, imos finxir que eu tiña
tres parágrafos e I

420
00:17:36,380 --> 00:17:38,730
quería o estilo do primeiro
dous, pero non o terceiro.

421
00:17:38,730 --> 00:17:42,850
Ben, a súa primeira idea pode ser, así, eu
podería só dar o segundo un id.

422
00:17:42,850 --> 00:17:45,590
Pero non pode, porque un id,
exactamente como Allison estaba dicindo:

423
00:17:45,590 --> 00:17:47,330
ten que ser único.

424
00:17:47,330 --> 00:17:50,860
>> Entón, en vez de un id, o que
pode usar é que pode usar unha clase.

425
00:17:50,860 --> 00:17:57,880
E un class-- o que permite
cómpre facer é basicamente dicir,

426
00:17:57,880 --> 00:17:59,610
esta pertenza, como parte dun grupo.

427
00:17:59,610 --> 00:18:02,410
Neste caso, o noso grupo
chámase especial.

428
00:18:02,410 --> 00:18:06,500
E o que nós imos facer, entón, é
imos dizer-- ao contrario de libra,

429
00:18:06,500 --> 00:18:08,070
usaremos punto.

430
00:18:08,070 --> 00:18:08,740
OK?

431
00:18:08,740 --> 00:18:11,950
E teña en conta que a libra e dot
só existen dentro do arquivo CSS,

432
00:18:11,950 --> 00:18:12,797
non dentro do HTML.

433
00:18:12,797 --> 00:18:13,880
ALLISON Buchholtz-AU: Si.

434
00:18:13,880 --> 00:18:15,185
Distinción importante.

435
00:18:15,185 --> 00:18:17,510
>> TOMAS REIMERS: Eu teño
tiña tanta loita,

436
00:18:17,510 --> 00:18:23,990
porque eu coloque o hash en HTML e
entón me sentín estúpido por un longo tempo.

437
00:18:23,990 --> 00:18:27,470
Vexa como selecciona ambos
os únicos con esa clase?

438
00:18:27,470 --> 00:18:28,210
Con estilo.

439
00:18:28,210 --> 00:18:29,950
>> Agora, as cousas poden ter varias clases.

440
00:18:29,950 --> 00:18:32,790
Digamos que eu quería facer a primeira
dous teñen un fondo de amarela

441
00:18:32,790 --> 00:18:36,770
e os dous últimos teñen
unha cor de fonte de azul.

442
00:18:36,770 --> 00:18:37,270
Aceptar.

443
00:18:37,270 --> 00:18:39,735
Eu realmente non sei por que eu
quero facelo, pero eu podo.

444
00:18:39,735 --> 00:18:42,401
>> ALLISON Buchholtz-AU: non puido
recoméndase para o seu sitio web.

445
00:18:42,401 --> 00:18:43,880
Pero para os nosos propósitos, que vai facer.

446
00:18:43,880 --> 00:18:46,294
>> TOMAS REIMERS: Non é
un bo esquema de cores.

447
00:18:46,294 --> 00:18:49,210
ALLISON Buchholtz-AU: Ben, amarelo
e azul son as miñas cores do ensino medio.

448
00:18:49,210 --> 00:18:50,947
Eu non sei, con todo.

449
00:18:50,947 --> 00:18:53,530
TOMAS REIMERS: Allison de alta
escola tiña un esquema de cores grande.

450
00:18:53,530 --> 00:18:54,520
[Risas]

451
00:18:54,520 --> 00:18:59,120
Entón, o que podemos chamar iso é
Imos chamar isto-- polo que temos Especial

452
00:18:59,120 --> 00:19:00,030
e temos Pretty.

453
00:19:00,030 --> 00:19:02,405
Suxiro, por iso, use
nomes moito máis descritivos.

454
00:19:02,405 --> 00:19:05,820
ALLISON Buchholtz-AU: Si, eu faría
chamar este, como, amarelo ou azul.

455
00:19:05,820 --> 00:19:08,314
>> TOMAS REIMERS: Non somos
realmente facer un sitio real,

456
00:19:08,314 --> 00:19:09,730
é por iso que nós non estamos facendo isto.

457
00:19:09,730 --> 00:19:11,521
Pero se o
tiña un sitio real,

458
00:19:11,521 --> 00:19:16,220
pode ter, como, cabeceira artigo,
contido do artigo, primeira palabra,

459
00:19:16,220 --> 00:19:21,920
cousas dese tipo, que permiten
que sexa moito máis descritivo.

460
00:19:21,920 --> 00:19:23,550
Estes son realmente só como variables.

461
00:19:23,550 --> 00:19:28,390
Deben ser nomeados de forma onde
pode, como-- si, como tal.

462
00:19:28,390 --> 00:19:29,470
Perfecto.

463
00:19:29,470 --> 00:19:30,480
>> Así, a cor de fondo.

464
00:19:30,480 --> 00:19:35,920
E entón nós imos dizer-- de xeito que o
xeito de cambiar a cor é só "cor".

465
00:19:35,920 --> 00:19:38,412
E nós estamos indo a facelo azul.

466
00:19:38,412 --> 00:19:40,150
Iso é legal.

467
00:19:40,150 --> 00:19:42,640
Polo tanto, agora temos o
dous primeiros teñen especial.

468
00:19:42,640 --> 00:19:45,972
Preto un vai
teñen "class = bonito."

469
00:19:45,972 --> 00:19:49,180
ALLISON Buchholtz-AU: E entón vai
quere engadir "bonito" para o do medio.

470
00:19:49,180 --> 00:19:49,971
TOMAS REIMERS: Yup.

471
00:19:49,971 --> 00:19:52,970
E, a continuación, para o medio,
engadir "bonita", o que pasa

472
00:19:52,970 --> 00:19:56,880
é só ten un espazo.

473
00:19:56,880 --> 00:19:59,800
Así, o atributo de clase
é unha lista separada por espazo

474
00:19:59,800 --> 00:20:02,450
de todas as clases
que se aplican a esta marca.

475
00:20:02,450 --> 00:20:02,959
OK?

476
00:20:02,959 --> 00:20:05,750
Non é como este pertence
algún tipo de clase especial chamada

477
00:20:05,750 --> 00:20:07,180
"Especial, espazo, bonito."

478
00:20:07,180 --> 00:20:10,870
Ela pertence a dous classes--
especial e bonito.

479
00:20:10,870 --> 00:20:12,492
Si?

480
00:20:12,492 --> 00:20:14,360
Con estilo.

481
00:20:14,360 --> 00:20:17,010
>> E, a continuación, se miramos
o que pasa, estamos

482
00:20:17,010 --> 00:20:21,850
vai ver que primeiro ten
fondo amarelo, texto negro.

483
00:20:21,850 --> 00:20:22,450
Segundo um--

484
00:20:22,450 --> 00:20:26,160
>> ALLISON Buchholtz-AU: --has negra
fondo amarelo con texto azul.

485
00:20:26,160 --> 00:20:29,330
E o noso último só ten a
texto azul que lle é asignado.

486
00:20:29,330 --> 00:20:30,870
>> TOMAS REIMERS: Cool?

487
00:20:30,870 --> 00:20:32,491
Como selectores de traballar?

488
00:20:32,491 --> 00:20:32,990
Impresionante.

489
00:20:32,990 --> 00:20:34,720
>> ALLISON Buchholtz-AU: Queremos
falar do conflito agora, entón?

490
00:20:34,720 --> 00:20:35,780
>> TOMAS REIMERS: Entón, si.

491
00:20:35,780 --> 00:20:36,310
Absolutamente.

492
00:20:36,310 --> 00:20:38,380
Entón, o que pasa se
ter un conflito, non?

493
00:20:38,380 --> 00:20:44,740
Imos finxir que o primeiro
configura algo como--

494
00:20:44,740 --> 00:20:47,240
ALLISON Buchholtz-AU: Maybe
este cambia o fondo?

495
00:20:47,240 --> 00:20:48,090
TOMAS REIMERS: Yeah.

496
00:20:48,090 --> 00:20:51,699
Entón, nós imos facer "bonito"
cambiar o fondo de salmón.

497
00:20:51,699 --> 00:20:54,740
ALLISON Buchholtz-AU: Vostede é só con
todas as grandes cores hoxe, Tomas.

498
00:20:54,740 --> 00:20:55,573
TOMAS REIMERS: Yeah.

499
00:20:55,573 --> 00:20:58,200
Porque eu descubrín que podo
usar salmón como unha cor real.

500
00:20:58,200 --> 00:21:00,270
Entón, nós estamos indo só para facelo.

501
00:21:00,270 --> 00:21:01,770
Eu tamén creo que por do sol é unha cor real.

502
00:21:01,770 --> 00:21:03,103
Audiencia: Por do sol é unha cor real?

503
00:21:03,103 --> 00:21:04,572
ALLISON Buchholtz-AU: Imos tentar iso.

504
00:21:04,572 --> 00:21:07,735
TOMAS REIMERS: Tras esta demostración
só porque no caso de que el mexe-se,

505
00:21:07,735 --> 00:21:08,943
Eu non quero ser a depuración.

506
00:21:08,943 --> 00:21:11,580
Entón, nós sabemos o salmón é unha cor real.

507
00:21:11,580 --> 00:21:15,626
Así, calquera intento de
o que vai pasar?

508
00:21:15,626 --> 00:21:17,522
>> ALLISON Buchholtz-AU: Algunha idea?

509
00:21:17,522 --> 00:21:20,002
>> Audiencia: [inaudível].

510
00:21:20,002 --> 00:21:20,920
>> TOMAS REIMERS: Yeah.

511
00:21:20,920 --> 00:21:22,150
Entón tes o valor correcto.

512
00:21:22,150 --> 00:21:24,930
Basicamente, el leva o
última regra que foi dado.

513
00:21:24,930 --> 00:21:27,860
>> ALLISON Buchholtz-AU: Entón iso é
onde fervenza entrar en vigor.

514
00:21:27,860 --> 00:21:31,080
>> TOMAS REIMERS: Entón recorda como nós
tivo que CSS?

515
00:21:31,080 --> 00:21:33,660
Entón, por que, nós medio que significa
que temos unha morea de regras

516
00:21:33,660 --> 00:21:37,115
que se aplica enriba uns dos outros, e
poden tamén substituír o outro.

517
00:21:37,115 --> 00:21:39,380
>> ALLISON Buchholtz-AU: Entón
o que está máis abaixo

518
00:21:39,380 --> 00:21:41,540
substituirá o que está enriba.

519
00:21:41,540 --> 00:21:45,842
Podería ter regras que completamente
negar algo de antemán.

520
00:21:45,842 --> 00:21:48,300
Tamén é por iso que quere ser
coidado cando está nomeando,

521
00:21:48,300 --> 00:21:51,465
para que non está creando regras que
só está substituíndo completamente.

522
00:21:51,465 --> 00:21:53,340
>> TOMAS REIMERS: Ou quizais
quero substituír regras.

523
00:21:53,340 --> 00:21:53,920
>> ALLISON Buchholtz-AU: Ou que fai.

524
00:21:53,920 --> 00:21:54,300
Si.

525
00:21:54,300 --> 00:21:57,175
>> TOMAS REIMERS: Finxa que ten un
clase que se aplica a maioría das cousas,

526
00:21:57,175 --> 00:22:01,220
pero digamos que quere cambiar o
cor de fondo para o vermello e o tipo de letra

527
00:22:01,220 --> 00:22:03,140
peso para negriña para a maioría
cousas, pero para un,

528
00:22:03,140 --> 00:22:06,098
só quere a cor de fondo
a ser vermello, pero quere todos os outros

529
00:22:06,098 --> 00:22:09,990
propiedades, podería facer algo
como "font-weight = normal",

530
00:22:09,990 --> 00:22:12,760
que pasaría entón a desfacer este cambio ousada.

531
00:22:12,760 --> 00:22:14,480
Si?

532
00:22:14,480 --> 00:22:17,250
Unha vez máis, o mellor xeito, creo que
Allison dixo iso, é só práctica.

533
00:22:17,250 --> 00:22:18,080
>> ALLISON Buchholtz-AU: Experimentación.

534
00:22:18,080 --> 00:22:20,090
>> TOMAS REIMERS: Práctica, práctica,
práctica e experiencia.

535
00:22:20,090 --> 00:22:22,950
Eu coñezo unha morea de xente que pensa que
CSS é só unha morea de correo cheque palpite

536
00:22:22,950 --> 00:22:25,580
ao final do día, cando se
quere facer something-- como,

537
00:22:25,580 --> 00:22:27,663
vostede ten unha idea aproximada, pero
probablemente aínda que

538
00:22:27,663 --> 00:22:31,390
probalo para asegurarse de
Vostede sabe o que se parece.

539
00:22:31,390 --> 00:22:34,482
>> Audiencia: Cando está aplicando
clases, máis que un

540
00:22:34,482 --> 00:22:37,339
ao mesmo parágrafo
ou sección, non é

541
00:22:37,339 --> 00:22:39,505
importa que orde pode
escriba-los nas citas?

542
00:22:39,505 --> 00:22:40,992
>> TOMAS REIMERS: Non, non en todos.

543
00:22:40,992 --> 00:22:45,764
>> ALLISON Buchholtz-AU: O que importa é
a orde dentro da súa folla de estilo CSS.

544
00:22:45,764 --> 00:22:47,430
Audiencia: Vostede podería repetir a pregunta?

545
00:22:47,430 --> 00:22:50,680
TOMAS REIMERS: Oh.

546
00:22:50,680 --> 00:22:53,990
ALLISON Buchholtz-AU: dentro
clase, cando está dando clases

547
00:22:53,990 --> 00:22:56,964
a algo no HTML, fai
importa que orde están?

548
00:22:56,964 --> 00:22:58,130
Non importa a orde.

549
00:22:58,130 --> 00:23:02,915
O que importa é a orde do
selectores de clase dentro do seu CSS,

550
00:23:02,915 --> 00:23:04,306
dentro da súa folla de estilo.

551
00:23:04,306 --> 00:23:06,982
>> TOMAS REIMERS: bo son?

552
00:23:06,982 --> 00:23:08,532
>> ALLISON Buchholtz-AU: Lovely.

553
00:23:08,532 --> 00:23:11,539
>> TOMAS REIMERS: E despois
seguiremos a--

554
00:23:11,539 --> 00:23:13,330
ALLISON Buchholtz-AU:
O que temos que seguir?

555
00:23:13,330 --> 00:23:14,245
Eu esquezo.

556
00:23:14,245 --> 00:23:16,087
Oh, só temos exemplos.

557
00:23:16,087 --> 00:23:17,295
Pero nós medio que fixo aqueles.

558
00:23:17,295 --> 00:23:18,990
Fixemos exemplos en tempo real.

559
00:23:18,990 --> 00:23:20,540
>> TOMAS REIMERS: Temos que
combinar os selectores pronto.

560
00:23:20,540 --> 00:23:22,790
>> ALLISON Buchholtz-AU: Oh,
nós comezamos a combinar selectores.

561
00:23:22,790 --> 00:23:25,260
TOMAS REIMERS: Entón algúns
exemplos é que temos

562
00:23:25,260 --> 00:23:29,630
# Libra dog--, ou hashtag,
ou octothorpe, ou o que quere

563
00:23:29,630 --> 00:23:32,050
que desexa chamar isso-- afiado.

564
00:23:32,050 --> 00:23:34,875
>> ALLISON Buchholtz-AU: Can de Sharp.

565
00:23:34,875 --> 00:23:36,470
>> TOMAS REIMERS: Entón tes .pets.

566
00:23:36,470 --> 00:23:39,059

567
00:23:39,059 --> 00:23:41,600
Algo ten un id de can,
só hai un can na páxina.

568
00:23:41,600 --> 00:23:43,870
Algo ten un id
gato, hai só un gato.

569
00:23:43,870 --> 00:23:45,665
Pode haber moitos animais na páxina.

570
00:23:45,665 --> 00:23:47,570
É por iso que deu ese clases.

571
00:23:47,570 --> 00:23:48,740
Tes un exemplo de p.

572
00:23:48,740 --> 00:23:50,490
E, a continuación, así que un dos
último exemplo, onde

573
00:23:50,490 --> 00:23:53,790
é algo que nós non falamos,
é o que ocorre cando combina-los.

574
00:23:53,790 --> 00:23:54,580
Entón p.pets.

575
00:23:54,580 --> 00:23:57,510

576
00:23:57,510 --> 00:24:02,950
>> Entón, para iso, imos voltar para o
código e introducir another-- si.

577
00:24:02,950 --> 00:24:04,290
Entón, de volta aquí.

578
00:24:04,290 --> 00:24:04,850
>> ALLISON Buchholtz-AU: I
sinto que este é realmente--

579
00:24:04,850 --> 00:24:08,105
como só mirando a través de exemplos
é realmente o camiño para aprender iso.

580
00:24:08,105 --> 00:24:09,360
Entón é iso que estamos facendo.

581
00:24:09,360 --> 00:24:14,030
>> TOMAS REIMERS: Entón, imos finxir que
só quere para seleccionar o texto 2, non?

582
00:24:14,030 --> 00:24:16,530
Entón, nós definitivamente non pode
facelo cun id.

583
00:24:16,530 --> 00:24:19,620
Ben, nós poderíamos facelo cun
ID, pero non ten un ID.

584
00:24:19,620 --> 00:24:22,490
Eu podería engadir un, pero imos finxir
que eu non quero engadir unha

585
00:24:22,490 --> 00:24:24,910
ou que xa ten outra cousa.

586
00:24:24,910 --> 00:24:26,516
Eu non podo facelo con iso.

587
00:24:26,516 --> 00:24:28,870
A etiqueta non é sempre orixinal, verdade?

588
00:24:28,870 --> 00:24:30,670
E nin é a clase.

589
00:24:30,670 --> 00:24:32,314
Pero pode combinar estas cousas.

590
00:24:32,314 --> 00:24:35,230
Imos dicir que quería facer algo
que só se aplica a cousas que

591
00:24:35,230 --> 00:24:39,420
ten a clase especial e
que teñen a clase fermosa.

592
00:24:39,420 --> 00:24:48,150
>> Entón, o que pode facer é en main.css,
pode dicir, imos primeiro eliminar esta.

593
00:24:48,150 --> 00:24:50,240
Pode combina-las.

594
00:24:50,240 --> 00:24:51,430
Así que pode facer .Especial.

595
00:24:51,430 --> 00:24:52,110
Non hai espazo.

596
00:24:52,110 --> 00:24:54,770
Só .special.pretty.

597
00:24:54,770 --> 00:25:00,550
O que isto significa é algo
que é tanto especial e bonito.

598
00:25:00,550 --> 00:25:01,900
Isto ten sentido?

599
00:25:01,900 --> 00:25:04,190
E se somos aquí, o que
vai ver

600
00:25:04,190 --> 00:25:09,734
é esta regra só se aplica ao
segundo, que ten dous.

601
00:25:09,734 --> 00:25:11,400
E pode facelo por unha morea de cousas.

602
00:25:11,400 --> 00:25:13,270
Pode dizer-- imos
finxir que eu só quería

603
00:25:13,270 --> 00:25:18,300
para facer as cousas que teñen a clase moi
e que tamén son unha marca de parágrafo.

604
00:25:18,300 --> 00:25:19,920
Entón p.pretty.

605
00:25:19,920 --> 00:25:23,585
Imos finxir que eu tiña
algo bonito no corpo tag.

606
00:25:23,585 --> 00:25:25,850
OK?

607
00:25:25,850 --> 00:25:28,490
Eu podo correr ese e eu
pode ver que el só é

608
00:25:28,490 --> 00:25:32,720
vai aplicarse a cousas que son
parágrafos coa clase fermosa.

609
00:25:32,720 --> 00:25:35,650
E pode combina-las,
basicamente, como moitos como quere.

610
00:25:35,650 --> 00:25:38,580
Así, pode simplemente poñer-los xuntos.

611
00:25:38,580 --> 00:25:39,604
Isto ten sentido?

612
00:25:39,604 --> 00:25:41,770
ALLISON Buchholtz-AU: Entón
este tipo de é máis útil

613
00:25:41,770 --> 00:25:45,490
cando, Tomas estaba dicindo antes, quizais
ten un sitio moi complicado,

614
00:25:45,490 --> 00:25:48,050
e xa ten unha morea
destas normas escritas,

615
00:25:48,050 --> 00:25:51,170
e só precisa
combinar dous de antes.

616
00:25:51,170 --> 00:25:55,350
Como en vez de escribir un enteiro
novo selector e mudalo alí,

617
00:25:55,350 --> 00:25:58,592
pode só combinar
Los onde se superpón.

618
00:25:58,592 --> 00:26:00,670
>> TOMAS REIMERS: Ou
pode atopar out-- veces

619
00:26:00,670 --> 00:26:04,290
hai unha clase que
fai a cor do tipo de letra como azul,

620
00:26:04,290 --> 00:26:06,740
e hai outra clase que
fai que o fondo azul.

621
00:26:06,740 --> 00:26:07,840
E iso simplemente non vai funcionar.

622
00:26:07,840 --> 00:26:10,924
Entón escribe un caso especial, onde,
como-- pero se ten ambos, o que está

623
00:26:10,924 --> 00:26:13,548
imos facer é que vai
fan deste un ese ton de azul

624
00:26:13,548 --> 00:26:15,310
e este estoutro ton de azul.

625
00:26:15,310 --> 00:26:15,580
Non?

626
00:26:15,580 --> 00:26:17,955
>> ALLISON Buchholtz-AU: Bo
para estes tipos de excepcións.

627
00:26:17,955 --> 00:26:21,220
TOMAS REIMERS: Entón, para
pensar sobre os problemas

628
00:26:21,220 --> 00:26:25,000
que pode xurdir cando combina-los.

629
00:26:25,000 --> 00:26:27,020
Con estilo.

630
00:26:27,020 --> 00:26:29,692
Entón, de volta para a nosa presentación.

631
00:26:29,692 --> 00:26:31,400
ALLISON Buchholtz-AU:
Estamos case alí.

632
00:26:31,400 --> 00:26:34,022
TOMAS REIMERS: E
deixou de conexión.

633
00:26:34,022 --> 00:26:36,494
ALLISON Buchholtz-AU: Oh, non.

634
00:26:36,494 --> 00:26:39,125
ALLISON Buchholtz-AU: CS en
a oficina, internet vai para abaixo.

635
00:26:39,125 --> 00:26:40,360
Oh, a ironía.

636
00:26:40,360 --> 00:26:45,620
>> TOMAS REIMERS: Entón, por sorte, podemos
presentar sen a internet, eu creo,

637
00:26:45,620 --> 00:26:47,380
porque temos todo diapositivas aquí.

638
00:26:47,380 --> 00:26:49,304
Entón, imos falar sobre a
relación de etiquetas.

639
00:26:49,304 --> 00:26:50,470
ALLISON Buchholtz-AU: Correcto.

640
00:26:50,470 --> 00:26:52,660
Así, só unha especie de ir
fóra do que Tomas dixo:

641
00:26:52,660 --> 00:26:54,180
esta é só outra forma de facelo.

642
00:26:54,180 --> 00:26:57,840
Polo tanto, temos algúns pais
selector cun selector de neno.

643
00:26:57,840 --> 00:27:02,815
Así, neste exemplo aquí, temos algúns
corpo cunha barra de navegación clase, botón de clase.

644
00:27:02,815 --> 00:27:03,315
Ah.

645
00:27:03,315 --> 00:27:03,990
>> TOMAS REIMERS: Oh, desculpe.

646
00:27:03,990 --> 00:27:06,180
>> ALLISON Buchholtz-AU: E
Basicamente, o que isto significa

647
00:27:06,180 --> 00:27:11,070
é seleccionar todos os nenos, como
todos estes tipos de selectores,

648
00:27:11,070 --> 00:27:13,040
dentro deste selector de matriz.

649
00:27:13,040 --> 00:27:16,004
E estes son os únicos
el nunca vai se aplican.

650
00:27:16,004 --> 00:27:17,755
Eu non sei se
ten un xeito mellor de--

651
00:27:17,755 --> 00:27:19,504
TOMAS REIMERS: Entón eu
creo que a forma de pensar

652
00:27:19,504 --> 00:27:22,440
sobre iso é lembrar como antes
que tipo de como poñer-los xuntos.

653
00:27:22,440 --> 00:27:26,340
E, a continuación, isto significa que un elemento
que corresponde a todos estes.

654
00:27:26,340 --> 00:27:29,530
O que isto quere dicir é, eu
quero vostede para combinar con todo

655
00:27:29,530 --> 00:27:33,220
dentro some-- Quero
Lo a atopar un selector.

656
00:27:33,220 --> 00:27:35,670
E, a continuación, dentro diso, quero
vostede para combinar con cousas novas.

657
00:27:35,670 --> 00:27:36,170
Non?

658
00:27:36,170 --> 00:27:40,900
Así, en CSS, é todo sobre tipo de
ser capaz de combinar estes elementos.

659
00:27:40,900 --> 00:27:43,050
E pode tentar igualar
elementos dentro de outros elementos.

660
00:27:43,050 --> 00:27:46,510
>> Entón imos realmente facer un exemplo,
e pensamos que vai aclarar.

661
00:27:46,510 --> 00:27:53,090
Entón, imos finxir que temos de especial,
especial fermosa, que sexa.

662
00:27:53,090 --> 00:27:55,690
E entón temos unha conexión, OK?

663
00:27:55,690 --> 00:27:59,780

664
00:27:59,780 --> 00:28:02,370
Entón lembre, un é un enlace.

665
00:28:02,370 --> 00:28:03,900
El non vai a sitio ningún.

666
00:28:03,900 --> 00:28:11,500
E nós imos dar-lle
a ligazón da clase, eu creo.

667
00:28:11,500 --> 00:28:13,335
Imos darlle o
class-- darme unha idea.

668
00:28:13,335 --> 00:28:14,460
ALLISON Buchholtz-AU: Cool.

669
00:28:14,460 --> 00:28:16,420
TOMAS REIMERS: Coo-- imos
ir a clase fermosa.

670
00:28:16,420 --> 00:28:16,930
Por que non?

671
00:28:16,930 --> 00:28:17,971
>> ALLISON Buchholtz-AU: Aceptar.

672
00:28:17,971 --> 00:28:23,040
TOMAS REIMERS: So
cousas agora bonitas

673
00:28:23,040 --> 00:28:26,000
está indo a facer o fondo
azul, cor de fondo de salmón.

674
00:28:26,000 --> 00:28:27,969
Isto ten sentido.

675
00:28:27,969 --> 00:28:28,760
E se facemos isto--

676
00:28:28,760 --> 00:28:29,620
>> ALLISON Buchholtz-AU:
Quere engadir texto

677
00:28:29,620 --> 00:28:31,078
de xeito que o hyperlink realmente aparece?

678
00:28:31,078 --> 00:28:35,088
TOMAS REIMERS: Que
sería unha boa pedida.

679
00:28:35,088 --> 00:28:37,921
ALLISON Buchholtz-AU: Por dereita
agora estamos só vai conseguir nada.

680
00:28:37,921 --> 00:28:39,690
TOMAS REIMERS: Entón este é un enlace.

681
00:28:39,690 --> 00:28:42,202
"Este é un enlace."

682
00:28:42,202 --> 00:28:45,820
Ah, e iso vai
para ser máis un enlace.

683
00:28:45,820 --> 00:28:47,280
Imos darlle a clase "cool".

684
00:28:47,280 --> 00:28:50,295
Está certo.

685
00:28:50,295 --> 00:28:50,795
Con estilo.

686
00:28:50,795 --> 00:28:53,590

687
00:28:53,590 --> 00:28:56,010
Entón, agora imos incorporarse iso.

688
00:28:56,010 --> 00:28:57,269
Nós imos publicar un.

689
00:28:57,269 --> 00:28:59,060
Temos un no
tag especial, e nós tamén

690
00:28:59,060 --> 00:29:01,150
van ter un na etiqueta fermosa.

691
00:29:01,150 --> 00:29:05,449
E agora o que imos
facer é que imos facer cool--

692
00:29:05,449 --> 00:29:06,490
que é o que quere que faga?

693
00:29:06,490 --> 00:29:10,347

694
00:29:10,347 --> 00:29:12,180
ALLISON Buchholtz-AU:
Podemos facelo máis grande?

695
00:29:12,180 --> 00:29:13,800
TOMAS REIMERS: Imos darlle un borde.

696
00:29:13,800 --> 00:29:14,840
ALLISON Buchholtz-AU: Poderiamos fronteira.

697
00:29:14,840 --> 00:29:15,673
TOMAS REIMERS: Yeah.

698
00:29:15,673 --> 00:29:18,560
Entón, imos facer algo
como, é-- fronteira e estamos

699
00:29:18,560 --> 00:29:20,971
vai explicar todo isto nun segundo.

700
00:29:20,971 --> 00:29:21,470
Por enquanto--

701
00:29:21,470 --> 00:29:24,592
>> ALLISON Buchholtz-AU: Para o modelo de caixa.

702
00:29:24,592 --> 00:29:27,300
TOMAS REIMERS: Pero, polo de agora, estamos
só vai darlle un borde.

703
00:29:27,300 --> 00:29:29,580
Entón, o que isto significa é que está
vai ver estes enlaces.

704
00:29:29,580 --> 00:29:32,788
E vai ver que eles teñen
estes, como, bordos negras feas, que

705
00:29:32,788 --> 00:29:33,820
é legal.

706
00:29:33,820 --> 00:29:34,500
>> ALLISON Buchholtz-AU:
O noso sitio é tan fermosa.

707
00:29:34,500 --> 00:29:35,333
>> TOMAS REIMERS: Yeah.

708
00:29:35,333 --> 00:29:38,930
O noso sitio é incrible.

709
00:29:38,930 --> 00:29:41,585
Entón, eses dous son ligazóns, e aparecen.

710
00:29:41,585 --> 00:29:44,160
Agora imos finxir que eu
só quería facelo

711
00:29:44,160 --> 00:29:50,072
se non fose algo dentro
que tiña un fondo de salmón.

712
00:29:50,072 --> 00:29:52,280
Entón recorda que este
ten un fondo de salmón,

713
00:29:52,280 --> 00:29:54,000
porque é de clase fermosa.

714
00:29:54,000 --> 00:29:59,777
>> Pero queremos dicir que só arrefría
que están en clase especial, e non en clase

715
00:29:59,777 --> 00:30:02,890
fermosa, debe ter esa fronteira.

716
00:30:02,890 --> 00:30:12,549
Ben, o que pode facer que é
pódese dicir, .Especial, espazo, .cool.

717
00:30:12,549 --> 00:30:15,590
E o que está facendo, cando pensa
sobre iso, é que é basicamente dicindo:

718
00:30:15,590 --> 00:30:19,530
OK, atopar-me todo
que corresponde especial.

719
00:30:19,530 --> 00:30:24,104
Entón, dentro destas marcas, atopar
me todo o que é legal.

720
00:30:24,104 --> 00:30:27,270
ALLISON Buchholtz-AU: Entón, outra forma
que pode ser bo para pensar sobre iso,

721
00:30:27,270 --> 00:30:29,810
trae-lo de volta para C, é
así como a idea de alcance.

722
00:30:29,810 --> 00:30:34,020
Entón, cando ten algún
selector, como os

723
00:30:34,020 --> 00:30:38,460
que temos benvida a traballar para, antes diso,
toda a súa páxina web, todo o seu HTML

724
00:30:38,460 --> 00:30:40,180
está dentro do seu ámbito de aplicación, non?

725
00:30:40,180 --> 00:30:43,090
Pero cando temos estes
relacións pai-fillo,

726
00:30:43,090 --> 00:30:47,130
é como se está estreitando onde
está mirando para un lugar específico,

727
00:30:47,130 --> 00:30:50,540
como se, como, nós estamos mirando para dentro
unha función específica no canto

728
00:30:50,540 --> 00:30:52,007
de todo o noso arquivo.

729
00:30:52,007 --> 00:30:55,090
Audiencia: Entón, con iso en mente, sería
que importaba se tivésemos changed--

730
00:30:55,090 --> 00:30:56,423
ALLISON Buchholtz-AU: A orde?

731
00:30:56,423 --> 00:30:59,320
Audiencia: -o clase en CSS
para .cool, espazo, .Especial?

732
00:30:59,320 --> 00:31:01,153
ALLISON Buchholtz-AU:
Si, porque entón que

733
00:31:01,153 --> 00:31:04,420
diría, o alcance para
todo o que ten legal,

734
00:31:04,420 --> 00:31:07,235
e, a continuación ollar para o que has--
Quero dicir, como neste caso,

735
00:31:07,235 --> 00:31:08,860
Eu non creo que tería cambiado.

736
00:31:08,860 --> 00:31:10,318
>> TOMAS REIMERS: Se tivésemos dixo o que?

737
00:31:10,318 --> 00:31:10,906
Sentímolo.

738
00:31:10,906 --> 00:31:12,660
>> ALLISON Buchholtz-AU: Se nós
alcance o arrefriar e logo,

739
00:31:12,660 --> 00:31:14,550
mirar para as cousas de especial,
sería o mesmo, en realidade.

740
00:31:14,550 --> 00:31:16,260
>> TOMAS REIMERS: Entón non sería.

741
00:31:16,260 --> 00:31:16,590
>> ALLISON Buchholtz-AU: El non estaba?

742
00:31:16,590 --> 00:31:17,590
Oh, oh ben.

743
00:31:17,590 --> 00:31:18,090
Estou errado.

744
00:31:18,090 --> 00:31:21,480
>> TOMAS REIMERS: Entón, a razón
é diferente-- mistake-- común

745
00:31:21,480 --> 00:31:27,140
é que agora só
a ligazón ten legal, non?

746
00:31:27,140 --> 00:31:32,176
Eu creo que a miña pregunta para vós é,
o que nesta páxina son acompañadas por .cool?

747
00:31:32,176 --> 00:31:35,984

748
00:31:35,984 --> 00:31:38,340
Existen dúas marcas aquí, non?

749
00:31:38,340 --> 00:31:39,770
Cal é este e este.

750
00:31:39,770 --> 00:31:40,590
Ambos corresponder legal.

751
00:31:40,590 --> 00:31:42,200
Nada máis fai.

752
00:31:42,200 --> 00:31:46,460
Entón, se dixo, .cool, espazo,
.Especial, O que vai dicir é:

753
00:31:46,460 --> 00:31:48,824
dentro destas marcas, o que é especial?

754
00:31:48,824 --> 00:31:49,865
ALLISON Buchholtz-AU: Hm.

755
00:31:49,865 --> 00:31:51,800
Iso é o que ele-- dereita.

756
00:31:51,800 --> 00:31:52,310
Porque é como só algo aquí.

757
00:31:52,310 --> 00:31:53,310
>> TOMAS REIMERS: El selecciona nada.

758
00:31:53,310 --> 00:31:56,530
>> ALLISON Buchholtz-AU: Considerando que con
especial, estamos dentro destas marcas aquí.

759
00:31:56,530 --> 00:31:57,971
>> TOMAS REIMERS: Aqueles e aquelas.

760
00:31:57,971 --> 00:31:58,512
Audiencia: Aceptar.

761
00:31:58,512 --> 00:31:58,920
Entón, estas etiquetas da barra normal?

762
00:31:58,920 --> 00:31:59,740
>> TOMAS REIMERS: Si.

763
00:31:59,740 --> 00:32:01,150
Isto ten sentido?

764
00:32:01,150 --> 00:32:03,685
Como é basicamente
intentando restrinxir o seu ámbito.

765
00:32:03,685 --> 00:32:04,810
ALLISON Buchholtz-AU: Yeah.

766
00:32:04,810 --> 00:32:06,870
Creo que esta é probablemente a
xeito máis doado de pensar niso.

767
00:32:06,870 --> 00:32:09,270
>> TOMAS REIMERS: Entón, cremos isto, e
atopamos este tanto combinado especial.

768
00:32:09,270 --> 00:32:11,400
E entón nós estamos pedindo, no prazo de
estes faces, o que é legal?

769
00:32:11,400 --> 00:32:12,941
E dentro deste, este fresco.

770
00:32:12,941 --> 00:32:14,500
Dentro deste, nada é legal.

771
00:32:14,500 --> 00:32:16,250
Polo tanto, esta é a única marca que permanece.

772
00:32:16,250 --> 00:32:20,112
>> ALLISON Buchholtz-AU: Considerando legal
é só dentro destas marcas de alí.

773
00:32:20,112 --> 00:32:21,070
TOMAS REIMERS: Exactamente.

774
00:32:21,070 --> 00:32:22,403
E o que hai de especial nas que son?

775
00:32:22,403 --> 00:32:22,930
Nada.

776
00:32:22,930 --> 00:32:25,270
Agora, o que eu vou dicir é
se non houbese espazo,

777
00:32:25,270 --> 00:32:29,880
está pregunta o que é legal e especial--
ou o que é fermoso e especial, non?

778
00:32:29,880 --> 00:32:35,370
Se digo .special.pretty, iso é
o mesmo que .pretty.special.

779
00:32:35,370 --> 00:32:39,220
>> Xa que a eliminación do espazo é
pregunta é, cando di .Especial,

780
00:32:39,220 --> 00:32:40,970
está pedindo, OK,
cales son especiais?

781
00:32:40,970 --> 00:32:43,780
E, a continuación, os que,
queridos tamén son bonitas,

782
00:32:43,780 --> 00:32:47,010
que é o mesmo, gramaticalmente,
como pregunta, o que é moi,

783
00:32:47,010 --> 00:32:49,500
e despois deles, o que tamén é especial?

784
00:32:49,500 --> 00:32:50,000
Non?

785
00:32:50,000 --> 00:32:53,099
É a diferenza de
o que está dentro do que é.

786
00:32:53,099 --> 00:32:53,640
Audiencia: Aceptar.

787
00:32:53,640 --> 00:32:54,473
TOMAS REIMERS: Yeah.

788
00:32:54,473 --> 00:32:56,670

789
00:32:56,670 --> 00:32:58,030
Impresionante.

790
00:32:58,030 --> 00:33:00,426
Entón, con iso en mente entăo--

791
00:33:00,426 --> 00:33:01,800
>> ALLISON Buchholtz-AU: Creo que a nosa última
cousa é (en Fancy BRITISH Accent)

792
00:33:01,800 --> 00:33:02,510
o modelo de caixa.

793
00:33:02,510 --> 00:33:05,992
>> TOMAS REIMERS: O box-- [Risas]
Eu amo o xeito Allison di que.

794
00:33:05,992 --> 00:33:06,950
Así, a cousa modelo de caixa.

795
00:33:06,950 --> 00:33:09,644
>> ALLISON Buchholtz-AU: Só ten que ter
unha caixa, eu vou ser o seu modelo de caixa.

796
00:33:09,644 --> 00:33:11,310
TOMAS REIMERS: Entón imos falar sobre iso.

797
00:33:11,310 --> 00:33:14,070
Entón, agora gastamos unha morea
tempo falando selectores.

798
00:33:14,070 --> 00:33:16,944
Ata agora, vostedes son, probablemente, como,
mestres da selectors-- sabe,

799
00:33:16,944 --> 00:33:21,510
como seleccionar exactamente o contido que
quere manipular na súa pantalla.

800
00:33:21,510 --> 00:33:24,740
>> Entón, agora a cuestión é, como
exactamente pode manipula-lo?

801
00:33:24,740 --> 00:33:27,010
Entón eu creo que o máis básico
forma de pensar sobre iso

802
00:33:27,010 --> 00:33:30,294
é, así, o que exactamente
é un elemento en CSS?

803
00:33:30,294 --> 00:33:32,585
Nós pasamos moito tempo
falando, o que é unha etiqueta,

804
00:33:32,585 --> 00:33:36,140
ou o que é o máis básico
representación dunha etiqueta?

805
00:33:36,140 --> 00:33:39,870

806
00:33:39,870 --> 00:33:45,170
>> Unha boa forma de pensar sobre
é dicir, o que forma é salmón?

807
00:33:45,170 --> 00:33:47,295
Que forma é, tipo, a
de cor salmón fondo?

808
00:33:47,295 --> 00:33:47,880
>> Audiencia: É un rectángulo.

809
00:33:47,880 --> 00:33:49,040
>> TOMAS REIMERS: É un rectángulo, non?

810
00:33:49,040 --> 00:33:50,956
>> ALLISON Buchholtz-AU:
Non era unha pregunta capciosa.

811
00:33:50,956 --> 00:33:51,870
[Risas]

812
00:33:51,870 --> 00:33:54,670
>> TOMAS REIMERS: Non tentar
para enganar vós esta tarde.

813
00:33:54,670 --> 00:33:57,510
Entón temos este rectángulo.

814
00:33:57,510 --> 00:33:59,140
E a marca é unha p, non?

815
00:33:59,140 --> 00:34:02,280
Así que nos dá bo
crenza de que o parágrafo

816
00:34:02,280 --> 00:34:07,440
é representado como un rectángulo, en
menos na mente do navegador, que

817
00:34:07,440 --> 00:34:08,715
ela é.

818
00:34:08,715 --> 00:34:11,423
>> ALLISON Buchholtz-AU: É dicir,
navegadores son tipicamente rectangular,

819
00:34:11,423 --> 00:34:13,440
por iso ten sentido.

820
00:34:13,440 --> 00:34:18,750
>> TOMAS REIMERS: A idea aquí é
que todas as etiquetas dentro do CSS

821
00:34:18,750 --> 00:34:21,790
son representados como un rectángulo.

822
00:34:21,790 --> 00:34:25,699
E cada rectángulo ten catro
pezas segundo CSS, OK?

823
00:34:25,699 --> 00:34:27,830
Ten o contido real.

824
00:34:27,830 --> 00:34:29,644
É alí onde o texto se atopa.

825
00:34:29,644 --> 00:34:30,470
>> ALLISON Buchholtz-AU:
Quizais a súa imaxe.

826
00:34:30,470 --> 00:34:31,303
>> TOMAS REIMERS: Yeah.

827
00:34:31,303 --> 00:34:33,860
Tes estofo, que é
só algún tipo de espazo en branco.

828
00:34:33,860 --> 00:34:35,085
Entón tes un borde.

829
00:34:35,085 --> 00:34:37,710
E entón tes marxe, que
é o espazo en branco fóra desa.

830
00:34:37,710 --> 00:34:39,460
Entón, iso non ten sentido
a ninguén, polo que estamos

831
00:34:39,460 --> 00:34:42,500
vou falar sobre iso por un segundo.

832
00:34:42,500 --> 00:34:47,570
Entón, aquí, o que imos facer
é que imos crear algunhas divs, OK?

833
00:34:47,570 --> 00:34:48,420
Desculpe-me cando I--

834
00:34:48,420 --> 00:34:51,506
>> ALLISON Buchholtz-AU: Síntome como
debemos poñer unha imaxe bonito en.

835
00:34:51,506 --> 00:34:52,520
>> TOMAS REIMERS: Nós definitivamente debería.

836
00:34:52,520 --> 00:34:53,389
>> ALLISON Buchholtz-AU:
Eu sinto que todo o mundo

837
00:34:53,389 --> 00:34:54,870
podería beneficiarse dun
imaxe bonito, é todo.

838
00:34:54,870 --> 00:34:56,774
>> TOMAS REIMERS: Podemos
todo o beneficio de a--

839
00:34:56,774 --> 00:34:57,648
>> Audiencia: Si, con certeza.

840
00:34:57,648 --> 00:34:58,790
TOMAS REIMERS: OK, legal.

841
00:34:58,790 --> 00:35:02,254
Así, debemos poñer un bonito
imaxe en algún lugar.

842
00:35:02,254 --> 00:35:05,295
ALLISON Buchholtz-AU: Eu me sinto como un
coello bonito pode ser útil agora.

843
00:35:05,295 --> 00:35:06,190
TOMAS REIMERS: Claro.

844
00:35:06,190 --> 00:35:06,950
ALLISON Buchholtz-AU: Fin da semana.

845
00:35:06,950 --> 00:35:07,390
Ten algo adorab--

846
00:35:07,390 --> 00:35:08,520
>> TOMAS REIMERS: Que tal un gatinho?

847
00:35:08,520 --> 00:35:09,220
>> ALLISON Buchholtz-AU:
Un gatinho funciona tamén.

848
00:35:09,220 --> 00:35:11,300
>> TOMAS REIMERS: Cool, porque
hai un sitio para iso.

849
00:35:11,300 --> 00:35:12,300
Chámase PlaceKitten.

850
00:35:12,300 --> 00:35:14,719
ALLISON Buchholtz-AU: Isto é óptimo.

851
00:35:14,719 --> 00:35:15,510
TOMAS REIMERS: Si.

852
00:35:15,510 --> 00:35:18,040
ALLISON Buchholtz-AU: Just for, como,
imaxes de espazo reservado na súa páxina web.

853
00:35:18,040 --> 00:35:18,914
TOMAS REIMERS: Hum-hum.

854
00:35:18,914 --> 00:35:21,520
Hai tamén PlacePuppy.

855
00:35:21,520 --> 00:35:22,832
E hai PlaceBacon.

856
00:35:22,832 --> 00:35:24,340
>> ALLISON Buchholtz-AU: PlaceBacon?

857
00:35:24,340 --> 00:35:25,350
Realmente?

858
00:35:25,350 --> 00:35:28,190
>> TOMAS REIMERS: Oh, nós non
teñen acceso a Internet aquí.

859
00:35:28,190 --> 00:35:29,875
>> ALLISON Buchholtz-AU: [xeme]

860
00:35:29,875 --> 00:35:30,375
Tráxico.

861
00:35:30,375 --> 00:35:32,333
TOMAS REIMERS: Se non,
Quere amosar para vós

862
00:35:32,333 --> 00:35:33,870
como poñer imaxes no seu sitio web.

863
00:35:33,870 --> 00:35:36,370
Nós imos tratar de facer que esta
traballar antes temos que ir.

864
00:35:36,370 --> 00:35:38,660
Pero, de momento, estamos só
vai falar en cores, a continuación.

865
00:35:38,660 --> 00:35:39,820
Queremos poñer fotos de kittens--

866
00:35:39,820 --> 00:35:40,210
>> ALLISON Buchholtz-AU: Nós fixemos.

867
00:35:40,210 --> 00:35:43,110
>> TOMAS REIMERS: -o de internet
para abaixo para o momento de ser.

868
00:35:43,110 --> 00:35:47,820
Polo tanto, temos dúas divs, e estamos
vai darlles dous IDs.

869
00:35:47,820 --> 00:35:51,380

870
00:35:51,380 --> 00:35:56,760
Imos chamalo
"Primeira" e "segunda".

871
00:35:56,760 --> 00:36:01,184
Entón id = "primeiro".

872
00:36:01,184 --> 00:36:02,850
E nós imos darlles dúas cores.

873
00:36:02,850 --> 00:36:08,424
Entón, como imos seleccionar algo
cun id de "primeiro"?

874
00:36:08,424 --> 00:36:09,840
ALLISON Buchholtz-AU: Dot ou de hash?

875
00:36:09,840 --> 00:36:10,730
Audiencia: Sharp.

876
00:36:10,730 --> 00:36:12,940
TOMAS REIMERS: Sharp, perfecto.

877
00:36:12,940 --> 00:36:14,950
Afiado, haxix, o que quere nós--

878
00:36:14,950 --> 00:36:15,680
>> ALLISON Buchholtz-AU:
Moitas cousas para chamalo.

879
00:36:15,680 --> 00:36:16,430
>> TOMAS REIMERS: Aceptar.

880
00:36:16,430 --> 00:36:19,800
Nós imos resolver hashtag, e
iso é o que nós estamos indo a ir con el.

881
00:36:19,800 --> 00:36:20,300
OK?

882
00:36:20,300 --> 00:36:20,735
>> ALLISON Buchholtz-AU: hashtag.

883
00:36:20,735 --> 00:36:22,340
>> TOMAS REIMERS: Entón hashtag do primeiro.

884
00:36:22,340 --> 00:36:24,506
>> ALLISON Buchholtz-AU: Entón
pode twittar a seminar--

885
00:36:24,506 --> 00:36:27,582
hashtag CSS, hashtag legal.

886
00:36:27,582 --> 00:36:29,040
TOMAS REIMERS: hashtag awesomeness.

887
00:36:29,040 --> 00:36:30,730
ALLISON Buchholtz-AU:
Hashtag awesomeness, si.

888
00:36:30,730 --> 00:36:31,480
TOMAS REIMERS: Aceptar.

889
00:36:31,480 --> 00:36:33,660
Entón temos "primeira" e "segunda".

890
00:36:33,660 --> 00:36:37,697
Entón, primeiro, nós imos ter
unha cor de fondo do vermello.

891
00:36:37,697 --> 00:36:39,030
ALLISON Buchholtz-AU: Uh, colon.

892
00:36:39,030 --> 00:36:40,281
TOMAS REIMERS: Yup.

893
00:36:40,281 --> 00:36:42,281
ALLISON Buchholtz-AU:
Eu vou ser a súa casa-Checker.

894
00:36:42,281 --> 00:36:43,960
TOMAS REIMERS: Allison me pegou.

895
00:36:43,960 --> 00:36:45,830
Background-color de blue--

896
00:36:45,830 --> 00:36:46,810
>> TOMAS REIMERS: Purple!

897
00:36:46,810 --> 00:36:47,726
>> TOMAS REIMERS: Purple.

898
00:36:47,726 --> 00:36:48,830
ALLISON Buchholtz-AU: Si.

899
00:36:48,830 --> 00:36:50,630
Purple miña cor favorita,
e nós non usei aínda.

900
00:36:50,630 --> 00:36:51,546
>> TOMAS REIMERS: Violet.

901
00:36:51,546 --> 00:36:53,361
ALLISON Buchholtz-AU: Violet.

902
00:36:53,361 --> 00:36:53,860
Isto funciona.

903
00:36:53,860 --> 00:36:56,482

904
00:36:56,482 --> 00:36:59,880
>> TOMAS REIMERS: Entón, nós estamos
terá dúas divs.

905
00:36:59,880 --> 00:37:01,654
Van estar totalmente baleiro.

906
00:37:01,654 --> 00:37:03,070
Nós probablemente debe ter algún texto.

907
00:37:03,070 --> 00:37:05,580

908
00:37:05,580 --> 00:37:09,815
Así, "en primeiro lugar" será "OLA".

909
00:37:09,815 --> 00:37:10,940
E o "segundo" vai dizer--

910
00:37:10,940 --> 00:37:11,110
>> ALLISON Buchholtz-AU: Adeus.

911
00:37:11,110 --> 00:37:12,514
>> Audiencia: - "mundo".

912
00:37:12,514 --> 00:37:14,122
Ola, adeus.

913
00:37:14,122 --> 00:37:16,580
ALLISON Buchholtz-AU: Vin
Los xuntos a outra semana.

914
00:37:16,580 --> 00:37:17,705
TOMAS REIMERS: Os Beatles?

915
00:37:17,705 --> 00:37:20,242
ALLISON Buchholtz-AU: Para reais.

916
00:37:20,242 --> 00:37:21,200
Eles non son tan grandes.

917
00:37:21,200 --> 00:37:24,084

918
00:37:24,084 --> 00:37:24,750
Eu non me gusta diso.

919
00:37:24,750 --> 00:37:26,060
>> TOMAS REIMERS: Temos
"OLA" e "adeus".

920
00:37:26,060 --> 00:37:29,102
E, de novo, CSS é simplemente fantástico,
porque recoñece as nosas cores.

921
00:37:29,102 --> 00:37:30,810
Non precisa aínda
se preocupe que existen.

922
00:37:30,810 --> 00:37:33,194
Eles fan.

923
00:37:33,194 --> 00:37:35,130
>> ALLISON Buchholtz-AU: Eles existen.

924
00:37:35,130 --> 00:37:39,560
>> TOMAS REIMERS: Entón, eu creo que ten CSS
255 palabras para falar da cor.

925
00:37:39,560 --> 00:37:42,986
Se pode pensar nunha cor fóra
os 255, como, eu vou estar impresionado.

926
00:37:42,986 --> 00:37:44,110
ALLISON Buchholtz-AU: Yeah.

927
00:37:44,110 --> 00:37:45,560
Creo que vostedes poden ter
acaba de chegar pronto despois.

928
00:37:45,560 --> 00:37:47,727
>> TOMAS REIMERS: Entón, aquí,
verás que temos dúas caixas

929
00:37:47,727 --> 00:37:49,143
dereito enriba uns dos outros, non?

930
00:37:49,143 --> 00:37:50,200
OLA e adeus.

931
00:37:50,200 --> 00:37:51,460
>> ALLISON Buchholtz-AU:
Non hai ningún espazo entre elas.

932
00:37:51,460 --> 00:37:53,390
Están só smooshed
dereito enriba do outro.

933
00:37:53,390 --> 00:37:55,973
>> TOMAS REIMERS: Entón o primeiro
Creo que debemos falar

934
00:37:55,973 --> 00:38:02,960
é imos tamén dizer-- si.

935
00:38:02,960 --> 00:38:08,020
Entón CSS representa-los como unha especie de caixas.

936
00:38:08,020 --> 00:38:10,100
E, como caixas, eles teñen contido.

937
00:38:10,100 --> 00:38:14,540
E o contido agora é unha especie de
o OLA ou o adeus E iso.

938
00:38:14,540 --> 00:38:15,040
OK?

939
00:38:15,040 --> 00:38:19,790
>> Así, unha das primeiras cousas que
pode facer é que podes engadir recheo.

940
00:38:19,790 --> 00:38:25,610
Padding di canto espazo
debe deixar en cada lado.

941
00:38:25,610 --> 00:38:29,200
Entón, digamos que quero dicir
10 píxeles en cada lado.

942
00:38:29,200 --> 00:38:31,234
E eu vou dissecar iso nun segundo.

943
00:38:31,234 --> 00:38:33,150
ALLISON Buchholtz-AU:
Todas estas cousas aquí

944
00:38:33,150 --> 00:38:36,980
van ser todo en píxeles
para o resto do seminario.

945
00:38:36,980 --> 00:38:40,980
Vai ver que ten
algún espazo en torno a el, non?

946
00:38:40,980 --> 00:38:46,360
Entón, o que non ve aquí é que hai
este tipo invisible de recheo

947
00:38:46,360 --> 00:38:49,600
de cada lado, o que di, como,
OK, ten a súa caixa de content--

948
00:38:49,600 --> 00:38:51,680
>> ALLISON Buchholtz-AU: Quere
só para puxar arriba o elemento inspeccionar?

949
00:38:51,680 --> 00:38:53,659
>> TOMAS REIMERS: Si, iso é unha boa idea.

950
00:38:53,659 --> 00:38:56,700
ALLISON Buchholtz-AU: Ademais, eu creo
que o elemento de inspeccionar é unha boa forma

951
00:38:56,700 --> 00:39:01,280
para descubrir se algo está pasando
mal, algo inesperado acontece,

952
00:39:01,280 --> 00:39:04,570
inspecionar as etiquetas e vendo o que
é como sobrescrito é útil.

953
00:39:04,570 --> 00:39:05,940
>> TOMAS REIMERS: Entón, eu non estou seguro
se vostedes poden ver esta cor.

954
00:39:05,940 --> 00:39:06,470
Pode?

955
00:39:06,470 --> 00:39:10,120
Verá este recheo
sobre o tipo de bordo.

956
00:39:10,120 --> 00:39:13,410
E entón ve o real
contido en azul, non?

957
00:39:13,410 --> 00:39:16,820
Entón ese é o moi
nocións básicas do modelo de caixa.

958
00:39:16,820 --> 00:39:17,674
Tes contido.

959
00:39:17,674 --> 00:39:18,590
Entón tes estofado.

960
00:39:18,590 --> 00:39:20,440
>> Audiencia: Por que non só
use a caixa de dentro as--

961
00:39:20,440 --> 00:39:21,606
>> ALLISON Buchholtz-AU: Correcto.

962
00:39:21,606 --> 00:39:24,745
Porque é só seleccionando
o elemento agora.

963
00:39:24,745 --> 00:39:26,050
>> TOMAS REIMERS: Yup.

964
00:39:26,050 --> 00:39:27,060
Outras cousas.

965
00:39:27,060 --> 00:39:29,780
Entón imos falar sobre iso
mando recheo por un segundo.

966
00:39:29,780 --> 00:39:36,380
Así, en CSS, medicións
debe ter unha unidade.

967
00:39:36,380 --> 00:39:39,740
Entón, primeiro ten a cantidade.

968
00:39:39,740 --> 00:39:41,460
Polo tanto, neste caso, xa dixemos 10.

969
00:39:41,460 --> 00:39:44,780
E, a continuación, o seguinte
dixemos é píxeles, px.

970
00:39:44,780 --> 00:39:49,160
Outros que pode ter son
cousas como centímetros, polgadas.

971
00:39:49,160 --> 00:39:51,367
Podes facer cousas como:
o que é de 10 pulgadas?

972
00:39:51,367 --> 00:39:52,700
E iso vai ser ridículo.

973
00:39:52,700 --> 00:39:52,990
>> ALLISON Buchholtz-AU: Oh, boy.

974
00:39:52,990 --> 00:39:53,460
>> Audiencia: Whoa.

975
00:39:53,460 --> 00:39:54,460
>> TOMAS e Allison: Yeah.

976
00:39:54,460 --> 00:39:57,840
TOMAS REIMERS: Entón, iso é todo o estofado.

977
00:39:57,840 --> 00:39:59,255
Eu vou volver a píxeles.

978
00:39:59,255 --> 00:40:01,754
>> ALLISON Buchholtz-AU: Pixels
tenden a ser, así, o estándar.

979
00:40:01,754 --> 00:40:04,589
Cando mira para unha morea de sitios,
eles traballan principalmente en píxeles.

980
00:40:04,589 --> 00:40:07,755
TOMAS REIMERS: Entón está indo a ver
ou pixels-- os outros que ve

981
00:40:07,755 --> 00:40:13,952
é en, que é un en é
igual á altura do tipo de letra

982
00:40:13,952 --> 00:40:15,160
que está usando actualmente.

983
00:40:15,160 --> 00:40:16,201
>> ALLISON Buchholtz-AU: Mm.

984
00:40:16,201 --> 00:40:17,574

985
00:40:17,574 --> 00:40:20,740
TOMAS REIMERS: É unha boa forma de dicir,
como, quero tanto espazo como miña fonte

986
00:40:20,740 --> 00:40:21,514
é tomar.

987
00:40:21,514 --> 00:40:23,180
ALLISON Buchholtz-AU: non sabía.

988
00:40:23,180 --> 00:40:25,747
Aprende algo novo cada día.

989
00:40:25,747 --> 00:40:27,955
TOMAS REIMERS: Hai unha
chea de medicións en CS.

990
00:40:27,955 --> 00:40:29,260
Eu sugiro que buscalos.

991
00:40:29,260 --> 00:40:32,122
Para todos os seus casos, eu creo
píxeles debe ser suficiente.

992
00:40:32,122 --> 00:40:33,830
E eles tamén son o que
vai ver

993
00:40:33,830 --> 00:40:36,520
na maioría dos exemplos feita en liña.

994
00:40:36,520 --> 00:40:38,320
Entón, imos deixar en píxeles.

995
00:40:38,320 --> 00:40:42,420
>> Tamén pode, eu debería dizer-- así
recheo actuacións todo enchido.

996
00:40:42,420 --> 00:40:49,789
Tamén pode facer algo como
"Padding-top" para só set--

997
00:40:49,789 --> 00:40:52,080
ALLISON Buchholtz-AU: Maybe
imos buscar o noso "OLA" de volta.

998
00:40:52,080 --> 00:40:55,480
TOMAS REIMERS: --to só definir o
recheo na parte superior e nada máis.

999
00:40:55,480 --> 00:40:59,560
Así, os catro comandos son padding-top,
padding-bottom, padding-left,

1000
00:40:59,560 --> 00:41:00,310
e padding-right.

1001
00:41:00,310 --> 00:41:02,470
>> ALLISON Buchholtz-AU: Así como
que sería de esperar para unha caixa.

1002
00:41:02,470 --> 00:41:03,530
>> TOMAS REIMERS: Yeah.

1003
00:41:03,530 --> 00:41:05,240
Nada moi tolo alí.

1004
00:41:05,240 --> 00:41:08,230
Isto ten sentido?

1005
00:41:08,230 --> 00:41:11,990
Entón ese é o recheo.

1006
00:41:11,990 --> 00:41:14,110
Eu estou indo a definir todo
os enchido de volta a 10.

1007
00:41:14,110 --> 00:41:17,010
E entón eu vou pasar a fronteira.

1008
00:41:17,010 --> 00:41:21,130
>> Entón, o que é fronteira é
fronteira é un comando raro.

1009
00:41:21,130 --> 00:41:24,450
Leva especie de tres cousas á vez.

1010
00:41:24,450 --> 00:41:28,930
Así, o primeiro é o quão grande
quero que sexa como unha medida.

1011
00:41:28,930 --> 00:41:30,662
Unha vez máis, está a usar só píxeles.

1012
00:41:30,662 --> 00:41:32,620
E a última cousa que eu
debe engadir a medicións

1013
00:41:32,620 --> 00:41:35,270
é o único que
non precisa de unha unidade é 0.

1014
00:41:35,270 --> 00:41:37,390
En realidade, é incorrecta
0 para dar unha unidade,

1015
00:41:37,390 --> 00:41:41,940
0 porque é entre 0 polgadas,
píxeles, centímetros, o que sexa.

1016
00:41:41,940 --> 00:41:43,960
Todo iso só significa 0, non?

1017
00:41:43,960 --> 00:41:46,710
Entón, primeiro lle dá a el a medida.

1018
00:41:46,710 --> 00:41:48,650
>> Entón darlle o estilo.

1019
00:41:48,650 --> 00:41:49,869
Entón, eu vou dicir "sólido".

1020
00:41:49,869 --> 00:41:51,410
E nós imos falar sobre o que iso significa.

1021
00:41:51,410 --> 00:41:54,290
E entón, finalmente, darlle unha cor.

1022
00:41:54,290 --> 00:41:56,850
Entón, eu vou dicir "negro".

1023
00:41:56,850 --> 00:41:59,637
E estas son todas as cousas que nós
agora visto antes, con excepción de estilo,

1024
00:41:59,637 --> 00:42:00,720
pero nós imos falar sobre iso.

1025
00:42:00,720 --> 00:42:04,120
Entón vostedes viron as medicións,
e xa viu cores.

1026
00:42:04,120 --> 00:42:10,410
E o que pasa é que obter este
agradable bordo negro en torno a el, non?

1027
00:42:10,410 --> 00:42:11,620
Vostedes ver como nós fixemos iso?

1028
00:42:11,620 --> 00:42:12,760
>> Audiencia: Yeah.

1029
00:42:12,760 --> 00:42:14,850
>> TOMAS REIMERS: Cool.

1030
00:42:14,850 --> 00:42:17,370
Entón, o que é iso?

1031
00:42:17,370 --> 00:42:19,160
Entón, primeiro de todo, é un pixel.

1032
00:42:19,160 --> 00:42:20,880
Iso é auto-evidente o suficiente, non?

1033
00:42:20,880 --> 00:42:23,254
Como, é un pixel de ancho.

1034
00:42:23,254 --> 00:42:26,170
Ou sería un pixel, pero estou
grande, polo que é un pouco máis

1035
00:42:26,170 --> 00:42:26,490
do que iso.

1036
00:42:26,490 --> 00:42:27,967
>> ALLISON Buchholtz-AU: E temos
esta TV resolución ridículo.

1037
00:42:27,967 --> 00:42:29,460
>> TOMAS REIMERS: Yeah.

1038
00:42:29,460 --> 00:42:33,640
Pode facelo máis grande,
menor, o que sexa.

1039
00:42:33,640 --> 00:42:35,630
Entón aquí vai unha fronteira de dous píxeles.

1040
00:42:35,630 --> 00:42:38,810
Verá que é dúas veces máis groso.

1041
00:42:38,810 --> 00:42:40,172
A seguinte cousa que ten é a cor.

1042
00:42:40,172 --> 00:42:41,130
Iso non é interesante.

1043
00:42:41,130 --> 00:42:42,710
Eu non vou falar
sobre iso, realmente.

1044
00:42:42,710 --> 00:42:45,110
>> ALLISON Buchholtz-AU: Pero o estilo
pode ser só un pouco interesante.

1045
00:42:45,110 --> 00:42:45,980
>> TOMAS REIMERS: Yeah.

1046
00:42:45,980 --> 00:42:48,560
Entón estilo, existen poucos
que vexo comunmente usado.

1047
00:42:48,560 --> 00:42:55,690
En primeiro lugar é unha sólida, próximos un do
pontilhada, eo último dunha frustradas.

1048
00:42:55,690 --> 00:42:59,290
E aquí é pontilhada.

1049
00:42:59,290 --> 00:43:02,980
Vai ver que son
unha morea de puntos, non?

1050
00:43:02,980 --> 00:43:09,030
Unha boa forma de obter unha especie de fronteira agradable
indo, trazos son tamén moi popular.

1051
00:43:09,030 --> 00:43:11,580

1052
00:43:11,580 --> 00:43:13,600
>> ALLISON Buchholtz-AU:
E despois, claro, eu son

1053
00:43:13,600 --> 00:43:16,660
seguro de que hai moitas outras
estilos que pode comezar.

1054
00:43:16,660 --> 00:43:20,000
E nós temos un gran conxunto de
ligazóns ao final para vós

1055
00:43:20,000 --> 00:43:23,470
ao tipo de ler e
mirar para CSS máis legal.

1056
00:43:23,470 --> 00:43:25,954
>> TOMAS REIMERS: E despois
o último, somos

1057
00:43:25,954 --> 00:43:27,870
vai falar do
modelos de caixa rápido.

1058
00:43:27,870 --> 00:43:30,070
Oh, e despois de fronteira,
exactamente como o recheo,

1059
00:43:30,070 --> 00:43:33,270
tamén ten cousas como
border-left, border-right, border-top,

1060
00:43:33,270 --> 00:43:37,590
border-bottom, que permiten que
para chegar a un límite específico.

1061
00:43:37,590 --> 00:43:40,650
Entón, aquí é só a bordo esquerda definida.

1062
00:43:40,650 --> 00:43:43,060
Será que isto ten sentido?

1063
00:43:43,060 --> 00:43:46,170
>> ALLISON Buchholtz-AU: É un fresco
xeito de salientar as cousas ou engadir

1064
00:43:46,170 --> 00:43:47,545
liñas entre os distintos elementos.

1065
00:43:47,545 --> 00:43:48,670
TOMAS REIMERS: Absolutamente.

1066
00:43:48,670 --> 00:43:50,940
Entón esa é a nosa fronteira.

1067
00:43:50,940 --> 00:43:52,790
E marxe do último un.

1068
00:43:52,790 --> 00:43:55,892
Como recheo de Margin
Agás que non se within--

1069
00:43:55,892 --> 00:43:57,975
ALLISON Buchholtz-AU: É
non en torno de seu elemento

1070
00:43:57,975 --> 00:44:00,840
pero, en realidade, en torno á totalidade
caixa que vimos.

1071
00:44:00,840 --> 00:44:02,770
>> TOMAS REIMERS: Yeah.

1072
00:44:02,770 --> 00:44:04,090
Allison dixo que perfectamente.

1073
00:44:04,090 --> 00:44:07,550
Non é, como, dentro da súa
elemento, que é en torno de toda a caixa.

1074
00:44:07,550 --> 00:44:10,900
Isto significa que cousas como
fondo non se aplican a el.

1075
00:44:10,900 --> 00:44:13,550
E é basicamente di,
como, eu non quero nada

1076
00:44:13,550 --> 00:44:15,230
en tanto espazo para min.

1077
00:44:15,230 --> 00:44:17,470
Así como temos aquí
unha marxe de 10 píxeles.

1078
00:44:17,470 --> 00:44:23,100
Polo tanto, nada menos de 10 píxeles
debe ser o próximo a min.

1079
00:44:23,100 --> 00:44:26,210
Iso é o tipo da súa
espazo, pero medio que non.

1080
00:44:26,210 --> 00:44:29,215
Entón ese é o moi
nocións básicas do modelo de caixa.

1081
00:44:29,215 --> 00:44:30,090
Isto ten sentido?

1082
00:44:30,090 --> 00:44:33,830

1083
00:44:33,830 --> 00:44:34,550
Cool, legal.

1084
00:44:34,550 --> 00:44:35,800
ALLISON Buchholtz-AU: Awesome.

1085
00:44:35,800 --> 00:44:37,890
Entón agora eu creo que nós só
temos os nosos recursos legais

1086
00:44:37,890 --> 00:44:41,220
que nós o levaremos caras
través moi rapidamente.

1087
00:44:41,220 --> 00:44:44,815
E nós imos actually-- ben,
temos internet aínda?

1088
00:44:44,815 --> 00:44:47,860
>> TOMAS Reimers: Déixanos
ver se podo abrir up--

1089
00:44:47,860 --> 00:44:50,040
déixeme ver se eu
Pode obter internet rápida

1090
00:44:50,040 --> 00:44:53,317
mentres Allison fala sobre calquera cousa
Allison quere falar.

1091
00:44:53,317 --> 00:44:55,150
ALLISON Buchholtz-AU:
Entón basically-- non

1092
00:44:55,150 --> 00:44:57,930
sei que máis podo dicir neste momento.

1093
00:44:57,930 --> 00:45:01,340
Pero estes son algúns
realmente bos recursos.

1094
00:45:01,340 --> 00:45:04,629
Estes son os que
Tomas e eu usei

1095
00:45:04,629 --> 00:45:06,420
e que, en realidade,
utilizado para prepararse para iso.

1096
00:45:06,420 --> 00:45:09,940
W3Schools é aquel que
vostedes deberían ter visto antes.

1097
00:45:09,940 --> 00:45:12,440
Recomendamos para un
chea de cousas con CSS.

1098
00:45:12,440 --> 00:45:15,060
Sei que eu recomendo a
miña sección o tempo.

1099
00:45:15,060 --> 00:45:21,050
>> Unha das grandes cousas é que
permite que tipo de confusión con CSS

1100
00:45:21,050 --> 00:45:23,830
e mira os cambios
neste instante,

1101
00:45:23,830 --> 00:45:25,920
como, en dobre fiestra ver que ten.

1102
00:45:25,920 --> 00:45:29,980
Así que non se preocupe
a creación da súa propia páxina web,

1103
00:45:29,980 --> 00:45:33,090
ou a creación de vhost na súa
Appliance local e servidor local,

1104
00:45:33,090 --> 00:45:34,980
e recibir todo o traballo material.

1105
00:45:34,980 --> 00:45:36,830
Está incorporado á dereita na páxina.

1106
00:45:36,830 --> 00:45:39,042
>> E ten eses pequenos
leccións que pode

1107
00:45:39,042 --> 00:45:40,750
percorrer para aprender
máis sobre selectores,

1108
00:45:40,750 --> 00:45:44,610
ou aprender sobre a manipulación da súa
pia batismal, ou un fondo, ou unha imaxe.

1109
00:45:44,610 --> 00:45:46,990
E ten estes
resultados instantáneas que

1110
00:45:46,990 --> 00:45:49,310
Non é necesario facer calquera
outro traballo de preparación para.

1111
00:45:49,310 --> 00:45:51,060
Entón, eu amo W3Schools.

1112
00:45:51,060 --> 00:45:51,960
El é fabuloso.

1113
00:45:51,960 --> 00:45:52,670
Está a traballar?

1114
00:45:52,670 --> 00:45:52,950
>> TOMAS REIMERS: Yeah.

1115
00:45:52,950 --> 00:45:53,720
Non, non é.

1116
00:45:53,720 --> 00:45:55,636
Quere que eu tente
e reinicie o ordenador?

1117
00:45:55,636 --> 00:45:56,410
Ou queremos a--

1118
00:45:56,410 --> 00:46:01,490
>> ALLISON Buchholtz-AU: É dicir,
ben, este tamén será en liña.

1119
00:46:01,490 --> 00:46:02,740
Todo diapositivas será liña.

1120
00:46:02,740 --> 00:46:05,470
Entón, eu só recomendo facer estes.

1121
00:46:05,470 --> 00:46:07,880
>> Isto é óptimo como só
como unha folla de fraude.

1122
00:46:07,880 --> 00:46:10,690
É só todo o básico
comandos que ten.

1123
00:46:10,690 --> 00:46:13,070
É gran cando é o primeiro
comezando a súa web.

1124
00:46:13,070 --> 00:46:15,080
Porque quizais non fai
quero entrar en todos

1125
00:46:15,080 --> 00:46:17,355
o nitty certo valente
-design pesado cousas.

1126
00:46:17,355 --> 00:46:20,230
Só ten formato-lo dun xeito
que tipo de sentido e ganas

1127
00:46:20,230 --> 00:46:21,490
facer por agora.

1128
00:46:21,490 --> 00:46:23,580
E se o quere
para chegar a el, sei

1129
00:46:23,580 --> 00:46:27,240
isto é, como, un dos
Referencias favoritas de Tomás.

1130
00:46:27,240 --> 00:46:30,130
Estabamos a usar-o para
prepara, e é fabuloso.

1131
00:46:30,130 --> 00:46:33,030
É o creador de Mozilla.

1132
00:46:33,030 --> 00:46:36,490
>> TOMAS REIMERS: Entón Mozilla son
as persoas que fan Firefox.

1133
00:46:36,490 --> 00:46:40,290
E iso é só o seu propio creador
de referencia, o que eu creo que é incrible.

1134
00:46:40,290 --> 00:46:44,870
E ten un marabilloso
lista de recursos.

1135
00:46:44,870 --> 00:46:45,530
Entón, nós have--

1136
00:46:45,530 --> 00:46:48,060
>> ALLISON Buchholtz-AU:
E entón última nota

1137
00:46:48,060 --> 00:46:50,120
cando estás
proxecto seu sitio web,

1138
00:46:50,120 --> 00:46:53,550
animar-se as cousas
Que pensas que son bonitas.

1139
00:46:53,550 --> 00:46:56,340
Inspecionar o elemento,
inspeccionar o código fonte

1140
00:46:56,340 --> 00:46:59,370
pode ser super útil
para tratar de descubrir

1141
00:46:59,370 --> 00:47:02,080
como o estilo do seu propio sitio web.

1142
00:47:02,080 --> 00:47:04,540
>> Moitas veces, eu sinto que o mellor
forma, ademais de experimentación,

1143
00:47:04,540 --> 00:47:06,290
é só de ollar para
cousas que son bonitas.

1144
00:47:06,290 --> 00:47:09,810
Creo que é realmente difícil de só
tipo de proxectar as cousas no seu propio país,

1145
00:47:09,810 --> 00:47:11,090
especialmente no inicio.

1146
00:47:11,090 --> 00:47:14,740
Entón por favor, mire para sitios web
que lle gusta de ollar.

1147
00:47:14,740 --> 00:47:16,880
Descubrir o que fai
eles atractivo para ti.

1148
00:47:16,880 --> 00:47:19,170
E, a continuación, Sinto-se libre para
tentar replicar iso.

1149
00:47:19,170 --> 00:47:20,410
>> TOMAS REIMERS: Correcto.

1150
00:47:20,410 --> 00:47:23,120
Mesmo como sitios web
como este, pode ver

1151
00:47:23,120 --> 00:47:25,460
hai sempre unha div na parte superior.

1152
00:47:25,460 --> 00:47:29,920
E entón tes outra div dentro
aquí, que é awesomeness CSS.

1153
00:47:29,920 --> 00:47:32,480
E entón tes unha morea de ligazóns aquí.

1154
00:47:32,480 --> 00:47:34,770
Se realmente só inspeccionar
elementos, pode clasificar de

1155
00:47:34,770 --> 00:47:38,520
comezar a ver o que facer sitios
parecer, e como podo

1156
00:47:38,520 --> 00:47:40,493
recrear que, se eu quixese.

1157
00:47:40,493 --> 00:47:41,890
Isto ten sentido?

1158
00:47:41,890 --> 00:47:43,670
Por iso, só ten tres minutos do final.

1159
00:47:43,670 --> 00:47:46,380
Entón preguntas?

1160
00:47:46,380 --> 00:47:47,650
Calquera deles?

1161
00:47:47,650 --> 00:47:48,350
Si.

1162
00:47:48,350 --> 00:47:50,780
>> Audiencia: Para a cor
rectángulo, como

1163
00:47:50,780 --> 00:47:53,499
have-- se non quere que el
atravesando a páxina enteira, podería

1164
00:47:53,499 --> 00:47:56,400
ten feito isto dalle só
metade da páxina ou só o texto?

1165
00:47:56,400 --> 00:47:59,660
>> TOMAS REIMERS: Si, con certeza.

1166
00:47:59,660 --> 00:48:02,780
Entón deixe-me ver realmente.

1167
00:48:02,780 --> 00:48:04,670
Teño dúas ideas.

1168
00:48:04,670 --> 00:48:07,265
Entón, primeiro de todo, ten
Tamén é posible usar porcentaxes.

1169
00:48:07,265 --> 00:48:08,140
>> Audiencia: Serio?

1170
00:48:08,140 --> 00:48:11,260
>> ALLISON Buchholtz-AU: Entón, algo
a mirar para arriba é o posicionamento relativo.

1171
00:48:11,260 --> 00:48:13,385
É algo que nós
Non teño tempo para entrar,

1172
00:48:13,385 --> 00:48:16,392
pero é algo que eu sempre
Recomendo que vostedes merecen ser visitados.

1173
00:48:16,392 --> 00:48:17,580
>> TOMAS REIMERS: porcentaxes así.

1174
00:48:17,580 --> 00:48:21,524
E ver como nós fixemos iso
só o 50% do ancho?

1175
00:48:21,524 --> 00:48:24,190
ALLISON Buchholtz-AU: Se
realmente saber o número de píxeles,

1176
00:48:24,190 --> 00:48:25,780
pode ser máis preciso desa forma.

1177
00:48:25,780 --> 00:48:27,200
Pode xogar con el.

1178
00:48:27,200 --> 00:48:27,700
Pero o 50%.

1179
00:48:27,700 --> 00:48:31,970
Se fósemos para redimensionar noso navegador,
sería facelo menor.

1180
00:48:31,970 --> 00:48:35,250
>> TOMAS REIMERS: Ben, é
basicamente 50% agora, eu creo.

1181
00:48:35,250 --> 00:48:38,820
É do 50%, e, a continuación, a marxe
Engadiuse a iso.

1182
00:48:38,820 --> 00:48:40,100
CSS ten unha morea de manias.

1183
00:48:40,100 --> 00:48:43,195
Entón, agora, este é
50% do ancho da páxina.

1184
00:48:43,195 --> 00:48:46,860
Pero lembre que ten 10
píxeles despegar a cada lado.

1185
00:48:46,860 --> 00:48:49,700
Entón, se tivese que mover esa contra
á marxe esquerda do navegador,

1186
00:48:49,700 --> 00:48:51,550
a continuación, el se parecería con 50%.

1187
00:48:51,550 --> 00:48:53,884
Unha vez máis, como dixen, CSS pode
ser unha chea de correos cheque palpite.

1188
00:48:53,884 --> 00:48:56,049
Tipo, pensas que algo é
vai comportarse dun xeito,

1189
00:48:56,049 --> 00:48:57,805
pero compórtase de forma totalmente distinta.

1190
00:48:57,805 --> 00:48:59,420
>> ALLISON Buchholtz-AU:
E acaba de ser máis intelixente,

1191
00:48:59,420 --> 00:49:02,020
e só obter unha mellor
intuición para el como se move lonxitude.

1192
00:49:02,020 --> 00:49:02,730
>> TOMAS REIMERS: E
fica peor e peor.

1193
00:49:02,730 --> 00:49:03,496
Entón, é realmente só unha carreira.

1194
00:49:03,496 --> 00:49:05,454
>> ALLISON Buchholtz-AU:
Iso é super alentador.

1195
00:49:05,454 --> 00:49:07,070
Queremos que quere CSS.

1196
00:49:07,070 --> 00:49:08,810
>> TOMAS REIMERS: CSS é impresionante.

1197
00:49:08,810 --> 00:49:10,354
Lembre que.

1198
00:49:10,354 --> 00:49:11,020
Outras cuestións?

1199
00:49:11,020 --> 00:49:14,297
>> ALLISON Buchholtz-AU: O único.

1200
00:49:14,297 --> 00:49:14,880
Algo máis?

1201
00:49:14,880 --> 00:49:15,140
Con estilo.

1202
00:49:15,140 --> 00:49:15,690
>> TOMAS REIMERS: Awesome.

1203
00:49:15,690 --> 00:49:18,523
>> ALLISON Buchholtz-AU: Ben, se
caras teñen dúbidas, máis tarde,

1204
00:49:18,523 --> 00:49:20,919
estamos sempre dispoñibles, como de costume.

1205
00:49:20,919 --> 00:49:22,960
Probablemente vai ver algúns
de nós para proxectos finais

1206
00:49:22,960 --> 00:49:24,280
e definitivamente no hackathon.

1207
00:49:24,280 --> 00:49:25,200
>> TOMAS REIMERS: Absolutamente.

1208
00:49:25,200 --> 00:49:25,720
E na feira.

1209
00:49:25,720 --> 00:49:26,560
>> ALLISON Buchholtz-AU: E na feira.

1210
00:49:26,560 --> 00:49:26,840
Oh.

1211
00:49:26,840 --> 00:49:28,130
>> TOMAS REIMERS: Olhe a fronte a
vexa todo o awesome--

1212
00:49:28,130 --> 00:49:29,420
>> ALLISON Buchholtz-AU: Veremos
todos os seus sitios impresionantes

1213
00:49:29,420 --> 00:49:30,572
que vai ser bonito.

1214
00:49:30,572 --> 00:49:32,780
TOMAS REIMERS: Sempre pode
ver, como, os sitios

1215
00:49:32,780 --> 00:49:36,234
que tivo, como, bo CSS e, a continuación,
como aqueles que non tentar facer CSS.

1216
00:49:36,234 --> 00:49:39,150
ALLISON Buchholtz-AU: Ademais, outra
cousa, unha cousa de mirar para

1217
00:49:39,150 --> 00:49:40,445
é Bootstrapping.

1218
00:49:40,445 --> 00:49:41,805
Entón Bootstrap é grande.

1219
00:49:41,805 --> 00:49:42,240
>> TOMAS REIMERS: Google que se você--

1220
00:49:42,240 --> 00:49:43,573
>> ALLISON Buchholtz-AU: Google-lo.

1221
00:49:43,573 --> 00:49:44,340
El é fabuloso.

1222
00:49:44,340 --> 00:49:45,620
Vai adorar.

1223
00:49:45,620 --> 00:49:48,000
E agora que ten un
coñecemento básico de CSS,

1224
00:49:48,000 --> 00:49:50,340
vai facer moito máis sentido.

1225
00:49:50,340 --> 00:49:50,890
Impresionante.

1226
00:49:50,890 --> 00:49:51,480
Grazas, persoal.

1227
00:49:51,480 --> 00:49:53,330
>> TOMAS REIMERS: Moitas grazas.

1228
00:49:53,330 --> 00:49:54,219