1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [MUSIC SPILLE] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON Buchholtz-AU: So vi i utgangspunktet bare skal 5 00:00:12,224 --> 00:00:14,629 for å gi deg en oversikt av CSS, fordi vi vet 6 00:00:14,629 --> 00:00:16,420 at det ikke var dekket i alle seksjoner. 7 00:00:16,420 --> 00:00:20,090 Og vi virkelig ønsker å være sikker på at du gutta har dette verktøy til disposisjon, 8 00:00:20,090 --> 00:00:24,790 fordi den har evnen til å gjøre nettsteder ser mye penere. 9 00:00:24,790 --> 00:00:28,660 >> Og hvis du bygger et nettsted, deretter du sannsynligvis ønsker å gjøre det pent. 10 00:00:28,660 --> 00:00:31,372 Jeg mener, trenger du ikke å, men jeg vil foreslå det. [Ler] 11 00:00:31,372 --> 00:00:35,430 Hvis du vil at brukerne skal bruke den, kanskje du ønsker å gjøre det litt [uhørbart]. 12 00:00:35,430 --> 00:00:39,130 Så vi kommer til å prøve og gi deg akkurat noen grunnleggende verktøy og forståelse, 13 00:00:39,130 --> 00:00:42,340 slik at når du går ut, og du er forske ting om CSS, 14 00:00:42,340 --> 00:00:45,902 det er ikke full vrøvl, som CSS noen ganger å være. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS Reimers: Yeah. 16 00:00:47,240 --> 00:00:49,930 Allison sa det ganske godt. 17 00:00:49,930 --> 00:00:53,250 Så jeg antar det første vi bør begynne med er det som er CSS? 18 00:00:53,250 --> 00:00:55,750 Så CSS er kjempebra. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON Buchholtz-AU: Det er navnet på vårt seminar. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS Reimers: Yeah. 22 00:00:58,434 --> 00:01:00,130 Det er veldig viktig at du forstår at da. 23 00:01:00,130 --> 00:01:03,090 Hvis du bare ta bort en ting, det er at CSS hvis awesome. 24 00:01:03,090 --> 00:01:06,180 To er CSS står for Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Så i sin kjerne, er CSS et stilark, som betyr 26 00:01:10,380 --> 00:01:13,200 det tillater deg å style en nettside. 27 00:01:13,200 --> 00:01:16,609 Og så hva det betyr, er det en måte å legge stil til nettsteder. 28 00:01:16,609 --> 00:01:18,900 Så ved stil, mener vi alt som ikke structural-- 29 00:01:18,900 --> 00:01:24,350 så ting som farger, bakgrunn bilder, grenser, som, padding, 30 00:01:24,350 --> 00:01:25,040 marginer. 31 00:01:25,040 --> 00:01:27,310 Vi skal snakke om hva alt som betyr i en bit. 32 00:01:27,310 --> 00:01:30,110 >> Så vi har bare gått foran og åpnet begge disse opp i gedit. 33 00:01:30,110 --> 00:01:32,680 Så dette er index.html. 34 00:01:32,680 --> 00:01:34,800 Og dette er main.css. 35 00:01:34,800 --> 00:01:36,829 Så main.css har ingenting. 36 00:01:36,829 --> 00:01:38,412 ALLISON Buchholtz-AU: Ingen stil så langt. 37 00:01:38,412 --> 00:01:39,245 TOMAS Reimers: Ingen. 38 00:01:39,245 --> 00:01:42,577 Og som du ser, er det en virkelig stygg nettsted. 39 00:01:42,577 --> 00:01:44,160 ALLISON Buchholtz-AU: Det er bare ren. 40 00:01:44,160 --> 00:01:45,820 TOMAS Reimers: Yeah. 41 00:01:45,820 --> 00:01:49,150 Ja, det er ikke stygg, det er bare minimalistisk. 42 00:01:49,150 --> 00:01:53,430 Og så her har vi index.html. 43 00:01:53,430 --> 00:01:55,729 Og så for en rask oppsummering av HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 du ønsker å bare snakke om den siden? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON Buchholtz-AU: Yeah. 46 00:01:58,395 --> 00:02:01,100 Så åpenbart, har vi vår HTML tag, som bare navnene HTML-fil. 47 00:02:01,100 --> 00:02:07,080 Vi har vår header her, med CSS Awesomeness, which-- hvis du går tilbake. 48 00:02:07,080 --> 00:02:07,720 Hvor er det? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS Reimers: Oh. 50 00:02:09,136 --> 00:02:10,301 Ja, du kan se. 51 00:02:10,301 --> 00:02:12,092 ALLISON Buchholtz-AU: Og legg merke til overskriften 52 00:02:12,092 --> 00:02:14,120 er denne kategorien header rett opp her. 53 00:02:14,120 --> 00:02:17,130 Og deretter "Hei, verden!" er teksten som vi har bare 54 00:02:17,130 --> 00:02:19,620 visning på nettet siden som er-- gå tilbake. 55 00:02:19,620 --> 00:02:21,290 Tilbake. 56 00:02:21,290 --> 00:02:24,287 Som er like i kroppen vår her-- ren tekst. 57 00:02:24,287 --> 00:02:26,120 Også en ting til legge merke til, hvis du ser her, 58 00:02:26,120 --> 00:02:29,410 Tomas slått opp disse to fra vår lysbilde. 59 00:02:29,410 --> 00:02:32,035 Så så lenge du har alt tre av disse, du er fin. 60 00:02:32,035 --> 00:02:34,044 De kan være i hvilken rekkefølge de ønsker. 61 00:02:34,044 --> 00:02:39,368 Hva er viktigst er nettopp det du har hver av disse tre tingene. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS Reimers: Cool. 63 00:02:40,340 --> 00:02:41,111 Legg en doc type? 64 00:02:41,111 --> 00:02:42,235 ALLISON Buchholtz-AU: Yeah. 65 00:02:42,235 --> 00:02:43,068 TOMAS Reimers: Yeah. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON Buchholtz-AU: Tilsynelatende mine mikrofoner liker ikke meg. 68 00:02:46,102 --> 00:02:49,650 TOMAS Reimers: Å, gi oss et sekund bare mens Allison bytter ut hennes mic. 69 00:02:49,650 --> 00:02:50,500 Så ja. 70 00:02:50,500 --> 00:02:52,030 Så vi har vår hovedside. 71 00:02:52,030 --> 00:02:53,890 Det er slags unstyled. 72 00:02:53,890 --> 00:02:54,780 Vi har ikke mye. 73 00:02:54,780 --> 00:02:57,110 Vi har i utgangspunktet tekst. 74 00:02:57,110 --> 00:02:59,470 Vi har stilark. 75 00:02:59,470 --> 00:03:00,220 Vi har tittelen. 76 00:03:00,220 --> 00:03:04,020 Så bare bare-boned komponenter lage en nettside. 77 00:03:04,020 --> 00:03:08,880 >> Så derfra, la oss snakke om hva CSS er 78 00:03:08,880 --> 00:03:11,270 og hvordan det ser ut og alt det der. 79 00:03:11,270 --> 00:03:12,047 Så for at-- 80 00:03:12,047 --> 00:03:13,755 ALLISON Buchholtz-AU: Tilbake til lysbildene. 81 00:03:13,755 --> 00:03:15,200 TOMAS Reimers: Tilbake til lysbildene. 82 00:03:15,200 --> 00:03:17,240 Og Allison kan ta over. 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 Så i din CSS fil, du kommer til å ha 86 00:03:22,360 --> 00:03:25,010 mange av disse tingene kalles velgere. 87 00:03:25,010 --> 00:03:27,420 Det vil bare være det basis av din CSS fil. 88 00:03:27,420 --> 00:03:29,480 Det er bare kommer til å være mye og mye av disse. 89 00:03:29,480 --> 00:03:30,780 Så velgeren. 90 00:03:30,780 --> 00:03:32,649 Dette er bare den generelle anatomi. 91 00:03:32,649 --> 00:03:35,190 Vi kommer til å gå gjennom eksempler, fordi hvis dere aldri 92 00:03:35,190 --> 00:03:38,400 så min del, jeg føler som ting i det abstrakte 93 00:03:38,400 --> 00:03:39,400 vet egentlig ikke gir mening. 94 00:03:39,400 --> 00:03:41,110 Det hjelper alltid å se eksemplene. 95 00:03:41,110 --> 00:03:42,420 >> Så vi har litt velgeren. 96 00:03:42,420 --> 00:03:49,120 Det kommer til å være noen identifikator for hva vi ønsker den stil som skal brukes. 97 00:03:49,120 --> 00:03:52,220 Og så kan vi ha noen satt av regler og verdier. 98 00:03:52,220 --> 00:03:55,680 Så velgere som du kan se kan være noe sånt kroppen, 99 00:03:55,680 --> 00:04:00,262 eller avsnitt med P, eller header, eller hva, 100 00:04:00,262 --> 00:04:02,000 hva du vil HTML-koder til å være. 101 00:04:02,000 --> 00:04:03,570 >> Så i dette tilfellet, har vi kroppen. 102 00:04:03,570 --> 00:04:06,985 Og vi har noen regel, som tilsvarer dette 103 00:04:06,985 --> 00:04:09,610 til hva din stil gjelder. 104 00:04:09,610 --> 00:04:12,720 Så i dette tilfellet, har vi bakgrunnsfarge og skrift vekt. 105 00:04:12,720 --> 00:04:16,200 Så dette kommer til å endre På bakgrunn av hva som helst 106 00:04:16,200 --> 00:04:19,640 innen noen kroppen tag av våre HTML-fil. 107 00:04:19,640 --> 00:04:22,810 Og det kommer til å gi det denne lyseblå verdi. 108 00:04:22,810 --> 00:04:24,820 >> Så det kommer til å gjøre det bakgrunn lyseblå. 109 00:04:24,820 --> 00:04:28,660 Og så noe i kroppen er kommer til å ha en font vekt fet. 110 00:04:28,660 --> 00:04:31,142 Så det er bare kommer til fet all vår tekst. 111 00:04:31,142 --> 00:04:32,970 Og dette er bare ett velgeren. 112 00:04:32,970 --> 00:04:34,680 Men du kan ha svært mange av disse. 113 00:04:34,680 --> 00:04:38,730 Og som vi kommer til å vise senere, litt mer inn i hvordan 114 00:04:38,730 --> 00:04:40,709 som fungerer og flere eksempler der. 115 00:04:40,709 --> 00:04:41,750 Noe du vil legge til? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS Reimers: Nei. 117 00:04:42,499 --> 00:04:43,500 Allison fikk den. 118 00:04:43,500 --> 00:04:46,144 Vi er bare nødt til å kutte opp en eksempel her på vårt eksempel nettstedet. 119 00:04:46,144 --> 00:04:47,310 Så la oss faktisk ta dette. 120 00:04:47,310 --> 00:04:48,620 Det er perfekt. 121 00:04:48,620 --> 00:04:54,460 Så jeg bare kommer til å kopiere og lime inn at rett inn i vår main.css fil. 122 00:04:54,460 --> 00:04:56,530 Og jeg kommer til å redde den. 123 00:04:56,530 --> 00:04:59,190 Og da vil vi kjøre den. 124 00:04:59,190 --> 00:05:01,600 Så side note, en av de de fleste frustrerende ting 125 00:05:01,600 --> 00:05:04,490 er hvis du ikke lagrer en fil, og så du, som, oppdater siden, 126 00:05:04,490 --> 00:05:07,450 og lignende, hvorfor er ikke endringen skjer? 127 00:05:07,450 --> 00:05:07,950 Det skjer. 128 00:05:07,950 --> 00:05:14,230 Så her er vi så at vi gjorde vårt nettside en lys blå bakgrunn 129 00:05:14,230 --> 00:05:16,560 og noen fet tekst. 130 00:05:16,560 --> 00:05:20,730 >> Jeg bør også nevne, hvis du gutta har spørsmål om noe 131 00:05:20,730 --> 00:05:23,622 vi gjør, kan du gjerne fritt til å stoppe oss og spør oss. 132 00:05:23,622 --> 00:05:25,330 Vi er helt villig til feltet spørsmål. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON Buchholtz-AU: Selvfølgelig, med CSS, bygger alt på seg selv. 135 00:05:31,930 --> 00:05:34,107 Så hvis en ting ikke fornuftig nå, vi 136 00:05:34,107 --> 00:05:35,690 ønsker ikke at for å bog deg ned senere. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS Reimers: Så la oss slags dissekere dette. 139 00:05:41,930 --> 00:05:44,210 Så ønsker du å starte med velger her? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON Buchholtz-AU: Yeah. 141 00:05:45,979 --> 00:05:48,270 Som jeg sa før, kropp er bare vår velgeren her. 142 00:05:48,270 --> 00:05:50,950 Så hvis vi går tilbake over til vår index-- ah. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS Reimers: Som jeg akkurat avsluttet. 144 00:05:53,245 --> 00:05:54,530 Gi meg et sekund. 145 00:05:54,530 --> 00:05:58,286 Så File, Open, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON Buchholtz-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Så hvis du legger merke til her, vi har disse kroppen koder, ikke sant? 148 00:06:02,710 --> 00:06:06,270 Så velgeren bare tilsvarer kodene som vi snakker om. 149 00:06:06,270 --> 00:06:07,670 Slik at kroppen rett her. 150 00:06:07,670 --> 00:06:10,315 Så det vi sier er everything-- kan vi gå tilbake? 151 00:06:10,315 --> 00:06:12,065 Jeg skulle ønske jeg kunne bare som berører skjermen. 152 00:06:12,065 --> 00:06:14,410 Det ville være så mye kulere. 153 00:06:14,410 --> 00:06:17,150 >> Så noe innen de body-koder, som vi så 154 00:06:17,150 --> 00:06:19,637 var bare, som, teksten, og kroppen for øvrig 155 00:06:19,637 --> 00:06:20,970 refererer seg til, for eksempel, på bakgrunn. 156 00:06:20,970 --> 00:06:22,720 Hvis du noen gang ønsker å endre bakgrunnen, 157 00:06:22,720 --> 00:06:25,090 som kommer til å være i en body-koden. 158 00:06:25,090 --> 00:06:27,120 Bare har disse reglene anvendes på dem. 159 00:06:27,120 --> 00:06:32,040 >> Så hvis vi skulle gå til index.html og-- faktisk, 160 00:06:32,040 --> 00:06:33,840 kan vi ha noe utsiden av kroppen? 161 00:06:33,840 --> 00:06:37,340 Hvis vi hadde, som, en bunntekst eller noe, ville det ikke gjelde for dette. 162 00:06:37,340 --> 00:06:40,900 Men noe innen disse kroppen kodene kommer 163 00:06:40,900 --> 00:06:44,960 å bli påvirket av denne kroppen velger som vi har gjort. 164 00:06:44,960 --> 00:06:47,405 Så hvis du skulle skrive noe annet det-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS Reimers: La oss kjøre det hjem. 166 00:06:49,400 --> 00:06:55,330 Så hvis vi hadde en div-- så det er bare en annen tag du kan ha. 167 00:06:55,330 --> 00:06:56,350 Jeg kommer til å lukke den. 168 00:06:56,350 --> 00:06:58,280 Eller la oss gjøre dette til et avsnitt. 169 00:06:58,280 --> 00:07:01,430 Så p står for ledd. 170 00:07:01,430 --> 00:07:02,560 Og innenfor nevnte punkt. 171 00:07:02,560 --> 00:07:05,650 Og så sier jeg: "Dette er tekst." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 Og da jeg laget denne regelen gjelder for et punkt i stedet for kroppen. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Du får se hvordan det gjelder bare for den nydannede ledd, høyre, 176 00:07:17,320 --> 00:07:18,892 ikke hele greia. 177 00:07:18,892 --> 00:07:20,090 Betyr det fornuftig? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON Buchholtz-AU: Så dette er alt kroppen, 179 00:07:21,840 --> 00:07:24,450 men nå er vår velger bare tilsvarer ledd. 180 00:07:24,450 --> 00:07:27,050 Så vi må bare fet og blå for denne spesifikke ledd 181 00:07:27,050 --> 00:07:30,760 fordi dette er den eneste som befinner seg innenfor p-taggen. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS Reimers: Betyr det fornuftig sort av hvordan ting kapsle andre ting? 183 00:07:35,349 --> 00:07:38,140 ALLISON Buchholtz-AU: Også, bare å si like, er en av de beste måter 184 00:07:38,140 --> 00:07:40,889 å virkelig bli komfortabel med CSS er å bare gjøre ting som dette, 185 00:07:40,889 --> 00:07:42,050 bare prøve det ut. 186 00:07:42,050 --> 00:07:46,700 Det er veldig enkelt å skrive noe ut, traff Refresh, og se hva som skjer. 187 00:07:46,700 --> 00:07:48,940 Og som med de fleste CS, eksperimentering kan ofte 188 00:07:48,940 --> 00:07:51,790 fører til en mye bedre intuitiv forståelse. 189 00:07:51,790 --> 00:07:54,432 Enda mer enn oss bare, lignende, snakker til deg. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS Reimers: Absolutely 100% enig på det punktet. 191 00:07:58,350 --> 00:08:02,430 Så hvis vi går tilbake til dette, la oss starte dissekere nøyaktig hva disse to gjør. 192 00:08:02,430 --> 00:08:04,550 Så vi har to regler om dette. 193 00:08:04,550 --> 00:08:07,420 Så det første er bakgrunnsfarge. 194 00:08:07,420 --> 00:08:10,590 Og du ser at vi har sett det lik en verdi, lyseblå. 195 00:08:10,590 --> 00:08:15,009 >> Så i CSS, er CSS sort av veldig løs om hvordan 196 00:08:15,009 --> 00:08:16,300 du har lov til å definere fargen. 197 00:08:16,300 --> 00:08:17,800 Så du kan definere dem ved navn. 198 00:08:17,800 --> 00:08:20,650 Du kan også gjøre noe sånt som "red." 199 00:08:20,650 --> 00:08:25,270 Og så hvis vi går tilbake til dette, vil du se at bakgrunnen er rød. 200 00:08:25,270 --> 00:08:29,040 Du kan også få really-- Jeg tror du kan bli ganske kreativ med dette, 201 00:08:29,040 --> 00:08:29,540 kan ikke du? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON Buchholtz-AU: Jeg tror du kan bruke hex. 203 00:08:31,170 --> 00:08:31,250 Kan ikke du? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS Reimers: Yeah. 205 00:08:32,083 --> 00:08:32,969 Så du kan bruke hex. 206 00:08:32,969 --> 00:08:34,490 Men jeg tenker navn-messig. 207 00:08:34,490 --> 00:08:35,385 Er det ikke? 208 00:08:35,385 --> 00:08:37,260 ALLISON Buchholtz-AU: Du kan gjøre ganske mange. 209 00:08:37,260 --> 00:08:43,350 Ganske mye som de fleste farger som du kan name-- liker, tror jeg laks er ett. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS Reimers: Vi skal prøve laks. 211 00:08:45,322 --> 00:08:47,530 ALLISON Buchholtz-AU: Jeg tror chartreuse er der inne. 212 00:08:47,530 --> 00:08:48,050 TOMAS Reimers: Yeah. 213 00:08:48,050 --> 00:08:48,550 Se? 214 00:08:48,550 --> 00:08:50,080 Så du kan få ganske kreativ. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON Buchholtz-AU: Du kunne komme ganske kreativ. 216 00:08:52,246 --> 00:08:55,750 Som, hvis du kan tenke på fargenavn, er det sannsynligvis der inne. 217 00:08:55,750 --> 00:08:57,840 Hvis du virkelig vil ha fine detalj, kan du gå hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS Reimers: Yeah. 219 00:08:58,673 --> 00:08:59,390 Så heksadesimale. 220 00:08:59,390 --> 00:09:05,280 Hvis dere husker dette tilbake fra den gamle PSet, bilde Recover, 221 00:09:05,280 --> 00:09:08,300 dere måtte forholde seg med disse hex verdier. 222 00:09:08,300 --> 00:09:15,280 Og liksom for å oppsummere hva som er, hex har tre verdier som er lagret i den. 223 00:09:15,280 --> 00:09:17,250 Så det er i grupper på to trinn. 224 00:09:17,250 --> 00:09:19,300 De to første representerer den røde verdi. 225 00:09:19,300 --> 00:09:22,420 Den andre representerer den grønne verdi. 226 00:09:22,420 --> 00:09:25,020 Og den siste er blå? 227 00:09:25,020 --> 00:09:30,050 >> Så FF skjer å representere en heksadesimal 255. 228 00:09:30,050 --> 00:09:35,480 Så du har 255 rød, 255 grønn, og 0 for blå. 229 00:09:35,480 --> 00:09:37,670 Og verdiene varierer mellom 0 og 255. 230 00:09:37,670 --> 00:09:38,350 >> PUBLIKUM: Høyre. 231 00:09:38,350 --> 00:09:41,472 Så egentlig kunne vi søke internett for noen farge vi ønsker, 232 00:09:41,472 --> 00:09:43,912 og identifisere den faktisk kjente fargespekteret combo, 233 00:09:43,912 --> 00:09:45,130 og da kunne vi sette den i? 234 00:09:45,130 --> 00:09:46,380 ALLISON Buchholtz-AU: Nettopp. 235 00:09:46,380 --> 00:09:52,900 Så du har ganske mye full kontroll i løpet av de fargene du ønsker innenfor CSS. 236 00:09:52,900 --> 00:09:55,069 Skal vi snakke om bakgrunnsbilder senere? 237 00:09:55,069 --> 00:09:56,110 Eller ønsker vi å gjøre det? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS Reimers: Yeah. 239 00:09:56,240 --> 00:09:57,010 Absolutt. 240 00:09:57,010 --> 00:10:00,830 Så først, bare for å vise at rødt og grønt er gul. 241 00:10:00,830 --> 00:10:03,120 Og hvis du trenger noen hjelp til å finne dette, du 242 00:10:03,120 --> 00:10:05,575 kan Google noe som "fargevelgeren." 243 00:10:05,575 --> 00:10:07,200 ALLISON Buchholtz-AU: Åh, det er så bra. 244 00:10:07,200 --> 00:10:09,090 Jeg elsker fargevelger. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS Reimers: colorpicker.com er et godt eksempel. 246 00:10:11,360 --> 00:10:14,580 Og her, vil du se at du har en full Photoshop-lignende fargevelgeren. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON Buchholtz-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Også de kule tingene er du kan generere fargevalg 249 00:10:16,980 --> 00:10:18,896 slik at du ikke har, lignende, kranglet farger. 250 00:10:18,896 --> 00:10:22,780 TOMAS Reimers: Og så her er hex verdien opp her. 251 00:10:22,780 --> 00:10:27,800 Så du kan alltid finne på nettet i utgangspunktet steder for å få den hex verdien fra. 252 00:10:27,800 --> 00:10:31,667 Det er ikke sortere av som bare, som vi se fargene i verden i antall. 253 00:10:31,667 --> 00:10:34,000 Det er mer at vi går online og finne hvilken farge vi ønsker, 254 00:10:34,000 --> 00:10:36,850 og deretter ta nummeret ned. 255 00:10:36,850 --> 00:10:39,590 Fordi det er bare en veldig enkel måte å referere ting i CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON Buchholtz-AU: Og så er det also-- 257 00:10:40,350 --> 00:10:41,630 Jeg glemmer det nøyaktige navnet på området. 258 00:10:41,630 --> 00:10:43,838 Men det er definitivt, jeg tenke, noe fra Adobe 259 00:10:43,838 --> 00:10:48,350 som genererer fargevalg for deg, som er kult, fordi du 260 00:10:48,350 --> 00:10:50,580 definitely-- det noen ganger vanskelig å finne ut, 261 00:10:50,580 --> 00:10:53,729 oh, hvis jeg ønsker å bruke denne fargen, hva som kan være en annen nyttig en 262 00:10:53,729 --> 00:10:56,395 å bruke andre steder på nettstedet mitt til, lignende, gjøre det fint og sammenhengende. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS Reimers: Allisons snakker om ett av Adobe kalt Kuler, tror jeg. 265 00:11:04,260 --> 00:11:04,885 Det er K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON Buchholtz-AU: Jeg tror det. 267 00:11:06,259 --> 00:11:07,610 Jeg er ganske sikker på at det er den ene. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS Reimers: Min favoritt har alltid vært Fargevalg 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: Hvilken er now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON Buchholtz-AU: Ah, dette er vakkert. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS Reimers: Og du kan i utgangspunktet si, som, 273 00:11:18,818 --> 00:11:21,700 Jeg vil tre farger ved siden av hverandre. 274 00:11:21,700 --> 00:11:25,030 Og så la oss gjøre noe hyggelig. 275 00:11:25,030 --> 00:11:29,210 Og så kan du få et eksempel av hva som kan se ut. 276 00:11:29,210 --> 00:11:32,470 Og så hvis du sveve over noen av dem, det gir deg den hex verdi. 277 00:11:32,470 --> 00:11:35,010 >> Så akkurat som en god måte å starte tenker på fargevalg 278 00:11:35,010 --> 00:11:39,570 eller hvilke farger på en nettside kan gå bra sammen. 279 00:11:39,570 --> 00:11:45,655 Fordi det kan være overraskende ikke så lett å plukke som du tror. 280 00:11:45,655 --> 00:11:48,280 Og deretter den andre kule ting Jeg har alltid funnet om dette området 281 00:11:48,280 --> 00:11:51,480 er hvis du treffer Eksempler, det vil vise hva et eksempel nettside 282 00:11:51,480 --> 00:11:54,800 kan se ut som du bruker som fargevalg. 283 00:11:54,800 --> 00:11:56,270 Allikevel. 284 00:11:56,270 --> 00:11:57,863 >> Tilbake til selve CSS. 285 00:11:57,863 --> 00:12:01,112 ALLISON Buchholtz-AU: Men selvsagt, vi vet disse referansene kan være nyttig. 286 00:12:01,112 --> 00:12:03,195 TOMAS Reimers: Nei, de definitivt kan være nyttig. 287 00:12:03,195 --> 00:12:04,720 Så den andre regelen, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON Buchholtz-AU: Yeah. 289 00:12:05,844 --> 00:12:08,280 Den andre regelen er bare som tilsvarer vår skrift. 290 00:12:08,280 --> 00:12:11,520 Så font vekt er bare snill of-- slik at vekten ville 291 00:12:11,520 --> 00:12:15,220 være hvis du bare ønsker, som, normal eller lignende, tynnere fonter, 292 00:12:15,220 --> 00:12:17,251 eller i dette tilfellet, som, fet. 293 00:12:17,251 --> 00:12:17,750 Jeg glemmer. 294 00:12:17,750 --> 00:12:21,557 Hva er det hvis du ønsket it er det en tynnere en enn bare, som, normalt? 295 00:12:21,557 --> 00:12:24,140 TOMAS Reimers: Jeg gjør faktisk ikke vet om det er en tynnere en. 296 00:12:24,140 --> 00:12:24,680 ALLISON Buchholtz-AU: Jeg glemmer. 297 00:12:24,680 --> 00:12:26,300 Så font vekt vi vanligvis bare bruk for fet. 298 00:12:26,300 --> 00:12:29,010 Hvis du ønsker å komme virkelig inn det, vi skal vise deg. 299 00:12:29,010 --> 00:12:34,317 W3Schools har alle de forskjellige ting du kan gjøre for skrifter. 300 00:12:34,317 --> 00:12:36,900 Men innerst inne, hvis du noen gang ønsker å endre noe om skrift, 301 00:12:36,900 --> 00:12:39,330 det alltid kommer til å være, aktig, font-noe. 302 00:12:39,330 --> 00:12:43,450 Så det vil være like, font-family hvis du er prøver å endre den faktiske typen. 303 00:12:43,450 --> 00:12:47,390 Det vil være font-style hvis du ønsker å gjøre det som kursiv, 304 00:12:47,390 --> 00:12:49,710 eller kursiv, eller whatnot. 305 00:12:49,710 --> 00:12:53,570 Eller enda font-farge, hvis vi ønsket å endre det. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS Reimers: Yup. 307 00:12:55,621 --> 00:12:56,925 Så du kan endre det. 308 00:12:56,925 --> 00:12:59,360 Og liksom bare til oppsummering nå, slik at du kan 309 00:12:59,360 --> 00:13:01,400 se at vi har velgeren opp her. 310 00:13:01,400 --> 00:13:03,000 Vi har disse klammeparentes. 311 00:13:03,000 --> 00:13:06,735 Og så har vi regler avgrenset med semikolon. 312 00:13:06,735 --> 00:13:08,100 Betyr det fornuftig? 313 00:13:08,100 --> 00:13:09,130 Yeah? 314 00:13:09,130 --> 00:13:10,500 Cool. 315 00:13:10,500 --> 00:13:13,200 Så hvis det er bra-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON Buchholtz-AU: Back. 317 00:13:14,424 --> 00:13:17,590 TOMAS Reimers: La oss snakke spesifikt om hva slags velgere vi har. 318 00:13:17,590 --> 00:13:19,790 Fordi akkurat nå har vi liksom bare vist koder. 319 00:13:19,790 --> 00:13:21,696 Men dere kunne se det plausibelt. 320 00:13:21,696 --> 00:13:23,570 Fortell at du har to avsnitt på en side og du 321 00:13:23,570 --> 00:13:26,087 ønsker å være i stand til å style en, men ikke den andre, 322 00:13:26,087 --> 00:13:29,170 du ikke bare ønsker å begrense deg å måtte bruke forskjellig selve HTML 323 00:13:29,170 --> 00:13:33,410 koder for å gi dem forskjellige stiler. 324 00:13:33,410 --> 00:13:35,995 >> Så vi har tre grunnleggende typer velgere. 325 00:13:35,995 --> 00:13:37,120 ALLISON Buchholtz-AU: Yeah. 326 00:13:37,120 --> 00:13:39,828 Så vi har tag, som er det vi har snakket om akkurat nå. 327 00:13:39,828 --> 00:13:42,430 Så det er litt som kroppen din eller p. 328 00:13:42,430 --> 00:13:46,280 Og så har vi klassen, som er når vi definerer det i våre CSS-fil, 329 00:13:46,280 --> 00:13:49,907 det alltid kommer til å være prikk, uansett du vil at navnet på klassen for å være. 330 00:13:49,907 --> 00:13:51,490 Og dette kan gjelde for flere ting. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Fortell at du har fem avsnitt og to av de tre 333 00:13:57,610 --> 00:14:00,580 trenger å bli stylet det samme, du ville gjelde en klasse til det. 334 00:14:00,580 --> 00:14:03,040 Og dette er akkurat slik vi gjør det. 335 00:14:03,040 --> 00:14:05,600 Vi vil gi deg et eksempel på hvor dette faktisk dukker opp. 336 00:14:05,600 --> 00:14:11,030 Men hvis du hadde kanskje noen tag p, etter det, ville du skrive, 337 00:14:11,030 --> 00:14:14,170 klasse er lik uansett klasser du ønsker å bruke på det. 338 00:14:14,170 --> 00:14:19,280 Så uansett hva klassevelgere som vi ønsker å gjelde for denne spesifikke ledd 339 00:14:19,280 --> 00:14:21,300 vi bare kunne skrive som dette. 340 00:14:21,300 --> 00:14:24,080 Selvfølgelig, tror jeg et eksempel vil gjøre det mye mer konkret. 341 00:14:24,080 --> 00:14:27,270 >> Den andre vi har er id, som vi betegner 342 00:14:27,270 --> 00:14:29,707 med en hash, eller pund, eller 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 Som fungerer, også. 346 00:14:34,550 --> 00:14:36,640 Og dette bør egentlig være unike. 347 00:14:36,640 --> 00:14:39,880 De bør bare gjelde for en ting på siden din. 348 00:14:39,880 --> 00:14:43,820 Så om det er en bestemt punkt, eller enkelte element i en liste, eller hva, 349 00:14:43,820 --> 00:14:45,090 dette skal være unike. 350 00:14:45,090 --> 00:14:48,730 Og på samme måte som vi bare si, liker, class = "class1 Klasse2" 351 00:14:48,730 --> 00:14:51,577 dette kan bare være id av hva vi har. 352 00:14:51,577 --> 00:14:52,410 TOMAS Reimers: Yeah. 353 00:14:52,410 --> 00:14:54,330 Så la oss definitivt snakke om eksempler her. 354 00:14:54,330 --> 00:14:58,170 Og jeg bare kommer til å dykke rett tilbake inn i koden. 355 00:14:58,170 --> 00:15:02,090 Så la oss se på vår HTML. 356 00:15:02,090 --> 00:15:03,960 Og så vi akkurat nå har ett ledd. 357 00:15:03,960 --> 00:15:05,510 Dette er tekst. 358 00:15:05,510 --> 00:15:09,151 Jeg kommer bare til å modifisere det. "Dette er tekst 1." 359 00:15:09,151 --> 00:15:11,150 Og så skal vi har en "Dette er tekst 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON Buchholtz-AU: Second ett. 361 00:15:12,525 --> 00:15:13,540 TOMAS Reimers: Yup. 362 00:15:13,540 --> 00:15:16,810 Så vi har nå "Dette er tekst 2," ikke sant? 363 00:15:16,810 --> 00:15:21,560 Og vi kommer til å se at hvis vi reload siden, hva vi kommer til å finne 364 00:15:21,560 --> 00:15:23,067 er vi skal find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON Buchholtz-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS Reimers: Yeah. 367 00:15:24,983 --> 00:15:27,570 Vi kommer til å finne en "Dette er tekst 1, "og" Dette er tekst 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON Buchholtz-AU: Og ut nydelig gul farge. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS Reimers: Og du vil se at vår velger akkurat nå, 370 00:15:31,066 --> 00:15:34,940 som gjelder for p-tallet, eller avsnitt, påvirker både av dem, 371 00:15:34,940 --> 00:15:38,700 fordi begge møte betingelse at de er både en p-taggen. 372 00:15:38,700 --> 00:15:40,360 Det gjør total følelse. 373 00:15:40,360 --> 00:15:43,340 Så spørsmålet er, vel, hva hvis vi ønsket å bare få en? 374 00:15:43,340 --> 00:15:46,350 Så nøyaktig som Allison sa, vi har to andre måter å gjøre det. 375 00:15:46,350 --> 00:15:47,320 Jeg kommer til å starte med id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON Buchholtz-AU: La oss starte med id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS Reimers: Og begge av disse er attributter. 378 00:15:50,405 --> 00:15:53,200 Så attributter eksisterer i HTML. 379 00:15:53,200 --> 00:15:55,600 Og hva de er er noe som du legger 380 00:15:55,600 --> 00:15:58,840 inne i koden som er atskilt fra kodenavn. 381 00:15:58,840 --> 00:16:01,301 Så du kan ha flere attributter. 382 00:16:01,301 --> 00:16:01,800 Yeah? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON Buchholtz-AU: Jeg skulle bare å si, fra ditt eksempel fra PSet 7, 384 00:16:03,950 --> 00:16:06,650 hvis noen av dere prøver å justere ting til sentrum, 385 00:16:06,650 --> 00:16:08,550 du kan ha brukt "Tekst align = center." 386 00:16:08,550 --> 00:16:10,550 Og du lagt merke til det sannsynligvis burde ha sentrert 387 00:16:10,550 --> 00:16:12,650 din tekst eller navigasjonslinjen. 388 00:16:12,650 --> 00:16:15,499 Så det er bare også et attributt at du kan bli kjent med. 389 00:16:15,499 --> 00:16:18,040 TOMAS Reimers: Det er en haug av egenskaper som du vil se. 390 00:16:18,040 --> 00:16:18,539 Yeah. 391 00:16:18,539 --> 00:16:21,250 Som god referanse til PSet 7. 392 00:16:21,250 --> 00:16:23,150 Vi har id. 393 00:16:23,150 --> 00:16:25,080 Du kan også ha klasse, ting som dette. 394 00:16:25,080 --> 00:16:27,250 En enkelt kode kan ha mange attributter. 395 00:16:27,250 --> 00:16:33,140 Så starter med id, la oss late som vi ønsker å ha en id of-- jeg vet ikke. 396 00:16:33,140 --> 00:16:35,140 Vi kaller det spesielle, fordi dette er vi 397 00:16:35,140 --> 00:16:37,867 kommer til å lage fet, og understreke, og hva som helst. 398 00:16:37,867 --> 00:16:39,950 ALLISON Buchholtz-AU: Det er skal være super spesiell. 399 00:16:39,950 --> 00:16:42,360 TOMAS Reimers: Så dette ett, har vi id spesiell. 400 00:16:42,360 --> 00:16:48,140 Så veien å velge det, så er i main.css, i stedet har en p-taggen, 401 00:16:48,140 --> 00:16:51,500 du gjør #special, OK? 402 00:16:51,500 --> 00:16:55,538 Og som velger ting med id spesiell. 403 00:16:55,538 --> 00:16:57,295 Betyr dette fornuftig for alle? 404 00:16:57,295 --> 00:16:57,920 PUBLIKUM: Yeah. 405 00:16:57,920 --> 00:16:59,110 TOMAS Reimers: Cool. 406 00:16:59,110 --> 00:17:04,440 Så nå hvis vi går tilbake, vi vil see-- whoops. 407 00:17:04,440 --> 00:17:06,240 Yeah. 408 00:17:06,240 --> 00:17:09,460 Vi får se at det bare velger den ene med id spesiell. 409 00:17:09,460 --> 00:17:10,622 Yeah? 410 00:17:10,622 --> 00:17:11,900 Høres kult. 411 00:17:11,900 --> 00:17:12,570 Ja. 412 00:17:12,570 --> 00:17:15,456 >> PUBLIKUM: Kan noe ha en attributt av både klasse og en id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS Reimers: Ja. 414 00:17:16,359 --> 00:17:16,900 PUBLIKUM: OK. 415 00:17:16,900 --> 00:17:20,887 Og hva skjer hvis du deretter gi det noen regler i CSS at konflikten? 416 00:17:20,887 --> 00:17:21,970 TOMAS Reimers: Absolutt. 417 00:17:21,970 --> 00:17:23,940 Vi definitivt kommer å snakke om det. 418 00:17:23,940 --> 00:17:31,890 Så nøyaktig hva du får på, kan du også ha klasser. 419 00:17:31,890 --> 00:17:36,380 Så la oss late som jeg hadde tre avsnitt og jeg 420 00:17:36,380 --> 00:17:38,730 ønsket å style den første to, men ikke det tredje. 421 00:17:38,730 --> 00:17:42,850 Vel, kanskje din første idé være, vel, jeg kan bare gi den andre en id. 422 00:17:42,850 --> 00:17:45,590 Men du kan ikke, fordi en id, akkurat som Allison sa, 423 00:17:45,590 --> 00:17:47,330 må være unik. 424 00:17:47,330 --> 00:17:50,860 >> Så i stedet for en id, hva du kan bruke er at du kan bruke en klasse. 425 00:17:50,860 --> 00:17:57,880 Og en class-- hva det gjør du skal gjøre er i utgangspunktet si, 426 00:17:57,880 --> 00:17:59,610 dette hører hjemme som en del av en gruppe. 427 00:17:59,610 --> 00:18:02,410 I dette tilfelle, gruppen vår kalles Special. 428 00:18:02,410 --> 00:18:06,500 Og hva skal vi gjøre da er vi kommer til å say-- snarere enn pund, 429 00:18:06,500 --> 00:18:08,070 vi kommer til å bruke dot. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 Og legg merke til at pundet og dot bare eksisterer innenfor CSS-filen, 432 00:18:11,950 --> 00:18:12,797 ikke i HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON Buchholtz-AU: Ja. 434 00:18:13,880 --> 00:18:15,185 Viktig skille. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS Reimers: Jeg har hadde så mye kamp, 436 00:18:17,510 --> 00:18:23,990 fordi jeg sette hasj i HTML og så bare følte dum for en lang tid. 437 00:18:23,990 --> 00:18:27,470 Se hvordan den velger begge de med den klassen? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Nå kan ting ha flere klasser. 440 00:18:29,950 --> 00:18:32,790 La oss si at jeg ønsket å gjøre det første to har en bakgrunn av gult 441 00:18:32,790 --> 00:18:36,770 og den andre har to en skriftfarge blå. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Jeg vet egentlig ikke hvorfor jeg hadde ønsker å gjøre det, men jeg kan. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON Buchholtz-AU: ikke Might anbefales det for ditt nettsted. 445 00:18:42,401 --> 00:18:43,880 Men for vårt formål, det vil gjøre. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS Reimers: Det er ikke en god fargevalg. 447 00:18:46,294 --> 00:18:49,210 ALLISON Buchholtz-AU: Vel, gul og blå er mine high school farger. 448 00:18:49,210 --> 00:18:50,947 Jeg vet ikke, skjønt. 449 00:18:50,947 --> 00:18:53,530 TOMAS Reimers: Allison høye Skolen hadde en flott fargevalg. 450 00:18:53,530 --> 00:18:54,520 [Latter] 451 00:18:54,520 --> 00:18:59,120 Så da hva vi kan kalle dette er La oss kalle dette-- så vi har Spesial 452 00:18:59,120 --> 00:19:00,030 og vi har Pretty. 453 00:19:00,030 --> 00:19:02,405 Jeg foreslår, for dette, bruker du mye mer beskrivende navn. 454 00:19:02,405 --> 00:19:05,820 ALLISON Buchholtz-AU: Ja, ville jeg kalle dette, som, gul eller blå. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS Reimers: Vi er ikke virkelig gjøre en reell nettsted, 456 00:19:08,314 --> 00:19:09,730 som er grunnen til at vi ikke gjør det. 457 00:19:09,730 --> 00:19:11,521 Men hvis du faktisk hadde en skikkelig nettside, du 458 00:19:11,521 --> 00:19:16,220 kan ha, som, artikkel header, Artikkelen innhold, første ord, 459 00:19:16,220 --> 00:19:21,920 ting som det, som tillater du å være mye mer beskrivende. 460 00:19:21,920 --> 00:19:23,550 Dette er egentlig akkurat som variabler. 461 00:19:23,550 --> 00:19:28,390 De bør bli navngitt på en måte der du kan, like-- yeah, som sådan. 462 00:19:28,390 --> 00:19:29,470 Perfekt. 463 00:19:29,470 --> 00:19:30,480 >> Så bakgrunnsfarge. 464 00:19:30,480 --> 00:19:35,920 Og så skal vi say-- så måte å endre fargen er bare "farge". 465 00:19:35,920 --> 00:19:38,412 Og vi kommer til å gjøre det blå. 466 00:19:38,412 --> 00:19:40,150 Det er kult. 467 00:19:40,150 --> 00:19:42,640 Så nå har vi den to første har spesiell. 468 00:19:42,640 --> 00:19:45,972 Neste kommer til å har "class = pen." 469 00:19:45,972 --> 00:19:49,180 ALLISON Buchholtz-AU: og da vil ønsker å legge til "pen" til den midterste. 470 00:19:49,180 --> 00:19:49,971 TOMAS Reimers: Yup. 471 00:19:49,971 --> 00:19:52,970 Og deretter til den midterste, å legge til "pen", hva skjer 472 00:19:52,970 --> 00:19:56,880 er du bare ha en plass. 473 00:19:56,880 --> 00:19:59,800 Så klassen attributt er en space-separert liste 474 00:19:59,800 --> 00:20:02,450 av alle klassene som gjelder for den koden. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Det er ikke som dette tilhører en slags spesiell klasse kalt 477 00:20:05,750 --> 00:20:07,180 "Spesielle, plass, pen." 478 00:20:07,180 --> 00:20:10,870 Den tilhører to classes-- spesiell og pen. 479 00:20:10,870 --> 00:20:12,492 Ja? 480 00:20:12,492 --> 00:20:14,360 Cool. 481 00:20:14,360 --> 00:20:17,010 >> Og så hvis vi ser på hva som skjer, vi er 482 00:20:17,010 --> 00:20:21,850 kommer til å se at første har gul bakgrunn, svart tekst. 483 00:20:21,850 --> 00:20:22,450 Andre one-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON Buchholtz-AU: --has fet gul bakgrunn med blå tekst. 485 00:20:26,160 --> 00:20:29,330 Og vår siste man bare har blå tekst som vi tildelt. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS Reimers: Kule? 487 00:20:30,870 --> 00:20:32,491 Hvordan velgere jobbe? 488 00:20:32,491 --> 00:20:32,990 Awesome. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON Buchholtz-AU: Ønsker vi å snakke om konflikten nå da? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS Reimers: Så ja. 491 00:20:35,780 --> 00:20:36,310 Absolutt. 492 00:20:36,310 --> 00:20:38,380 Så hva skjer hvis du har en konflikt, ikke sant? 493 00:20:38,380 --> 00:20:44,740 La oss late som det første setter opp noe like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON Buchholtz-AU: Kanskje denne endrer bakgrunnen? 495 00:20:47,240 --> 00:20:48,090 TOMAS Reimers: Yeah. 496 00:20:48,090 --> 00:20:51,699 Så vi kommer til å gjøre "pen" endre bakgrunnen til laks. 497 00:20:51,699 --> 00:20:54,740 ALLISON Buchholtz-AU: Du er bare med alle de flotte fargene i dag, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS Reimers: Yeah. 499 00:20:55,573 --> 00:20:58,200 Fordi jeg fant ut kan jeg bruker laks som en ekte farge. 500 00:20:58,200 --> 00:21:00,270 Så vi bare kommer til å gjøre det. 501 00:21:00,270 --> 00:21:01,770 Jeg tror også Sunset er en ekte farge. 502 00:21:01,770 --> 00:21:03,103 PUBLIKUM: Sunset er en ekte farge? 503 00:21:03,103 --> 00:21:04,572 ALLISON Buchholtz-AU: La oss prøve det. 504 00:21:04,572 --> 00:21:07,735 TOMAS Reimers: Etter denne demoen bare fordi i tilfelle søl opp det, 505 00:21:07,735 --> 00:21:08,943 Jeg ønsker ikke å bli debugging. 506 00:21:08,943 --> 00:21:11,580 Så vi vet laks er en ekte farge. 507 00:21:11,580 --> 00:21:15,626 Så noen gjetninger på hva kommer til å skje? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON Buchholtz-AU: Noen ide? 509 00:21:17,522 --> 00:21:20,002 >> PUBLIKUM: [uhørlig]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS Reimers: Yeah. 511 00:21:20,920 --> 00:21:22,150 Så du fikk det helt riktig. 512 00:21:22,150 --> 00:21:24,930 I utgangspunktet tar det siste regelen om at det ble gitt. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON Buchholtz-AU: Så dette er hvor gjennomgripende trer i kraft. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS Reimers: Så husk hvordan vi hadde som Cascading Style Sheets? 515 00:21:31,080 --> 00:21:33,660 Så ved at vi på en måte bety at vi har en haug med regler 516 00:21:33,660 --> 00:21:37,115 som gjelder på toppen av hverandre, og de kan også overstyre hverandre. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON Buchholtz-AU: So hva er på bunnen 518 00:21:39,380 --> 00:21:41,540 vil overstyre alt som er på toppen. 519 00:21:41,540 --> 00:21:45,842 Du kunne ha regler som helt negere noe på forhånd. 520 00:21:45,842 --> 00:21:48,300 Det er også grunnen til at du ønsker å være forsiktig når du er styling, 521 00:21:48,300 --> 00:21:51,465 slik at du ikke lage regler som du er bare helt overstyrer. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS Reimers: Eller kanskje du vil overskrive regler. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON Buchholtz-AU: Eller kanskje du gjør. 524 00:21:53,920 --> 00:21:54,300 Ja. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS Reimers: Lat som om du har en klasse som gjelder de fleste ting, 526 00:21:57,175 --> 00:22:01,220 men la oss si at du ønsker å endre bakgrunnsfargen til rød og skriften 527 00:22:01,220 --> 00:22:03,140 vekt til fet for de fleste ting, men for en, 528 00:22:03,140 --> 00:22:06,098 du bare vil bakgrunnsfargen å være rød, men du vil at alle de andre 529 00:22:06,098 --> 00:22:09,990 egenskaper, kan du gjøre noe som "font-weight = normal," 530 00:22:09,990 --> 00:22:12,760 som da ville angre på at fet endring. 531 00:22:12,760 --> 00:22:14,480 Yeah? 532 00:22:14,480 --> 00:22:17,250 Igjen, den beste måten, tror jeg Allison sa det, er bare å øve. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON Buchholtz-AU: Eksperimentering. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS Reimers: Øve, øve, praksis, og eksperiment. 535 00:22:20,090 --> 00:22:22,950 Jeg kjenner mange mennesker som tror CSS er bare en masse gjette-og-sjekk 536 00:22:22,950 --> 00:22:25,580 ved slutten av dagen, der hvis du ønsker å gjøre something-- lignende, 537 00:22:25,580 --> 00:22:27,663 du har en viss idé, men du fortsatt sannsynligvis trenger 538 00:22:27,663 --> 00:22:31,390 å prøve det ut for å være sikker du vet hvordan det ser ut. 539 00:22:31,390 --> 00:22:34,482 >> PUBLIKUM: Når du søker klasser, mer enn ett 540 00:22:34,482 --> 00:22:37,339 til samme avsnitt eller avsnitt, gjør det 541 00:22:37,339 --> 00:22:39,505 Uansett hvilken rekkefølge du kan skriv dem inn i anførselstegn? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS Reimers: Nei, ikke i det hele tatt. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON Buchholtz-AU: Det som teller er rekkefølgen i din CSS stilark. 544 00:22:45,764 --> 00:22:47,430 PUBLIKUM: Kan du gjenta spørsmålet? 545 00:22:47,430 --> 00:22:50,680 TOMAS Reimers: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON Buchholtz-AU: Innen klasse, når du gir klasser 547 00:22:53,990 --> 00:22:56,964 til noe i HTML, gjør det noen rolle hvilken rekkefølge de er i? 548 00:22:56,964 --> 00:22:58,130 Det spiller ingen rolle bestillingen. 549 00:22:58,130 --> 00:23:02,915 Det som teller er den rekkefølgen av klassevelgere i din CSS, 550 00:23:02,915 --> 00:23:04,306 innenfor stilarket. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS Reimers: Høres bra ut? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON Buchholtz-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS Reimers: Og så vi kommer til å fortsette to-- 554 00:23:11,539 --> 00:23:13,330 ALLISON Buchholtz-AU: Hva har vi neste? 555 00:23:13,330 --> 00:23:14,245 Jeg glemmer. 556 00:23:14,245 --> 00:23:16,087 Åh, vi må bare eksempler. 557 00:23:16,087 --> 00:23:17,295 Men vi har på en måte gjort de. 558 00:23:17,295 --> 00:23:18,990 Vi har gjort eksempler på sparket. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS Reimers: Vi kommer til å kombinere velgere snart. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON Buchholtz-AU: Oh, vi kommer til å kombinere velgere. 561 00:23:22,790 --> 00:23:25,260 TOMAS Reimers: Så noen eksempler er at vi har 562 00:23:25,260 --> 00:23:29,630 # Dog-- pund, eller hashtag, eller octothorpe, eller hva 563 00:23:29,630 --> 00:23:32,050 du ønsker å ringe at-- skarp. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON Buchholtz-AU: Sharp hund. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS Reimers: Da har du .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Noe har en id av hund, det er bare en hund på siden. 568 00:23:41,600 --> 00:23:43,870 Noe har en id av katt, det er bare en katt. 569 00:23:43,870 --> 00:23:45,665 Det kan være mange kjæledyr på siden. 570 00:23:45,665 --> 00:23:47,570 Det er derfor vi ga som klasser. 571 00:23:47,570 --> 00:23:48,740 Du har et eksempel på s. 572 00:23:48,740 --> 00:23:50,490 Og deretter slik at en av forrige eksempel, som 573 00:23:50,490 --> 00:23:53,790 er noe vi ikke har snakket om, er hva som skjer når du kombinerer dem. 574 00:23:53,790 --> 00:23:54,580 Så p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Så for det, la oss gå tilbake til den kode og introdusere another-- ja. 577 00:24:02,950 --> 00:24:04,290 Så tilbake hit. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON Buchholtz-AU: Jeg føler at dette er really-- 579 00:24:04,850 --> 00:24:08,105 som bare ser gjennom eksempler er virkelig måten å lære dette. 580 00:24:08,105 --> 00:24:09,360 Så det er det vi gjør. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS Reimers: Så la oss late som vi bare ønsker å velge tekst 2, ikke sant? 582 00:24:14,030 --> 00:24:16,530 Så vi definitivt ikke kan gjøre det med en id. 583 00:24:16,530 --> 00:24:19,620 Vel, vi kunne gjøre det med en id, men det har ikke en id. 584 00:24:19,620 --> 00:24:22,490 Jeg kunne legge en, men la oss late at jeg ikke ønsker å legge til en 585 00:24:22,490 --> 00:24:24,910 eller det allerede har noe annet. 586 00:24:24,910 --> 00:24:26,516 Jeg kan ikke gjøre det med det. 587 00:24:26,516 --> 00:24:28,870 Koden er definitivt ikke unik, ikke sant? 588 00:24:28,870 --> 00:24:30,670 Og det er heller ikke den klassen. 589 00:24:30,670 --> 00:24:32,314 Men du kan kombinere disse tingene. 590 00:24:32,314 --> 00:24:35,230 La oss si at vi ønsket å gjøre noe som bare gjelder for ting som 591 00:24:35,230 --> 00:24:39,420 har klassen spesiell og som har klassen pen. 592 00:24:39,420 --> 00:24:48,150 >> Så hva du kan gjøre er i main.css, du kan si, la oss først slette dette. 593 00:24:48,150 --> 00:24:50,240 Du kan kombinere disse. 594 00:24:50,240 --> 00:24:51,430 Så du kan gjøre, spesiell. 595 00:24:51,430 --> 00:24:52,110 Ingen plass. 596 00:24:52,110 --> 00:24:54,770 Bare .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Hva det betyr er noe som er både spesiell og pen. 598 00:25:00,550 --> 00:25:01,900 Betyr det fornuftig? 599 00:25:01,900 --> 00:25:04,190 Og hvis vi går her, hva du kommer til å se 600 00:25:04,190 --> 00:25:09,734 er denne regelen gjelder bare for andre, som har begge disse. 601 00:25:09,734 --> 00:25:11,400 Og du kan gjøre det for mange ting. 602 00:25:11,400 --> 00:25:13,270 Du kan say-- la oss late som jeg bare ønsket 603 00:25:13,270 --> 00:25:18,300 å gjøre ting som har klassen pen og som også er et avsnitt tag. 604 00:25:18,300 --> 00:25:19,920 Så p.pretty. 605 00:25:19,920 --> 00:25:23,585 La oss late som jeg hadde noe pen på tag kroppen. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Jeg kan kjøre dette og jeg kan se at det er bare 608 00:25:28,490 --> 00:25:32,720 kommer til å gjelde for ting som er avsnitt med klassen pen. 609 00:25:32,720 --> 00:25:35,650 Og du kan kombinere disse, i utgangspunktet, så mange du vil. 610 00:25:35,650 --> 00:25:38,580 Så du kan bare sette dem sammen. 611 00:25:38,580 --> 00:25:39,604 Betyr det fornuftig? 612 00:25:39,604 --> 00:25:41,770 ALLISON Buchholtz-AU: So denne typen er mer nyttig 613 00:25:41,770 --> 00:25:45,490 da ble Tomas sa tidligere, kanskje du har en veldig komplisert nettside, 614 00:25:45,490 --> 00:25:48,050 og du allerede har mye av disse reglene skrevet, 615 00:25:48,050 --> 00:25:51,170 og du trenger bare å kombinere to fra før. 616 00:25:51,170 --> 00:25:55,350 Som i stedet for å skrive en hel ny velgeren og endre det der, 617 00:25:55,350 --> 00:25:58,592 du kan bare kombinere dem der den overlapper. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS Reimers: Eller du kan finne out-- noen ganger 619 00:26:00,670 --> 00:26:04,290 det er en klasse som gjør font farge som blå, 620 00:26:04,290 --> 00:26:06,740 og det er en annen klasse som gjør bakgrunnen blå. 621 00:26:06,740 --> 00:26:07,840 Og som bare ikke vil fungere. 622 00:26:07,840 --> 00:26:10,924 Så du skrive en spesiell sak, hvor, like-- men hvis den har begge deler, hva du er 623 00:26:10,924 --> 00:26:13,548 kommer til å gjøre er du kommer til å gjør dette til en denne blåfargen 624 00:26:13,548 --> 00:26:15,310 og dette denne annen nyanse av blått. 625 00:26:15,310 --> 00:26:15,580 Høyre? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON Buchholtz-AU: Bra for slike unntak. 627 00:26:17,955 --> 00:26:21,220 TOMAS Reimers: Så å tenke på problemer 628 00:26:21,220 --> 00:26:25,000 som kan oppstå når du kombinerer dem. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 Så tilbake til vår presentasjon. 631 00:26:29,692 --> 00:26:31,400 ALLISON Buchholtz-AU: Vi er nesten der. 632 00:26:31,400 --> 00:26:34,022 TOMAS Reimers: Og det har sluttet å koble. 633 00:26:34,022 --> 00:26:36,494 ALLISON Buchholtz-AU: Å, nei. 634 00:26:36,494 --> 00:26:39,125 ALLISON Buchholtz-AU: CS på kontoret, går internett ned. 635 00:26:39,125 --> 00:26:40,360 Oh, ironien. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS Reimers: Så heldigvis, kan vi presentere uten internett, antar jeg, 637 00:26:45,620 --> 00:26:47,380 fordi vi har alle lysbildene her. 638 00:26:47,380 --> 00:26:49,304 Så la oss snakke om det forholdet mellom tagger. 639 00:26:49,304 --> 00:26:50,470 ALLISON Buchholtz-AU: Høyre. 640 00:26:50,470 --> 00:26:52,660 Så bare slags kommer ut av hva Tomas sa, 641 00:26:52,660 --> 00:26:54,180 dette er bare en annen måte å gjøre det. 642 00:26:54,180 --> 00:26:57,840 Så vi har noen av foreldrene Velger med et barn velger. 643 00:26:57,840 --> 00:27:02,815 Så i dette eksempelet her, har vi noen kroppen med en klasse navbar, klasse knappen. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS Reimers: Oh, sorry. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON Buchholtz-AU: Og utgangspunktet, hva dette betyr 647 00:27:06,180 --> 00:27:11,070 er å velge alle barna, som alle disse typer velgere, 648 00:27:11,070 --> 00:27:13,040 innenfor denne forelderen velgeren. 649 00:27:13,040 --> 00:27:16,004 Og de er de eneste som det noensinne kommer til å gjelde for. 650 00:27:16,004 --> 00:27:17,755 Jeg vet ikke om du har en bedre måte of-- 651 00:27:17,755 --> 00:27:19,504 TOMAS Reimers: Så jeg gjette måte å tenke 652 00:27:19,504 --> 00:27:22,440 om dette er huske før hvordan vi liksom som setter dem sammen. 653 00:27:22,440 --> 00:27:26,340 Og så det betyr ett element som passer alle disse. 654 00:27:26,340 --> 00:27:29,530 Hva dette sier er, jeg ønsker du å matche alt 655 00:27:29,530 --> 00:27:33,220 innenfor some-- jeg ønsker du å finne en velger. 656 00:27:33,220 --> 00:27:35,670 Og så i dette, jeg ønsker du å matche nye ting. 657 00:27:35,670 --> 00:27:36,170 Høyre? 658 00:27:36,170 --> 00:27:40,900 Så i CSS, det handler om liksom å være i stand til å matche disse elementene. 659 00:27:40,900 --> 00:27:43,050 Og du kan prøve å matche elementer innenfor andre elementer. 660 00:27:43,050 --> 00:27:46,510 >> Så la oss faktisk gjøre et eksempel, og vi tror at vil avklare. 661 00:27:46,510 --> 00:27:53,090 Så la oss late som vi har spesielle, spesielt pen, uansett. 662 00:27:53,090 --> 00:27:55,690 Og så har vi en link, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Så husk, en er en link. 665 00:28:02,370 --> 00:28:03,900 Det kommer ikke til å gå hvor som helst. 666 00:28:03,900 --> 00:28:11,500 Og vi kommer til å gi den koblingen klasse, tror jeg. 667 00:28:11,500 --> 00:28:13,335 La oss gi den class-- gi meg en idé. 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-- la oss går det klassen pen. 670 00:28:16,420 --> 00:28:16,930 Hvorfor ikke? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON Buchholtz-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS Reimers: So akkurat nå pene ting 673 00:28:23,040 --> 00:28:26,000 kommer til å gjøre bakgrunnen blå, bakgrunnsfargen til laks. 674 00:28:26,000 --> 00:28:27,969 Det er fornuftig. 675 00:28:27,969 --> 00:28:28,760 Og hvis vi gjør dette-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON Buchholtz-AU: Du vil legge til tekst gjør 677 00:28:29,620 --> 00:28:31,078 så hyperkoblingen faktisk dukker opp? 678 00:28:31,078 --> 00:28:35,088 TOMAS Reimers: At ville være en god samtale. 679 00:28:35,088 --> 00:28:37,921 ALLISON Buchholtz-AU: Fordi retten nå er vi bare skal få ingenting. 680 00:28:37,921 --> 00:28:39,690 TOMAS Reimers: Så dette er en kobling. 681 00:28:39,690 --> 00:28:42,202 "Dette er en link." 682 00:28:42,202 --> 00:28:45,820 Oh, og dette kommer å være en annen link. 683 00:28:45,820 --> 00:28:47,280 La oss gi den klassen "cool". 684 00:28:47,280 --> 00:28:50,295 Du har rett. 685 00:28:50,295 --> 00:28:50,795 Cool. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Så akkurat nå vi kommer til å ta dette. 688 00:28:56,010 --> 00:28:57,269 Vi kommer til å kaste en. 689 00:28:57,269 --> 00:28:59,060 Vi har en i spesiell tag, og vi har også 690 00:28:59,060 --> 00:29:01,150 kommer til å ha en i ganske tag. 691 00:29:01,150 --> 00:29:05,449 Og akkurat nå hva vi skal gjøre er vi kommer til å gjøre cool-- 692 00:29:05,449 --> 00:29:06,490 hva gjør vi vil at den skal gjøre? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON Buchholtz-AU: Kan vi gjøre det større? 695 00:29:12,180 --> 00:29:13,800 TOMAS Reimers: La oss gi det en grense. 696 00:29:13,800 --> 00:29:14,840 ALLISON Buchholtz-AU: Vi kunne grensen. 697 00:29:14,840 --> 00:29:15,673 TOMAS Reimers: Yeah. 698 00:29:15,673 --> 00:29:18,560 Så vi kommer til å gjøre noe lignende, grensen er-- og vi er 699 00:29:18,560 --> 00:29:20,971 kommer til å forklare dette i et sekund. 700 00:29:20,971 --> 00:29:21,470 For now-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON Buchholtz-AU: Til boksmodellen. 702 00:29:24,592 --> 00:29:27,300 TOMAS Reimers: Men for nå, vi er bare kommer til å gi det en grense. 703 00:29:27,300 --> 00:29:29,580 Så hva det betyr er at du er kommer til å se disse linkene. 704 00:29:29,580 --> 00:29:32,788 Og du kommer til å se at de har disse, som, stygge svarte kanter, som 705 00:29:32,788 --> 00:29:33,820 er kult. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON Buchholtz-AU: Vår hjemmeside er så pen. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS Reimers: Yeah. 708 00:29:35,333 --> 00:29:38,930 Vår hjemmeside er kjempebra. 709 00:29:38,930 --> 00:29:41,585 Så disse to er lenker, og de vises. 710 00:29:41,585 --> 00:29:44,160 Nå la oss late som jeg bare ønsket å gjøre dette 711 00:29:44,160 --> 00:29:50,072 Hvis det ikke var noe innenfor som hadde en bakgrunn av laks. 712 00:29:50,072 --> 00:29:52,280 Så husk at denne ene har en bakgrunn av laks, 713 00:29:52,280 --> 00:29:54,000 fordi det er av klasse pen. 714 00:29:54,000 --> 00:29:59,777 >> Men vi ønsker å si at bare kjøler som er i klasse spesiell, ikke i klassen 715 00:29:59,777 --> 00:30:02,890 pen, bør ha som grenser. 716 00:30:02,890 --> 00:30:12,549 Vel, hva du kan gjøre er du kan si,, spesiell, plass, .cool. 717 00:30:12,549 --> 00:30:15,590 Og hva det gjør, når du tror om det, er det i utgangspunktet si, 718 00:30:15,590 --> 00:30:19,530 OK, finne meg alt som passer spesielt. 719 00:30:19,530 --> 00:30:24,104 Deretter innen disse kodene, finne meg alt som er kult. 720 00:30:24,104 --> 00:30:27,270 ALLISON Buchholtz-AU: Så en annen måte som kan være bra å tenke på dette, 721 00:30:27,270 --> 00:30:29,810 bringe den tilbake til C, er akkurat som ideen om omfanget. 722 00:30:29,810 --> 00:30:34,020 Så når du har noen velgeren, som de 723 00:30:34,020 --> 00:30:38,460 at vi har jobbet for før dette, hele web-side, alt av HTML 724 00:30:38,460 --> 00:30:40,180 er innenfor virkeområdet, ikke sant? 725 00:30:40,180 --> 00:30:43,090 Men når vi har disse foreldre-barn-relasjoner, 726 00:30:43,090 --> 00:30:47,130 det er som om du er innsnevring ned der du leter til et bestemt sted, 727 00:30:47,130 --> 00:30:50,540 som om likhet, vi ser innenfor en bestemt funksjon i stedet 728 00:30:50,540 --> 00:30:52,007 av våre hele filen. 729 00:30:52,007 --> 00:30:55,090 PUBLIKUM: Så med det i tankene, ville det har noen betydning hvis vi hadde changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON Buchholtz-AU: Ordren? 731 00:30:56,423 --> 00:30:59,320 PUBLIKUM: --Det klasse i CSS å .cool, plass,, spesiell? 732 00:30:59,320 --> 00:31:01,153 ALLISON Buchholtz-AU: Ja, fordi da at 733 00:31:01,153 --> 00:31:04,420 vil si, omfang det til alt som har kule, 734 00:31:04,420 --> 00:31:07,235 og deretter se på hva has-- Jeg mener, som, i dette tilfellet 735 00:31:07,235 --> 00:31:08,860 Jeg tror ikke det ville ha endret det. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS Reimers: Hvis vi hadde sagt hva? 737 00:31:10,318 --> 00:31:10,906 Unnskyld. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON Buchholtz-AU: Hvis vi omfang den avkjøles og deretter 739 00:31:12,660 --> 00:31:14,550 se etter ting av spesielle, det ville være det samme, faktisk. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS Reimers: Så det ikke ville være. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON Buchholtz-AU: Det ville ikke? 742 00:31:16,590 --> 00:31:17,590 Oh, oh well. 743 00:31:17,590 --> 00:31:18,090 Jeg er galt. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS Reimers: Så grunnen det er different-- felles mistake-- 745 00:31:21,480 --> 00:31:27,140 er det akkurat nå bare koblingen har kule, ikke sant? 746 00:31:27,140 --> 00:31:32,176 Jeg tror spørsmålet mitt til dere er, hva på denne siden er matchet av .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Det er to tags her, ikke sant? 749 00:31:38,340 --> 00:31:39,770 Som er denne og denne. 750 00:31:39,770 --> 00:31:40,590 Begge matche kult. 751 00:31:40,590 --> 00:31:42,200 Ingenting annet gjør. 752 00:31:42,200 --> 00:31:46,460 Så hvis du sa, .cool, plass, , spesiell, hva du kommer til å si er, 753 00:31:46,460 --> 00:31:48,824 innenfor disse kodene, hva er spesielt? 754 00:31:48,824 --> 00:31:49,865 ALLISON Buchholtz-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Det er det it-- riktig. 756 00:31:51,800 --> 00:31:52,310 Fordi det er som bare noe her. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS Reimers: Så det velger ingenting. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON Buchholtz-AU: Mens med spesiell, vi er innenfor disse kodene her. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS Reimers: De og dem. 760 00:31:57,971 --> 00:31:58,512 PUBLIKUM: OK. 761 00:31:58,512 --> 00:31:58,920 Så disse kodene fra skråstrek? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS Reimers: Ja. 763 00:31:59,740 --> 00:32:01,150 Betyr det fornuftig? 764 00:32:01,150 --> 00:32:03,685 Hvordan det er i utgangspunktet prøver å begrense omfanget. 765 00:32:03,685 --> 00:32:04,810 ALLISON Buchholtz-AU: Yeah. 766 00:32:04,810 --> 00:32:06,870 Jeg tror det er trolig den enkleste måten å tenke på det. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS Reimers: Så vi fant dette, og vi fant dette både matchet spesiell. 768 00:32:09,270 --> 00:32:11,400 Og så ber vi, innenfor disse gutta, hva som er kult? 769 00:32:11,400 --> 00:32:12,941 Og innenfor denne, denne er kul. 770 00:32:12,941 --> 00:32:14,500 Innenfor dette, er ikke noe kult. 771 00:32:14,500 --> 00:32:16,250 Så dette er den eneste kode som gjenstår. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON Buchholtz-AU: Mens kult er bare innenfor disse noen koder der. 773 00:32:20,112 --> 00:32:21,070 TOMAS Reimers: Nettopp. 774 00:32:21,070 --> 00:32:22,403 Og hva som er spesielt innenfor de? 775 00:32:22,403 --> 00:32:22,930 Ingenting. 776 00:32:22,930 --> 00:32:25,270 Nå, hva jeg vil si er hvis det var ingen plass, 777 00:32:25,270 --> 00:32:29,880 du spør hva som er kult og spesiell-- eller hva som er pen og spesielt, ikke sant? 778 00:32:29,880 --> 00:32:35,370 Hvis du sier .special.pretty, det er det samme som .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Fordi det fjerne mellomrommet er spør er, når du sier, spesiell, 780 00:32:39,220 --> 00:32:40,970 du spør, OK, hvilke som er spesielt? 781 00:32:40,970 --> 00:32:43,780 Og så av dem, som de er også pen, 782 00:32:43,780 --> 00:32:47,010 som er det samme, grammatisk, som spør, hva er pen, 783 00:32:47,010 --> 00:32:49,500 og deretter av dem, hva er også spesiell? 784 00:32:49,500 --> 00:32:50,000 Høyre? 785 00:32:50,000 --> 00:32:53,099 Det er forskjellen på hva som er innenfor det som er. 786 00:32:53,099 --> 00:32:53,640 PUBLIKUM: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS Reimers: Yeah. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Awesome. 790 00:32:58,030 --> 00:33:00,426 Så med det i tankene then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON Buchholtz-AU: Jeg tror vår siste ting er (IN FANCY britisk aksent) 792 00:33:01,800 --> 00:33:02,510 boksen modell. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS Reimers: Den box-- [humrer] Jeg elsker måten Allison sier det. 794 00:33:05,992 --> 00:33:06,950 Så boksen modell ting. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON Buchholtz-AU: Bare ha en boks, vil jeg være din boks modell. 796 00:33:09,644 --> 00:33:11,310 TOMAS Reimers: Så la oss snakke om det. 797 00:33:11,310 --> 00:33:14,070 Så akkurat nå har vi brukt mye tid på å snakke om velgere. 798 00:33:14,070 --> 00:33:16,944 Nå, dere er sannsynligvis, som, mestere av selectors-- du vet, 799 00:33:16,944 --> 00:33:21,510 hvordan du nøyaktig velge innholdet som du ønsker å manipulere på skjermen. 800 00:33:21,510 --> 00:33:24,740 >> Så nå er spørsmålet, hvordan nøyaktig kan du manipulere det? 801 00:33:24,740 --> 00:33:27,010 Så jeg antar det mest grunnleggende måte å tenke på at 802 00:33:27,010 --> 00:33:30,294 er, vel, hva er et element i CSS? 803 00:33:30,294 --> 00:33:32,585 Vi har brukt mye tid snakker om, hva er en kode, 804 00:33:32,585 --> 00:33:36,140 eller hva som er den mest grunnleggende representasjon av en kode? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> En god måte å tenke på det vil si hvilken form er laks? 807 00:33:45,170 --> 00:33:47,295 Hvilken form er, i likhet med den laks-farget bakgrunn? 808 00:33:47,295 --> 00:33:47,880 >> PUBLIKUM: Det er et rektangel. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS Reimers: Det er et rektangel, ikke sant? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON Buchholtz-AU: Var ikke et lurespørsmål. 811 00:33:50,956 --> 00:33:51,870 [Latter] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS Reimers: Ikke prøver å lure dere dette sent. 813 00:33:54,670 --> 00:33:57,510 Så vi har denne rektangel. 814 00:33:57,510 --> 00:33:59,140 Og tag er en p, ikke sant? 815 00:33:59,140 --> 00:34:02,280 Slik som gir oss god troen på at avsnitt 816 00:34:02,280 --> 00:34:07,440 er representert som et rektangel, i minst i sinnet av leseren, som 817 00:34:07,440 --> 00:34:08,715 det er. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON Buchholtz-AU: Jeg mener, nettlesere er vanligvis rektangulære, 819 00:34:11,423 --> 00:34:13,440 så det er fornuftig. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS Reimers: Ideen her er at alle kodene i CSS 821 00:34:18,750 --> 00:34:21,790 er representert som et rektangel. 822 00:34:21,790 --> 00:34:25,699 Og hver rektangel har fire deler i henhold til CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Du har det faktiske innholdet. 824 00:34:27,830 --> 00:34:29,644 Det er der teksten ligger. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON Buchholtz-AU: Kanskje bildet ditt. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS Reimers: Yeah. 827 00:34:31,303 --> 00:34:33,860 Du har polstring, som er bare en slags hvit plass. 828 00:34:33,860 --> 00:34:35,085 Da har du en grense. 829 00:34:35,085 --> 00:34:37,710 Og da har du margin, som er hvit plass utenfor det. 830 00:34:37,710 --> 00:34:39,460 Så det gir ingen mening til noen, så vi er 831 00:34:39,460 --> 00:34:42,500 kommer til å snakke om det for et sekund. 832 00:34:42,500 --> 00:34:47,570 Så akkurat her, hva vi skal gjøre er vi kommer til å lage noen divs, OK? 833 00:34:47,570 --> 00:34:48,420 Unnskyld meg mens I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON Buchholtz-AU: Jeg har lyst vi bør sette en søt bilde i. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS Reimers: Vi definitivt burde. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON Buchholtz-AU: Jeg føler at alle 837 00:34:53,389 --> 00:34:54,870 kunne dra nytte av en søt bilde, er tatt. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS Reimers: Kan vi alle dra nytte av a-- 839 00:34:56,774 --> 00:34:57,648 >> PUBLIKUM: Ja, klart det. 840 00:34:57,648 --> 00:34:58,790 TOMAS Reimers: OK, kult. 841 00:34:58,790 --> 00:35:02,254 Så vi bør sette en søt bilde i et eller annet sted. 842 00:35:02,254 --> 00:35:05,295 ALLISON Buchholtz-AU: Jeg føler meg som en søte kaninen kan være nyttig akkurat nå. 843 00:35:05,295 --> 00:35:06,190 TOMAS Reimers: Sure. 844 00:35:06,190 --> 00:35:06,950 ALLISON Buchholtz-AU: Slutten av uken. 845 00:35:06,950 --> 00:35:07,390 Har noe adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS Reimers: Hvordan bout en kattunge? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON Buchholtz-AU: En kattunge fungerer også. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS Reimers: Cool, fordi det er et nettsted for det. 849 00:35:11,300 --> 00:35:12,300 Det kalles PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON Buchholtz-AU: Det er flott. 851 00:35:14,719 --> 00:35:15,510 TOMAS Reimers: Ja. 852 00:35:15,510 --> 00:35:18,040 ALLISON Buchholtz-AU: Bare for, som, eksempelbilder i ditt nettsted. 853 00:35:18,040 --> 00:35:18,914 TOMAS Reimers: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Det er også PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Og det er PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON Buchholtz-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Egentlig? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS Reimers: Å, gjør vi ikke har tilgang til internett her. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON Buchholtz-AU: [Stønner] 860 00:35:29,875 --> 00:35:30,375 Tragisk. 861 00:35:30,375 --> 00:35:32,333 TOMAS Reimers: Ellers Jeg ville vise dere 862 00:35:32,333 --> 00:35:33,870 hvordan å sette bilder på nettstedet ditt. 863 00:35:33,870 --> 00:35:36,370 Vi kommer til å prøve å få dette arbeider før vi må gå. 864 00:35:36,370 --> 00:35:38,660 Men for nå, er vi bare kommer til å snakke i farger da. 865 00:35:38,660 --> 00:35:39,820 Vi ønsker å sette bilder av kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON Buchholtz-AU: Vi gjorde. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS Reimers: --Rommet Internetts ned for øyeblikket å være. 868 00:35:43,110 --> 00:35:47,820 Så vi har to divs, og vi er kommer til å gi dem to IDer. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Vi kommer til å kalle det "Første" og "andre". 871 00:35:56,760 --> 00:36:01,184 Så id = "først." 872 00:36:01,184 --> 00:36:02,850 Og vi kommer til å gi dem to farger. 873 00:36:02,850 --> 00:36:08,424 Så hvordan velger vi noe med en id av "første"? 874 00:36:08,424 --> 00:36:09,840 ALLISON Buchholtz-AU: Dot eller hasj? 875 00:36:09,840 --> 00:36:10,730 PUBLIKUM: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS Reimers: Sharp, perfekt. 877 00:36:12,940 --> 00:36:14,950 Sharp, hasj, uansett we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON Buchholtz-AU: Mange ting å kalle det. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS Reimers: OK. 880 00:36:16,430 --> 00:36:19,800 Vi kommer til å bosette seg på hashtag, og det er det vi kommer til å gå med. 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: Så hashtag første. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON Buchholtz-AU: So du kan tweet den seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag kult. 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, ja. 888 00:36:30,730 --> 00:36:31,480 TOMAS Reimers: OK. 889 00:36:31,480 --> 00:36:33,660 Så vi har "første" og "andre". 890 00:36:33,660 --> 00:36:37,697 Så først, kommer vi til å ha en bakgrunnsfarge på rød. 891 00:36:37,697 --> 00:36:39,030 ALLISON Buchholtz-AU: Uh, tykktarm. 892 00:36:39,030 --> 00:36:40,281 TOMAS Reimers: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON Buchholtz-AU: Jeg skal være din spot-kontrolløren. 894 00:36:42,281 --> 00:36:43,960 TOMAS Reimers: Allison fikk meg. 895 00:36:43,960 --> 00:36:45,830 Background-color of 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: Ja. 899 00:36:48,830 --> 00:36:50,630 Lilla er min favoritt farge, og vi har ikke brukt den ennå. 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 Som fungerer. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS Reimers: Så vi er kommer til å ha to divs. 905 00:36:59,880 --> 00:37:01,654 De kommer til å være helt tom. 906 00:37:01,654 --> 00:37:03,070 Vi bør nok ha litt tekst. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Så "første" kommer til å være "HELLO". 909 00:37:09,815 --> 00:37:10,940 Og "andre" vil say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON Buchholtz-AU: Farvel. 911 00:37:11,110 --> 00:37:12,514 >> PUBLIKUM: - "verden." 912 00:37:12,514 --> 00:37:14,122 Hei, farvel. 913 00:37:14,122 --> 00:37:16,580 ALLISON Buchholtz-AU: jeg så dem på konsert den andre uken. 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: For Reals. 916 00:37:20,242 --> 00:37:21,200 De er ikke så stor. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Jeg liker det ikke. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS Reimers: Vi har "Hei" og "Farvel". 920 00:37:26,060 --> 00:37:29,102 Og igjen, er CSS bare kjempebra, fordi den anerkjenner våre farger. 921 00:37:29,102 --> 00:37:30,810 Trenger ikke å selv bekymre seg for at de eksisterer. 922 00:37:30,810 --> 00:37:33,194 De gjør. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON Buchholtz-AU: De eksisterer. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS Reimers: Så CSS tror jeg har 255 ord til å snakke om farge. 925 00:37:39,560 --> 00:37:42,986 Hvis du kan tenke på en farge utenfor de 255, som, vil jeg bli imponert. 926 00:37:42,986 --> 00:37:44,110 ALLISON Buchholtz-AU: Yeah. 927 00:37:44,110 --> 00:37:45,560 Jeg tror dere kan ha bare komme inn rett etter. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS Reimers: Så her, vil du se at vi har to bokser 929 00:37:47,727 --> 00:37:49,143 rett oppå hverandre, ikke sant? 930 00:37:49,143 --> 00:37:50,200 HELLO og farvel. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON Buchholtz-AU: Det er ingen plass i mellom. 932 00:37:51,460 --> 00:37:53,390 De er bare smooshed rett oppå hverandre. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS Reimers: Så det første Jeg tror vi bør snakke om 934 00:37:55,973 --> 00:38:02,960 er la oss say-- også ja. 935 00:38:02,960 --> 00:38:08,020 Så CSS representerer dem som slags bokser. 936 00:38:08,020 --> 00:38:10,100 Og som bokser, har de innhold. 937 00:38:10,100 --> 00:38:14,540 Og innholdet er akkurat nå liksom HELLO eller GOODBYE og det er det. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Så en av de første tingene du kan gjøre er at du kan legge til padding. 940 00:38:19,790 --> 00:38:25,610 Padding sier hvor mye plass det bør la på hver side. 941 00:38:25,610 --> 00:38:29,200 Så la oss si jeg ønsker å si 10 piksler på hver side. 942 00:38:29,200 --> 00:38:31,234 Og jeg vil dissekere det i et sekund. 943 00:38:31,234 --> 00:38:33,150 ALLISON Buchholtz-AU: Alle disse tingene her 944 00:38:33,150 --> 00:38:36,980 kommer til å være mest i piksler for resten av seminaret. 945 00:38:36,980 --> 00:38:40,980 Du kommer til å se at det har litt plass rundt det, ikke sant? 946 00:38:40,980 --> 00:38:46,360 Så hva du ikke ser her er det dette usynlig form for padding 947 00:38:46,360 --> 00:38:49,600 på hver side, som sier, som, OK, du har din boks med content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON Buchholtz-AU: Vil du å bare trekke opp inspisere element? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS Reimers: Ja, det er en god idé. 950 00:38:53,659 --> 00:38:56,700 ALLISON Buchholtz-AU: Finn også jeg at inspisere elementet er en god måte 951 00:38:56,700 --> 00:39:01,280 å finne ut om noe er å gå galt, noe uventet skjer, 952 00:39:01,280 --> 00:39:04,570 inspisere kodene og se hva det er som skrives er nyttig. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS Reimers: Så jeg er ikke sikker hvis dere kan se denne fargen. 954 00:39:05,940 --> 00:39:06,470 Kan du? 955 00:39:06,470 --> 00:39:10,120 Du vil se denne padding på den slags kant. 956 00:39:10,120 --> 00:39:13,410 Og så ser du den faktiske Innholdet i blått, ikke sant? 957 00:39:13,410 --> 00:39:16,820 Så det er veldig grunnleggende i boksen modell. 958 00:39:16,820 --> 00:39:17,674 Du har innhold. 959 00:39:17,674 --> 00:39:18,590 Da har du polstring. 960 00:39:18,590 --> 00:39:20,440 >> PUBLIKUM: Hvorfor ikke bare bruke boksen inne the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON Buchholtz-AU: Høyre. 962 00:39:21,606 --> 00:39:24,745 Fordi det er bare å velge elementet akkurat nå. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS Reimers: Yup. 964 00:39:26,050 --> 00:39:27,060 Andre ting. 965 00:39:27,060 --> 00:39:29,780 Så la oss snakke om det padding-kommandoen for et sekund. 966 00:39:29,780 --> 00:39:36,380 Så i CSS, målinger må ha en enhet. 967 00:39:36,380 --> 00:39:39,740 Så først må beløpet. 968 00:39:39,740 --> 00:39:41,460 Så i dette tilfellet, har vi sa 10. 969 00:39:41,460 --> 00:39:44,780 Og så den neste vi har sagt er piksler, px. 970 00:39:44,780 --> 00:39:49,160 Andre som du måtte ha er ting som centimeter, inches. 971 00:39:49,160 --> 00:39:51,367 Du kan gjøre ting liker, hva er 10 inches? 972 00:39:51,367 --> 00:39:52,700 Og det kommer til å bli latterlig. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON Buchholtz-AU: Oh, gutt. 974 00:39:52,990 --> 00:39:53,460 >> PUBLIKUM: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS og Allison: Yeah. 976 00:39:54,460 --> 00:39:57,840 TOMAS Reimers: Så det er all padding. 977 00:39:57,840 --> 00:39:59,255 Jeg kommer til å gå tilbake til piksler. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON Buchholtz-AU: Pixels en tendens til å være, som, standarden. 979 00:40:01,754 --> 00:40:04,589 Når du ser på en rekke nettsteder, de stort sett jobber i piksler. 980 00:40:04,589 --> 00:40:07,755 TOMAS Reimers: Så du kommer til å se enten pixels-- de andre som du ser 981 00:40:07,755 --> 00:40:13,952 er em, som er en em er lik høyden av skriften 982 00:40:13,952 --> 00:40:15,160 som du nå bruker. 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: Det er en god måte å si, liker, jeg vil ha så mye plass som min font 986 00:40:20,740 --> 00:40:21,514 er å ta. 987 00:40:21,514 --> 00:40:23,180 ALLISON Buchholtz-AU: Visste ikke det. 988 00:40:23,180 --> 00:40:25,747 Du lærer noe nytt hver dag. 989 00:40:25,747 --> 00:40:27,955 TOMAS Reimers: Det er en Mange målinger i CS. 990 00:40:27,955 --> 00:40:29,260 Jeg foreslår at du ser dem opp. 991 00:40:29,260 --> 00:40:32,122 For alle dine saker, tror jeg piksler bør være tilstrekkelig. 992 00:40:32,122 --> 00:40:33,830 Og de er også hva du kommer til å se 993 00:40:33,830 --> 00:40:36,520 i de fleste eksemplene gjøres online. 994 00:40:36,520 --> 00:40:38,320 Så vi lar det bli med piksler. 995 00:40:38,320 --> 00:40:42,420 >> Du kan også, bør jeg say-- så padding sett alle de polstringer. 996 00:40:42,420 --> 00:40:49,789 Du kan også gjøre noe sånt "Padding-top" å bare set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON Buchholtz-AU: Kanskje vi får vår "HALLO" tilbake. 998 00:40:52,080 --> 00:40:55,480 TOMAS Reimers: --to bare sette padding på toppen og ingenting annet. 999 00:40:55,480 --> 00:40:59,560 Så de fire kommandoer er padding-top, padding-bottom, padding-venstre, 1000 00:40:59,560 --> 00:41:00,310 og padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON Buchholtz-AU: Akkurat som du forventer for en boks. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS Reimers: Yeah. 1003 00:41:03,530 --> 00:41:05,240 Ingenting er for gale der. 1004 00:41:05,240 --> 00:41:08,230 Betyr det fornuftig? 1005 00:41:08,230 --> 00:41:11,990 Så det er padding. 1006 00:41:11,990 --> 00:41:14,110 Jeg kommer til å sette alle de polstringer tilbake til 10. 1007 00:41:14,110 --> 00:41:17,010 Og så kommer jeg til å gå videre til grensen. 1008 00:41:17,010 --> 00:41:21,130 >> Så hva grensen er er Grensen er en merkelig kommando. 1009 00:41:21,130 --> 00:41:24,450 Det tar liksom tre ting på en gang. 1010 00:41:24,450 --> 00:41:28,930 Så det første er hvor stor du vil den skal være som en måling. 1011 00:41:28,930 --> 00:41:30,662 Igjen, jeg bare bruker piksler. 1012 00:41:30,662 --> 00:41:32,620 Og det siste jeg bør legge til målinger 1013 00:41:32,620 --> 00:41:35,270 er det én ting som trenger ikke en enhet er 0. 1014 00:41:35,270 --> 00:41:37,390 Det er faktisk feil for å gi en 0-enhet, 1015 00:41:37,390 --> 00:41:41,940 fordi 0 er 0 tvers inches, piksler, centimeter, uansett. 1016 00:41:41,940 --> 00:41:43,960 Det hele betyr bare 0, ikke sant? 1017 00:41:43,960 --> 00:41:46,710 Så først du gi den målingen. 1018 00:41:46,710 --> 00:41:48,650 >> Så du gir den stilen. 1019 00:41:48,650 --> 00:41:49,869 Så jeg kommer til å si "solid". 1020 00:41:49,869 --> 00:41:51,410 Og vi skal snakke om hva det betyr. 1021 00:41:51,410 --> 00:41:54,290 Og så til slutt, du gir den en farge. 1022 00:41:54,290 --> 00:41:56,850 Så jeg kommer til å si "svart". 1023 00:41:56,850 --> 00:41:59,637 Og disse er alle tingene vi har nå sett før, med unntak av stil, 1024 00:41:59,637 --> 00:42:00,720 men vi skal snakke om det. 1025 00:42:00,720 --> 00:42:04,120 Så dere har sett målinger, og du har sett farger. 1026 00:42:04,120 --> 00:42:10,410 Og det som skjer er vi få dette fin svart ramme rundt det, ikke sant? 1027 00:42:10,410 --> 00:42:11,620 Dere se hvordan vi gjorde det? 1028 00:42:11,620 --> 00:42:12,760 >> PUBLIKUM: Yeah. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS Reimers: Cool. 1030 00:42:14,850 --> 00:42:17,370 Så hva er det? 1031 00:42:17,370 --> 00:42:19,160 Så først av alt, det er én piksel. 1032 00:42:19,160 --> 00:42:20,880 Det er selvinnlysende nok, ikke sant? 1033 00:42:20,880 --> 00:42:23,254 Liker, er det én piksel tykk. 1034 00:42:23,254 --> 00:42:26,170 Eller det ville være én piksel, men jeg er zoomet inn, så det er litt mer 1035 00:42:26,170 --> 00:42:26,490 enn. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON Buchholtz-AU: Og vi har dette latterlig oppløsning TV. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS Reimers: Yeah. 1038 00:42:29,460 --> 00:42:33,640 Du kan gjøre den større, mindre, uansett. 1039 00:42:33,640 --> 00:42:35,630 Så her er en to-pixel grensen. 1040 00:42:35,630 --> 00:42:38,810 Du vil se det er dobbelt så tykk. 1041 00:42:38,810 --> 00:42:40,172 Neste ting du har er farge. 1042 00:42:40,172 --> 00:42:41,130 Det er ikke interessant. 1043 00:42:41,130 --> 00:42:42,710 Jeg kommer ikke til å snakke om det, egentlig. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON Buchholtz-AU: Men stilen kan være litt interessant. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS Reimers: Yeah. 1046 00:42:45,980 --> 00:42:48,560 Slik stil, er det få som at jeg ser brukes ofte. 1047 00:42:48,560 --> 00:42:55,690 Første ens solide, neste ens prikkete, og den siste er stiplet. 1048 00:42:55,690 --> 00:42:59,290 Og her er stiplet. 1049 00:42:59,290 --> 00:43:02,980 Du vil se at de er en haug med prikker, ikke sant? 1050 00:43:02,980 --> 00:43:09,030 En god måte å liksom få en fin ramme går, streker er også ganske populært. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON Buchholtz-AU: Og da selvfølgelig, jeg er 1053 00:43:13,600 --> 00:43:16,660 sikker på at det er mange andre stiler som du kan få. 1054 00:43:16,660 --> 00:43:20,000 Og vi har et flott utvalg av koblingene på slutten for dere 1055 00:43:20,000 --> 00:43:23,470 å slags lese og se på mer kjølig CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS Reimers: Og så det siste, vi er 1057 00:43:25,954 --> 00:43:27,870 kommer til å snakke om det boks modeller virkelig rask. 1058 00:43:27,870 --> 00:43:30,070 Oh, og deretter grensen, akkurat som polstring, 1059 00:43:30,070 --> 00:43:33,270 du har også ting som border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, som lar deg å få på en bestemt grense. 1061 00:43:37,590 --> 00:43:40,650 Så her er bare grensen venstre-definert. 1062 00:43:40,650 --> 00:43:43,060 Betyr det fornuftig? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON Buchholtz-AU: Det er en kul måte å understreke ting eller legge til 1064 00:43:46,170 --> 00:43:47,545 linjer mellom ulike elementer. 1065 00:43:47,545 --> 00:43:48,670 TOMAS Reimers: Absolutt. 1066 00:43:48,670 --> 00:43:50,940 Så det er vår grense. 1067 00:43:50,940 --> 00:43:52,790 Og den siste ens margin. 1068 00:43:52,790 --> 00:43:55,892 Margin er som polstring bortsett fra at det ikke er within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON Buchholtz-AU: Det er ikke rundt element 1070 00:43:57,975 --> 00:44:00,840 men faktisk rundt hele boksen som vi har vært vitne til. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS Reimers: Yeah. 1072 00:44:02,770 --> 00:44:04,090 Allison sa det perfekt. 1073 00:44:04,090 --> 00:44:07,550 Det er ikke, som, inni element, er det rundt hele boksen. 1074 00:44:07,550 --> 00:44:10,900 Det betyr at ting som bakgrunn gjelder ikke for det. 1075 00:44:10,900 --> 00:44:13,550 Og det sier i utgangspunktet, liker, jeg ønsker ikke noe 1076 00:44:13,550 --> 00:44:15,230 i dette mye plass for meg. 1077 00:44:15,230 --> 00:44:17,470 Så som her har vi en margin på 10 piksler. 1078 00:44:17,470 --> 00:44:23,100 Så ingenting innen 10 piksler bør være ved siden av meg. 1079 00:44:23,100 --> 00:44:26,210 Det er litt av sin plass, men slags ikke. 1080 00:44:26,210 --> 00:44:29,215 Så det er veldig grunnleggende i boksen modell. 1081 00:44:29,215 --> 00:44:30,090 Betyr det fornuftig? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Cool, kult. 1084 00:44:34,550 --> 00:44:35,800 ALLISON Buchholtz-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Så nå tror jeg vi bare har våre kule ressurser 1086 00:44:37,890 --> 00:44:41,220 at vi tar dere gjennom svært raskt. 1087 00:44:41,220 --> 00:44:44,815 Og vi vil actually-- godt, har vi internett ennå? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS Reimers: La oss se om jeg kan åpne opp-- 1089 00:44:47,860 --> 00:44:50,040 la meg bare se om jeg kan få internett raskt 1090 00:44:50,040 --> 00:44:53,317 mens Allison snakker om noe Allison ønsker å snakke om. 1091 00:44:53,317 --> 00:44:55,150 ALLISON Buchholtz-AU: Så basically-- jeg ikke 1092 00:44:55,150 --> 00:44:57,930 vet ikke hva annet jeg kan si på dette punktet. 1093 00:44:57,930 --> 00:45:01,340 Men disse er noen virkelig gode ressurser. 1094 00:45:01,340 --> 00:45:04,629 Disse er de som Tomas og jeg har brukt 1095 00:45:04,629 --> 00:45:06,420 og at vi faktisk brukes til å prep for dette. 1096 00:45:06,420 --> 00:45:09,940 W3Schools er en som du Gutta skulle ha sett før. 1097 00:45:09,940 --> 00:45:12,440 Vi anbefaler det for en masse ting med CSS. 1098 00:45:12,440 --> 00:45:15,060 Jeg vet at jeg anbefaler det til min seksjon hele tiden. 1099 00:45:15,060 --> 00:45:21,050 >> En av de store tingene er at det lar deg slags rot med CSS 1100 00:45:21,050 --> 00:45:23,830 og se endringene momentant i dette, 1101 00:45:23,830 --> 00:45:25,920 som dobbeltvinduet vise at den har. 1102 00:45:25,920 --> 00:45:29,980 Så du trenger ikke å bekymre deg sette opp din egen nettside, 1103 00:45:29,980 --> 00:45:33,090 eller sette opp vhost i din lokale apparatet og lokale verten, 1104 00:45:33,090 --> 00:45:34,980 og få alle at ting fungerer. 1105 00:45:34,980 --> 00:45:36,830 Det er innebygd høyre på siden. 1106 00:45:36,830 --> 00:45:39,042 >> Og det har disse lite leksjoner som du kan 1107 00:45:39,042 --> 00:45:40,750 gå gjennom for å lære mer om velgere, 1108 00:45:40,750 --> 00:45:44,610 eller lære hvordan du manipulerer din font, eller en bakgrunn, eller et bilde. 1109 00:45:44,610 --> 00:45:46,990 Og du har disse øyeblikkelig resultater som du 1110 00:45:46,990 --> 00:45:49,310 trenger ikke å gjøre noe andre prep arbeid for. 1111 00:45:49,310 --> 00:45:51,060 Så jeg elsker W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Det er fabelaktig. 1113 00:45:51,960 --> 00:45:52,670 Er det å jobbe? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS Reimers: Yeah. 1115 00:45:52,950 --> 00:45:53,720 Nei, det er ikke det. 1116 00:45:53,720 --> 00:45:55,636 Ønsker du meg til å prøve og starte datamaskinen på nytt? 1117 00:45:55,636 --> 00:45:56,410 Eller vil vi ha to-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON Buchholtz-AU: Jeg mener, vel, vil dette også være online. 1119 00:46:01,490 --> 00:46:02,740 Alle lysbildene vil være online. 1120 00:46:02,740 --> 00:46:05,470 Så jeg bare anbefale gjør disse. 1121 00:46:05,470 --> 00:46:07,880 >> Dette er flott som bare som en jukselapp. 1122 00:46:07,880 --> 00:46:10,690 Det er bare alle de grunnleggende kommandoer som du har. 1123 00:46:10,690 --> 00:46:13,070 Det er flott når du er først starte opp ditt nettsted. 1124 00:46:13,070 --> 00:46:15,080 Fordi kanskje du ikke ønsker å komme inn i det hele tatt 1125 00:46:15,080 --> 00:46:17,355 den virkelige nitty sandete design tunge ting. 1126 00:46:17,355 --> 00:46:20,230 Du trenger bare å formatere den på en måte den slags er fornuftig og vilje 1127 00:46:20,230 --> 00:46:21,490 gjøre for tiden. 1128 00:46:21,490 --> 00:46:23,580 Og hvis du virkelig ønsker å komme inn i det, jeg vet 1129 00:46:23,580 --> 00:46:27,240 Dette er, som en av Tomas favoritt referanser. 1130 00:46:27,240 --> 00:46:30,130 Vi bruker den til prep, og det er fabelaktig. 1131 00:46:30,130 --> 00:46:33,030 Det er den Utvikler fra Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS Reimers: Så Mozilla er folk som gjør Firefox. 1133 00:46:36,490 --> 00:46:40,290 Og det er bare deres egen utvikleren referanse, som jeg tror er kjempebra. 1134 00:46:40,290 --> 00:46:44,870 Og det har en fantastisk liste over ressurser. 1135 00:46:44,870 --> 00:46:45,530 Så vi have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON Buchholtz-AU: Og så siste notatet er 1137 00:46:48,060 --> 00:46:50,120 når du prøver å designe din webside, 1138 00:46:50,120 --> 00:46:53,550 henter inspirasjon fra ting som du synes er pen. 1139 00:46:53,550 --> 00:46:56,340 Inspisere element, inspisere kildekoden 1140 00:46:56,340 --> 00:46:59,370 kan være super nyttig for å prøve å finne ut 1141 00:46:59,370 --> 00:47:02,080 hvordan å style ditt eget nettsted. 1142 00:47:02,080 --> 00:47:04,540 >> Ofte føler jeg meg som den beste måte, i tillegg til eksperimentering, 1143 00:47:04,540 --> 00:47:06,290 er bare å se på ting som er pen. 1144 00:47:06,290 --> 00:47:09,810 Jeg synes det er veldig vanskelig å bare slags designe ting på egen hånd, 1145 00:47:09,810 --> 00:47:11,090 spesielt i begynnelsen. 1146 00:47:11,090 --> 00:47:14,740 Så vennligst se på nettsteder at du liker å se på. 1147 00:47:14,740 --> 00:47:16,880 Finne ut hva som gjør dem appellerer til deg. 1148 00:47:16,880 --> 00:47:19,170 Og da gjerne prøve og gjenskape det. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS Reimers: Høyre. 1150 00:47:20,410 --> 00:47:23,120 Selv liker nettsteder som dette, kan du se 1151 00:47:23,120 --> 00:47:25,460 det er definitivt en div på toppen. 1152 00:47:25,460 --> 00:47:29,920 Og da har du en annen div innen her, som er CSS Awesomeness. 1153 00:47:29,920 --> 00:47:32,480 Og da har du en haug med lenker her. 1154 00:47:32,480 --> 00:47:34,770 Hvis du virkelig bare inspisere elementer, kan du sortere på 1155 00:47:34,770 --> 00:47:38,520 begynne å se hva gjør nettsteder se ut, og hvordan kan jeg 1156 00:47:38,520 --> 00:47:40,493 gjenskape at hvis jeg ville. 1157 00:47:40,493 --> 00:47:41,890 Betyr det fornuftig? 1158 00:47:41,890 --> 00:47:43,670 Så vi har bare tre minutter igjen. 1159 00:47:43,670 --> 00:47:46,380 Så spørsmål? 1160 00:47:46,380 --> 00:47:47,650 Noen av dem? 1161 00:47:47,650 --> 00:47:48,350 Ja. 1162 00:47:48,350 --> 00:47:50,780 >> PUBLIKUM: For fargen rektangel, hvordan ville du 1163 00:47:50,780 --> 00:47:53,499 have-- hvis du ikke ønsker det går over hele siden, kan 1164 00:47:53,499 --> 00:47:56,400 du har gjort det går over bare halve siden eller bare teksten? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS Reimers: Ja, absolutt. 1166 00:47:59,660 --> 00:48:02,780 Så la meg se faktisk. 1167 00:48:02,780 --> 00:48:04,670 Jeg har to ideer. 1168 00:48:04,670 --> 00:48:07,265 Så først av alt, du kan også bruke prosentene. 1169 00:48:07,265 --> 00:48:08,140 >> PUBLIKUM: Virkelig? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON Buchholtz-AU: Så noe å slå opp er relativ posisjonering. 1171 00:48:11,260 --> 00:48:13,385 Det er noe som vi har ikke tid til å komme inn, 1172 00:48:13,385 --> 00:48:16,392 men det er noe jeg definitivt anbefaler dere å sjekke ut. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS Reimers: So prosentene. 1174 00:48:17,580 --> 00:48:21,524 Og se hvordan vi gjorde det bare 50% av bredden? 1175 00:48:21,524 --> 00:48:24,190 ALLISON Buchholtz-AU: Hvis du faktisk vet antall piksler, 1176 00:48:24,190 --> 00:48:25,780 du kan være mer presis på den måten. 1177 00:48:25,780 --> 00:48:27,200 Du kan fikle rundt med den. 1178 00:48:27,200 --> 00:48:27,700 Men 50%. 1179 00:48:27,700 --> 00:48:31,970 Hvis vi skulle endre størrelsen på nettleseren vår, det ville gjøre det mindre. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS Reimers: Vel, det er utgangspunktet 50% akkurat nå, tror jeg. 1181 00:48:35,250 --> 00:48:38,820 Det er 50%, og deretter margen har blitt lagt til det. 1182 00:48:38,820 --> 00:48:40,100 CSS har mange quirks. 1183 00:48:40,100 --> 00:48:43,195 Så akkurat nå er dette 50% av sidebredden. 1184 00:48:43,195 --> 00:48:46,860 Men husk at du har 10 piksler tatt ut fra hver side. 1185 00:48:46,860 --> 00:48:49,700 Så hvis du skulle flytte den mot venstre kant av nettleseren, 1186 00:48:49,700 --> 00:48:51,550 så ville det se ut som 50%. 1187 00:48:51,550 --> 00:48:53,884 Igjen, som jeg sa, CSS kan være mye gjetning-og-sjekk. 1188 00:48:53,884 --> 00:48:56,049 Liker, tror du at noe er kommer til å oppføre en måte, 1189 00:48:56,049 --> 00:48:57,805 men det opptrer en helt annen måte. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON Buchholtz-AU: Og du bare få smartere, 1191 00:48:59,420 --> 00:49:02,020 og du bare få en bedre intuisjon for det når du flytter sammen. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS Reimers: Og det blir verre og verre. 1193 00:49:02,730 --> 00:49:03,496 Så det er egentlig bare et løp. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON Buchholtz-AU: Det er super oppmuntrende. 1195 00:49:05,454 --> 00:49:07,070 Vi vil ha dem til å like CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS Reimers: CSS er kjempebra. 1197 00:49:08,810 --> 00:49:10,354 Husk det. 1198 00:49:10,354 --> 00:49:11,020 Andre spørsmål? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON Buchholtz-AU: Den ene tingen. 1200 00:49:14,297 --> 00:49:14,880 Noe annet? 1201 00:49:14,880 --> 00:49:15,140 Cool. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS Reimers: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON Buchholtz-AU: Vel, hvis du dere har noen spørsmål senere, 1204 00:49:18,523 --> 00:49:20,919 vi er alltid tilgjengelig som per vanlig. 1205 00:49:20,919 --> 00:49:22,960 Du vil sannsynligvis se noen av oss for endelig prosjekter 1206 00:49:22,960 --> 00:49:24,280 og definitivt på hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS Reimers: Absolutt. 1208 00:49:25,200 --> 00:49:25,720 Og på messen. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON Buchholtz-AU: Og på messen. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS Reimers: Se frem til se alle dine awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON Buchholtz-AU: Vi får se alle dine fantastiske nettsteder 1213 00:49:29,420 --> 00:49:30,572 som vil være vakker. 1214 00:49:30,572 --> 00:49:32,780 TOMAS Reimers: Du kan alltid se, som, nettsteder 1215 00:49:32,780 --> 00:49:36,234 som hadde, som, god CSS og deretter som de som ikke prøver å gjøre CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON Buchholtz-AU: Også en annen ting, en ting til å se nærmere på 1217 00:49:39,150 --> 00:49:40,445 er bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 Så Bootstrap er stor. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS Reimers: Google at hvis you-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON Buchholtz-AU: Google det. 1221 00:49:43,573 --> 00:49:44,340 Det er fabelaktig. 1222 00:49:44,340 --> 00:49:45,620 Du vil elske det. 1223 00:49:45,620 --> 00:49:48,000 Og nå som du har en grunnleggende forståelse av CSS, 1224 00:49:48,000 --> 00:49:50,340 det vil gjøre mye mer fornuftig. 1225 00:49:50,340 --> 00:49:50,890 Awesome. 1226 00:49:50,890 --> 00:49:51,480 Takk, folkens. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS Reimers: Takk så mye. 1228 00:49:53,330 --> 00:49:54,219