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

2
00:00:00,500 --> 00:00:04,500
>> [MUSIC JOC]

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

4
00:00:10,099 --> 00:00:12,224
ALLISON BUCHHOLTZ-AU: Deci
ne practic doar merge

5
00:00:12,224 --> 00:00:14,629
pentru a vă oferi o trecere in revista
CSS, pentru că știm

6
00:00:14,629 --> 00:00:16,420
că nu a fost acoperit
în toate secțiunile.

7
00:00:16,420 --> 00:00:20,090
Și vrem cu adevărat să vă asigurați că ați
baieti au acest instrument la dispoziția dumneavoastră,

8
00:00:20,090 --> 00:00:24,790
deoarece are capacitatea de a face
site-urile sa arate mult mai frumoasa.

9
00:00:24,790 --> 00:00:28,660
>> Iar dacă sunteți construirea unui site web, atunci
probabil că doriți să facă destul de.

10
00:00:28,660 --> 00:00:31,372
Adică, nu trebuie să,
dar aș sugera. [Râde]

11
00:00:31,372 --> 00:00:35,430
Dacă doriți ca utilizatorii să-l folosească, s-ar putea
doriți să-l un pic [neauzit] face.

12
00:00:35,430 --> 00:00:39,130
Deci, vom încerca să vă dau doar
unele instrumente de bază și înțelegerea,

13
00:00:39,130 --> 00:00:42,340
astfel încât atunci când te duci afară și ești
cercetarea lucruri despre CSS,

14
00:00:42,340 --> 00:00:45,902
nu e finaliza păsărească,
ca CSS uneori să fie.

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

16
00:00:47,240 --> 00:00:49,930
Allison a spus destul de bine.

17
00:00:49,930 --> 00:00:53,250
Deci, cred ca primul lucru pe care
ar trebui să înceapă cu este ceea ce este CSS?

18
00:00:53,250 --> 00:00:55,750
Deci, CSS este minunat.

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

20
00:00:56,250 --> 00:00:58,320
>> ALLISON BUCHHOLTZ-AU: E
Numele seminarului nostru.

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

22
00:00:58,434 --> 00:01:00,130
Este foarte important ca
înțelegeți că de atunci.

23
00:01:00,130 --> 00:01:03,090
Dacă luați doar departe unul
lucru, este că, dacă CSS minunat.

24
00:01:03,090 --> 00:01:06,180
Doi este CSS vine de la
Cascading Style Sheets.

25
00:01:06,180 --> 00:01:10,380
Deci, la miezul ei, CSS este
o foaie de stil, ceea ce înseamnă

26
00:01:10,380 --> 00:01:13,200
vă permite să stil o pagină web.

27
00:01:13,200 --> 00:01:16,609
Și apoi ce înseamnă că, este o
modalitate de a adăuga stil la site-uri web.

28
00:01:16,609 --> 00:01:18,900
Deci, prin stil, ne referim tot
că nu e structural--

29
00:01:18,900 --> 00:01:24,350
așa lucruri cum ar fi culori, fundal
imagini, frontiere, cum ar fi, umplutură,

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

31
00:01:25,040 --> 00:01:27,310
Vom vorbi despre ceea ce
tot ceea ce înseamnă într-un pic.

32
00:01:27,310 --> 00:01:30,110
>> Așa că tocmai am mers mai departe și
deschis atât a celor în gedit.

33
00:01:30,110 --> 00:01:32,680
Deci, aceasta este index.html.

34
00:01:32,680 --> 00:01:34,800
Și acest lucru este main.css.

35
00:01:34,800 --> 00:01:36,829
Deci, main.css nu are nimic.

36
00:01:36,829 --> 00:01:38,412
ALLISON BUCHHOLTZ-AU: Nu stil până acum.

37
00:01:38,412 --> 00:01:39,245
TOMAS REIMERS: Niciunul.

38
00:01:39,245 --> 00:01:42,577
Și, după cum veți vedea, este
un site cu adevărat urât.

39
00:01:42,577 --> 00:01:44,160
ALLISON BUCHHOLTZ-AU: E pur și simplu.

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

41
00:01:45,820 --> 00:01:49,150
Da, nu e urât,
e doar minimalist.

42
00:01:49,150 --> 00:01:53,430
Și apoi aici avem index.html.

43
00:01:53,430 --> 00:01:55,729
Și astfel pentru o rapidă
recapitulare de HTML, Allison,

44
00:01:55,729 --> 00:01:57,270
Vrei să vorbim doar despre pagina?

45
00:01:57,270 --> 00:01:58,395
>> ALLISON BUCHHOLTZ-AU: Da.

46
00:01:58,395 --> 00:02:01,100
Deci evident, avem HTML nostru
tag-ul, care tocmai nume fișier HTML.

47
00:02:01,100 --> 00:02:07,080
Avem antet aici, cu CSS
Măreția, which-- dacă te duci înapoi.

48
00:02:07,080 --> 00:02:07,720
Unde este aia?

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

50
00:02:09,136 --> 00:02:10,301
Da, puteți vedea.

51
00:02:10,301 --> 00:02:12,092
ALLISON BUCHHOLTZ-AU:
Și observați antetul

52
00:02:12,092 --> 00:02:14,120
este acest antet filă chiar aici.

53
00:02:14,120 --> 00:02:17,130
Și apoi "Bună ziua, lume!" este
textul pe care tocmai am

54
00:02:17,130 --> 00:02:19,620
afișarea pe internet
pagină, care este-- du-te înapoi.

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

56
00:02:21,290 --> 00:02:24,287
Care este doar în corpul nostru
here-- textul simplu.

57
00:02:24,287 --> 00:02:26,120
De asemenea, un lucru la
observa, dacă te uiți aici,

58
00:02:26,120 --> 00:02:29,410
Tomas pornit în sus acestea
două din diapozitiv nostru.

59
00:02:29,410 --> 00:02:32,035
Deci, atâta timp cât aveți toate
trei dintre acestea, ești bine.

60
00:02:32,035 --> 00:02:34,044
Ele pot fi în orice ordine doresc.

61
00:02:34,044 --> 00:02:39,368
Ce este cel mai important este doar faptul că
Ai fiecare dintre aceste trei lucruri.

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

63
00:02:40,340 --> 00:02:41,111
Adăugați un tip doc?

64
00:02:41,111 --> 00:02:42,235
ALLISON BUCHHOLTZ-AU: Da.

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

66
00:02:43,068 --> 00:02:43,769
Se răcește.

67
00:02:43,769 --> 00:02:46,102
ALLISON BUCHHOLTZ-AU: Aparent,
microfoane mele nu mă plac.

68
00:02:46,102 --> 00:02:49,650
TOMAS REIMERS: Oh, să ne dea o secundă doar
în timp ce Allison trece pe microfon ei.

69
00:02:49,650 --> 00:02:50,500
Deci, da.

70
00:02:50,500 --> 00:02:52,030
Deci avem pagina noastră principală.

71
00:02:52,030 --> 00:02:53,890
E un fel de unstyled.

72
00:02:53,890 --> 00:02:54,780
Nu avem prea mult.

73
00:02:54,780 --> 00:02:57,110
Avem doar practic text.

74
00:02:57,110 --> 00:02:59,470
Avem foaia de stil.

75
00:02:59,470 --> 00:03:00,220
Avem titlul.

76
00:03:00,220 --> 00:03:04,020
Deci, doar goale, dezosată
Componente face un site web.

77
00:03:04,020 --> 00:03:08,880
>> Deci de acolo, hai
vorbesc despre ceea ce este CSS

78
00:03:08,880 --> 00:03:11,270
și ceea ce se pare ca și toate astea.

79
00:03:11,270 --> 00:03:12,047
Deci, pentru that--

80
00:03:12,047 --> 00:03:13,755
ALLISON BUCHHOLTZ-AU:
Înapoi la diapozitivele.

81
00:03:13,755 --> 00:03:15,200
TOMAS REIMERS: Înapoi la slide-uri.

82
00:03:15,200 --> 00:03:17,240
Și Allison poate prelua.

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

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

85
00:03:19,220 --> 00:03:22,360
Deci, în fișierul CSS,
ai de gând să aibă

86
00:03:22,360 --> 00:03:25,010
o mulțime de aceste lucruri numite selectori.

87
00:03:25,010 --> 00:03:27,420
Aceasta va fi doar
pe bază de fișierul CSS.

88
00:03:27,420 --> 00:03:29,480
E doar de gând să fie
o mulțime de aceste.

89
00:03:29,480 --> 00:03:30,780
Deci, selector.

90
00:03:30,780 --> 00:03:32,649
Aceasta este doar anatomie generală.

91
00:03:32,649 --> 00:03:35,190
Vom trece prin
exemple, pentru că dacă nu te voi

92
00:03:35,190 --> 00:03:38,400
privit secțiunea meu, mă simt
ca lucruri în abstract

93
00:03:38,400 --> 00:03:39,400
Nu prea are sens.

94
00:03:39,400 --> 00:03:41,110
Întotdeauna ajută pentru a vedea exemple.

95
00:03:41,110 --> 00:03:42,420
>> Deci avem ceva de selectare.

96
00:03:42,420 --> 00:03:49,120
Asta va fi ceva identificator pentru
ceea ce ne dorim stilul de a aplica pentru.

97
00:03:49,120 --> 00:03:52,220
Și atunci putem avea orice
set de reguli și valori.

98
00:03:52,220 --> 00:03:55,680
Deci, selectoare pe care le-ar putea vedea
ar putea fi ceva de genul corp,

99
00:03:55,680 --> 00:04:00,262
sau punctul cu P,
sau antet, sau orice altceva,

100
00:04:00,262 --> 00:04:02,000
ce vrei etichetele HTML pentru a fi.

101
00:04:02,000 --> 00:04:03,570
>> Deci, în acest caz, avem corp.

102
00:04:03,570 --> 00:04:06,985
Și avem niște reguli,
care aceasta corespunde

103
00:04:06,985 --> 00:04:09,610
la ce stilul tau este valabilă pentru.

104
00:04:09,610 --> 00:04:12,720
Deci, în acest caz, ne-am
culoarea de fundal și greutate font.

105
00:04:12,720 --> 00:04:16,200
Deci, acest lucru se va schimba
fondul de nimic

106
00:04:16,200 --> 00:04:19,640
în orice etichetă organism de fișier nostru HTML.

107
00:04:19,640 --> 00:04:22,810
Și o să dea
ea această valoare albastru deschis.

108
00:04:22,810 --> 00:04:24,820
>> Deci va face
fundal albastru deschis.

109
00:04:24,820 --> 00:04:28,660
Și apoi ceva în corp este
va avea o greutate caractere îngroșate.

110
00:04:28,660 --> 00:04:31,142
Deci, este doar de gând să
bold tot textul nostru.

111
00:04:31,142 --> 00:04:32,970
Și acesta este doar un selector.

112
00:04:32,970 --> 00:04:34,680
Dar ai putea avea foarte multe dintre acestea.

113
00:04:34,680 --> 00:04:38,730
Și, după cum vom arăta la
mai târziu, un pic mai mult în modul în care

114
00:04:38,730 --> 00:04:40,709
că lucrările și mai multe exemple acolo.

115
00:04:40,709 --> 00:04:41,750
Tot ce doriți să adăugați?

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

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

118
00:04:43,500 --> 00:04:46,144
Noi doar de gând să taie unui
exemplu aici pe exemplul site-ul nostru.

119
00:04:46,144 --> 00:04:47,310
Așa că haideți să ia de fapt acest lucru.

120
00:04:47,310 --> 00:04:48,620
E perfect.

121
00:04:48,620 --> 00:04:54,460
Așa că Mă duc pentru a copia și lipi
acest drept în fișierul nostru main.css.

122
00:04:54,460 --> 00:04:56,530
Și am de gând să-l salveze.

123
00:04:56,530 --> 00:04:59,190
Și atunci vom rula.

124
00:04:59,190 --> 00:05:01,600
Nota Deci parte, una dintre cele mai
cele mai multe lucruri frustrant

125
00:05:01,600 --> 00:05:04,490
este dacă nu salvați un fișier, și
apoi, cum ar fi, reîncărcați pagina,

126
00:05:04,490 --> 00:05:07,450
și cum ar fi, de ce nu este
schimbarea se întâmplă?

127
00:05:07,450 --> 00:05:07,950
Se întâmplă.

128
00:05:07,950 --> 00:05:14,230
Deci, aici am văzut că ne-am făcut nostru
site-ul un fundal albastru deschis

129
00:05:14,230 --> 00:05:16,560
și un text îngroșat.

130
00:05:16,560 --> 00:05:20,730
>> Ar trebui, de asemenea, menționez, dacă
baieti Aveti intrebari despre nimic

131
00:05:20,730 --> 00:05:23,622
facem, vă rugăm
libertatea de a ne opri și ne cer.

132
00:05:23,622 --> 00:05:25,330
Suntem total dispus
in campul întrebări.

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

134
00:05:27,951 --> 00:05:31,930
>> ALLISON BUCHHOLTZ-AU: Evident, cu
CSS, totul se bazează pe sine.

135
00:05:31,930 --> 00:05:34,107
Deci, dacă un lucru nu
face sens acum, ne-am

136
00:05:34,107 --> 00:05:35,690
Nu vreau ca să te incarca mai târziu.

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

138
00:05:38,390 --> 00:05:41,930
>> TOMAS REIMERS: Deci, haideți să
fel de diseca acest lucru.

139
00:05:41,930 --> 00:05:44,210
Deci, nu doriți să începeți
cu selectorul de aici?

140
00:05:44,210 --> 00:05:45,979
>> ALLISON BUCHHOLTZ-AU: Da.

141
00:05:45,979 --> 00:05:48,270
După cum spuneam mai înainte, corpul
este doar selectorul de aici.

142
00:05:48,270 --> 00:05:50,950
Deci, dacă ne întoarcem pe la ah noastre index--.

143
00:05:50,950 --> 00:05:53,245
>> TOMAS REIMERS: care am închis.

144
00:05:53,245 --> 00:05:54,530
Dă-mi o secundă.

145
00:05:54,530 --> 00:05:58,286
Deci fișier, Deschidere, index.html.

146
00:05:58,286 --> 00:05:59,410
ALLISON BUCHHOLTZ-AU: cool.

147
00:05:59,410 --> 00:06:02,710
Deci, dacă observați aici, ne-am
au aceste etichete corp, nu?

148
00:06:02,710 --> 00:06:06,270
Deci, selectorul doar corespunde
Tag-urile pe care le spui.

149
00:06:06,270 --> 00:06:07,670
Deci, corp chiar aici.

150
00:06:07,670 --> 00:06:10,315
Deci, ceea ce spui este
everything-- ne putem întoarce?

151
00:06:10,315 --> 00:06:12,065
Aș vrea să pot doar
ca atingeți ecranul.

152
00:06:12,065 --> 00:06:14,410
Ar fi mult mai rece.

153
00:06:14,410 --> 00:06:17,150
>> Deci, nimic în cele
tag-uri corp, pe care le-am vazut

154
00:06:17,150 --> 00:06:19,637
a fost doar, cum ar fi, textul,
și corpul în general

155
00:06:19,637 --> 00:06:20,970
se referă la, cum ar fi, de fond.

156
00:06:20,970 --> 00:06:22,720
Dacă doriți vreodată să
schimba fundalul,

157
00:06:22,720 --> 00:06:25,090
care va fi într-o etichetă corp.

158
00:06:25,090 --> 00:06:27,120
Doar are aceste reguli aplicate acestora.

159
00:06:27,120 --> 00:06:32,040
>> Deci, dacă ar fi să mergem la
index.html si-- de fapt,

160
00:06:32,040 --> 00:06:33,840
putem avea ceva
in afara corpului?

161
00:06:33,840 --> 00:06:37,340
Dacă am avea, cum ar fi, un subsol sau
ceva, nu s-ar aplica la acest lucru.

162
00:06:37,340 --> 00:06:40,900
Dar nimic în
aceste tag-uri organism se întâmplă

163
00:06:40,900 --> 00:06:44,960
a fi afectate de acest organism
selector care le-am făcut.

164
00:06:44,960 --> 00:06:47,405
Deci, dacă ar fi să tastați
altceva there--

165
00:06:47,405 --> 00:06:49,400
>> TOMAS REIMERS: Să conduci asta acasă.

166
00:06:49,400 --> 00:06:55,330
Deci, dacă am avut o div-- astfel încât este
doar un alt tag poti avea.

167
00:06:55,330 --> 00:06:56,350
Am de gând să-l închidă.

168
00:06:56,350 --> 00:06:58,280
Sau hai să facem acest lucru un paragraf.

169
00:06:58,280 --> 00:07:01,430
Deci, p reprezintă punctul.

170
00:07:01,430 --> 00:07:02,560
Și în acest alineat.

171
00:07:02,560 --> 00:07:05,650
Și apoi spun: "Acesta este textul."

172
00:07:05,650 --> 00:07:06,369
Se răcește.

173
00:07:06,369 --> 00:07:09,160
Și apoi am făcut această regulă se aplică la
un paragraf în loc de organism.

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

175
00:07:12,390 --> 00:07:17,320
Veți vedea cum se aplică numai pentru
paragraful nou format, dreapta,

176
00:07:17,320 --> 00:07:18,892
nu totul.

177
00:07:18,892 --> 00:07:20,090
Asta face sens?

178
00:07:20,090 --> 00:07:21,840
>> ALLISON BUCHHOLTZ-AU:
Deci, aceasta este tot corpul,

179
00:07:21,840 --> 00:07:24,450
dar acum selector nostru doar
corespunde paragraf.

180
00:07:24,450 --> 00:07:27,050
Deci, ne-am avea îndrăzneț și albastru
pentru acest alineat specific,

181
00:07:27,050 --> 00:07:30,760
pentru că acesta este singurul lucru
care este închis în tag-ul p.

182
00:07:30,760 --> 00:07:35,349
>> TOMAS REIMERS: Are vreun sens fel
de modul în care lucrurile îngloba alte lucruri?

183
00:07:35,349 --> 00:07:38,140
ALLISON BUCHHOLTZ-AU: De asemenea, doar
să spun, cum ar fi, unul dintre cele mai bune moduri

184
00:07:38,140 --> 00:07:40,889
pentru a obține într-adevăr confortabil cu CSS
este de a face doar lucruri de genul acesta,

185
00:07:40,889 --> 00:07:42,050
doar l încercați.

186
00:07:42,050 --> 00:07:46,700
Este foarte simplu să tastați ceva
out, lovit Refresh, și să vedem ce se întâmplă.

187
00:07:46,700 --> 00:07:48,940
Și, ca și cu cele mai multe CS,
experimentare poate de multe ori

188
00:07:48,940 --> 00:07:51,790
duce la o mult mai bine
înțelegere intuitivă.

189
00:07:51,790 --> 00:07:54,432
Chiar mai mult decât ne doar,
cum ar fi, să vorbesc cu tine.

190
00:07:54,432 --> 00:07:58,350
>> TOMAS REIMERS: Absolut
100% de acord cu privire la acest punct.

191
00:07:58,350 --> 00:08:02,430
Deci, dacă ne întoarcem la asta, să începem
disecarea exact ceea ce aceste două fac.

192
00:08:02,430 --> 00:08:04,550
Deci avem două reguli în acest sens.

193
00:08:04,550 --> 00:08:07,420
Deci, primul este culoarea de fundal.

194
00:08:07,420 --> 00:08:10,590
Și veți vedea că l-am stabilit
egală cu o valoare, albastru deschis.

195
00:08:10,590 --> 00:08:15,009
>> Deci, în CSS, CSS este un fel
de foarte largi cu privire la modul în care

196
00:08:15,009 --> 00:08:16,300
ai voie să definească culoare.

197
00:08:16,300 --> 00:08:17,800
Deci, aveți posibilitatea să le defini prin nume.

198
00:08:17,800 --> 00:08:20,650
Puteți face, de asemenea, ceva de genul "roșu".

199
00:08:20,650 --> 00:08:25,270
Și apoi, dacă ne întoarcem la acest lucru,
veți vedea că fondul este de culoare roșie.

200
00:08:25,270 --> 00:08:29,040
Puteți obține, de asemenea really-- eu te gândești
poate fi destul de creativ cu acest lucru,

201
00:08:29,040 --> 00:08:29,540
nu poți?

202
00:08:29,540 --> 00:08:31,170
>> ALLISON BUCHHOLTZ-AU: I
cred că puteți folosi hex.

203
00:08:31,170 --> 00:08:31,250
Nu poți?

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

205
00:08:32,083 --> 00:08:32,969
Astfel, puteți folosi hex.

206
00:08:32,969 --> 00:08:34,490
Dar mă gândesc nume-înțelept.

207
00:08:34,490 --> 00:08:35,385
Nu sunt acolo?

208
00:08:35,385 --> 00:08:37,260
ALLISON BUCHHOLTZ-AU:
Puteți face destul de puține.

209
00:08:37,260 --> 00:08:43,350
Destul de mult ca cele mai multe culori pe care le
poate name-- cum ar fi, cred că somonul este una.

210
00:08:43,350 --> 00:08:45,322
>> TOMAS REIMERS: Vom încerca somon.

211
00:08:45,322 --> 00:08:47,530
ALLISON BUCHHOLTZ-AU: I
cred Chartreuse este acolo.

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

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

214
00:08:48,550 --> 00:08:50,080
Deci, puteți obține destul de creativ.

215
00:08:50,080 --> 00:08:52,246
>> ALLISON BUCHHOLTZ-AU: Tu
ar putea primi destul de creativ.

216
00:08:52,246 --> 00:08:55,750
Ca, dacă vă puteți gândi
Nume culoare, e probabil acolo.

217
00:08:55,750 --> 00:08:57,840
Dacă doriți cu adevărat bine
detaliu, poti sa te duci hex.

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

219
00:08:58,673 --> 00:08:59,390
Deci, hexazecimal.

220
00:08:59,390 --> 00:09:05,280
În cazul în care voi aminti asta înapoi
din vechiul PSET imagine Recuperare,

221
00:09:05,280 --> 00:09:08,300
voi trebuit să se confrunte
cu aceste valori hex.

222
00:09:08,300 --> 00:09:15,280
Și un fel de recapitulare a ceea ce este că,
hex are trei valori stocate în acesta.

223
00:09:15,280 --> 00:09:17,250
Deci, este în grupe de câte două trepte.

224
00:09:17,250 --> 00:09:19,300
Primele două reprezintă valoarea roșu.

225
00:09:19,300 --> 00:09:22,420
Al doilea reprezintă
valoarea verde.

226
00:09:22,420 --> 00:09:25,020
Iar ultima este albastru?

227
00:09:25,020 --> 00:09:30,050
>> Deci, FF se întâmplă pentru a reprezenta
un hexazecimal 255.

228
00:09:30,050 --> 00:09:35,480
Deci, aveți 255 rosu, 255
verde, și 0 pentru albastru.

229
00:09:35,480 --> 00:09:37,670
Și valori cuprinse între 0 și 255.

230
00:09:37,670 --> 00:09:38,350
>> Audiența: Corect.

231
00:09:38,350 --> 00:09:41,472
Deci, în esență, am putea căuta
pe internet pentru orice culoare dorim,

232
00:09:41,472 --> 00:09:43,912
și de a identifica de fapt cunoscut
culoare spectru combo,

233
00:09:43,912 --> 00:09:45,130
iar apoi am putea pune in?

234
00:09:45,130 --> 00:09:46,380
ALLISON BUCHHOLTZ-AU: Exact.

235
00:09:46,380 --> 00:09:52,900
Deci, ai destul de mult control complet
peste culorile pe care doriți în CSS.

236
00:09:52,900 --> 00:09:55,069
Vom vorbi despre
imagini de fundal mai târziu?

237
00:09:55,069 --> 00:09:56,110
Sau vrem să facem asta?

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

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

240
00:09:57,010 --> 00:10:00,830
Deci în primul rând, doar pentru a arăta că
roșu și verde este galben.

241
00:10:00,830 --> 00:10:03,120
Și dacă ai nevoie de ceva
ajutor pentru a găsi aceasta,

242
00:10:03,120 --> 00:10:05,575
poate Google ceva
cum ar fi "selectorul de culoare."

243
00:10:05,575 --> 00:10:07,200
ALLISON BUCHHOLTZ-AU: Oh, e așa de bine.

244
00:10:07,200 --> 00:10:09,090
Îmi place Color Picker.

245
00:10:09,090 --> 00:10:11,360
>> TOMAS REIMERS: colorpicker.com
este un exemplu bun.

246
00:10:11,360 --> 00:10:14,580
Și aici, veți vedea că aveți
un complet selector de culoare Photoshop-like.

247
00:10:14,580 --> 00:10:14,920
>> ALLISON BUCHHOLTZ-AU: Mm-hm.

248
00:10:14,920 --> 00:10:16,980
De asemenea, lucrurile reci esti
poate genera scheme de culori

249
00:10:16,980 --> 00:10:18,896
astfel încât nu aveți,
cum ar fi, ciocnindu culori.

250
00:10:18,896 --> 00:10:22,780
TOMAS REIMERS: Și apoi
aici e valoarea hex aici sus.

251
00:10:22,780 --> 00:10:27,800
Astfel, puteți găsi întotdeauna on-line, practic,
locuri pentru a obține valoarea hex de la.

252
00:10:27,800 --> 00:10:31,667
Nu un fel de care tocmai, cum ar fi, noi
a se vedea culorile lumii în număr.

253
00:10:31,667 --> 00:10:34,000
E mai mult că vom merge on-line
și pentru a găsi ceea ce culoare vrem,

254
00:10:34,000 --> 00:10:36,850
și apoi să ia numărul de jos.

255
00:10:36,850 --> 00:10:39,590
Pentru că este doar o foarte ușor
mod de a face referire lucrurile în CS.

256
00:10:39,590 --> 00:10:40,350
>> ALLISON BUCHHOLTZ-AU:
Și apoi există also--

257
00:10:40,350 --> 00:10:41,630
Am uitat numele exact al site-ului.

258
00:10:41,630 --> 00:10:43,838
Dar cu siguranță, eu
cred, ceva de la Adobe

259
00:10:43,838 --> 00:10:48,350
care generează scheme de culori pentru tine,
care este foarte cool, pentru că

260
00:10:48,350 --> 00:10:50,580
definitely-- este uneori
greu să dau seama,

261
00:10:50,580 --> 00:10:53,729
oh, dacă vreau să folosesc această culoare,
ceea ce ar putea fi un alt util

262
00:10:53,729 --> 00:10:56,395
pentru a folosi în altă parte pe site-ul meu la,
cum ar fi, face frumos și de coeziune.

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

264
00:11:00,430 --> 00:11:04,260
>> TOMAS REIMERS: lui Allison vorbesc despre
unul de Adobe Kuler numit, cred.

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

266
00:11:04,885 --> 00:11:06,259
ALLISON BUCHHOLTZ-AU: Cred că da.

267
00:11:06,259 --> 00:11:07,610
Sunt destul de sigur că este.

268
00:11:07,610 --> 00:11:11,050
>> TOMAS REIMERS: Preferatul meu are
fost întotdeauna schemă de culori Designer.

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

270
00:11:13,998 --> 00:11:16,010
>> TOMAS REIMERS: Care este now--

271
00:11:16,010 --> 00:11:16,860
>> ALLISON BUCHHOLTZ-AU:
Ah, aceasta este frumos.

272
00:11:16,860 --> 00:11:18,818
>> TOMAS REIMERS: Și tu
se poate spune practic, cum ar fi,

273
00:11:18,818 --> 00:11:21,700
Vreau trei culori unul lângă altul.

274
00:11:21,700 --> 00:11:25,030
Și apoi să facem ceva frumos.

275
00:11:25,030 --> 00:11:29,210
Și apoi puteți obține un exemplu
de ce care ar putea arata.

276
00:11:29,210 --> 00:11:32,470
Și apoi, dacă tu hover peste oricare dintre
le, vă oferă valoarea hex.

277
00:11:32,470 --> 00:11:35,010
>> Deci, doar ca o modalitate buna de a începe
gândesc scheme de culori

278
00:11:35,010 --> 00:11:39,570
sau ce culori într-un site web
s-ar putea merge bine împreună.

279
00:11:39,570 --> 00:11:45,655
Pentru că poate fi surprinzător
nu la fel de ușor pentru a ridica cum crezi tu.

280
00:11:45,655 --> 00:11:48,280
Și apoi un alt lucru rece
Am găsit întotdeauna despre acest site

281
00:11:48,280 --> 00:11:51,480
este dacă te-a lovit Exemple, va
arată o site web exemplu

282
00:11:51,480 --> 00:11:54,800
ar putea arata ca, folosind acest sistem de culori.

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

284
00:11:56,270 --> 00:11:57,863
>> Înapoi la real CSS.

285
00:11:57,863 --> 00:12:01,112
ALLISON BUCHHOLTZ-AU: Dar, evident, noi
știu aceste referințe ar putea fi utile.

286
00:12:01,112 --> 00:12:03,195
TOMAS REIMERS: Nu,
cu siguranta poate fi de ajutor.

287
00:12:03,195 --> 00:12:04,720
Deci, a doua regula, Allison?

288
00:12:04,720 --> 00:12:05,844
>> ALLISON BUCHHOLTZ-AU: Da.

289
00:12:05,844 --> 00:12:08,280
A doua regulă este doar
corespunzătoare font noastre.

290
00:12:08,280 --> 00:12:11,520
Deci, greutate font este doar un fel
de-- astfel încât greutatea ar fi

291
00:12:11,520 --> 00:12:15,220
fi dacă doriți doar, cum ar fi,
normală sau, cum ar fi, fonturi mai subțiri,

292
00:12:15,220 --> 00:12:17,251
sau în acest caz, cum ar fi, bold.

293
00:12:17,251 --> 00:12:17,750
Am uitat.

294
00:12:17,750 --> 00:12:21,557
Care este, dacă ai vrut it-- este acolo
unul mai subțire decât, cum ar fi, normal?

295
00:12:21,557 --> 00:12:24,140
TOMAS REIMERS: Eu nu fac de fapt
știu dacă există un singur subtire.

296
00:12:24,140 --> 00:12:24,680
ALLISON BUCHHOLTZ-AU: Am uitat.

297
00:12:24,680 --> 00:12:26,300
Greutate, astfel font noi de obicei
utilizați pentru îndrăzneț.

298
00:12:26,300 --> 00:12:29,010
Dacă doriți să obțineți într-adevăr în
aceasta, vom să-ți arăt.

299
00:12:29,010 --> 00:12:34,317
W3Schools are toate diferite
lucruri pe care le puteți face pentru fonturi.

300
00:12:34,317 --> 00:12:36,900
Dar, practic, dacă vrei vreodată
pentru a schimba ceva despre font,

301
00:12:36,900 --> 00:12:39,330
este întotdeauna o să fie,
cum ar fi, font-ceva.

302
00:12:39,330 --> 00:12:43,450
Deci, va fi ca, font-family daca esti
încercarea de a schimba tipul de actuale.

303
00:12:43,450 --> 00:12:47,390
Va fi de tip font, dacă
vrea să-l facă ca cursiv,

304
00:12:47,390 --> 00:12:49,710
sau italice, sau fleacuri.

305
00:12:49,710 --> 00:12:53,570
Sau chiar font-culoare, în cazul în care
am vrut să schimbe asta.

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

307
00:12:55,621 --> 00:12:56,925
Astfel, puteți schimba asta.

308
00:12:56,925 --> 00:12:59,360
Și un fel de doar pentru a
recapitulare acum, astfel încât să puteți

309
00:12:59,360 --> 00:13:01,400
vedea că avem selectorul aici.

310
00:13:01,400 --> 00:13:03,000
Avem aceste acolade.

311
00:13:03,000 --> 00:13:06,735
Și apoi avem reguli
delimitate prin punct și virgulă.

312
00:13:06,735 --> 00:13:08,100
Asta face sens?

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

314
00:13:09,130 --> 00:13:10,500
Se răcește.

315
00:13:10,500 --> 00:13:13,200
Deci, dacă aceasta este good--

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

317
00:13:14,424 --> 00:13:17,590
TOMAS REIMERS: Să vorbim în mod specific
despre ce fel de selectori avem.

318
00:13:17,590 --> 00:13:19,790
Pentru că acum ne-am
fel de arătat doar etichete.

319
00:13:19,790 --> 00:13:21,696
Dar voi putea vedea plauzibil.

320
00:13:21,696 --> 00:13:23,570
Spuneți că ați avea două paragrafe
pe o pagină și tu

321
00:13:23,570 --> 00:13:26,087
vrea să fie în măsură să stil
unul dar nu de alta,

322
00:13:26,087 --> 00:13:29,170
nu vrei doar sa te limitezi
să aibă de a utiliza diferite HTML real

323
00:13:29,170 --> 00:13:33,410
tag-uri pentru a le da stiluri diferite.

324
00:13:33,410 --> 00:13:35,995
>> Deci avem trei extinsă
tipuri de selectoare.

325
00:13:35,995 --> 00:13:37,120
ALLISON BUCHHOLTZ-AU: Da.

326
00:13:37,120 --> 00:13:39,828
Deci avem tag-ul, care este ceea ce
am vorbit despre chiar acum.

327
00:13:39,828 --> 00:13:42,430
Deci, asta e un fel de organism sau p tău.

328
00:13:42,430 --> 00:13:46,280
Și apoi ne-am clasa, care este
când am defini în dosarul nostru CSS,

329
00:13:46,280 --> 00:13:49,907
este întotdeauna o să fie dot, indiferent de
vrei numele clasei a fi.

330
00:13:49,907 --> 00:13:51,490
Și acest lucru se poate aplica la mai multe lucruri.

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

332
00:13:54,610 --> 00:13:57,610
>> Spuneți că ați avea cinci alineatele
și doi dintre cei trei

333
00:13:57,610 --> 00:14:00,580
trebuie să fie aranjat la fel,
v-ar aplica o clasă de ea.

334
00:14:00,580 --> 00:14:03,040
Și acesta este doar modul în care o facem.

335
00:14:03,040 --> 00:14:05,600
Vă vom da un exemplu de
în cazul în care acest lucru arată de fapt în sus.

336
00:14:05,600 --> 00:14:11,030
Dar dacă ai avea poate ceva etichetă
p, după ce, ar trebui să scrie,

337
00:14:11,030 --> 00:14:14,170
clasă este egal indiferent de clase
doriți să aplicați la ea.

338
00:14:14,170 --> 00:14:19,280
Deci, indiferent de selectoare de clasă pe care ne-o dorim
să se aplice prezentul alineat specific,

339
00:14:19,280 --> 00:14:21,300
am putea scrie la fel ca aceasta.

340
00:14:21,300 --> 00:14:24,080
Desigur, cred că un exemplu
este mult mai concret va face.

341
00:14:24,080 --> 00:14:27,270
>> Celălalt avem
este id, pe care vom nota

342
00:14:27,270 --> 00:14:29,707
cu un hash, sau lira, sau 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
Asta functioneaza, de asemenea.

346
00:14:34,550 --> 00:14:36,640
Și asta ar trebui să fie într-adevăr unic.

347
00:14:36,640 --> 00:14:39,880
Acestea ar trebui să se aplice numai
un singur lucru pe pagina ta.

348
00:14:39,880 --> 00:14:43,820
Deci, dacă asta e un anumit paragraf,
sau unele element dintr-o listă, sau orice altceva,

349
00:14:43,820 --> 00:14:45,090
acest lucru ar trebui să fie unic.

350
00:14:45,090 --> 00:14:48,730
Și, în același mod în care ne-am
spune, cum ar fi, class = "Class1 class2,"

351
00:14:48,730 --> 00:14:51,577
acest lucru poate fi doar id de orice avem.

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

353
00:14:52,410 --> 00:14:54,330
Deci, hai sa vorbim cu siguranta
despre exemple aici.

354
00:14:54,330 --> 00:14:58,170
Și am de gând doar să se scufunde
direct înapoi în codul.

355
00:14:58,170 --> 00:15:02,090
Deci, să ne uităm la HTML noastre.

356
00:15:02,090 --> 00:15:03,960
Și așa am chiar acum un paragraf.

357
00:15:03,960 --> 00:15:05,510
Acest lucru este text.

358
00:15:05,510 --> 00:15:09,151
Mă duc să modifice
ea. "Aceasta este un text 1."

359
00:15:09,151 --> 00:15:11,150
Și apoi vom
au o "Acesta este un text 2."

360
00:15:11,150 --> 00:15:12,525
>> ALLISON BUCHHOLTZ-AU: A doua una.

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

362
00:15:13,540 --> 00:15:16,810
Deci avem acum "Acesta este un text de 2", nu?

363
00:15:16,810 --> 00:15:21,560
Și vom vedea că, dacă vom reîncărca
pagina, ceea ce vom găsi

364
00:15:21,560 --> 00:15:23,067
este vom 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: Da.

367
00:15:24,983 --> 00:15:27,570
Vom găsi o "Aceasta este
text 1 "și" Acesta este textul 2. "

368
00:15:27,570 --> 00:15:28,650
>> ALLISON BUCHHOLTZ-AU: Și
out minunat de culoare galbenă.

369
00:15:28,650 --> 00:15:31,066
>> TOMAS REIMERS: Și veți vedea
că selectorul nostru chiar acum,

370
00:15:31,066 --> 00:15:34,940
care se aplică la p lui, sau
punctele, afectează atât de ele,

371
00:15:34,940 --> 00:15:38,700
pentru că ambele se întâlnesc
condiția că sunt amândoi o etichetă p.

372
00:15:38,700 --> 00:15:40,360
Asta are sens totală.

373
00:15:40,360 --> 00:15:43,340
Deci întrebarea este, ei bine, ce
dacă am vrut să obține doar unul?

374
00:15:43,340 --> 00:15:46,350
Deci, exact ca Allison spunea,
avem alte două moduri de a face asta.

375
00:15:46,350 --> 00:15:47,320
Am de gând să încep cu id-ul.

376
00:15:47,320 --> 00:15:48,405
>> ALLISON BUCHHOLTZ-AU:
Să începem cu id-ul.

377
00:15:48,405 --> 00:15:50,405
>> TOMAS REIMERS: Și ambele
dintre acestea sunt atribute.

378
00:15:50,405 --> 00:15:53,200
Deci, există atribute in HTML.

379
00:15:53,200 --> 00:15:55,600
Și ceea ce sunt este
ceva care să adăugați

380
00:15:55,600 --> 00:15:58,840
în interiorul tag care este
separat de numele tag-ul.

381
00:15:58,840 --> 00:16:01,301
Deci, puteți avea mai multe atribute.

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

383
00:16:01,800 --> 00:16:03,950
>> ALLISON BUCHHOLTZ-AU: Am fost doar de gând
să spun, din exemplul de la PSET 7,

384
00:16:03,950 --> 00:16:06,650
dacă oricare dintre voi încerca să se alinieze
lucrurile la centru,

385
00:16:06,650 --> 00:16:08,550
s-ar putea fi folosit
"Text align = center."

386
00:16:08,550 --> 00:16:10,550
Și ai observat, probabil,
ar fi centrat

387
00:16:10,550 --> 00:16:12,650
text sau bara de navigare.

388
00:16:12,650 --> 00:16:15,499
Deci, asta e doar un atribut, de asemenea,
care ar putea să fie familiarizat cu.

389
00:16:15,499 --> 00:16:18,040
TOMAS REIMERS: Există o grămadă
de atribute pe care le veți vedea.

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

391
00:16:18,539 --> 00:16:21,250
Ca bun de referință pentru PSET 7.

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

393
00:16:23,150 --> 00:16:25,080
Puteți avea, de asemenea,
clasă, lucruri de genul asta.

394
00:16:25,080 --> 00:16:27,250
O singură etichetă poate avea mai multe atribute.

395
00:16:27,250 --> 00:16:33,140
Deci, incepand cu id-ul, să ne prefacem
doresc să aibă un id de-- Nu știu.

396
00:16:33,140 --> 00:16:35,140
Vom numi specială,
pentru că acesta, suntem

397
00:16:35,140 --> 00:16:37,867
de gând să facă îndrăzneț, și
subliniază, și orice.

398
00:16:37,867 --> 00:16:39,950
ALLISON BUCHHOLTZ-AU: E
Va fi super-speciale.

399
00:16:39,950 --> 00:16:42,360
TOMAS REIMERS: Deci asta
o, avem id speciala.

400
00:16:42,360 --> 00:16:48,140
Deci, modul de a selecta că, atunci, este
în main.css, mai degrabă decât să aibă o etichetă p,

401
00:16:48,140 --> 00:16:51,500
ce faci #special, bine?

402
00:16:51,500 --> 00:16:55,538
Și selectează
lucru cu id-ul special.

403
00:16:55,538 --> 00:16:57,295
Are acest sens pentru toată lumea?

404
00:16:57,295 --> 00:16:57,920
Audiența: Da.

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

406
00:16:59,110 --> 00:17:04,440
Deci, acum, dacă ne întoarcem,
vom see-- Hopa.

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

408
00:17:06,240 --> 00:17:09,460
Vom vedea că numai selectează
cel cu id-ul special.

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

410
00:17:10,622 --> 00:17:11,900
Sună rece.

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

412
00:17:12,570 --> 00:17:15,456
>> Audiența: Poate ceva avea un
atribut atât de clasă și un id?

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

414
00:17:16,359 --> 00:17:16,900
Audiența: OK.

415
00:17:16,900 --> 00:17:20,887
Și apoi ce se întâmplă dacă, atunci da
ea unele reguli în CSS acest conflict?

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

417
00:17:21,970 --> 00:17:23,940
Suntem cu siguranta vom
pentru a vorbi despre asta.

418
00:17:23,940 --> 00:17:31,890
Deci, exact ceea ce au fost obtinerea
la, puteți avea, de asemenea, cursuri.

419
00:17:31,890 --> 00:17:36,380
Așa că haideți să pretindem am avut
trei paragrafe și I

420
00:17:36,380 --> 00:17:38,730
a vrut să stilul primul
doi, dar nu a treia.

421
00:17:38,730 --> 00:17:42,850
Ei bine, în primul rând ideea ta ar putea fi, de asemenea, am
ar putea da doar doua un id.

422
00:17:42,850 --> 00:17:45,590
Dar nu poți, pentru că un id,
exact ca Allison spunea,

423
00:17:45,590 --> 00:17:47,330
trebuie să fie unic.

424
00:17:47,330 --> 00:17:50,860
>> Deci, în loc de un id, ceea ce
poate utiliza este de a putea utiliza o clasă.

425
00:17:50,860 --> 00:17:57,880
Și o class-- ce permite
să faci este spus în esență,

426
00:17:57,880 --> 00:17:59,610
acest aparține ca parte a unui grup.

427
00:17:59,610 --> 00:18:02,410
În acest caz, grupul nostru
se numește speciale.

428
00:18:02,410 --> 00:18:06,500
Și ce vom face atunci este
vom say--, mai degrabă decât lira,

429
00:18:06,500 --> 00:18:08,070
vom folosi punct.

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

431
00:18:08,740 --> 00:18:11,950
Și observați că lira și punctul
există doar în fișierul CSS,

432
00:18:11,950 --> 00:18:12,797
nu în HTML.

433
00:18:12,797 --> 00:18:13,880
ALLISON BUCHHOLTZ-AU: Da.

434
00:18:13,880 --> 00:18:15,185
Distincție importantă.

435
00:18:15,185 --> 00:18:17,510
>> TOMAS REIMERS: Am
a avut atât de mult lupta,

436
00:18:17,510 --> 00:18:23,990
pentru că am pus hash în HTML și
apoi am simțit prost pentru o lungă perioadă de timp.

437
00:18:23,990 --> 00:18:27,470
Vezi cum selectează atât de
cei cu care clasă?

438
00:18:27,470 --> 00:18:28,210
Se răcește.

439
00:18:28,210 --> 00:18:29,950
>> Acum, lucrurile pot avea mai multe clase.

440
00:18:29,950 --> 00:18:32,790
Să spun că am vrut să fac primul
doi au un fond de culoare galbenă

441
00:18:32,790 --> 00:18:36,770
iar următoarele două au
o culoare font de albastru.

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

443
00:18:37,270 --> 00:18:39,735
Nu știu cu adevărat de ce mi-ar
vrei sa faci asta, dar eu pot.

444
00:18:39,735 --> 00:18:42,401
>> ALLISON BUCHHOLTZ-AU: nu Might
recomandat-o pentru site-ul tau.

445
00:18:42,401 --> 00:18:43,880
Dar pentru scopurile noastre, va face.

446
00:18:43,880 --> 00:18:46,294
>> TOMAS REIMERS: Nu este
o schemă de culori bun.

447
00:18:46,294 --> 00:18:49,210
ALLISON BUCHHOLTZ-AU: Ei bine, galben
și albastru sunt culorile mele de liceu.

448
00:18:49,210 --> 00:18:50,947
Nu știu, totuși.

449
00:18:50,947 --> 00:18:53,530
TOMAS REIMERS: lui Allison mare
școală a avut o schemă de culori mare.

450
00:18:53,530 --> 00:18:54,520
[Râsete]

451
00:18:54,520 --> 00:18:59,120
Deci, atunci ceea ce putem numi acest lucru este
Să numim asta: deci avem Special

452
00:18:59,120 --> 00:19:00,030
și avem destul.

453
00:19:00,030 --> 00:19:02,405
Vă sugerez, pentru aceasta, să utilizați
Numele mult mai descriptive.

454
00:19:02,405 --> 00:19:05,820
ALLISON BUCHHOLTZ-AU: Da, aș face-
numesc acest lucru, cum ar fi, galben sau albastru.

455
00:19:05,820 --> 00:19:08,314
>> TOMAS REIMERS: Nu suntem
a face într-adevăr un site web reală,

456
00:19:08,314 --> 00:19:09,730
care este motivul pentru care noi nu facem asta.

457
00:19:09,730 --> 00:19:11,521
Dar dacă de fapt
a avut un site web reali,

458
00:19:11,521 --> 00:19:16,220
ar putea avea, cum ar fi, antet articol,
conținut articol, în primul rând cuvânt,

459
00:19:16,220 --> 00:19:21,920
lucruri de genul asta, care permit
să fie mult mai descriptiv.

460
00:19:21,920 --> 00:19:23,550
Acestea sunt de fapt la fel ca variabile.

461
00:19:23,550 --> 00:19:28,390
Acestea ar trebui să fie numit într-un mod în care
puteți, like-- da, ca atare.

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

463
00:19:29,470 --> 00:19:30,480
>> Deci, culoarea de fundal.

464
00:19:30,480 --> 00:19:35,920
Și apoi vom say-- așa
modalitate de a schimba culoarea este doar "culoare".

465
00:19:35,920 --> 00:19:38,412
Și vom face albastru.

466
00:19:38,412 --> 00:19:40,150
Asta e tare.

467
00:19:40,150 --> 00:19:42,640
Deci, acum avem
primele două au speciala.

468
00:19:42,640 --> 00:19:45,972
O departe va
au "class = destul de."

469
00:19:45,972 --> 00:19:49,180
ALLISON BUCHHOLTZ-AU: Și atunci veți
doriți să adăugați "destul de" la cea de mijloc.

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

471
00:19:49,971 --> 00:19:52,970
Și apoi a mijloc cea,
pentru a adăuga "destul de" ceea ce se întâmplă

472
00:19:52,970 --> 00:19:56,880
este, trebuie doar un spațiu.

473
00:19:56,880 --> 00:19:59,800
Astfel, atributul de clasă
este o listă separată, spațiu

474
00:19:59,800 --> 00:20:02,450
a tuturor claselor
care se aplică acea etichetă.

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

476
00:20:02,959 --> 00:20:05,750
Nu e ca și cum aparține acesta a
un fel de clasa speciala numita

477
00:20:05,750 --> 00:20:07,180
", Spatiu special, destul de".

478
00:20:07,180 --> 00:20:10,870
Ea aparține două classes--
specială și destul de.

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

480
00:20:12,492 --> 00:20:14,360
Se răcește.

481
00:20:14,360 --> 00:20:17,010
>> Și apoi dacă ne uităm
la ce se întâmplă, suntem

482
00:20:17,010 --> 00:20:21,850
vom vedea că în primul rând o are
fond galben, text negru.

483
00:20:21,850 --> 00:20:22,450
În al doilea rând Unu

484
00:20:22,450 --> 00:20:26,160
>> ALLISON BUCHHOLTZ-AU: --has bold
fond galben cu text albastru.

485
00:20:26,160 --> 00:20:29,330
Și ultima noastră are doar
Textul albastru pe care am atribuit-l.

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

487
00:20:30,870 --> 00:20:32,491
Cum selectoare de lucru?

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

489
00:20:32,990 --> 00:20:34,720
>> ALLISON BUCHHOLTZ-AU: Nu vrem să
vorbesc despre conflictul acum, atunci?

490
00:20:34,720 --> 00:20:35,780
>> TOMAS REIMERS: Deci da.

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

492
00:20:36,310 --> 00:20:38,380
Deci, ce se întâmplă dacă
au un conflict, nu?

493
00:20:38,380 --> 00:20:44,740
Să presupunem că prima
stabilește ceva like--

494
00:20:44,740 --> 00:20:47,240
ALLISON BUCHHOLTZ-AU: Poate
acesta modifică fundal?

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

496
00:20:48,090 --> 00:20:51,699
Deci, vom face "destul de"
schimba fundalul de somon.

497
00:20:51,699 --> 00:20:54,740
ALLISON BUCHHOLTZ-AU: Ești doar cu
toate marile culorile astăzi, Tomas.

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

499
00:20:55,573 --> 00:20:58,200
Pentru că am aflat că pot
folosesc somon ca o culoare adevărat.

500
00:20:58,200 --> 00:21:00,270
Așa că doar de gând să faci asta.

501
00:21:00,270 --> 00:21:01,770
De asemenea, cred Sunset este o culoare adevărat.

502
00:21:01,770 --> 00:21:03,103
Audiența: Apus de soare este o culoare adevărat?

503
00:21:03,103 --> 00:21:04,572
ALLISON BUCHHOLTZ-AU: Hai să încercăm.

504
00:21:04,572 --> 00:21:07,735
TOMAS REIMERS: După această demonstrație
doar pentru că în cazul în care de oaie,

505
00:21:07,735 --> 00:21:08,943
Nu vreau să fie depanare.

506
00:21:08,943 --> 00:21:11,580
Deci, noi știm somon este o culoare adevărat.

507
00:21:11,580 --> 00:21:15,626
Deci, orice presupuneri cu privire la
ce se va întâmpla?

508
00:21:15,626 --> 00:21:17,522
>> ALLISON BUCHHOLTZ-AU: Orice idee?

509
00:21:17,522 --> 00:21:20,002
>> Audiența: [neauzit].

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

511
00:21:20,920 --> 00:21:22,150
Deci ai o exact dreapta.

512
00:21:22,150 --> 00:21:24,930
Practic, este nevoie de
Ultima regulă că a fost dat.

513
00:21:24,930 --> 00:21:27,860
>> ALLISON BUCHHOLTZ-AU: Deci asta este
în cazul în care va intra în vigoare în cascadă.

514
00:21:27,860 --> 00:21:31,080
>> TOMAS REIMERS: Deci amintesc cum am
a avut ca cascadă foi de stil?

515
00:21:31,080 --> 00:21:33,660
Deci, prin asta, am un fel de medie
că avem o grămadă de reguli

516
00:21:33,660 --> 00:21:37,115
care se aplică pe partea de sus a reciproc, și
ele pot, de asemenea, trece peste reciproc.

517
00:21:37,115 --> 00:21:39,380
>> ALLISON BUCHHOLTZ-AU: Deci
indiferent de la partea de jos

518
00:21:39,380 --> 00:21:41,540
va suprascrie orice este în partea de sus.

519
00:21:41,540 --> 00:21:45,842
Ai putea avea reguli care complet
nega ceva înainte.

520
00:21:45,842 --> 00:21:48,300
Acesta este, de asemenea, de ce vrei să fi
Aveți grijă când ești styling,

521
00:21:48,300 --> 00:21:51,465
astfel încât să nu creați reguli
esti doar complet imperative.

522
00:21:51,465 --> 00:21:53,340
>> TOMAS REIMERS: Sau poate te
vreau să suprascrieți regulile.

523
00:21:53,340 --> 00:21:53,920
>> ALLISON BUCHHOLTZ-AU: Sau poate faci.

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

525
00:21:54,300 --> 00:21:57,175
>> TOMAS REIMERS: Simularea ai o
clasă care se aplică la cele mai multe lucruri,

526
00:21:57,175 --> 00:22:01,220
dar să spunem că doriți să schimbați
culoarea de fundal pentru roșu și fontul

527
00:22:01,220 --> 00:22:03,140
greutate la bold pentru cele mai multe
lucruri, dar pentru unul,

528
00:22:03,140 --> 00:22:06,098
vrei doar culoarea de fundal
a fi de culoare roșie, dar vrei toate celelalte

529
00:22:06,098 --> 00:22:09,990
proprietăți, ai putea face ceva
ca "font-weight = normal",

530
00:22:09,990 --> 00:22:12,760
ceea ce ar anula apoi că schimbările îndrăzneț.

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

532
00:22:14,480 --> 00:22:17,250
Din nou, cel mai bun mod, cred
Allison a spus că este doar practică.

533
00:22:17,250 --> 00:22:18,080
>> ALLISON BUCHHOLTZ-AU: Experimentarea.

534
00:22:18,080 --> 00:22:20,090
>> TOMAS REIMERS: Practice, practica,
practică, și experiment.

535
00:22:20,090 --> 00:22:22,950
Știu o mulțime de oameni care cred
CSS este doar o mulțime de ghici-și check-

536
00:22:22,950 --> 00:22:25,580
la sfârșitul zilei, unde dacă
vrei sa faci something-- cum ar fi,

537
00:22:25,580 --> 00:22:27,663
Ai o idee, dar
încă, probabil, nevoie

538
00:22:27,663 --> 00:22:31,390
să-l încercați să vă asigurați că
Știi cum arată.

539
00:22:31,390 --> 00:22:34,482
>> Audiența: Când aplici
clase, mai mult de un

540
00:22:34,482 --> 00:22:37,339
la același alineat
sau secțiune, o face

541
00:22:37,339 --> 00:22:39,505
indiferent de ceea ce poți comanda
le introduceți în ghilimele?

542
00:22:39,505 --> 00:22:40,992
>> TOMAS REIMERS: Nu, deloc.

543
00:22:40,992 --> 00:22:45,764
>> ALLISON BUCHHOLTZ-AU: Ceea ce contează este
comanda în termen de foaie de stil CSS.

544
00:22:45,764 --> 00:22:47,430
Audiența: Puteți să repetați întrebarea?

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

546
00:22:50,680 --> 00:22:53,990
ALLISON BUCHHOLTZ-AU: În
clasă, atunci când dau clase

547
00:22:53,990 --> 00:22:56,964
la ceva în HTML, nu
contează ce ordine sunt in?

548
00:22:56,964 --> 00:22:58,130
Nu contează ordinea.

549
00:22:58,130 --> 00:23:02,915
Ceea ce contează este de ordinul a
selectoare de clasă din cadrul CSS-ul,

550
00:23:02,915 --> 00:23:04,306
în foaia de stil.

551
00:23:04,306 --> 00:23:06,982
>> TOMAS REIMERS: bun sunet?

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

553
00:23:08,532 --> 00:23:11,539
>> TOMAS REIMERS: Și apoi
vom continua sa--

554
00:23:11,539 --> 00:23:13,330
ALLISON BUCHHOLTZ-AU:
Ce avem viitor?

555
00:23:13,330 --> 00:23:14,245
Am uitat.

556
00:23:14,245 --> 00:23:16,087
Oh, noi trebuie doar exemple.

557
00:23:16,087 --> 00:23:17,295
Dar am un fel de făcut celor.

558
00:23:17,295 --> 00:23:18,990
Am făcut exemple pe zbor.

559
00:23:18,990 --> 00:23:20,540
>> TOMAS REIMERS: Ajungem la
combina selectorii curând.

560
00:23:20,540 --> 00:23:22,790
>> ALLISON BUCHHOLTZ-AU: Oh,
ajungem la combina selectoare.

561
00:23:22,790 --> 00:23:25,260
TOMAS REIMERS: Deci unii
Exemple este avem

562
00:23:25,260 --> 00:23:29,630
# Lira dog--, sau hashtag,
sau octothorpe, sau orice

563
00:23:29,630 --> 00:23:32,050
doriți să apelați that-- ascuțite.

564
00:23:32,050 --> 00:23:34,875
>> ALLISON BUCHHOLTZ-AU: câine Sharp.

565
00:23:34,875 --> 00:23:36,470
>> TOMAS REIMERS: Atunci ai .pets.

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

567
00:23:39,059 --> 00:23:41,600
Ceva are un id de câine,
există doar un singur câine pe pagina.

568
00:23:41,600 --> 00:23:43,870
Ceva are un id de
pisică, nu există decât o pisică.

569
00:23:43,870 --> 00:23:45,665
Pot exista multe animale de companie pe pagina.

570
00:23:45,665 --> 00:23:47,570
De aceea am dat acea clase.

571
00:23:47,570 --> 00:23:48,740
Aveți un exemplu de p.

572
00:23:48,740 --> 00:23:50,490
Și apoi așa-unul din
Ultima exemplu, care

573
00:23:50,490 --> 00:23:53,790
este ceva ce nu am vorbit despre,
este ceea ce se întâmplă atunci când le combinați.

574
00:23:53,790 --> 00:23:54,580
Deci, p.pets.

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

576
00:23:57,510 --> 00:24:02,950
>> Deci, pentru că, hai să ne întoarcem la
cod și să introducă another-- da.

577
00:24:02,950 --> 00:24:04,290
Deci, aici.

578
00:24:04,290 --> 00:24:04,850
>> ALLISON BUCHHOLTZ-AU: I
simt ca aceasta este really--

579
00:24:04,850 --> 00:24:08,105
ca doar cauți prin exemple
este într-adevăr modul de a învăța acest lucru.

580
00:24:08,105 --> 00:24:09,360
Deci, asta e ceea ce facem.

581
00:24:09,360 --> 00:24:14,030
>> TOMAS REIMERS: Deci să ne prefacem
doar doriți să o selectați textul 2, nu?

582
00:24:14,030 --> 00:24:16,530
Deci cu siguranta nu putem
face asta cu un id.

583
00:24:16,530 --> 00:24:19,620
Ei bine, am putea face asta cu un
id, dar aceasta nu are un id.

584
00:24:19,620 --> 00:24:22,490
Aș putea adăuga unul, dar hai sa pretindem
că nu am vrut să adăugați un

585
00:24:22,490 --> 00:24:24,910
sau are deja altceva.

586
00:24:24,910 --> 00:24:26,516
Nu pot face asta cu asta.

587
00:24:26,516 --> 00:24:28,870
Eticheta nu este cu siguranta unic, nu?

588
00:24:28,870 --> 00:24:30,670
Și nici nu este clasa.

589
00:24:30,670 --> 00:24:32,314
Dar puteți combina aceste lucruri.

590
00:24:32,314 --> 00:24:35,230
Să spunem că am vrut să facem ceva
care se aplică numai la lucruri care

591
00:24:35,230 --> 00:24:39,420
au speciale de clasă și
care au clasa destul de.

592
00:24:39,420 --> 00:24:48,150
>> Deci, ce puteți face este în main.css,
vă pot spune, hai șterge primul acest lucru.

593
00:24:48,150 --> 00:24:50,240
Puteți combina aceste.

594
00:24:50,240 --> 00:24:51,430
Astfel, puteți face .special.

595
00:24:51,430 --> 00:24:52,110
Nu există spațiu.

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

597
00:24:54,770 --> 00:25:00,550
Ce înseamnă că este ceva
care este atât de special și destul de.

598
00:25:00,550 --> 00:25:01,900
Asta face sens?

599
00:25:01,900 --> 00:25:04,190
Și dacă mergem aici, ceea ce
veti vedea

600
00:25:04,190 --> 00:25:09,734
este această regulă se aplică numai pentru
în al doilea rând este de care are atât de cei.

601
00:25:09,734 --> 00:25:11,400
Și tu poți face asta pentru o mulțime de lucruri.

602
00:25:11,400 --> 00:25:13,270
Puteți say-- să
prefac Am vrut doar

603
00:25:13,270 --> 00:25:18,300
de a face lucruri care au clasa destul de
și care sunt, de asemenea, o etichetă paragraf.

604
00:25:18,300 --> 00:25:19,920
Deci, p.pretty.

605
00:25:19,920 --> 00:25:23,585
Să presupunem că am avut
ceva destul de pe corp tag.

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

607
00:25:25,850 --> 00:25:28,490
Pot rula acest lucru și eu
se poate vedea că este doar

608
00:25:28,490 --> 00:25:32,720
O să se aplice lucruri care sunt
punctele cu clasa destul de.

609
00:25:32,720 --> 00:25:35,650
Și tu poți combina aceste,
practic, cât mai multe, după cum doriți.

610
00:25:35,650 --> 00:25:38,580
Așa că doar le puteți pune împreună.

611
00:25:38,580 --> 00:25:39,604
Asta face sens?

612
00:25:39,604 --> 00:25:41,770
ALLISON BUCHHOLTZ-AU: Deci
acest tip de este mai util

613
00:25:41,770 --> 00:25:45,490
când, Tomas spunea mai devreme, poate
aveți un site foarte complicat,

614
00:25:45,490 --> 00:25:48,050
și ai deja o mulțime
a acestor reguli scrise,

615
00:25:48,050 --> 00:25:51,170
și trebuie doar să
combină două din înainte.

616
00:25:51,170 --> 00:25:55,350
Ca loc de a scrie un întreg
nou selector si o schimbare acolo,

617
00:25:55,350 --> 00:25:58,592
puteti combina doar
le în cazul în care se suprapune.

618
00:25:58,592 --> 00:26:00,670
>> TOMAS REIMERS: Sau
s-ar putea găsi out-- uneori

619
00:26:00,670 --> 00:26:04,290
există o clasă care
face culoarea fontului e ca albastru,

620
00:26:04,290 --> 00:26:06,740
și nu există o altă clasă care
face albastru fundal.

621
00:26:06,740 --> 00:26:07,840
Și asta pur si simplu nu va funcționa.

622
00:26:07,840 --> 00:26:10,924
Deci scrie un caz special, în cazul în care,
like-- dar în cazul în care are atât, ceea ce ești

623
00:26:10,924 --> 00:26:13,548
O să faceți este să ai de gând să
fac asta această nuanță de albastru

624
00:26:13,548 --> 00:26:15,310
iar aceasta o altă acest nuanță de albastru.

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

626
00:26:15,580 --> 00:26:17,955
>> ALLISON BUCHHOLTZ-AU: Bun
pentru acele tipuri de excepții.

627
00:26:17,955 --> 00:26:21,220
TOMAS REIMERS: Deci, pentru a
cred despre problemele

628
00:26:21,220 --> 00:26:25,000
care ar putea apărea atunci când le combinați.

629
00:26:25,000 --> 00:26:27,020
Se răcește.

630
00:26:27,020 --> 00:26:29,692
Deci, înapoi la prezentarea noastră.

631
00:26:29,692 --> 00:26:31,400
ALLISON BUCHHOLTZ-AU:
Suntem aproape acolo.

632
00:26:31,400 --> 00:26:34,022
TOMAS REIMERS: Și
sa oprit de conectare.

633
00:26:34,022 --> 00:26:36,494
ALLISON BUCHHOLTZ-AU: Oh, nu.

634
00:26:36,494 --> 00:26:39,125
ALLISON BUCHHOLTZ-AU: CS la
birou, internet se duce în jos.

635
00:26:39,125 --> 00:26:40,360
Oh, ironia.

636
00:26:40,360 --> 00:26:45,620
>> TOMAS REIMERS: Deci, din fericire, putem
prezintă fără internet, cred,

637
00:26:45,620 --> 00:26:47,380
pentru că avem toate diapozitivele aici.

638
00:26:47,380 --> 00:26:49,304
Deci, hai sa vorbim despre
relație de tag-uri.

639
00:26:49,304 --> 00:26:50,470
ALLISON BUCHHOLTZ-AU: Corect.

640
00:26:50,470 --> 00:26:52,660
Deci, doar un fel de a merge
off de ceea ce a spus Tomas,

641
00:26:52,660 --> 00:26:54,180
aceasta este doar un alt mod de a face acest lucru.

642
00:26:54,180 --> 00:26:57,840
Deci avem niște mamă
selector cu un selector copil.

643
00:26:57,840 --> 00:27:02,815
Deci, în acest exemplu de aici, avem niște
corp cu o navbar clasă, buton de clasă.

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

645
00:27:03,315 --> 00:27:03,990
>> TOMAS REIMERS: Oh, îmi pare rău.

646
00:27:03,990 --> 00:27:06,180
>> ALLISON BUCHHOLTZ-AU: Și
practic, ce înseamnă acest lucru

647
00:27:06,180 --> 00:27:11,070
este selecta toți copiii, cum ar fi
toate aceste tipuri de selectoare,

648
00:27:11,070 --> 00:27:13,040
în acest selector părinte.

649
00:27:13,040 --> 00:27:16,004
Iar acestea sunt singurele
se vreodată de gând să se aplice.

650
00:27:16,004 --> 00:27:17,755
Nu știu dacă ați
au o cale mai bună de--

651
00:27:17,755 --> 00:27:19,504
TOMAS REIMERS: Deci, eu
ghici modul de a gândi

652
00:27:19,504 --> 00:27:22,440
despre acest lucru este amintesc înainte cât
am un fel de a le place pus împreună.

653
00:27:22,440 --> 00:27:26,340
Și apoi asta înseamnă un element
care corespund toate acestea.

654
00:27:26,340 --> 00:27:29,530
Ceea ce se spune este, eu
Vreau să se potrivească tot

655
00:27:29,530 --> 00:27:33,220
în some-- vreau
să găsiți un selector.

656
00:27:33,220 --> 00:27:35,670
Și apoi în asta, vreau
vă pentru a se potrivi lucruri noi.

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

658
00:27:36,170 --> 00:27:40,900
Deci, în CSS, totul despre un fel de
posibilitatea de a se potrivi aceste elemente.

659
00:27:40,900 --> 00:27:43,050
Și puteți încerca pentru a se potrivi
elemente în cadrul alte elemente.

660
00:27:43,050 --> 00:27:46,510
>> Deci, hai sa facem de fapt un exemplu,
și credem că vom clarifica.

661
00:27:46,510 --> 00:27:53,090
Așa că haideți să ne prefacem că avem de construcții,
special frumos, indiferent de.

662
00:27:53,090 --> 00:27:55,690
Și atunci avem o legătură, bine?

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

664
00:27:59,780 --> 00:28:02,370
Deci ține minte, o este un link.

665
00:28:02,370 --> 00:28:03,900
Nu va pleca nicăieri.

666
00:28:03,900 --> 00:28:11,500
Și vom da
link-ul de clasă, cred.

667
00:28:11,500 --> 00:28:13,335
Să-l da
class---mi dea o idee.

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-- hai
du-te-l clasa destul de.

670
00:28:16,420 --> 00:28:16,930
De ce nu?

671
00:28:16,930 --> 00:28:17,971
>> ALLISON BUCHHOLTZ-AU: OK.

672
00:28:17,971 --> 00:28:23,040
TOMAS REIMERS: Deci
lucrurile acum destul de

673
00:28:23,040 --> 00:28:26,000
sunt de gând să facă fundal
albastru, culoarea de fundal de somon.

674
00:28:26,000 --> 00:28:27,969
Asta are sens.

675
00:28:27,969 --> 00:28:28,760
Și dacă facem asta:

676
00:28:28,760 --> 00:28:29,620
>> ALLISON BUCHHOLTZ-AU:
Vrei să adăugați text

677
00:28:29,620 --> 00:28:31,078
astfel hyperlinkul fapt apare?

678
00:28:31,078 --> 00:28:35,088
TOMAS REIMERS: Această
ar fi un apel bun.

679
00:28:35,088 --> 00:28:37,921
ALLISON BUCHHOLTZ-AU: "Pentru că dreapta
acum suntem doar să iau nimic.

680
00:28:37,921 --> 00:28:39,690
TOMAS REIMERS: Deci, acesta este un link.

681
00:28:39,690 --> 00:28:42,202
"Aceasta este o legătură."

682
00:28:42,202 --> 00:28:45,820
Oh, și acest lucru se întâmplă
a fi un alt link.

683
00:28:45,820 --> 00:28:47,280
Să dau clasa "rece".

684
00:28:47,280 --> 00:28:50,295
Ai dreptate.

685
00:28:50,295 --> 00:28:50,795
Se răcește.

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

687
00:28:53,590 --> 00:28:56,010
Deci, chiar acum vom apuca asta.

688
00:28:56,010 --> 00:28:57,269
Vom arunca o.

689
00:28:57,269 --> 00:28:59,060
Avem o în
tag special, iar noi, de asemenea,

690
00:28:59,060 --> 00:29:01,150
vor avea o în tag-ul destul de.

691
00:29:01,150 --> 00:29:05,449
Și acum ce vom
faci este vom face cool--

692
00:29:05,449 --> 00:29:06,490
ce vrem să facem?

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

694
00:29:10,347 --> 00:29:12,180
ALLISON BUCHHOLTZ-AU:
Putem face mai mare?

695
00:29:12,180 --> 00:29:13,800
TOMAS REIMERS: Să dau un chenar.

696
00:29:13,800 --> 00:29:14,840
ALLISON BUCHHOLTZ-AU: Am putea frontieră.

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

698
00:29:15,673 --> 00:29:18,560
Deci, vom face ceva
cum ar fi, este-- frontieră și suntem

699
00:29:18,560 --> 00:29:20,971
O să explic toate astea într-o secundă.

700
00:29:20,971 --> 00:29:21,470
Pentru acum--

701
00:29:21,470 --> 00:29:24,592
>> ALLISON BUCHHOLTZ-AU: Pentru a modelului cutie.

702
00:29:24,592 --> 00:29:27,300
TOMAS REIMERS: Dar de acum, suntem
doar de gând să-i dea o frontieră.

703
00:29:27,300 --> 00:29:29,580
Deci, ce înseamnă că este ești
O să văd aceste link-uri.

704
00:29:29,580 --> 00:29:32,788
Și vei vedea că au
aceste, cum ar fi, frontiere negru urât, care

705
00:29:32,788 --> 00:29:33,820
este rece.

706
00:29:33,820 --> 00:29:34,500
>> ALLISON BUCHHOLTZ-AU:
Site-ul nostru e așa de frumos.

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

708
00:29:35,333 --> 00:29:38,930
Site-ul nostru este minunat.

709
00:29:38,930 --> 00:29:41,585
Deci, acestea două sunt link-uri, și acestea apar.

710
00:29:41,585 --> 00:29:44,160
Acum să mă prefac că
doar a vrut să facă acest lucru

711
00:29:44,160 --> 00:29:50,072
dacă nu era în ceva
care a avut un fundal de somon.

712
00:29:50,072 --> 00:29:52,280
Deci, amintiți-vă că acesta
are un fundal de somon,

713
00:29:52,280 --> 00:29:54,000
pentru că este de clasă destul de.

714
00:29:54,000 --> 00:29:59,777
>> Dar vrem să spunem că numai raceste
care sunt în clasa speciala, nu în clasă

715
00:29:59,777 --> 00:30:02,890
destul de, ar trebui să aibă acea graniță.

716
00:30:02,890 --> 00:30:12,549
Ei bine, ceea ce poate face este vă
poate spune, .special, spațiu, .cool.

717
00:30:12,549 --> 00:30:15,590
Și ce face asta, atunci când te gândești
despre ea, este e de fapt spune,

718
00:30:15,590 --> 00:30:19,530
OK, mă găsească tot
care se potrivește speciale.

719
00:30:19,530 --> 00:30:24,104
Apoi, în cadrul acestor etichete, găsi
mi tot ce e cool.

720
00:30:24,104 --> 00:30:27,270
ALLISON BUCHHOLTZ-AU: Deci un alt mod
care ar putea fi bine să se gândească la acest lucru,

721
00:30:27,270 --> 00:30:29,810
aducându-l înapoi la C, este
la fel ca și ideea de domeniul de aplicare.

722
00:30:29,810 --> 00:30:34,020
Deci, atunci când au unele
selector, cum ar fi cele

723
00:30:34,020 --> 00:30:38,460
că am fost de lucru pentru înainte de aceasta,
întreaga pagină web, toate HTML

724
00:30:38,460 --> 00:30:40,180
este în domeniul de aplicare, nu?

725
00:30:40,180 --> 00:30:43,090
Dar când avem aceste
relațiile părinte-copil,

726
00:30:43,090 --> 00:30:47,130
e ca și cum ai îngustarea jos în cazul în care
sunteți în căutarea pentru un loc specific,

727
00:30:47,130 --> 00:30:50,540
ca și în cazul în care, cum ar fi, căutăm în
o funcție specifică în loc

728
00:30:50,540 --> 00:30:52,007
de întreaga noastră fișier.

729
00:30:52,007 --> 00:30:55,090
Audiența: Deci, cu asta în minte, ar fi
au contat dacă am avea changed--

730
00:30:55,090 --> 00:30:56,423
ALLISON BUCHHOLTZ-AU: Ordinea?

731
00:30:56,423 --> 00:30:59,320
Audiența: --Discutii clasă în CSS
la .cool, spațiu, .special?

732
00:30:59,320 --> 00:31:01,153
ALLISON BUCHHOLTZ-AU:
Da, pentru că atunci

733
00:31:01,153 --> 00:31:04,420
ar spune, domeniul de aplicare să
tot ceea ce are rece,

734
00:31:04,420 --> 00:31:07,235
și apoi uita-te la ceea ce has--
Adică, cum ar fi, în acest caz,

735
00:31:07,235 --> 00:31:08,860
Eu nu cred că s-ar fi schimbat.

736
00:31:08,860 --> 00:31:10,318
>> TOMAS REIMERS: Dacă am fi spus ce?

737
00:31:10,318 --> 00:31:10,906
Scuze.

738
00:31:10,906 --> 00:31:12,660
>> ALLISON BUCHHOLTZ-AU: Dacă ne
domeniul de aplicare să se răcească și apoi

739
00:31:12,660 --> 00:31:14,550
uita-te pentru lucruri de construcții,
ar fi la fel, de fapt.

740
00:31:14,550 --> 00:31:16,260
>> TOMAS REIMERS: Deci nu ar fi.

741
00:31:16,260 --> 00:31:16,590
>> ALLISON BUCHHOLTZ-AU: Nu ar fi?

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

743
00:31:17,590 --> 00:31:18,090
Eu am greșit.

744
00:31:18,090 --> 00:31:21,480
>> TOMAS REIMERS: Deci motivul
e different-- mistake-- comun

745
00:31:21,480 --> 00:31:27,140
este că acum numai
link-ul dispune de rece, nu?

746
00:31:27,140 --> 00:31:32,176
Cred că întrebarea mea pentru voi este,
ce de pe această pagină este compensată de .cool?

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

748
00:31:35,984 --> 00:31:38,340
Există două tag-uri aici, nu?

749
00:31:38,340 --> 00:31:39,770
Care este acesta și acesta.

750
00:31:39,770 --> 00:31:40,590
Ambele se potrivesc rece.

751
00:31:40,590 --> 00:31:42,200
Nimic altceva nu.

752
00:31:42,200 --> 00:31:46,460
Deci, dacă ai spus, .cool, spațiu,
.special, ce ai de gând să spun este,

753
00:31:46,460 --> 00:31:48,824
în aceste tag-uri, ceea ce este special?

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

755
00:31:49,865 --> 00:31:51,800
Asta e ceea ce it-- drept.

756
00:31:51,800 --> 00:31:52,310
Pentru că e ca și cum ceva aici.

757
00:31:52,310 --> 00:31:53,310
>> TOMAS REIMERS: Deci selectează nimic.

758
00:31:53,310 --> 00:31:56,530
>> ALLISON BUCHHOLTZ-AU: întrucât cu
special, suntem în aceste tag-uri aici.

759
00:31:56,530 --> 00:31:57,971
>> TOMAS REIMERS: Cei și cele care.

760
00:31:57,971 --> 00:31:58,512
Audiența: OK.

761
00:31:58,512 --> 00:31:58,920
Deci, aceste tag-uri de-a transmite slash?

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

763
00:31:59,740 --> 00:32:01,150
Asta face sens?

764
00:32:01,150 --> 00:32:03,685
Cum este practic
încercarea de a restrânge domeniul de aplicare.

765
00:32:03,685 --> 00:32:04,810
ALLISON BUCHHOLTZ-AU: Da.

766
00:32:04,810 --> 00:32:06,870
Cred că e, probabil,
cel mai simplu mod de a gândi despre asta.

767
00:32:06,870 --> 00:32:09,270
>> TOMAS REIMERS: Deci am găsit acest lucru, și
am gasit acest corespund cu ambele specială.

768
00:32:09,270 --> 00:32:11,400
Și apoi ne solicită, în
tipii ăștia, ce e misto?

769
00:32:11,400 --> 00:32:12,941
Și în asta, răcească asta e.

770
00:32:12,941 --> 00:32:14,500
În cadrul acesta, nimic nu e rece.

771
00:32:14,500 --> 00:32:16,250
Deci, aceasta este singura eticheta care rămâne.

772
00:32:16,250 --> 00:32:20,112
>> ALLISON BUCHHOLTZ-AU: întrucât rece
este doar în aceste tag-uri de acolo.

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

774
00:32:21,070 --> 00:32:22,403
Și ceea ce este special în cele?

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

776
00:32:22,930 --> 00:32:25,270
Acum, ceea ce voi spune este
în cazul în care nu a existat nici spațiu,

777
00:32:25,270 --> 00:32:29,880
te întreba ce e cool și special--
sau ceea ce este destul de special, nu?

778
00:32:29,880 --> 00:32:35,370
Dacă spui .special.pretty, e
la fel ca .pretty.special.

779
00:32:35,370 --> 00:32:39,220
>> Pentru că ceea ce scoate spatiul este
cere este, atunci când spui .special,

780
00:32:39,220 --> 00:32:40,970
ceri, OK,
care sunt cele speciale?

781
00:32:40,970 --> 00:32:43,780
Și apoi a celor, care
sunt cele de asemenea destul de,

782
00:32:43,780 --> 00:32:47,010
care este aceeași, gramatical,
ca cerut, ceea ce este destul de,

783
00:32:47,010 --> 00:32:49,500
și apoi a celor, care, de asemenea, deosebit?

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

785
00:32:50,000 --> 00:32:53,099
Este diferența de
ceea ce este în ceea ce este.

786
00:32:53,099 --> 00:32:53,640
Audiența: OK.

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

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

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

790
00:32:58,030 --> 00:33:00,426
Deci, cu asta în minte then--

791
00:33:00,426 --> 00:33:01,800
>> ALLISON BUCHHOLTZ-AU: Cred că ultima noastră
lucru este (ÎN FANCY BRITISH ACCENT)

792
00:33:01,800 --> 00:33:02,510
modelul box.

793
00:33:02,510 --> 00:33:05,992
>> TOMAS REIMERS: box-- [chicotește]
Îmi place modul în Allison spune că.

794
00:33:05,992 --> 00:33:06,950
Astfel, modelul caseta lucru.

795
00:33:06,950 --> 00:33:09,644
>> ALLISON BUCHHOLTZ-AU: Doar au
o cutie, voi fi modelul dumneavoastră cutie.

796
00:33:09,644 --> 00:33:11,310
TOMAS REIMERS: Deci, hai sa vorbim despre asta.

797
00:33:11,310 --> 00:33:14,070
Deci, chiar acum am petrecut mult
de timp vorbind despre selectoare.

798
00:33:14,070 --> 00:33:16,944
Până acum, voi sunteti probabil, cum ar fi,
comandanții selectors-- știi,

799
00:33:16,944 --> 00:33:21,510
cum pentru a selecta exact conținutul pe care
doriți să manipula pe ecran.

800
00:33:21,510 --> 00:33:24,740
>> Deci, acum intrebarea este, cum
exact poți să-l manipula?

801
00:33:24,740 --> 00:33:27,010
Deci, cred ca cele mai de bază
mod de a gândi despre asta

802
00:33:27,010 --> 00:33:30,294
este, ei bine, ce anume
este un element în CSS?

803
00:33:30,294 --> 00:33:32,585
Am petrecut o mulțime de timp
vorbind despre, ceea ce este o etichetă,

804
00:33:32,585 --> 00:33:36,140
sau ceea ce este cel mai de bază
Reprezentarea de o etichetă?

805
00:33:36,140 --> 00:33:39,870

806
00:33:39,870 --> 00:33:45,170
>> O modalitate buna de a gândi despre
că este, ceea ce forma este somon?

807
00:33:45,170 --> 00:33:47,295
Ce formă este, cum ar fi,
somon de culoarea de fond?

808
00:33:47,295 --> 00:33:47,880
>> Audiența: E un dreptunghi.

809
00:33:47,880 --> 00:33:49,040
>> TOMAS REIMERS: E un dreptunghi, nu?

810
00:33:49,040 --> 00:33:50,956
>> ALLISON BUCHHOLTZ-AU:
Nu a fost o întrebare truc.

811
00:33:50,956 --> 00:33:51,870
[Râsete]

812
00:33:51,870 --> 00:33:54,670
>> TOMAS REIMERS: Nu încerc
să vă păcălească băieți această întârziere.

813
00:33:54,670 --> 00:33:57,510
Deci avem acest dreptunghi.

814
00:33:57,510 --> 00:33:59,140
Și tag-ul este un p, nu?

815
00:33:59,140 --> 00:34:02,280
Așa că ne dă bine
convingerea că paragraful

816
00:34:02,280 --> 00:34:07,440
este reprezentat ca un dreptunghi, la
cel puțin în mintea a browser-ului, care

817
00:34:07,440 --> 00:34:08,715
este.

818
00:34:08,715 --> 00:34:11,423
>> ALLISON BUCHHOLTZ-AU: Adică,
browsere sunt de obicei dreptunghiulare,

819
00:34:11,423 --> 00:34:13,440
deci are sens.

820
00:34:13,440 --> 00:34:18,750
>> TOMAS REIMERS: Ideea este
că toate etichetele cadrul CSS

821
00:34:18,750 --> 00:34:21,790
sunt reprezentate ca un dreptunghi.

822
00:34:21,790 --> 00:34:25,699
Și fiecare dreptunghi are patru
Piese conform CSS, bine?

823
00:34:25,699 --> 00:34:27,830
Ai conținutul real.

824
00:34:27,830 --> 00:34:29,644
Asta în cazul în care textul se află.

825
00:34:29,644 --> 00:34:30,470
>> ALLISON BUCHHOLTZ-AU:
Poate imaginea ta.

826
00:34:30,470 --> 00:34:31,303
>> TOMAS REIMERS: Da.

827
00:34:31,303 --> 00:34:33,860
Ai padding, care este
doar un fel de spațiu alb.

828
00:34:33,860 --> 00:34:35,085
Apoi, aveți o frontieră.

829
00:34:35,085 --> 00:34:37,710
Și apoi ai marja, care
este spațiu alb în afara de asta.

830
00:34:37,710 --> 00:34:39,460
Așa că nu are sens
pentru oricine, deci suntem

831
00:34:39,460 --> 00:34:42,500
O să vorbim despre asta pentru un al doilea.

832
00:34:42,500 --> 00:34:47,570
Deci chiar aici, ceea ce vom face
se vom crea unele divs, bine?

833
00:34:47,570 --> 00:34:48,420
Scuzați-mă în timp ce Eu--

834
00:34:48,420 --> 00:34:51,506
>> ALLISON BUCHHOLTZ-AU: mă simt ca
ar trebui să punem o imagine drăguț în.

835
00:34:51,506 --> 00:34:52,520
>> TOMAS REIMERS: Noi cu siguranta ar trebui.

836
00:34:52,520 --> 00:34:53,389
>> ALLISON BUCHHOLTZ-AU:
Mă simt ca și cum toată lumea

837
00:34:53,389 --> 00:34:54,870
ar putea beneficia de o
imagine drăguț, este tot.

838
00:34:54,870 --> 00:34:56,774
>> TOMAS REIMERS: Putem
toate beneficia de un--

839
00:34:56,774 --> 00:34:57,648
>> Audiența: Da, sigur.

840
00:34:57,648 --> 00:34:58,790
TOMAS REIMERS: OK, rece.

841
00:34:58,790 --> 00:35:02,254
Deci, ar trebui să punem o drăguț
imagine în undeva.

842
00:35:02,254 --> 00:35:05,295
ALLISON BUCHHOLTZ-AU: Mă simt ca un
iepuras dragut ar putea fi util chiar acum.

843
00:35:05,295 --> 00:35:06,190
TOMAS REIMERS: Sigur.

844
00:35:06,190 --> 00:35:06,950
ALLISON BUCHHOLTZ-AU: Sfârșitul săptămânii.

845
00:35:06,950 --> 00:35:07,390
Au ceva adorab--

846
00:35:07,390 --> 00:35:08,520
>> TOMAS REIMERS: Cum zici un pisoi?

847
00:35:08,520 --> 00:35:09,220
>> ALLISON BUCHHOLTZ-AU:
Un pisoi de lucrări, de asemenea.

848
00:35:09,220 --> 00:35:11,300
>> TOMAS REIMERS: cool, pentru că
exista un site pentru asta.

849
00:35:11,300 --> 00:35:12,300
Se numește PlaceKitten.

850
00:35:12,300 --> 00:35:14,719
ALLISON BUCHHOLTZ-AU: Asta-i grozav.

851
00:35:14,719 --> 00:35:15,510
TOMAS REIMERS: Da.

852
00:35:15,510 --> 00:35:18,040
ALLISON BUCHHOLTZ-AU: Doar pentru, cum ar fi,
imagini substituent în site-ul dumneavoastră.

853
00:35:18,040 --> 00:35:18,914
TOMAS REIMERS: Mm-hm.

854
00:35:18,914 --> 00:35:21,520
Există, de asemenea PlacePuppy.

855
00:35:21,520 --> 00:35:22,832
Și nu e PlaceBacon.

856
00:35:22,832 --> 00:35:24,340
>> ALLISON BUCHHOLTZ-AU: PlaceBacon?

857
00:35:24,340 --> 00:35:25,350
Într-adevăr?

858
00:35:25,350 --> 00:35:28,190
>> TOMAS REIMERS: Oh, noi nu facem
au acces la internet aici.

859
00:35:28,190 --> 00:35:29,875
>> ALLISON BUCHHOLTZ-AU: [gemete]

860
00:35:29,875 --> 00:35:30,375
Tragic.

861
00:35:30,375 --> 00:35:32,333
TOMAS REIMERS: În caz contrar,
Aș dori să vă arăt baieti

862
00:35:32,333 --> 00:35:33,870
cum de a pune imagini în site-ul dumneavoastră.

863
00:35:33,870 --> 00:35:36,370
Vom încerca să obțineți acest
de lucru înainte de a avea pentru a merge.

864
00:35:36,370 --> 00:35:38,660
Dar pentru moment, suntem doar
vorbi în culori atunci.

865
00:35:38,660 --> 00:35:39,820
Vrem să pun poze cu kittens--

866
00:35:39,820 --> 00:35:40,210
>> ALLISON BUCHHOLTZ-AU: Am făcut-o.

867
00:35:40,210 --> 00:35:43,110
>> TOMAS REIMERS: --Discutii internet de
jos pentru moment fiind.

868
00:35:43,110 --> 00:35:47,820
Deci avem două divs, și suntem
O să le dea două id-uri.

869
00:35:47,820 --> 00:35:51,380

870
00:35:51,380 --> 00:35:56,760
Vom numi
"Primul" și "al doilea".

871
00:35:56,760 --> 00:36:01,184
Deci, id = "primul."

872
00:36:01,184 --> 00:36:02,850
Și am de gând să le dea două culori.

873
00:36:02,850 --> 00:36:08,424
Deci, cum putem selecta ceva
cu un id de "primul"?

874
00:36:08,424 --> 00:36:09,840
ALLISON BUCHHOLTZ-AU: Dot sau hash?

875
00:36:09,840 --> 00:36:10,730
Audiența: Sharp.

876
00:36:10,730 --> 00:36:12,940
TOMAS REIMERS: Sharp, perfect.

877
00:36:12,940 --> 00:36:14,950
Sharp, hash, indiferent de we--

878
00:36:14,950 --> 00:36:15,680
>> ALLISON BUCHHOLTZ-AU:
O mulțime de lucruri să-i spunem.

879
00:36:15,680 --> 00:36:16,430
>> TOMAS REIMERS: OK.

880
00:36:16,430 --> 00:36:19,800
Vom stabili pe hashtag, și
asta e ceea ce vom merge cu.

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: Deci hashtag primul.

884
00:36:22,340 --> 00:36:24,506
>> ALLISON BUCHHOLTZ-AU: Deci
puteți tweet seminar--

885
00:36:24,506 --> 00:36:27,582
CSS hashtag, hashtag rece.

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, da.

888
00:36:30,730 --> 00:36:31,480
TOMAS REIMERS: OK.

889
00:36:31,480 --> 00:36:33,660
Deci avem "primul" și "al doilea".

890
00:36:33,660 --> 00:36:37,697
Deci în primul rând, vom avea
o culoare de fundal de roșu.

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: Da.

893
00:36:40,281 --> 00:36:42,281
ALLISON BUCHHOLTZ-AU:
Voi fi vostru spot-checker.

894
00:36:42,281 --> 00:36:43,960
TOMAS REIMERS: Allison ma prins.

895
00:36:43,960 --> 00:36:45,830
Culoare de fundal a 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: Da.

899
00:36:48,830 --> 00:36:50,630
Purple culoarea mea preferată,
și nu am folosit-o încă.

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
Asta funcționează.

903
00:36:53,860 --> 00:36:56,482

904
00:36:56,482 --> 00:36:59,880
>> TOMAS REIMERS: Deci suntem
Va trebui două divs.

905
00:36:59,880 --> 00:37:01,654
Vor fi complet gol.

906
00:37:01,654 --> 00:37:03,070
Probabil că ar trebui să aibă un text.

907
00:37:03,070 --> 00:37:05,580

908
00:37:05,580 --> 00:37:09,815
Deci, "primul" va fi "HELLO".

909
00:37:09,815 --> 00:37:10,940
Și "al doilea" va say--

910
00:37:10,940 --> 00:37:11,110
>> ALLISON BUCHHOLTZ-AU: La revedere.

911
00:37:11,110 --> 00:37:12,514
>> Audiența: - "WORLD."

912
00:37:12,514 --> 00:37:14,122
Buna ziua, la revedere.

913
00:37:14,122 --> 00:37:16,580
ALLISON BUCHHOLTZ-AU: Am văzut
le în concert la două săptămâni.

914
00:37:16,580 --> 00:37:17,705
TOMAS REIMERS: The Beatles?

915
00:37:17,705 --> 00:37:20,242
ALLISON BUCHHOLTZ-AU: Pentru reali.

916
00:37:20,242 --> 00:37:21,200
Nu sunt frumoasa.

917
00:37:21,200 --> 00:37:24,084

918
00:37:24,084 --> 00:37:24,750
Nu-mi place.

919
00:37:24,750 --> 00:37:26,060
>> TOMAS REIMERS: Avem
"Hello" și "la revedere."

920
00:37:26,060 --> 00:37:29,102
Și din nou, CSS este doar minunat,
pentru că ea recunoaște culorile noastre.

921
00:37:29,102 --> 00:37:30,810
Nu trebuie să mai
vă faceți griji că acestea există.

922
00:37:30,810 --> 00:37:33,194
Ei fac.

923
00:37:33,194 --> 00:37:35,130
>> ALLISON BUCHHOLTZ-AU: Ele există.

924
00:37:35,130 --> 00:37:39,560
>> TOMAS REIMERS: Deci CSS cred are
255 de cuvinte pentru a vorbi despre culoare.

925
00:37:39,560 --> 00:37:42,986
Dacă vă puteți gândi la o culoare din afara
cele 255, cum ar fi, voi fi impresionat.

926
00:37:42,986 --> 00:37:44,110
ALLISON BUCHHOLTZ-AU: Da.

927
00:37:44,110 --> 00:37:45,560
Cred că voi putea avea
doar vin în dreapta după.

928
00:37:45,560 --> 00:37:47,727
>> TOMAS REIMERS: Deci aici,
veți vedea că avem două cutii

929
00:37:47,727 --> 00:37:49,143
dreapta pe partea de sus a reciproc, nu?

930
00:37:49,143 --> 00:37:50,200
Bună ziua și la revedere.

931
00:37:50,200 --> 00:37:51,460
>> ALLISON BUCHHOLTZ-AU:
Nu e nici spațiu în între.

932
00:37:51,460 --> 00:37:53,390
Sunt doar apasata
chiar deasupra celuilalt.

933
00:37:53,390 --> 00:37:55,973
>> TOMAS REIMERS: Deci, primul lucru
Cred că ar trebui să vorbim despre

934
00:37:55,973 --> 00:38:02,960
este, de asemenea, să say-- da.

935
00:38:02,960 --> 00:38:08,020
Deci, CSS îi reprezintă ca un fel de cutii.

936
00:38:08,020 --> 00:38:10,100
Și cutii, au conținut.

937
00:38:10,100 --> 00:38:14,540
Iar conținutul acum este un fel de
hello sau la revedere și asta e tot.

938
00:38:14,540 --> 00:38:15,040
OK?

939
00:38:15,040 --> 00:38:19,790
>> Astfel, unul dintre primele lucruri pe care le
poate face este de a putea adăuga padding.

940
00:38:19,790 --> 00:38:25,610
Garniture spune cât de mult spațiu
aceasta ar trebui să lase pe fiecare parte.

941
00:38:25,610 --> 00:38:29,200
Așa că haideți să spun că vreau să spun
10 pixeli pe fiecare parte.

942
00:38:29,200 --> 00:38:31,234
Și voi diseca că într-o secundă.

943
00:38:31,234 --> 00:38:33,150
ALLISON BUCHHOLTZ-AU:
Toate aceste lucruri aici

944
00:38:33,150 --> 00:38:36,980
vor fi mai ales in pixeli
pentru restul seminarului.

945
00:38:36,980 --> 00:38:40,980
Veti vedea ca are
un spațiu în jurul ei, nu?

946
00:38:40,980 --> 00:38:46,360
Deci, ceea ce nu văd aici e acolo e
acest tip invizibil de umplutură

947
00:38:46,360 --> 00:38:49,600
pe fiecare parte, care spune, cum ar fi,
OK, ai cutia de content--

948
00:38:49,600 --> 00:38:51,680
>> ALLISON BUCHHOLTZ-AU: Vrei
a trage în sus doar inspecta elementul?

949
00:38:51,680 --> 00:38:53,659
>> TOMAS REIMERS: Da, asta este o idee bună.

950
00:38:53,659 --> 00:38:56,700
ALLISON BUCHHOLTZ-AU: De asemenea, mi se pare
că inspecta element este un mod bun

951
00:38:56,700 --> 00:39:01,280
să ne dăm seama dacă ceva se întâmplă
greșit, se întâmplă ceva neașteptat,

952
00:39:01,280 --> 00:39:04,570
inspectarea etichetele și de a vedea ce
e ca si cum suprascrise este de ajutor.

953
00:39:04,570 --> 00:39:05,940
>> TOMAS REIMERS: Deci, eu nu sunt sigur
dacă voi putea vedea această culoare.

954
00:39:05,940 --> 00:39:06,470
Poți?

955
00:39:06,470 --> 00:39:10,120
Veți vedea acest umplutură
pe un fel de margine.

956
00:39:10,120 --> 00:39:13,410
Și apoi veți vedea real
conținut în albastru, nu?

957
00:39:13,410 --> 00:39:16,820
Deci asta e foarte
Elementele de bază ale modelului cutie.

958
00:39:16,820 --> 00:39:17,674
Ai conținut.

959
00:39:17,674 --> 00:39:18,590
Apoi, aveți padding.

960
00:39:18,590 --> 00:39:20,440
>> Audiența: De ce nu te
utilizați caseta de interior the--

961
00:39:20,440 --> 00:39:21,606
>> ALLISON BUCHHOLTZ-AU: Corect.

962
00:39:21,606 --> 00:39:24,745
Pentru că doar selectând
elementul chiar acum.

963
00:39:24,745 --> 00:39:26,050
>> TOMAS REIMERS: Da.

964
00:39:26,050 --> 00:39:27,060
Alte lucruri.

965
00:39:27,060 --> 00:39:29,780
Deci, hai sa vorbim despre asta
comandă padding pentru o secundă.

966
00:39:29,780 --> 00:39:36,380
Deci, în CSS, măsurători
trebuie să aibă o unitate.

967
00:39:36,380 --> 00:39:39,740
Deci, mai întâi trebuie suma.

968
00:39:39,740 --> 00:39:41,460
Deci, în acest caz, am spus 10.

969
00:39:41,460 --> 00:39:44,780
Și apoi următoarea
ne-am spus este pixeli, px.

970
00:39:44,780 --> 00:39:49,160
Alte cele pe care le-ar putea avea sunteți
lucruri cum ar fi centimetri, inch.

971
00:39:49,160 --> 00:39:51,367
Poti face lucruri de genul,
ceea ce este de 10 cm?

972
00:39:51,367 --> 00:39:52,700
Și va fi ridicol.

973
00:39:52,700 --> 00:39:52,990
>> ALLISON BUCHHOLTZ-AU: Oh, băiete.

974
00:39:52,990 --> 00:39:53,460
>> Audiența: Whoa.

975
00:39:53,460 --> 00:39:54,460
>> Tomas ALLISON: Da.

976
00:39:54,460 --> 00:39:57,840
TOMAS REIMERS: Deci asta e tot padding.

977
00:39:57,840 --> 00:39:59,255
Mă duc să mă întorc la pixeli.

978
00:39:59,255 --> 00:40:01,754
>> ALLISON BUCHHOLTZ-AU: Pixeli
tind să fie, cum ar fi, standardul.

979
00:40:01,754 --> 00:40:04,589
Când te uiți la o mulțime de site-uri web,
ei lucrează mai ales în pixeli.

980
00:40:04,589 --> 00:40:07,755
TOMAS REIMERS: Deci te duci sa vezi
fie pixels-- celelalte pe care le vedeți

981
00:40:07,755 --> 00:40:13,952
este em, care este unul le este
egală cu înălțimea fontului

982
00:40:13,952 --> 00:40:15,160
care îl utilizați în prezent.

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: E un mod bun de a spune,
cum ar fi, eu vreau la fel de mult spațiu ca font meu

986
00:40:20,740 --> 00:40:21,514
este de a lua.

987
00:40:21,514 --> 00:40:23,180
ALLISON BUCHHOLTZ-AU: Nu știu asta.

988
00:40:23,180 --> 00:40:25,747
Veți învăța ceva nou in fiecare zi.

989
00:40:25,747 --> 00:40:27,955
TOMAS REIMERS: Există o
mulțime de măsurători în CS.

990
00:40:27,955 --> 00:40:29,260
Vă sugerez să le privi în sus.

991
00:40:29,260 --> 00:40:32,122
Pentru toate cazurile tale, cred
pixeli ar trebui să fie suficientă.

992
00:40:32,122 --> 00:40:33,830
Și ei sunt, de asemenea, ceea ce
veti vedea

993
00:40:33,830 --> 00:40:36,520
în majoritatea exemplelor face online.

994
00:40:36,520 --> 00:40:38,320
Deci, vom pleca la pixeli.

995
00:40:38,320 --> 00:40:42,420
>> Puteți, de asemenea, ar trebui să say-- așa
seturi de umplutură toate din Garniture.

996
00:40:42,420 --> 00:40:49,789
Puteți face, de asemenea, ceva de genul
"Padding-top" la doar set--

997
00:40:49,789 --> 00:40:52,080
ALLISON BUCHHOLTZ-AU: Poate
vom ajunge nostru "Hello" înapoi.

998
00:40:52,080 --> 00:40:55,480
TOMAS REIMERS: --to Situat chiar
padding pe partea de sus și nimic altceva.

999
00:40:55,480 --> 00:40:59,560
Astfel, cele patru comenzi sunt padding-top,
padding-bottom, padding stânga-,

1000
00:40:59,560 --> 00:41:00,310
și padding-dreapta.

1001
00:41:00,310 --> 00:41:02,470
>> ALLISON BUCHHOLTZ-AU: La fel ca
v-ați aștepta pentru o cutie.

1002
00:41:02,470 --> 00:41:03,530
>> TOMAS REIMERS: Da.

1003
00:41:03,530 --> 00:41:05,240
Nimic prea nebun acolo.

1004
00:41:05,240 --> 00:41:08,230
Asta face sens?

1005
00:41:08,230 --> 00:41:11,990
Deci, care este padding.

1006
00:41:11,990 --> 00:41:14,110
Am de gând să se stabilească toate
în Garniture înapoi la 10.

1007
00:41:14,110 --> 00:41:17,010
Și apoi am de gând să se mute la frontieră.

1008
00:41:17,010 --> 00:41:21,130
>> Deci, ce este de frontieră este
frontieră este o comandă ciudat.

1009
00:41:21,130 --> 00:41:24,450
Este nevoie de un fel de trei lucruri deodată.

1010
00:41:24,450 --> 00:41:28,930
Deci, prima este cât de mare te
vrea să fie ca o măsurătoare.

1011
00:41:28,930 --> 00:41:30,662
Din nou, eu sunt doar folosind pixeli.

1012
00:41:30,662 --> 00:41:32,620
Și ultimul lucru pe care am
ar trebui să adauge la măsurători

1013
00:41:32,620 --> 00:41:35,270
este singurul lucru care
nu are nevoie de o unitate este 0.

1014
00:41:35,270 --> 00:41:37,390
Este de fapt incorect
pentru a se obține o unitate de 0,

1015
00:41:37,390 --> 00:41:41,940
pentru că 0 este 0 pe inch,
pixeli, centimetri, orice.

1016
00:41:41,940 --> 00:41:43,960
Totul înseamnă doar 0, nu?

1017
00:41:43,960 --> 00:41:46,710
Deci, în primul rând vă dau de măsurare.

1018
00:41:46,710 --> 00:41:48,650
>> Apoi da stilul.

1019
00:41:48,650 --> 00:41:49,869
Așa că am de gând să spun "solid".

1020
00:41:49,869 --> 00:41:51,410
Și vom vorbi despre ce înseamnă asta.

1021
00:41:51,410 --> 00:41:54,290
Și apoi în cele din urmă, îți dau o culoare.

1022
00:41:54,290 --> 00:41:56,850
Așa că am de gând să spun "negru".

1023
00:41:56,850 --> 00:41:59,637
Și toate acestea sunt lucruri pe care le-ați
acum văzut înainte, cu excepția stil,

1024
00:41:59,637 --> 00:42:00,720
dar vom vorbi despre asta.

1025
00:42:00,720 --> 00:42:04,120
Deci, voi ați văzut măsurători,
și ai văzut culori.

1026
00:42:04,120 --> 00:42:10,410
Și ce se întâmplă este că obține acest
chenar negru în jurul valorii de frumos, nu?

1027
00:42:10,410 --> 00:42:11,620
Voi vedea cum am făcut asta?

1028
00:42:11,620 --> 00:42:12,760
>> Audiența: Da.

1029
00:42:12,760 --> 00:42:14,850
>> TOMAS REIMERS: cool.

1030
00:42:14,850 --> 00:42:17,370
Deci, ce este asta?

1031
00:42:17,370 --> 00:42:19,160
Deci, în primul rând, este un pixel.

1032
00:42:19,160 --> 00:42:20,880
Asta e de la sine înțeles destul, nu?

1033
00:42:20,880 --> 00:42:23,254
Cum ar fi, este un pixel gros.

1034
00:42:23,254 --> 00:42:26,170
Sau ar fi un pixel, dar eu sunt
mărită, deci e un pic mai mult

1035
00:42:26,170 --> 00:42:26,490
decât asta.

1036
00:42:26,490 --> 00:42:27,967
>> ALLISON BUCHHOLTZ-AU: Si ne-am
această rezoluție televizor ridicol.

1037
00:42:27,967 --> 00:42:29,460
>> TOMAS REIMERS: Da.

1038
00:42:29,460 --> 00:42:33,640
Puteți face asta mai mare,
mai mici, indiferent de.

1039
00:42:33,640 --> 00:42:35,630
Deci, aici e un chenar cu două pixel.

1040
00:42:35,630 --> 00:42:38,810
Veți vedea că e de două ori mai gros.

1041
00:42:38,810 --> 00:42:40,172
Urmatorul lucru pe care trebuie este culoarea.

1042
00:42:40,172 --> 00:42:41,130
Asta nu e interesant.

1043
00:42:41,130 --> 00:42:42,710
Eu nu am de gând să vorbesc
despre asta, într-adevăr.

1044
00:42:42,710 --> 00:42:45,110
>> ALLISON BUCHHOLTZ-AU: Dar stilul
ar putea fi doar un pic interesant.

1045
00:42:45,110 --> 00:42:45,980
>> TOMAS REIMERS: Da.

1046
00:42:45,980 --> 00:42:48,560
Deci stil, sunt cele câteva
că văd frecvent utilizate.

1047
00:42:48,560 --> 00:42:55,690
Solide, unul pentru următoarele Primul cuiva
punctată, iar punctată ultima lui.

1048
00:42:55,690 --> 00:42:59,290
Și aici este punctată.

1049
00:42:59,290 --> 00:43:02,980
Veți vedea că ei sunt
o grămadă de puncte, nu?

1050
00:43:02,980 --> 00:43:09,030
O modalitate buna de a obține un fel de frontieră frumos
merge, linii sunt, de asemenea, destul de populare.

1051
00:43:09,030 --> 00:43:11,580

1052
00:43:11,580 --> 00:43:13,600
>> ALLISON BUCHHOLTZ-AU:
Și apoi, desigur, eu sunt

1053
00:43:13,600 --> 00:43:16,660
sigur există o mulțime alte
stiluri pe care le puteți obține.

1054
00:43:16,660 --> 00:43:20,000
Și avem un set mare de
Link-uri de la sfârșitul pentru voi

1055
00:43:20,000 --> 00:43:23,470
la fel de citi cu atenție și
uita-te la mai rece CSS.

1056
00:43:23,470 --> 00:43:25,954
>> TOMAS REIMERS: Și apoi
ultimul lucru, suntem

1057
00:43:25,954 --> 00:43:27,870
vorbi despre
Modele box foarte repede.

1058
00:43:27,870 --> 00:43:30,070
Oh, și apoi de frontieră,
exact ca umplutură,

1059
00:43:30,070 --> 00:43:33,270
aveți, de asemenea lucruri, cum ar fi
stânga-frontieră, frontieră-dreapta, border-top,

1060
00:43:33,270 --> 00:43:37,590
border-bottom, care vă permite
pentru a ajunge la un anumit frontieră.

1061
00:43:37,590 --> 00:43:40,650
Deci, aici e doar granița stânga-definite.

1062
00:43:40,650 --> 00:43:43,060
Are care face sens?

1063
00:43:43,060 --> 00:43:46,170
>> ALLISON BUCHHOLTZ-AU: Este un misto
mod de a sublinia lucrurile sau adăuga

1064
00:43:46,170 --> 00:43:47,545
Liniile între elemente diferite.

1065
00:43:47,545 --> 00:43:48,670
TOMAS REIMERS: Absolut.

1066
00:43:48,670 --> 00:43:50,940
Deci asta e frontiera noastră.

1067
00:43:50,940 --> 00:43:52,790
Și marja de ultima lui.

1068
00:43:52,790 --> 00:43:55,892
Padding ca Marja de
cu excepția nu este within--

1069
00:43:55,892 --> 00:43:57,975
ALLISON BUCHHOLTZ-AU: E
nu în jurul valorii de elementul tau

1070
00:43:57,975 --> 00:44:00,840
dar de fapt în jurul întregii
casetă pe care le-am văzut.

1071
00:44:00,840 --> 00:44:02,770
>> TOMAS REIMERS: Da.

1072
00:44:02,770 --> 00:44:04,090
Allison a spus perfect.

1073
00:44:04,090 --> 00:44:07,550
Nu e, cum ar fi, în interiorul tău
Element, e în jurul întregului centru.

1074
00:44:07,550 --> 00:44:10,900
Asta înseamnă lucruri cum ar fi
fundal nu i se aplică.

1075
00:44:10,900 --> 00:44:13,550
Și se spune în esență,
cum ar fi, nu vreau nimic

1076
00:44:13,550 --> 00:44:15,230
în acest spațiu mult pentru mine.

1077
00:44:15,230 --> 00:44:17,470
Deci, ca și cum aici avem
o marjă de 10 pixeli.

1078
00:44:17,470 --> 00:44:23,100
Deci, nimic în termen de 10 pixeli
ar trebui să fie lângă mine.

1079
00:44:23,100 --> 00:44:26,210
Asta e un fel de sale
spațiu dar un fel de nu.

1080
00:44:26,210 --> 00:44:29,215
Deci asta e foarte
Elementele de bază ale modelului cutie.

1081
00:44:29,215 --> 00:44:30,090
Asta face sens?

1082
00:44:30,090 --> 00:44:33,830

1083
00:44:33,830 --> 00:44:34,550
Se răcește, se răcește.

1084
00:44:34,550 --> 00:44:35,800
ALLISON BUCHHOLTZ-AU: Awesome.

1085
00:44:35,800 --> 00:44:37,890
Așa că acum ne gândim doar
au resursele noastre reci

1086
00:44:37,890 --> 00:44:41,220
că noi vă vom lua băieți
prin foarte repede.

1087
00:44:41,220 --> 00:44:44,815
Și vom actually-- bine,
avem internet încă?

1088
00:44:44,815 --> 00:44:47,860
>> TOMAS Reimers: Să
să văd dacă pot deschide up--

1089
00:44:47,860 --> 00:44:50,040
lasă-mă să văd doar dacă am
minim internet rapid

1090
00:44:50,040 --> 00:44:53,317
în timp ce Allison vorbește despre nimic
Allison vrea să vorbească despre.

1091
00:44:53,317 --> 00:44:55,150
ALLISON BUCHHOLTZ-AU:
Deci basically-- nu fac

1092
00:44:55,150 --> 00:44:57,930
știu ce altceva pot să spun în acest moment.

1093
00:44:57,930 --> 00:45:01,340
Dar acestea sunt unele
resurse foarte bune.

1094
00:45:01,340 --> 00:45:04,629
Acestea sunt cele care
Tomas si am folosit

1095
00:45:04,629 --> 00:45:06,420
și că noi de fapt
folosit sa te pregatesti pentru aceasta.

1096
00:45:06,420 --> 00:45:09,940
W3Schools este una pe care o
baieti ar fi văzut înainte.

1097
00:45:09,940 --> 00:45:12,440
Am recomanda pentru o
mulțime de lucruri cu CSS.

1098
00:45:12,440 --> 00:45:15,060
Știu că îl recomand
secțiune mea tot timpul.

1099
00:45:15,060 --> 00:45:21,050
>> Unul din lucrurile mari este faptul că
vă permite să fel de pui cu CSS

1100
00:45:21,050 --> 00:45:23,830
și vezi modificările
instantaneu în acest sens,

1101
00:45:23,830 --> 00:45:25,920
cum ar fi, dublu-fereastră a vedea că are.

1102
00:45:25,920 --> 00:45:29,980
Deci, nu trebuie să vă faceți griji cu privire la
configurarea pagina web proprie,

1103
00:45:29,980 --> 00:45:33,090
sau înființarea vhost în ta
aparat locală și gazdă locale,

1104
00:45:33,090 --> 00:45:34,980
și obtinerea tuturor că lucrurile lucru.

1105
00:45:34,980 --> 00:45:36,830
Este încorporat chiar în cadrul paginii.

1106
00:45:36,830 --> 00:45:39,042
>> Și are aceste mici
lecții pe care le poti

1107
00:45:39,042 --> 00:45:40,750
du-te prin a învăța
mai multe despre selectoare,

1108
00:45:40,750 --> 00:45:44,610
sau pentru a afla despre manipularea ta
font, sau un fundal sau o imagine.

1109
00:45:44,610 --> 00:45:46,990
Și aveți aceste
Rezultatele instantanee pe care le

1110
00:45:46,990 --> 00:45:49,310
Nu trebuie să faci orice
alte lucrări prep pentru.

1111
00:45:49,310 --> 00:45:51,060
Așa că am iubesc W3Schools.

1112
00:45:51,060 --> 00:45:51,960
E fabulos.

1113
00:45:51,960 --> 00:45:52,670
Este de lucru?

1114
00:45:52,670 --> 00:45:52,950
>> TOMAS REIMERS: Da.

1115
00:45:52,950 --> 00:45:53,720
Nu, nu e.

1116
00:45:53,720 --> 00:45:55,636
Vrei să încercați
și reporniți calculatorul meu?

1117
00:45:55,636 --> 00:45:56,410
Sau vrem sa--

1118
00:45:56,410 --> 00:46:01,490
>> ALLISON BUCHHOLTZ-AU: Adică,
bine, aceasta va fi, de asemenea, on-line.

1119
00:46:01,490 --> 00:46:02,740
Toate diapozitivele vor fi on-line.

1120
00:46:02,740 --> 00:46:05,470
Deci, eu doar foarte recomanda faci acestea.

1121
00:46:05,470 --> 00:46:07,880
>> Acest lucru este la fel de mare doar
ca o foaie de ieftin.

1122
00:46:07,880 --> 00:46:10,690
E doar tot de bază
comenzi pe care le aveți.

1123
00:46:10,690 --> 00:46:13,070
E minunat când ești primul
incepand site-ul tau.

1124
00:46:13,070 --> 00:46:15,080
Pentru că poate că nu
doriți să obțineți în toate

1125
00:46:15,080 --> 00:46:17,355
nitty curajos reală
-design grele lucruri.

1126
00:46:17,355 --> 00:46:20,230
Trebuie doar să-l formatați într-un mod
acest tip de are sens și a voinței

1127
00:46:20,230 --> 00:46:21,490
face pentru moment.

1128
00:46:21,490 --> 00:46:23,580
Și dacă vrei într-adevăr
pentru a intra în el, eu știu

1129
00:46:23,580 --> 00:46:27,240
acest lucru este, cum ar fi, unul dintre
Referințele favorit Tomas lui.

1130
00:46:27,240 --> 00:46:30,130
Am fost folosind pentru
prep, și e fabulos.

1131
00:46:30,130 --> 00:46:33,030
E Developer la Mozilla.

1132
00:46:33,030 --> 00:46:36,490
>> TOMAS REIMERS: Deci, Mozilla sunt
cei care fac Firefox.

1133
00:46:36,490 --> 00:46:40,290
Și e doar propria lor developer
referință, care cred că este minunat.

1134
00:46:40,290 --> 00:46:44,870
Și are o minunat
Listă de resurse.

1135
00:46:44,870 --> 00:46:45,530
Așa că am have--

1136
00:46:45,530 --> 00:46:48,060
>> ALLISON BUCHHOLTZ-AU:
Și apoi ultima notă este

1137
00:46:48,060 --> 00:46:50,120
când încerci să
proiectarea site-ul dvs.,

1138
00:46:50,120 --> 00:46:53,550
inspira din lucruri
care credeți că sunt destul de.

1139
00:46:53,550 --> 00:46:56,340
Verificarea elementului,
de control codul sursă

1140
00:46:56,340 --> 00:46:59,370
poate fi foarte util
pentru că au încercat să dau seama

1141
00:46:59,370 --> 00:47:02,080
cum să stilul site-ul tau.

1142
00:47:02,080 --> 00:47:04,540
>> De multe ori, mă simt ca cel mai bun
Astfel, în afară de experimentare,

1143
00:47:04,540 --> 00:47:06,290
este doar să se uite la
lucruri care sunt destul de.

1144
00:47:06,290 --> 00:47:09,810
Mi se pare că e foarte greu să doar
fel de a proiecta lucruri pe cont propriu,

1145
00:47:09,810 --> 00:47:11,090
mai ales la început.

1146
00:47:11,090 --> 00:47:14,740
Deci, vă rugăm uita-te la site-uri web
că vă bucurați de uita la.

1147
00:47:14,740 --> 00:47:16,880
Figura ce face
le atractive pentru tine.

1148
00:47:16,880 --> 00:47:19,170
Și atunci nu ezitați să
încercați și replica asta.

1149
00:47:19,170 --> 00:47:20,410
>> TOMAS REIMERS: pe dreapta.

1150
00:47:20,410 --> 00:47:23,120
Chiar ca site-uri web
ca aceasta, puteți vedea

1151
00:47:23,120 --> 00:47:25,460
există cu siguranță o div în partea de sus.

1152
00:47:25,460 --> 00:47:29,920
Și apoi un alt div în
aici, ceea ce este CSS Awesomeness.

1153
00:47:29,920 --> 00:47:32,480
Și atunci ai o grămadă de link-uri aici.

1154
00:47:32,480 --> 00:47:34,770
Dacă într-adevăr doar inspecta
Elemente, aveți posibilitatea să sortați de

1155
00:47:34,770 --> 00:47:38,520
începe pentru a vedea ce face site-uri
arata ca si cum pot eu

1156
00:47:38,520 --> 00:47:40,493
recrea că, dacă am vrut să.

1157
00:47:40,493 --> 00:47:41,890
Asta face sens?

1158
00:47:41,890 --> 00:47:43,670
Deci avem doar trei minute ramase.

1159
00:47:43,670 --> 00:47:46,380
Deci întrebări?

1160
00:47:46,380 --> 00:47:47,650
Oricare dintre ei?

1161
00:47:47,650 --> 00:47:48,350
Da.

1162
00:47:48,350 --> 00:47:50,780
>> Audiența: Pentru culoare
dreptunghi, cum ar fi

1163
00:47:50,780 --> 00:47:53,499
have-- dacă nu l-ați vrea
merge în întreaga pagină, ar putea

1164
00:47:53,499 --> 00:47:56,400
aveti si voi o merge peste numai
jumătate pagina sau doar textul?

1165
00:47:56,400 --> 00:47:59,660
>> TOMAS REIMERS: Da, absolut.

1166
00:47:59,660 --> 00:48:02,780
Așa că lasă-mă să văd de fapt.

1167
00:48:02,780 --> 00:48:04,670
Am două idei.

1168
00:48:04,670 --> 00:48:07,265
Deci, în primul rând, voi
poate utiliza, de asemenea, procente.

1169
00:48:07,265 --> 00:48:08,140
>> Audiența: Într-adevăr?

1170
00:48:08,140 --> 00:48:11,260
>> ALLISON BUCHHOLTZ-AU: Deci ceva
să se uite în sus este de poziționare relativă.

1171
00:48:11,260 --> 00:48:13,385
E ceva ce noi
nu au timp pentru a ajunge în,

1172
00:48:13,385 --> 00:48:16,392
dar e ceva ce am siguranta
recomanda voi check-out.

1173
00:48:16,392 --> 00:48:17,580
>> TOMAS REIMERS: procente Deci.

1174
00:48:17,580 --> 00:48:21,524
Și vedem cum am făcut
doar 50% din lățimea?

1175
00:48:21,524 --> 00:48:24,190
ALLISON BUCHHOLTZ-AU: Dacă
știu de fapt numărul de pixeli,

1176
00:48:24,190 --> 00:48:25,780
poti fi mai precis așa.

1177
00:48:25,780 --> 00:48:27,200
Puteți juca și în jurul valorii de cu ea.

1178
00:48:27,200 --> 00:48:27,700
Dar 50%.

1179
00:48:27,700 --> 00:48:31,970
Dacă ar fi să redimensiona browser-ul nostru,
ea ar face mai mici.

1180
00:48:31,970 --> 00:48:35,250
>> TOMAS REIMERS: Ei bine, e
practic 50% chiar acum, cred.

1181
00:48:35,250 --> 00:48:38,820
E 50%, iar apoi marja
a fost adăugată la aceasta.

1182
00:48:38,820 --> 00:48:40,100
CSS are o multime de quirks.

1183
00:48:40,100 --> 00:48:43,195
Deci, acum acest lucru este
50% din lățimea paginii.

1184
00:48:43,195 --> 00:48:46,860
Dar amintiți-vă că aveți 10
pixeli decolat de pe fiecare parte.

1185
00:48:46,860 --> 00:48:49,700
Deci, dacă ar fi să mutați că împotriva
marginea din stânga a browser-ului,

1186
00:48:49,700 --> 00:48:51,550
atunci ar arata ca 50%.

1187
00:48:51,550 --> 00:48:53,884
Din nou, așa cum am spus, CSS poate
fi o mulțime de ghici-și-control.

1188
00:48:53,884 --> 00:48:56,049
Ca, crezi ceva e
O să se comporte într-un fel,

1189
00:48:56,049 --> 00:48:57,805
dar se comportă un mod cu totul diferit.

1190
00:48:57,805 --> 00:48:59,420
>> ALLISON BUCHHOLTZ-AU:
Și te mai inteligent,

1191
00:48:59,420 --> 00:49:02,020
și doar veți obține o mai bună
intuiție pentru el măsură ce vă deplasați de-a lungul.

1192
00:49:02,020 --> 00:49:02,730
>> TOMAS REIMERS: Și
se înrăutățește și mai rău.

1193
00:49:02,730 --> 00:49:03,496
Deci, este de fapt doar o cursă.

1194
00:49:03,496 --> 00:49:05,454
>> ALLISON BUCHHOLTZ-AU:
Asta e foarte încurajator.

1195
00:49:05,454 --> 00:49:07,070
Ne dorim ca ei să plac CSS.

1196
00:49:07,070 --> 00:49:08,810
>> TOMAS REIMERS: CSS este minunat.

1197
00:49:08,810 --> 00:49:10,354
Amintiți-vă că.

1198
00:49:10,354 --> 00:49:11,020
Alte întrebări?

1199
00:49:11,020 --> 00:49:14,297
>> ALLISON BUCHHOLTZ-AU: un lucru.

1200
00:49:14,297 --> 00:49:14,880
Altceva?

1201
00:49:14,880 --> 00:49:15,140
Se răcește.

1202
00:49:15,140 --> 00:49:15,690
>> TOMAS REIMERS: Awesome.

1203
00:49:15,690 --> 00:49:18,523
>> ALLISON BUCHHOLTZ-AU: Ei bine, dacă ați
baieti aveți orice întrebări mai târziu,

1204
00:49:18,523 --> 00:49:20,919
suntem mereu disponibil ca de obicei.

1205
00:49:20,919 --> 00:49:22,960
Veți vedea, probabil, unele
de ne pentru proiecte finale

1206
00:49:22,960 --> 00:49:24,280
si cu siguranta la hackathon.

1207
00:49:24,280 --> 00:49:25,200
>> TOMAS REIMERS: Absolut.

1208
00:49:25,200 --> 00:49:25,720
Și la târg.

1209
00:49:25,720 --> 00:49:26,560
>> ALLISON BUCHHOLTZ-AU: Și la târg.

1210
00:49:26,560 --> 00:49:26,840
Oh.

1211
00:49:26,840 --> 00:49:28,130
>> TOMAS REIMERS: Aștept cu nerăbdare să
văzând toate de awesome-- ta

1212
00:49:28,130 --> 00:49:29,420
>> ALLISON BUCHHOLTZ-AU: Vom vedea
toate site-urile dvs. minunat

1213
00:49:29,420 --> 00:49:30,572
că va fi frumos.

1214
00:49:30,572 --> 00:49:32,780
TOMAS REIMERS: Puteți oricând
a se vedea, cum ar fi, site-urile

1215
00:49:32,780 --> 00:49:36,234
care a avut, cum ar fi, bine CSS și apoi
cum ar fi cele care nu au încercat să facă CSS.

1216
00:49:36,234 --> 00:49:39,150
ALLISON BUCHHOLTZ-AU: De asemenea, un alt
lucru, un lucru să se uite în

1217
00:49:39,150 --> 00:49:40,445
este Bootstrapping.

1218
00:49:40,445 --> 00:49:41,805
Deci, Bootstrap este mare.

1219
00:49:41,805 --> 00:49:42,240
>> TOMAS REIMERS: Google că dacă Tu--

1220
00:49:42,240 --> 00:49:43,573
>> ALLISON BUCHHOLTZ-AU: Google ea.

1221
00:49:43,573 --> 00:49:44,340
E fabulos.

1222
00:49:44,340 --> 00:49:45,620
O să-ți iubești.

1223
00:49:45,620 --> 00:49:48,000
Și acum, că aveți o
înțelegere de bază a CSS,

1224
00:49:48,000 --> 00:49:50,340
se va face mult mai mult sens.

1225
00:49:50,340 --> 00:49:50,890
Minunat.

1226
00:49:50,890 --> 00:49:51,480
Mulțumesc, băieți.

1227
00:49:51,480 --> 00:49:53,330
>> TOMAS REIMERS: Vă mulțumesc foarte mult.

1228
00:49:53,330 --> 00:49:54,219