1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [Muziek] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON Buchholtz-AU: So we zijn eigenlijk gewoon gaan 5 00:00:12,224 --> 00:00:14,629 om u een overzicht te geven van CSS, omdat we weten 6 00:00:14,629 --> 00:00:16,420 dat het niet werd gedekt in alle secties. 7 00:00:16,420 --> 00:00:20,090 En we willen ervoor zorgen dat u jongens hebben deze tool tot uw beschikking, 8 00:00:20,090 --> 00:00:24,790 omdat het het vermogen om uw websites zien er veel mooier. 9 00:00:24,790 --> 00:00:28,660 >> En als je het bouwen van een website, dan is wilt u waarschijnlijk om het vrij te maken. 10 00:00:28,660 --> 00:00:31,372 Ik bedoel, je hoeft niet te, maar ik zou het stel. [Lacht] 11 00:00:31,372 --> 00:00:35,430 Als u wilt dat gebruikers om het te gebruiken, zou je wil het een beetje [onverstaanbaar] te maken. 12 00:00:35,430 --> 00:00:39,130 Dus we gaan proberen en geven je gewoon een aantal basis gereedschappen en begrip, 13 00:00:39,130 --> 00:00:42,340 zodat wanneer je naar buiten en je bent het onderzoeken van dingen over CSS, 14 00:00:42,340 --> 00:00:45,902 het is niet compleet wartaal, zoals CSS soms zijn. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Ja. 16 00:00:47,240 --> 00:00:49,930 Allison zei dat het vrij goed. 17 00:00:49,930 --> 00:00:53,250 Dus ik denk dat het eerste wat we moet beginnen met is wat is CSS? 18 00:00:53,250 --> 00:00:55,750 Dus CSS is geweldig. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON Buchholtz-AU: Dat is de naam van onze seminar. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Ja. 22 00:00:58,434 --> 00:01:00,130 Het is echt belangrijk dat begrijp je dat tegen die tijd. 23 00:01:00,130 --> 00:01:03,090 Als u alleen weg te nemen één ding, het is dat CSS als geweldig. 24 00:01:03,090 --> 00:01:06,180 Twee is CSS staat voor Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Dus in de kern, CSS is een stylesheet, wat betekent 26 00:01:10,380 --> 00:01:13,200 het u toestaat om een ​​webpagina te stylen. 27 00:01:13,200 --> 00:01:16,609 En wat dat betekent, het is een manier om de stijl toe te voegen aan uw websites. 28 00:01:16,609 --> 00:01:18,900 Dus door stijl, bedoelen we alles dat is niet structural-- 29 00:01:18,900 --> 00:01:24,350 dus dingen zoals kleuren, achtergrond afbeeldingen, grenzen, als, padding, 30 00:01:24,350 --> 00:01:25,040 marges. 31 00:01:25,040 --> 00:01:27,310 We zullen praten over wat al dat betekent in een beetje. 32 00:01:27,310 --> 00:01:30,110 >> Dus we hebben net vooruit gegaan en opende deze beide in gedit. 33 00:01:30,110 --> 00:01:32,680 Dus dit is index.HTML. 34 00:01:32,680 --> 00:01:34,800 En dit is main.css. 35 00:01:34,800 --> 00:01:36,829 Dus main.css heeft niets. 36 00:01:36,829 --> 00:01:38,412 ALLISON Buchholtz-AU: Geen stijl zo ver. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Geen. 38 00:01:39,245 --> 00:01:42,577 En zoals u zult zien, het is een echt lelijk website. 39 00:01:42,577 --> 00:01:44,160 ALLISON Buchholtz-AU: Het is gewoon. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Ja. 41 00:01:45,820 --> 00:01:49,150 Ja, het is niet lelijk, het is gewoon een minimalistisch. 42 00:01:49,150 --> 00:01:53,430 En dan hebben we hier index.html. 43 00:01:53,430 --> 00:01:55,729 En dus voor een snelle recap van HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 je gewoon wilt praten over de pagina? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON Buchholtz-AU: Ja. 46 00:01:58,395 --> 00:02:01,100 Zo duidelijk, we hebben onze HTML tag, die net namen HTML-bestand. 47 00:02:01,100 --> 00:02:07,080 Wij hebben onze header hier, met CSS Awesomeness, which-- als je terug te gaan. 48 00:02:07,080 --> 00:02:07,720 Waar is dat? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Ja, dat kun je zien. 51 00:02:10,301 --> 00:02:12,092 ALLISON Buchholtz-AU: En let op de header 52 00:02:12,092 --> 00:02:14,120 is dit tabblad header hier naar boven. 53 00:02:14,120 --> 00:02:17,130 En dan "Hello, world!" is de tekst die we hebben net 54 00:02:17,130 --> 00:02:19,620 weergegeven op het web pagina, die is-- ga terug. 55 00:02:19,620 --> 00:02:21,290 Terug. 56 00:02:21,290 --> 00:02:24,287 Dat is gewoon in ons lichaam hier-- de platte tekst. 57 00:02:24,287 --> 00:02:26,120 Ook, een ding om opmerken, als je hier kijkt, 58 00:02:26,120 --> 00:02:29,410 Tomas geschakeld up van deze twee van onze glijbaan. 59 00:02:29,410 --> 00:02:32,035 Dus zolang je alle drie van deze, je bent prima. 60 00:02:32,035 --> 00:02:34,044 Ze kunnen worden in welke volgorde ze willen. 61 00:02:34,044 --> 00:02:39,368 Wat is het belangrijkste is gewoon dat heb je elk van die drie dingen. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Voeg een type doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON Buchholtz-AU: Ja. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Ja. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON Buchholtz-AU: Blijkbaar, mijn mics niet van me. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, geef ons een sec net terwijl Allison schakelt haar mic. 69 00:02:49,650 --> 00:02:50,500 Dus ja. 70 00:02:50,500 --> 00:02:52,030 Dus hebben we onze hoofdpagina. 71 00:02:52,030 --> 00:02:53,890 Het is een soort van unstyled. 72 00:02:53,890 --> 00:02:54,780 We hebben niet veel. 73 00:02:54,780 --> 00:02:57,110 We moeten gewoon eigenlijk tekst. 74 00:02:57,110 --> 00:02:59,470 Wij hebben de stylesheet. 75 00:02:59,470 --> 00:03:00,220 Wij hebben de titel. 76 00:03:00,220 --> 00:03:04,020 Dus gewoon blote-uitgebeend componenten maken van een website. 77 00:03:04,020 --> 00:03:08,880 >> Dus vanaf daar, laten we praten over wat CSS is 78 00:03:08,880 --> 00:03:11,270 en hoe het eruit ziet en dat alles. 79 00:03:11,270 --> 00:03:12,047 Dus voor dat-- 80 00:03:12,047 --> 00:03:13,755 ALLISON Buchholtz-AU: Terug naar de dia. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Terug naar de dia's. 82 00:03:15,200 --> 00:03:17,240 En Allison kan overnemen. 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 Dus in uw CSS-bestand, je gaat te hebben 86 00:03:22,360 --> 00:03:25,010 veel van deze dingen genoemd selectors. 87 00:03:25,010 --> 00:03:27,420 Dat zal gewoon de basis van uw CSS-bestand. 88 00:03:27,420 --> 00:03:29,480 Het is gewoon gaat worden veel en veel van deze. 89 00:03:29,480 --> 00:03:30,780 Dus selector. 90 00:03:30,780 --> 00:03:32,649 Dit is slechts de algemene anatomie. 91 00:03:32,649 --> 00:03:35,190 We gaan om te gaan door middel van voorbeelden, want als jullie nooit 92 00:03:35,190 --> 00:03:38,400 keek mijn deel, ik voel als dingen in de abstracte 93 00:03:38,400 --> 00:03:39,400 niet echt zinvol. 94 00:03:39,400 --> 00:03:41,110 Het helpt altijd om de voorbeelden te zien. 95 00:03:41,110 --> 00:03:42,420 >> Dus we hebben een aantal selector. 96 00:03:42,420 --> 00:03:49,120 Dat gaat om enkele naam voor zijn wat we willen de stijl wilt toepassen. 97 00:03:49,120 --> 00:03:52,220 En dan kunnen we elke hebben set van regels en waarden. 98 00:03:52,220 --> 00:03:55,680 Zodat selectors dat je zou kunnen zien misschien iets als lichaam, 99 00:03:55,680 --> 00:04:00,262 of paragraaf met P, of header, of wat dan ook, 100 00:04:00,262 --> 00:04:02,000 wat je ook wilt dat uw HTML-tags te zijn. 101 00:04:02,000 --> 00:04:03,570 >> Dus in dit geval, we hebben het lichaam. 102 00:04:03,570 --> 00:04:06,985 En we hebben een aantal regels, waarbij deze overeenkomt 103 00:04:06,985 --> 00:04:09,610 aan wat uw stijl van toepassing is. 104 00:04:09,610 --> 00:04:12,720 Dus in dit geval, hebben we achtergrondkleur en lettertype gewicht. 105 00:04:12,720 --> 00:04:16,200 Dus dit gaat veranderen de achtergrond iets 106 00:04:16,200 --> 00:04:19,640 binnen een body-tag van onze HTML-bestand. 107 00:04:19,640 --> 00:04:22,810 En het gaat om geven het op deze lichtblauwe waarde. 108 00:04:22,810 --> 00:04:24,820 >> Dus het gaat om het maken achtergrond lichtblauw. 109 00:04:24,820 --> 00:04:28,660 En dan is er iets in het lichaam is gaat om een ​​lettertype gewicht vet hebben. 110 00:04:28,660 --> 00:04:31,142 Dus het zal alleen maar bold al onze tekst. 111 00:04:31,142 --> 00:04:32,970 En dit is slechts één selector. 112 00:04:32,970 --> 00:04:34,680 Maar je zou kunnen hebben heel veel van deze. 113 00:04:34,680 --> 00:04:38,730 En als we gaan om te laten zien later, een beetje meer naar hoe 114 00:04:38,730 --> 00:04:40,709 die werken en meer voorbeelden daar. 115 00:04:40,709 --> 00:04:41,750 Alles wat je wilt toevoegen? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: No. 117 00:04:42,499 --> 00:04:43,500 Allison kreeg het. 118 00:04:43,500 --> 00:04:46,144 We gaan gewoon omhoog te snijden een Bijvoorbeeld hier op onze website bijvoorbeeld. 119 00:04:46,144 --> 00:04:47,310 Dus laten we eigenlijk dit te nemen. 120 00:04:47,310 --> 00:04:48,620 Het is perfect. 121 00:04:48,620 --> 00:04:54,460 Dus ik ga gewoon kopiëren en plakken dat recht in onze main.css bestand. 122 00:04:54,460 --> 00:04:56,530 En ik ga het redden. 123 00:04:56,530 --> 00:04:59,190 En dan zullen we het uit te voeren. 124 00:04:59,190 --> 00:05:01,600 Dus kanttekening, een van de meest frustrerende dingen 125 00:05:01,600 --> 00:05:04,490 is als je niet beschikt over een bestand op te slaan, en dan moet je, net als, herlaad de pagina, 126 00:05:04,490 --> 00:05:07,450 en als, waarom niet de verandering gebeurt? 127 00:05:07,450 --> 00:05:07,950 Het gebeurt. 128 00:05:07,950 --> 00:05:14,230 Dus hier zagen we dat we onze website een lichtblauwe achtergrond 129 00:05:14,230 --> 00:05:16,560 en wat vetgedrukte tekst. 130 00:05:16,560 --> 00:05:20,730 >> Ik moet ook vermelden, als je jongens vragen over iets hebben 131 00:05:20,730 --> 00:05:23,622 we doen, neem dan gerust vrij om ons te stoppen en ons vragen. 132 00:05:23,622 --> 00:05:25,330 We zijn helemaal bereid te vragen veld. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON Buchholtz-AU: Uiteraard, met CSS, alles bouwt voort op zichzelf. 135 00:05:31,930 --> 00:05:34,107 Dus als een ding niet zinvol nu, we 136 00:05:34,107 --> 00:05:35,690 wil niet dat je naar beneden later veen. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Dus laten we dit soort ontleden. 139 00:05:41,930 --> 00:05:44,210 Dus wilt u beginnen met de selector hier? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON Buchholtz-AU: Ja. 141 00:05:45,979 --> 00:05:48,270 Zoals ik al eerder zei, het lichaam is gewoon onze selector hier. 142 00:05:48,270 --> 00:05:50,950 Dus als we terug gaan naar onze index-- ah. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Wat ik net gesloten. 144 00:05:53,245 --> 00:05:54,530 Geef me een seconde. 145 00:05:54,530 --> 00:05:58,286 Dus 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 Dus als je hier ziet, we hebben deze body-tags, toch? 148 00:06:02,710 --> 00:06:06,270 Dus de selector stemt precies overeen met de tags die we over praten. 149 00:06:06,270 --> 00:06:07,670 Dus lichaam hier. 150 00:06:07,670 --> 00:06:10,315 Dus wat we zeggen is everything-- kunnen we teruggaan? 151 00:06:10,315 --> 00:06:12,065 Ik wou dat ik kon het gewoon zoals het scherm aanraken. 152 00:06:12,065 --> 00:06:14,410 Het zou zo veel koeler zijn. 153 00:06:14,410 --> 00:06:17,150 >> Dus alles binnen die body-tags, die we zagen 154 00:06:17,150 --> 00:06:19,637 was gewoon, net als de tekst, en het lichaam in het algemeen 155 00:06:19,637 --> 00:06:20,970 verwijst, zoals de achtergrond. 156 00:06:20,970 --> 00:06:22,720 Als je ooit wilt verander de achtergrond, 157 00:06:22,720 --> 00:06:25,090 dat gaat in een body-tag. 158 00:06:25,090 --> 00:06:27,120 Heeft net deze regels op hen van toepassing. 159 00:06:27,120 --> 00:06:32,040 >> Dus als we konden naar index.html en-- eigenlijk, 160 00:06:32,040 --> 00:06:33,840 kunnen we iets hebben buiten het lichaam? 161 00:06:33,840 --> 00:06:37,340 Als we hadden, net als, een voettekst of iets, zou het niet van toepassing op deze. 162 00:06:37,340 --> 00:06:40,900 Maar alles binnen deze body-tags gaat 163 00:06:40,900 --> 00:06:44,960 worden beïnvloed door dit lichaam selector die we hebben gemaakt. 164 00:06:44,960 --> 00:06:47,405 Dus als je om te typen iets anders er-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Laten we rijden dat huis. 166 00:06:49,400 --> 00:06:55,330 Dus als we een div-- dus dat is gewoon een tag die je kunt hebben. 167 00:06:55,330 --> 00:06:56,350 Ik ga om te sluiten. 168 00:06:56,350 --> 00:06:58,280 Of laten we dit een paragraaf. 169 00:06:58,280 --> 00:07:01,430 Dus p staat voor paragraaf. 170 00:07:01,430 --> 00:07:02,560 En binnen die paragraaf. 171 00:07:02,560 --> 00:07:05,650 En dan zeg ik: "Dit is de tekst." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 En toen maakte ik deze regel van toepassing op een paragraaf in plaats van het lichaam. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Je zult zien hoe het alleen geldt voor de nieuw gevormde paragraaf, rechts, 176 00:07:17,320 --> 00:07:18,892 niet de hele zaak. 177 00:07:18,892 --> 00:07:20,090 Heeft dat zin? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON Buchholtz-AU: Dus dit is allemaal lichaam, 179 00:07:21,840 --> 00:07:24,450 maar nu onze selector net overeenkomt met de paragraaf. 180 00:07:24,450 --> 00:07:27,050 Dus we moeten gewoon vet en blauw voor deze specifieke paragraaf, 181 00:07:27,050 --> 00:07:30,760 want dit is het enige wat dat wordt omsloten door de p-tag. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Is dat zinvol soort van hoe de dingen in te kapselen andere dingen? 183 00:07:35,349 --> 00:07:38,140 ALLISON Buchholtz-AU: Ook, net zeggen, als een van de beste manieren 184 00:07:38,140 --> 00:07:40,889 om echt comfortabel met CSS is om gewoon dingen te doen als dit, 185 00:07:40,889 --> 00:07:42,050 probeer het gewoon uit. 186 00:07:42,050 --> 00:07:46,700 Het is heel eenvoudig om iets te typen uit, raakte Refresh, en zie wat er gebeurt. 187 00:07:46,700 --> 00:07:48,940 En zoals met de meeste CS, experimenten kunnen vaak 188 00:07:48,940 --> 00:07:51,790 leiden tot een veel betere intuïtief begrip. 189 00:07:51,790 --> 00:07:54,432 Meer nog dan wij gewoon, als, met je te praten. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absoluut 100% eens over dat punt. 191 00:07:58,350 --> 00:08:02,430 Dus als we terug naar deze gaan, laten we beginnen ontleden precies wat deze twee doen. 192 00:08:02,430 --> 00:08:04,550 Dus we hebben twee regels op dit punt. 193 00:08:04,550 --> 00:08:07,420 Dus de eerste is de achtergrond kleur. 194 00:08:07,420 --> 00:08:10,590 En je ziet dat we het hebt ingesteld gelijk aan een waarde, lichtblauw. 195 00:08:10,590 --> 00:08:15,009 >> Dus in CSS, CSS is een soort van zeer los over hoe 196 00:08:15,009 --> 00:08:16,300 jij mag kleur te definiëren. 197 00:08:16,300 --> 00:08:17,800 Zodat u ze kunt definiëren op naam. 198 00:08:17,800 --> 00:08:20,650 U kunt ook iets doen als "rood." 199 00:08:20,650 --> 00:08:25,270 En dan, als we terug gaan naar deze, je zult zien dat de achtergrond is rood. 200 00:08:25,270 --> 00:08:29,040 U kunt ook really-- Ik denk dat je kan behoorlijk creatief met dit te krijgen, 201 00:08:29,040 --> 00:08:29,540 kan je niet? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON Buchholtz-AU: I denk dat je kan hex gebruiken. 203 00:08:31,170 --> 00:08:31,250 Kan je niet? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Ja. 205 00:08:32,083 --> 00:08:32,969 Dus je kunt gebruiken hex. 206 00:08:32,969 --> 00:08:34,490 Maar ik denk naam-wijs. 207 00:08:34,490 --> 00:08:35,385 Zijn er niet? 208 00:08:35,385 --> 00:08:37,260 ALLISON Buchholtz-AU: U kunt heel wat te doen. 209 00:08:37,260 --> 00:08:43,350 Vrij veel als de meeste kleuren die je kan name-- als, ik denk dat zalm is één. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: We gaan proberen zalm. 211 00:08:45,322 --> 00:08:47,530 ALLISON Buchholtz-AU: I denk Chartreuse is daar. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Ja. 213 00:08:48,050 --> 00:08:48,550 Zie? 214 00:08:48,550 --> 00:08:50,080 Dus je kan behoorlijk creatief. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON Buchholtz-AU: U kon behoorlijk creatief. 216 00:08:52,246 --> 00:08:55,750 Zoals, als je kunt denken aan de kleur naam, het is waarschijnlijk daar. 217 00:08:55,750 --> 00:08:57,840 Als je echt wilt fijne detail, kun je gaan hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Ja. 219 00:08:58,673 --> 00:08:59,390 Dus hexadecimaal. 220 00:08:59,390 --> 00:09:05,280 Als jullie niet vergeten deze terug van uw oude PSET, Image Recover, 221 00:09:05,280 --> 00:09:08,300 jullie te maken gehad deze hex waarden. 222 00:09:08,300 --> 00:09:15,280 En soort van samen te vatten wat dat is, hex drie waarden opgeslagen in het. 223 00:09:15,280 --> 00:09:17,250 Dus het is in groepen van twee stappen. 224 00:09:17,250 --> 00:09:19,300 De eerste twee geven de rode waarde. 225 00:09:19,300 --> 00:09:22,420 De tweede vertegenwoordigt de groene waarde. 226 00:09:22,420 --> 00:09:25,020 En de laatste is blauw? 227 00:09:25,020 --> 00:09:30,050 >> Dus FF gebeurt te vertegenwoordigen een hexadecimaal 255. 228 00:09:30,050 --> 00:09:35,480 Dus je hebt 255 rode, 255 groen, en 0 voor blauw. 229 00:09:35,480 --> 00:09:37,670 En waarden liggen tussen 0 en 255. 230 00:09:37,670 --> 00:09:38,350 >> Publiek: Recht. 231 00:09:38,350 --> 00:09:41,472 Dus in wezen, kunnen we zoeken internet voor elke kleur die we willen, 232 00:09:41,472 --> 00:09:43,912 en identificeren van de werkelijk bekende kleurenspectrum combo, 233 00:09:43,912 --> 00:09:45,130 en dan kunnen we het in te zetten? 234 00:09:45,130 --> 00:09:46,380 ALLISON Buchholtz-AU: Precies. 235 00:09:46,380 --> 00:09:52,900 Dus je moet vrij veel volledige controle over de kleuren die u wilt binnen CSS. 236 00:09:52,900 --> 00:09:55,069 Zijn we gaan praten over achtergrondafbeeldingen later? 237 00:09:55,069 --> 00:09:56,110 Of willen we dat doen? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Ja. 239 00:09:56,240 --> 00:09:57,010 Absoluut. 240 00:09:57,010 --> 00:10:00,830 Dus eerst, gewoon om te laten zien dat rood en groen is geel. 241 00:10:00,830 --> 00:10:03,120 En als je moet wat helpen bij het vinden van deze, u 242 00:10:03,120 --> 00:10:05,575 kan Google iets zoals "kleurenkiezer." 243 00:10:05,575 --> 00:10:07,200 ALLISON Buchholtz-AU: Oh, het is zo goed. 244 00:10:07,200 --> 00:10:09,090 Ik hou van Color Picker. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com is een goed voorbeeld. 246 00:10:11,360 --> 00:10:14,580 En hier, zul je zien dat je hebt een volledige Photoshop-achtige kleurenkiezer. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON Buchholtz-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Ook de leuke dingen zijn die u kan kleurenschema's te genereren 249 00:10:16,980 --> 00:10:18,896 zodat u niet hoeft, als, vloekende kleuren. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: En dan hier is de hexadecimale waarde hier. 251 00:10:22,780 --> 00:10:27,800 Dus je kunt altijd online te vinden in principe plaatsen om de hex-waarde uit te krijgen. 252 00:10:27,800 --> 00:10:31,667 Het is niet sorteren van dat net, zoals we zie de kleuren van de wereld in getallen. 253 00:10:31,667 --> 00:10:34,000 Het is meer dat we online gaan en vinden wat kleur die we willen, 254 00:10:34,000 --> 00:10:36,850 en neem vervolgens het nummer naar beneden. 255 00:10:36,850 --> 00:10:39,590 Want het is gewoon een heel eenvoudig manier om te verwijzen naar dingen in het CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON Buchholtz-AU: En dan is er nog also-- 257 00:10:40,350 --> 00:10:41,630 Ik vergeet de exacte naam van de site. 258 00:10:41,630 --> 00:10:43,838 Maar er is zeker, ik denken, iets van Adobe 259 00:10:43,838 --> 00:10:48,350 dat genereert kleurenschema's voor u, dat is echt cool, want je 260 00:10:48,350 --> 00:10:50,580 definitely-- is het soms moeilijk te achterhalen, 261 00:10:50,580 --> 00:10:53,729 oh, als ik wil deze kleur gebruiken, wat zou een andere nuttige één zijn 262 00:10:53,729 --> 00:10:56,395 elders op mijn site, als, maken het mooi en samenhangend. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison's praten over een door Adobe Kuler genaamd, denk ik. 265 00:11:04,260 --> 00:11:04,885 Het is K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON Buchholtz-AU: Ik denk het wel. 267 00:11:06,259 --> 00:11:07,610 Ik ben er vrij zeker van dat is het. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: Mijn favoriet heeft altijd geweest Color Scheme 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: Welke is now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON Buchholtz-AU: Ah, dat is mooi. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: En je kan in principe zeggen, als, 273 00:11:18,818 --> 00:11:21,700 Ik wil drie kleuren naast elkaar. 274 00:11:21,700 --> 00:11:25,030 En dan laten we iets leuks doen. 275 00:11:25,030 --> 00:11:29,210 En dan kun je een voorbeeld te krijgen van wat dat zou kunnen uitzien. 276 00:11:29,210 --> 00:11:32,470 En dan als je de muis boven een van hen, het geeft je de hexadecimale waarde. 277 00:11:32,470 --> 00:11:35,010 >> Dus net als een goede manier om te beginnen denken over kleurenschema's 278 00:11:35,010 --> 00:11:39,570 of welke kleuren in een website zou goed samen gaan. 279 00:11:39,570 --> 00:11:45,655 Omdat verrassend kan worden niet zo makkelijk op te pakken als je denkt. 280 00:11:45,655 --> 00:11:48,280 En dan de andere cool ding Ik heb altijd gevonden over deze site 281 00:11:48,280 --> 00:11:51,480 is als je Voorbeelden geraakt, het zal laten zien wat een voorbeeld website 282 00:11:51,480 --> 00:11:54,800 eruit zou kunnen zien met behulp van die kleurenschema. 283 00:11:54,800 --> 00:11:56,270 Hoe dan ook. 284 00:11:56,270 --> 00:11:57,863 >> Naar de eigenlijke CSS. 285 00:11:57,863 --> 00:12:01,112 ALLISON Buchholtz-AU: Maar natuurlijk, we weet deze referenties nuttig zou kunnen zijn. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: Nee, ze zeker nuttig kan zijn. 287 00:12:03,195 --> 00:12:04,720 Dus de tweede regel, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON Buchholtz-AU: Ja. 289 00:12:05,844 --> 00:12:08,280 De tweede regel is gewoon gevonden volgens onze lettertype. 290 00:12:08,280 --> 00:12:11,520 Dus lettertype gewicht is gewoon een soort van-- zodat het gewicht zou 291 00:12:11,520 --> 00:12:15,220 als je wil gewoon, zoals, normaal of, als, dunner lettertypen, 292 00:12:15,220 --> 00:12:17,251 of in dit geval, zoals, vet. 293 00:12:17,251 --> 00:12:17,750 Ik vergeet. 294 00:12:17,750 --> 00:12:21,557 Wat is het als je wilde het-- is er een dunnere één dan alleen, als, normaal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: ik doe niet echt weten of er een dunnere één. 296 00:12:24,140 --> 00:12:24,680 ALLISON Buchholtz-AU: ik vergeet. 297 00:12:24,680 --> 00:12:26,300 Dus tekengewicht we doorgaans alleen te gebruiken voor vet. 298 00:12:26,300 --> 00:12:29,010 Als je wilt echt in het, we gaan je laten zien. 299 00:12:29,010 --> 00:12:34,317 W3Schools heeft alle verschillende dingen die je voor lettertypen kunnen doen. 300 00:12:34,317 --> 00:12:36,900 Maar in principe, als je ooit wilt om iets te veranderen aan het lettertype, 301 00:12:36,900 --> 00:12:39,330 het is altijd gaat worden, als, font-iets. 302 00:12:39,330 --> 00:12:43,450 Dus het zal zijn als, font-family als je proberen om de werkelijke aard veranderen. 303 00:12:43,450 --> 00:12:47,390 Het zal font-style als je zijn het wilt maken zoals cursief, 304 00:12:47,390 --> 00:12:49,710 of cursief, of wat al niet. 305 00:12:49,710 --> 00:12:53,570 Of zelfs font-kleur, als wilden we verandering in brengen. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 Dus je kan dat veranderen. 308 00:12:56,925 --> 00:12:59,360 En soort van alleen maar om recap, zodat u kunt 309 00:12:59,360 --> 00:13:01,400 zien dat we de selector omhoog hier. 310 00:13:01,400 --> 00:13:03,000 We hebben deze accolades. 311 00:13:03,000 --> 00:13:06,735 En dan hebben we regels afgebakend door een puntkomma. 312 00:13:06,735 --> 00:13:08,100 Heeft dat zin? 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 Dus als dat is goed-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON Buchholtz-AU: Back. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Laten we praten specifiek over wat voor soort selectors die we hebben. 318 00:13:17,590 --> 00:13:19,790 Nu we hebben 'Cause soort van gewoon getoond labels. 319 00:13:19,790 --> 00:13:21,696 Maar jullie konden zien het plausibel. 320 00:13:21,696 --> 00:13:23,570 Stel dat je twee paragrafen op een pagina en je 321 00:13:23,570 --> 00:13:26,087 willen kunnen stijl één tot de ander, 322 00:13:26,087 --> 00:13:29,170 jullie willen niet alleen om jezelf te beperken moeten verschillende werkelijke HTML 323 00:13:29,170 --> 00:13:33,410 tags om ze verschillende stijlen geven. 324 00:13:33,410 --> 00:13:35,995 >> Dus we drie basis hebben soorten selectors. 325 00:13:35,995 --> 00:13:37,120 ALLISON Buchholtz-AU: Ja. 326 00:13:37,120 --> 00:13:39,828 Dus we hebben tag, dat is wat we hebben het over nu. 327 00:13:39,828 --> 00:13:42,430 Dus dat is net zoiets als uw lichaam of p. 328 00:13:42,430 --> 00:13:46,280 En dan hebben we klasse, die toen definiëren we het in onze CSS-bestand, 329 00:13:46,280 --> 00:13:49,907 het is altijd gaat worden dot, wat dan ook u wilt dat de naam van je klas te zijn. 330 00:13:49,907 --> 00:13:51,490 En dit kan toepassen op meerdere dingen. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Stel dat je vijf paragrafen en twee van de drie van hen 333 00:13:57,610 --> 00:14:00,580 moet hetzelfde worden vormgegeven, zou je een klasse van toepassing zijn. 334 00:14:00,580 --> 00:14:03,040 En dit is gewoon de manier waarop we het doen. 335 00:14:03,040 --> 00:14:05,600 We sturen u een voorbeeld van geven waar dit ook daadwerkelijk opduikt. 336 00:14:05,600 --> 00:14:11,030 Maar als je misschien had enkele tag p, nadat deze, zou je schrijft, 337 00:14:11,030 --> 00:14:14,170 klasse is gelijk aan wat klassen u wilt toepassen. 338 00:14:14,170 --> 00:14:19,280 Dus wat class selectors die we willen van toepassing op deze specifieke paragraaf, 339 00:14:19,280 --> 00:14:21,300 we konden gewoon schrijven als deze. 340 00:14:21,300 --> 00:14:24,080 Natuurlijk denk ik een voorbeeld zal het veel concreter te maken. 341 00:14:24,080 --> 00:14:27,270 >> De andere wij is id, die we aanduiden 342 00:14:27,270 --> 00:14:29,707 met een hekje, of pond, of 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 Dat werkt ook. 346 00:14:34,550 --> 00:14:36,640 En dit moet echt uniek. 347 00:14:36,640 --> 00:14:39,880 Ze moet alleen gelden voor één ding op uw pagina. 348 00:14:39,880 --> 00:14:43,820 Dus of dat is een specifieke paragraaf, of een item in een lijst, of wat dan ook, 349 00:14:43,820 --> 00:14:45,090 Dit moet uniek zijn. 350 00:14:45,090 --> 00:14:48,730 En op dezelfde manier dat we net zeggen, als, class = "class1 class2," 351 00:14:48,730 --> 00:14:51,577 dit kan gewoon id van wat we hebben. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Ja. 353 00:14:52,410 --> 00:14:54,330 Dus laten we zeker praten over voorbeelden hier. 354 00:14:54,330 --> 00:14:58,170 En ik ga gewoon om te duiken rechte rug in de code. 355 00:14:58,170 --> 00:15:02,090 Dus laten we eens kijken naar onze HTML. 356 00:15:02,090 --> 00:15:03,960 En dus hebben we nu hebben één paragraaf. 357 00:15:03,960 --> 00:15:05,510 Dit is tekst. 358 00:15:05,510 --> 00:15:09,151 Ik ga gewoon aan te passen het. "Dit is de tekst 1." 359 00:15:09,151 --> 00:15:11,150 En dan gaan we hebben een "Dit is de tekst 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON Buchholtz-AU: Tweede één. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 Dus hebben we nu hebben "Dit is tekst 2," right? 363 00:15:16,810 --> 00:15:21,560 En we gaan om te zien dat als we herladen de pagina, wat we gaan vinden 364 00:15:21,560 --> 00:15:23,067 is we gaan 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: Ja. 367 00:15:24,983 --> 00:15:27,570 We gaan op zoek naar een: "Dit is tekst 1, "en" Dit is de tekst 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON Buchholtz-AU: En out mooie gele kleur. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: En je zult zien dat onze selector op dit moment, 370 00:15:31,066 --> 00:15:34,940 die geldt voor p's, of paragrafen, heeft invloed op zowel van hen, 371 00:15:34,940 --> 00:15:38,700 omdat beiden aan de voorwaarde dat ze allebei een p-tag. 372 00:15:38,700 --> 00:15:40,360 Dat maakt in totaal gevoel. 373 00:15:40,360 --> 00:15:43,340 Dus de vraag is, nou ja, wat als we wilden alleen maar een? 374 00:15:43,340 --> 00:15:46,350 Dus precies zoals Allison zei, hebben we twee andere manieren om dat te doen. 375 00:15:46,350 --> 00:15:47,320 Ik ga om te beginnen met id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON Buchholtz-AU: Laten we beginnen met id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: En beide van deze attributen. 378 00:15:50,405 --> 00:15:53,200 Dus attributen bestaan ​​in HTML. 379 00:15:53,200 --> 00:15:55,600 En wat ze zijn is iets dat je toevoegen 380 00:15:55,600 --> 00:15:58,840 binnenin de tag die is scheiden van het naamplaatje. 381 00:15:58,840 --> 00:16:01,301 Dus je kunt meerdere attributen hebben. 382 00:16:01,301 --> 00:16:01,800 Yeah? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON Buchholtz-AU: Ik was net gaan te zeggen, uit je voorbeeld uit PSET 7, 384 00:16:03,950 --> 00:16:06,650 als iemand van jullie proberen te lijnen dingen naar het centrum, 385 00:16:06,650 --> 00:16:08,550 je zou hebben gebruikt "Text align = center." 386 00:16:08,550 --> 00:16:10,550 En je het waarschijnlijk al gemerkt moeten gecentreerd 387 00:16:10,550 --> 00:16:12,650 uw tekst of uw navigatiebalk. 388 00:16:12,650 --> 00:16:15,499 Dus dat is gewoon ook een attribuut dat je misschien wel bekend mee zijn. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Er is een bos van attributen die je zult zien. 390 00:16:18,040 --> 00:16:18,539 Yeah. 391 00:16:18,539 --> 00:16:21,250 Net als een goede verwijzing naar PSET 7. 392 00:16:21,250 --> 00:16:23,150 We hebben id. 393 00:16:23,150 --> 00:16:25,080 U kunt ook klasse, dit soort dingen. 394 00:16:25,080 --> 00:16:27,250 Een enkele tag kan vele attributen hebben. 395 00:16:27,250 --> 00:16:33,140 Dus beginnen met id, laten we doen alsof we willen een id van-- ik weet het niet hebben. 396 00:16:33,140 --> 00:16:35,140 We noemen het bijzonder, omdat deze, we zijn 397 00:16:35,140 --> 00:16:37,867 gaat om vet te maken, en onderstrepen, en wat dan ook. 398 00:16:37,867 --> 00:16:39,950 ALLISON Buchholtz-AU: Het is komt wel super special. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Dus dit één, we hebben id speciaal. 400 00:16:42,360 --> 00:16:48,140 Dus de manier te selecteren dat is dus in main.css, in plaats van een p-tag, 401 00:16:48,140 --> 00:16:51,500 je #special doen, OK? 402 00:16:51,500 --> 00:16:55,538 En dat selecteert de ding met id speciaal. 403 00:16:55,538 --> 00:16:57,295 Heeft dit zin om iedereen? 404 00:16:57,295 --> 00:16:57,920 Publiek: Ja. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Dus nu als we terug gaan, we zullen see-- whoops. 407 00:17:04,440 --> 00:17:06,240 Yeah. 408 00:17:06,240 --> 00:17:09,460 We zullen zien dat het alleen selecteert de ene met id speciaal. 409 00:17:09,460 --> 00:17:10,622 Yeah? 410 00:17:10,622 --> 00:17:11,900 Klinkt cool. 411 00:17:11,900 --> 00:17:12,570 Ja. 412 00:17:12,570 --> 00:17:15,456 >> Publiek: Kan iets hebben een attribuut van zowel klasse en een id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Ja. 414 00:17:16,359 --> 00:17:16,900 Publiek: OK. 415 00:17:16,900 --> 00:17:20,887 En wat gebeurt er dan als je dan geven het aantal regels in CSS dat conflict? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Absoluut. 417 00:17:21,970 --> 00:17:23,940 We zijn zeker gaan om te praten over dat. 418 00:17:23,940 --> 00:17:31,890 Dus precies wat je krijgt bij, dan kunt u ook lessen. 419 00:17:31,890 --> 00:17:36,380 Dus laten we doen alsof ik had drie alinea's en ik 420 00:17:36,380 --> 00:17:38,730 wilde stijl van de eerste twee, maar niet het derde. 421 00:17:38,730 --> 00:17:42,850 Nou, kan je eerste idee zijn, nou ja, ik kon gewoon geven de tweede een id. 422 00:17:42,850 --> 00:17:45,590 Maar je kan niet, want een id, precies zoals Allison zei, 423 00:17:45,590 --> 00:17:47,330 uniek zijn. 424 00:17:47,330 --> 00:17:50,860 >> Dus in plaats van een id, wat je kan gebruiken is dat je kunt een klasse te gebruiken. 425 00:17:50,860 --> 00:17:57,880 En een class-- wat het mogelijk maakt je moet doen is eigenlijk te zeggen, 426 00:17:57,880 --> 00:17:59,610 dit behoort als onderdeel van een groep. 427 00:17:59,610 --> 00:18:02,410 In dit geval, onze fractie heet Special. 428 00:18:02,410 --> 00:18:06,500 En wat gaan we dan doen is we gaan say-- plaats pond, 429 00:18:06,500 --> 00:18:08,070 we gaan dot gebruiken. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 En merk op dat het pond en de dot bestaan ​​alleen binnen het CSS-bestand, 432 00:18:11,950 --> 00:18:12,797 niet binnen het HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON Buchholtz-AU: Ja. 434 00:18:13,880 --> 00:18:15,185 Belangrijk onderscheid. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Ik heb had zoveel strijd, 436 00:18:17,510 --> 00:18:23,990 omdat ik de hash in de HTML en Vervolgens voelde gewoon dom voor een lange tijd. 437 00:18:23,990 --> 00:18:27,470 Zie hoe het allebei selecteert degenen met die klasse? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Nu kunnen dingen meerdere klassen hebben. 440 00:18:29,950 --> 00:18:32,790 Laten we zeggen dat ik wilde het eerst te maken twee hebben een achtergrond van geel 441 00:18:32,790 --> 00:18:36,770 en de tweede twee hebben een lettertype kleur van blauw. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Ik weet eigenlijk niet waarom ik zou dat willen doen, maar ik kan. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON Buchholtz-AU: Might niet aanbevolen het voor uw website. 445 00:18:42,401 --> 00:18:43,880 Maar voor onze doeleinden, zal het doen. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Het is niet een goede kleurenschema. 447 00:18:46,294 --> 00:18:49,210 ALLISON Buchholtz-AU: Nou, geel en blauw zijn mijn middelbare school kleuren. 448 00:18:49,210 --> 00:18:50,947 Ik weet het niet, hoor. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison's hoog school had een grote kleurenschema. 450 00:18:53,530 --> 00:18:54,520 [Lachen] 451 00:18:54,520 --> 00:18:59,120 Dus dan wat we kunnen noemen is dit Laten we noemen dit-- dus we hebben Special 452 00:18:59,120 --> 00:19:00,030 en we hebben Pretty. 453 00:19:00,030 --> 00:19:02,405 Ik stel voor, voor dit, je gebruikt veel meer beschrijvende namen. 454 00:19:02,405 --> 00:19:05,820 ALLISON Buchholtz-AU: Ja, zou ik Dit noemen, zoals, geel of blauw. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: We zijn niet echt het maken van een echte website, 456 00:19:08,314 --> 00:19:09,730 dat is waarom we dat niet doen. 457 00:19:09,730 --> 00:19:11,521 Maar als je echt had een echte website, u 458 00:19:11,521 --> 00:19:16,220 zou kunnen hebben, als, artikel header, inhoud van het artikel, eerste woord, 459 00:19:16,220 --> 00:19:21,920 dat soort dingen, die het mogelijk maken u veel meer beschrijvend zijn. 460 00:19:21,920 --> 00:19:23,550 Deze zijn echt net als variabelen. 461 00:19:23,550 --> 00:19:28,390 Zij moeten worden benoemd op een manier waar je kunt, like-- ja, als zodanig. 462 00:19:28,390 --> 00:19:29,470 Perfect. 463 00:19:29,470 --> 00:19:30,480 >> Dus achtergrondkleur. 464 00:19:30,480 --> 00:19:35,920 En dan gaan we dus de say-- manier om kleur te veranderen is gewoon "kleur." 465 00:19:35,920 --> 00:19:38,412 En we gaan het blauw te maken. 466 00:19:38,412 --> 00:19:40,150 Dat is cool. 467 00:19:40,150 --> 00:19:42,640 Dus nu hebben we de eerste twee hebben speciale. 468 00:19:42,640 --> 00:19:45,972 Volgende men gaat hebben "class = mooi." 469 00:19:45,972 --> 00:19:49,180 ALLISON Buchholtz-AU: En dan zul je willen 'mooie' toe te voegen aan de middelste. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 En dan het middelste, toe te voegen "vrij," wat er gebeurt 472 00:19:52,970 --> 00:19:56,880 is dat je gewoon een ruimte. 473 00:19:56,880 --> 00:19:59,800 Dus de class attribuut is een door spaties gescheiden lijst 474 00:19:59,800 --> 00:20:02,450 alle klassen die van toepassing zijn op die tag. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Het is niet zoals deze behoort tot een soort van speciale klasse met de naam 477 00:20:05,750 --> 00:20:07,180 "Bijzondere, ruimte, mooi." 478 00:20:07,180 --> 00:20:10,870 Het behoort tot twee classes-- speciaal en mooi. 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 >> En dan, als we kijken naar wat er gebeurt, we zijn 482 00:20:17,010 --> 00:20:21,850 gaan om te zien dat eerste heeft gele achtergrond, zwarte tekst. 483 00:20:21,850 --> 00:20:22,450 Tweede een-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON Buchholtz-AU: --has bold gele achtergrond met blauwe tekst. 485 00:20:26,160 --> 00:20:29,330 En onze laatste heeft alleen de blauwe tekst die we toegewezen. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Hoe selectors werken? 488 00:20:32,491 --> 00:20:32,990 Geweldig. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON Buchholtz-AU: Willen we praten over het conflict nu dan? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Dus ja. 491 00:20:35,780 --> 00:20:36,310 Absoluut. 492 00:20:36,310 --> 00:20:38,380 Dus wat gebeurt er als je een conflict hebben, toch? 493 00:20:38,380 --> 00:20:44,740 Laten we doen alsof de eerste zet iets like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON Buchholtz-AU: Misschien dit verandert de achtergrond? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Ja. 496 00:20:48,090 --> 00:20:51,699 Dus we gaan ervoor "vrij" veranderen de achtergrond in zalm. 497 00:20:51,699 --> 00:20:54,740 ALLISON Buchholtz-AU: Je bent gewoon met alle grote kleuren vandaag, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Ja. 499 00:20:55,573 --> 00:20:58,200 Omdat ik erachter kwam dat ik kan Gebruik zalm als een echte kleur. 500 00:20:58,200 --> 00:21:00,270 Dus we alleen maar om dat te doen. 501 00:21:00,270 --> 00:21:01,770 Ik denk ook Sunset is een echte kleur. 502 00:21:01,770 --> 00:21:03,103 Publiek: Sunset is een echte kleur? 503 00:21:03,103 --> 00:21:04,572 ALLISON Buchholtz-AU: Laten we proberen het. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Na deze demo alleen maar omdat in het geval het messes up, 505 00:21:07,735 --> 00:21:08,943 Ik wil niet te debuggen. 506 00:21:08,943 --> 00:21:11,580 Dus we weten zalm is een echte kleur. 507 00:21:11,580 --> 00:21:15,626 Dus elke gissingen op wat er gaat gebeuren? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON Buchholtz-AU: Enig idee? 509 00:21:17,522 --> 00:21:20,002 >> Publiek: [onverstaanbaar]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Ja. 511 00:21:20,920 --> 00:21:22,150 Dus je hebt het precies goed. 512 00:21:22,150 --> 00:21:24,930 Kortom, het neemt de laatste regel dat het werd gegeven. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON Buchholtz-AU: Dus dit is waar cascade in werking treedt. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Dus niet vergeten hoe we had dat cascading style sheets? 515 00:21:31,080 --> 00:21:33,660 Dus door dat we soort bedoelen dat we een heleboel regels 516 00:21:33,660 --> 00:21:37,115 die passen op elkaar en ze kunnen ook overschrijven elkaar. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON Buchholtz-AU: So wat bij de bodem 518 00:21:39,380 --> 00:21:41,540 zal overschrijven wat er ook aan de top. 519 00:21:41,540 --> 00:21:45,842 Je zou kunnen regels die volledig hebben ontkennen iets vooraf. 520 00:21:45,842 --> 00:21:48,300 Dat is ook de reden waarom je wilt zijn voorzichtig wanneer je styling, 521 00:21:48,300 --> 00:21:51,465 zodat je niet het maken van regels die je bent gewoon helemaal dwingende. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Of misschien heb je wil wel regels overschrijven. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON Buchholtz-AU: Of misschien je doet. 524 00:21:53,920 --> 00:21:54,300 Ja. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Doe alsof u een klasse die geldt voor de meeste dingen, 526 00:21:57,175 --> 00:22:01,220 maar laten we zeggen dat je wilt het veranderen achtergrondkleur op rood en het lettertype 527 00:22:01,220 --> 00:22:03,140 gewicht te vet voor de meeste dingen, maar één, 528 00:22:03,140 --> 00:22:06,098 u alleen de achtergrondkleur rood te zijn, maar je alle andere wilt 529 00:22:06,098 --> 00:22:09,990 eigenschappen, kan je iets doen zoals "font-weight = normaal," 530 00:22:09,990 --> 00:22:12,760 die zou dan ongedaan dat gedurfde verandering. 531 00:22:12,760 --> 00:22:14,480 Yeah? 532 00:22:14,480 --> 00:22:17,250 Nogmaals, de beste manier is, denk ik Allison zei het, is gewoon oefenen. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON Buchholtz-AU: Experimenteren. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Oefenen, oefenen, praktijk en experiment. 535 00:22:20,090 --> 00:22:22,950 Ik weet dat veel mensen die denken CSS is gewoon veel gok-en-check 536 00:22:22,950 --> 00:22:25,580 aan het eind van de dag, waar als je wilt something-- zoals te doen, 537 00:22:25,580 --> 00:22:27,663 heb je een ruw idee, maar je waarschijnlijk nog nodig 538 00:22:27,663 --> 00:22:31,390 om het uit te proberen om ervoor te zorgen je weet hoe het eruit ziet. 539 00:22:31,390 --> 00:22:34,482 >> Publiek: Als je solliciteert klassen, meer dan één 540 00:22:34,482 --> 00:22:37,339 om dezelfde paragraaf of sectie, doet het 541 00:22:37,339 --> 00:22:39,505 ongeacht in welke volgorde je kan typt u deze in de quotes? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: Nee, helemaal niet. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON Buchholtz-AU: Waar het om gaat is de bestelling binnen uw CSS style sheet. 544 00:22:45,764 --> 00:22:47,430 Publiek: Kunt u de vraag herhalen? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON Buchholtz-AU: Binnen klasse, als je het geven van lessen 547 00:22:53,990 --> 00:22:56,964 iets in de HTML, doet het uit welke volgorde ze in? 548 00:22:56,964 --> 00:22:58,130 Het maakt niet uit de bestelling. 549 00:22:58,130 --> 00:23:02,915 Waar het om gaat is de volgorde van de class selectors binnen uw CSS, 550 00:23:02,915 --> 00:23:04,306 binnen uw style sheet. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: Sound goed? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON Buchholtz-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: En dan we gaan verder to-- 554 00:23:11,539 --> 00:23:13,330 ALLISON Buchholtz-AU: Wat hebben we nu? 555 00:23:13,330 --> 00:23:14,245 Ik vergeet. 556 00:23:14,245 --> 00:23:16,087 Oh, we hebben slechts voorbeelden. 557 00:23:16,087 --> 00:23:17,295 Maar we hebben soort gedaan die. 558 00:23:17,295 --> 00:23:18,990 We hebben voorbeelden gedaan op de vlieg. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: We krijgen combineer al snel de selectors. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON Buchholtz-AU: Oh, we bij selectors te combineren. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Dus sommige voorbeelden is dat we hebben 562 00:23:25,260 --> 00:23:29,630 # Dog-- pond, of hashtag, of octothorpe, of wat dan ook 563 00:23:29,630 --> 00:23:32,050 u wilt bellen dat-- scherp. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON Buchholtz-AU: Sharp hond. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Dan heb je .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Iets heeft een id van de hond, er is maar een hond op de pagina. 568 00:23:41,600 --> 00:23:43,870 Iets heeft een id van kat, er is maar een kat. 569 00:23:43,870 --> 00:23:45,665 Er kunnen veel huisdieren op de pagina. 570 00:23:45,665 --> 00:23:47,570 Daarom gaven we die klassen. 571 00:23:47,570 --> 00:23:48,740 Heb je een voorbeeld van p. 572 00:23:48,740 --> 00:23:50,490 En dan dus een van de laatste voorbeeld, dat 573 00:23:50,490 --> 00:23:53,790 is iets wat we nog niet over gesproken, is wat er gebeurt als je ze combineert. 574 00:23:53,790 --> 00:23:54,580 Dus p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Dus voor die, laten we gaan terug naar de code en introduceren another-- ja. 577 00:24:02,950 --> 00:24:04,290 Dus hier terug. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON Buchholtz-AU: I het gevoel dat dit is really-- 579 00:24:04,850 --> 00:24:08,105 als gewoon kijken door voorbeelden is echt de manier om dit te leren. 580 00:24:08,105 --> 00:24:09,360 Dus dat is wat we doen. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Dus laten we doen alsof we alleen tekst wilt 2, rechts selecteren? 582 00:24:14,030 --> 00:24:16,530 Dus we kunnen zeker niet dat doen met een id. 583 00:24:16,530 --> 00:24:19,620 Nou, we kunnen dat met een te doen id, maar het hoeft niet een id. 584 00:24:19,620 --> 00:24:22,490 Ik kon toevoegen één, maar laten we doen alsof dat ik niet wil één toevoegen 585 00:24:22,490 --> 00:24:24,910 of het al iets anders. 586 00:24:24,910 --> 00:24:26,516 Dat kan ik niet mee doen. 587 00:24:26,516 --> 00:24:28,870 De tag is zeker niet uniek, toch? 588 00:24:28,870 --> 00:24:30,670 En geen van beide is de klasse. 589 00:24:30,670 --> 00:24:32,314 Maar je kunt deze dingen te combineren. 590 00:24:32,314 --> 00:24:35,230 Laten we zeggen dat we wilden iets doen die alleen geldt voor zaken die 591 00:24:35,230 --> 00:24:39,420 hebben de klasse speciaal en die hebben de klas mooi. 592 00:24:39,420 --> 00:24:48,150 >> Dus wat je kunt doen is in main.css, je kunt zeggen, laten we eerst deze verwijderen. 593 00:24:48,150 --> 00:24:50,240 U kunt deze combineren. 594 00:24:50,240 --> 00:24:51,430 Dus je kunt .Speciale doen. 595 00:24:51,430 --> 00:24:52,110 Geen ruimte. 596 00:24:52,110 --> 00:24:54,770 Gewoon .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Wat dat betekent is iets die zowel bijzonder en mooi. 598 00:25:00,550 --> 00:25:01,900 Heeft dat zin? 599 00:25:01,900 --> 00:25:04,190 En als we hier gaan, wat je gaat om te zien 600 00:25:04,190 --> 00:25:09,734 is deze regel geldt alleen voor de tweede, dat deze beide heeft. 601 00:25:09,734 --> 00:25:11,400 En je kan dat voor een heleboel dingen. 602 00:25:11,400 --> 00:25:13,270 U kunt say-- laten doen alsof ik wilde alleen 603 00:25:13,270 --> 00:25:18,300 om dingen die de klasse vrij te laten doen en die ook een paragraaf tag. 604 00:25:18,300 --> 00:25:19,920 Dus p.pretty. 605 00:25:19,920 --> 00:25:23,585 Laten we doen alsof dat ik had iets moois op de tag lichaam. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Ik kan deze draaien en ik kan zien dat het alleen 608 00:25:28,490 --> 00:25:32,720 gaat toepassen dingen die paragrafen met de klas mooi. 609 00:25:32,720 --> 00:25:35,650 En u kunt deze combineren, in principe, net zoveel als je wilt. 610 00:25:35,650 --> 00:25:38,580 Dus je kunt ze gewoon bij elkaar. 611 00:25:38,580 --> 00:25:39,604 Heeft dat zin? 612 00:25:39,604 --> 00:25:41,770 ALLISON Buchholtz-AU: So Dit soort is nuttiger 613 00:25:41,770 --> 00:25:45,490 toen, Tomas werd eerder zeggen, misschien je hebt een zeer ingewikkeld website, 614 00:25:45,490 --> 00:25:48,050 en je hebt al een hoop van deze regels geschreven, 615 00:25:48,050 --> 00:25:51,170 en je hoeft alleen maar te combineren twee van voor. 616 00:25:51,170 --> 00:25:55,350 Zoals in plaats van het schrijven van een geheel nieuwe selector en er veranderen, 617 00:25:55,350 --> 00:25:58,592 je kan het gewoon combineren hen waar het overlapt. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Of je misschien soms out-- 619 00:26:00,670 --> 00:26:04,290 er is een klasse die maakt lettertype kleuren zoals blauw, 620 00:26:04,290 --> 00:26:06,740 en er is een andere klasse die maakt de achtergrond blauw. 621 00:26:06,740 --> 00:26:07,840 En dat het gewoon niet zal werken. 622 00:26:07,840 --> 00:26:10,924 Zodat u een speciaal geval te schrijven, waar, like-- maar als het heeft beide, wat je bent 623 00:26:10,924 --> 00:26:13,548 ga doen is je gaat maken dit een deze schaduw van blauw 624 00:26:13,548 --> 00:26:15,310 en deze die andere tint blauw. 625 00:26:15,310 --> 00:26:15,580 Rechts? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON Buchholtz-AU: Goed voor die soorten uitzonderingen. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Dus om na te denken over problemen 628 00:26:21,220 --> 00:26:25,000 die kunnen ontstaan ​​als je ze combineert. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 Dus terug naar onze presentatie. 631 00:26:29,692 --> 00:26:31,400 ALLISON Buchholtz-AU: We zijn er bijna. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: En het gestopt verbinden. 633 00:26:34,022 --> 00:26:36,494 ALLISON Buchholtz-AU: Oh, nee. 634 00:26:36,494 --> 00:26:39,125 ALLISON Buchholtz-AU: CS bij het kantoor, internet naar beneden gaat. 635 00:26:39,125 --> 00:26:40,360 Oh, de ironie. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Dus gelukkig, we kunnen presenteren zonder internet, denk ik, 637 00:26:45,620 --> 00:26:47,380 want we hebben alle dia's hier. 638 00:26:47,380 --> 00:26:49,304 Dus laten we praten over de verhouding tags. 639 00:26:49,304 --> 00:26:50,470 ALLISON Buchholtz-AU: Right. 640 00:26:50,470 --> 00:26:52,660 Dus gewoon een soort van gaan off van wat Tomas zei: 641 00:26:52,660 --> 00:26:54,180 dit is gewoon een andere manier om het te doen. 642 00:26:54,180 --> 00:26:57,840 Dus we hebben een aantal ouders selector met een kind selector. 643 00:26:57,840 --> 00:27:02,815 Dus in dit voorbeeld hier, we hebben een aantal lichaam met een klasse navbar, klasse knop. 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: En principe, wat dit betekent 647 00:27:06,180 --> 00:27:11,070 wordt alles selecteren van de kinderen, zoals al dit soort selectoren 648 00:27:11,070 --> 00:27:13,040 binnen deze ouder selector. 649 00:27:13,040 --> 00:27:16,004 En dat zijn de enigen het ooit gaat toepassen. 650 00:27:16,004 --> 00:27:17,755 Ik weet niet of je hebben een betere manier van-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Dus ik denk dat de manier van denken 652 00:27:19,504 --> 00:27:22,440 over dit is onthouden voordat hoe we graag een soort van samen te stellen hen. 653 00:27:22,440 --> 00:27:26,340 En dan betekent dat één element die overeenkomt met elk van deze. 654 00:27:26,340 --> 00:27:29,530 Wat dit zegt is, ik wil dat je alles overeenkomen 655 00:27:29,530 --> 00:27:33,220 binnen some-- Ik wil u een selector te vinden. 656 00:27:33,220 --> 00:27:35,670 En vervolgens binnen dat, ik wil u om nieuwe dingen aan te passen. 657 00:27:35,670 --> 00:27:36,170 Rechts? 658 00:27:36,170 --> 00:27:40,900 Dus in CSS, het is allemaal over een soort van kunnen deze items passen. 659 00:27:40,900 --> 00:27:43,050 En je kunt proberen te evenaren items binnen andere items. 660 00:27:43,050 --> 00:27:46,510 >> Dus laten we eigenlijk doen een voorbeeld, en we denken dat zal verduidelijken. 661 00:27:46,510 --> 00:27:53,090 Dus laten we doen alsof we speciale, speciale vrij, wat dan ook. 662 00:27:53,090 --> 00:27:55,690 En dan hebben we een link, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Dus vergeet niet, een is een link. 665 00:28:02,370 --> 00:28:03,900 Het gaat niet om overal te gaan. 666 00:28:03,900 --> 00:28:11,500 En we gaan om het te geven de klasse koppeling, denk ik. 667 00:28:11,500 --> 00:28:13,335 Laten we het de class-- me een idee te geven. 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-- laten gaan zij de categorie vrij. 670 00:28:16,420 --> 00:28:16,930 Waarom niet? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON Buchholtz-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: Dus nu mooie dingen 673 00:28:23,040 --> 00:28:26,000 gaan naar de achtergrond te maken blauwe, achtergrond kleur van zalm. 674 00:28:26,000 --> 00:28:27,969 Dat is logisch. 675 00:28:27,969 --> 00:28:28,760 En als we dit-- doen 676 00:28:28,760 --> 00:28:29,620 >> ALLISON Buchholtz-AU: Wilt u tekst toevoegen 677 00:28:29,620 --> 00:28:31,078 dus de hyperlink eigenlijk opduikt? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Dat zou een goed gesprek te zijn. 679 00:28:35,088 --> 00:28:37,921 ALLISON Buchholtz-AU: 'Cause recht Nu zijn we gewoon gonna get niets. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Dus dit is een link. 681 00:28:39,690 --> 00:28:42,202 "Dit is een link." 682 00:28:42,202 --> 00:28:45,820 Oh, en dit gaat naar een andere link zijn. 683 00:28:45,820 --> 00:28:47,280 Laten we het de klasse "cool." 684 00:28:47,280 --> 00:28:50,295 Je hebt gelijk. 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 Dus nu gaan we dit te grijpen. 688 00:28:56,010 --> 00:28:57,269 We gaan één gooien. 689 00:28:57,269 --> 00:28:59,060 Wij hebben een in de speciale tag, en we hebben ook 690 00:28:59,060 --> 00:29:01,150 gaan naar een in de mooie tag hebben. 691 00:29:01,150 --> 00:29:05,449 En op dit moment wat we gaan doen is gaan we cool-- maken 692 00:29:05,449 --> 00:29:06,490 wat willen we er aan doen? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON Buchholtz-AU: Kunnen we het groter? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Laten we geven het een grens. 696 00:29:13,800 --> 00:29:14,840 ALLISON Buchholtz-AU: We konden grens. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Ja. 698 00:29:15,673 --> 00:29:18,560 Dus we gaan iets doen als, grens is-- en we zijn 699 00:29:18,560 --> 00:29:20,971 ga dit uit te leggen alles in een seconde. 700 00:29:20,971 --> 00:29:21,470 Voor nu-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON Buchholtz-AU: Om de doos model. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Maar voor nu, we zijn gewoon gaan om het een grens. 703 00:29:27,300 --> 00:29:29,580 Dus wat dat betekent is dat je gaat deze links te zien. 704 00:29:29,580 --> 00:29:32,788 En je gaat om te zien dat ze hebben deze, als, lelijke zwarte randen, die 705 00:29:32,788 --> 00:29:33,820 is cool. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON Buchholtz-AU: Onze website is zo mooi. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Ja. 708 00:29:35,333 --> 00:29:38,930 Onze website is geweldig. 709 00:29:38,930 --> 00:29:41,585 Dus deze twee links, en ze verschijnen. 710 00:29:41,585 --> 00:29:44,160 Laten we nu eens doen alsof ik wilde alleen maar om dit te doen 711 00:29:44,160 --> 00:29:50,072 als het niet binnen iets die had een achtergrond van zalm. 712 00:29:50,072 --> 00:29:52,280 Dus niet vergeten dat dit een een achtergrond van zalm, 713 00:29:52,280 --> 00:29:54,000 want het is van klasse vrij. 714 00:29:54,000 --> 00:29:59,777 >> Maar we willen zeggen dat alleen koelt die zijn in de klas speciale, niet in de klas 715 00:29:59,777 --> 00:30:02,890 mooi, moet die grens hebben. 716 00:30:02,890 --> 00:30:12,549 Nou, wat je kunt doen is je kan zeggen, .Speciale, ruimte, .cool. 717 00:30:12,549 --> 00:30:15,590 En wat dat doet, als je denkt over, is het is eigenlijk te zeggen, 718 00:30:15,590 --> 00:30:19,530 OK, vind ik alles die overeenkomt met speciale. 719 00:30:19,530 --> 00:30:24,104 Vervolgens binnen die labels, vinden me alles dat is cool. 720 00:30:24,104 --> 00:30:27,270 ALLISON Buchholtz-AU: Dus een andere manier die goed zijn om na te denken over dit zou kunnen zijn, 721 00:30:27,270 --> 00:30:29,810 waardoor het terug naar C, is net als het idee van de omvang. 722 00:30:29,810 --> 00:30:34,020 Dus als je wat selector, zoals die 723 00:30:34,020 --> 00:30:38,460 dat we hebben gewerkt voor voordat deze, je hele webpagina, al uw HTML 724 00:30:38,460 --> 00:30:40,180 is binnen uw bereik, toch? 725 00:30:40,180 --> 00:30:43,090 Maar als we deze ouder-kind relaties, 726 00:30:43,090 --> 00:30:47,130 het is alsof je versmalling waar u op zoek bent naar een bepaalde plaats, 727 00:30:47,130 --> 00:30:50,540 als, als, we zijn op zoek binnen een specifieke functie in plaats 728 00:30:50,540 --> 00:30:52,007 van onze gehele bestand. 729 00:30:52,007 --> 00:30:55,090 Publiek: Dus met dat in het achterhoofd, zou het uitgemaakt hebben als we hadden changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON Buchholtz-AU: De volgorde? 731 00:30:56,423 --> 00:30:59,320 Publiek: --de klasse in CSS naar .cool, ruimte, .Speciale? 732 00:30:59,320 --> 00:31:01,153 ALLISON Buchholtz-AU: Ja, want dan is dat 733 00:31:01,153 --> 00:31:04,420 zou zeggen, scope aan alles wat koel is, 734 00:31:04,420 --> 00:31:07,235 en dan kijken naar wat has-- Ik bedoel, zoals in dit geval, 735 00:31:07,235 --> 00:31:08,860 Ik denk niet dat het zou zijn veranderd. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Als we hadden wat gezegd? 737 00:31:10,318 --> 00:31:10,906 Sorry. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON Buchholtz-AU: Als we reikwijdte hem afkoelen en dan 739 00:31:12,660 --> 00:31:14,550 op zoek naar dingen uit speciale, zou hetzelfde zijn, eigenlijk. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Dus het zou niet. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON Buchholtz-AU: Het zou niet? 742 00:31:16,590 --> 00:31:17,590 Oh, oh goed. 743 00:31:17,590 --> 00:31:18,090 Ik verkeerd ben. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Dus de reden het is different-- gemeenschappelijke mistake-- 745 00:31:21,480 --> 00:31:27,140 is dat op dit moment alleen de link heeft koele, toch? 746 00:31:27,140 --> 00:31:32,176 Ik denk dat mijn vraag aan jullie is, wat op deze pagina wordt geëvenaard door .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Er zijn twee labels hier, toch? 749 00:31:38,340 --> 00:31:39,770 Dat deze en deze. 750 00:31:39,770 --> 00:31:40,590 Beide passen cool. 751 00:31:40,590 --> 00:31:42,200 Niets anders doet. 752 00:31:42,200 --> 00:31:46,460 Dus als je zei, .cool, ruimte, .Speciale, wat je gaat zeggen is, 753 00:31:46,460 --> 00:31:48,824 binnen deze tags, wat is speciaal? 754 00:31:48,824 --> 00:31:49,865 ALLISON Buchholtz-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Dat is wat het-- rechts. 756 00:31:51,800 --> 00:31:52,310 Want het is net als gewoon iets hier. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: kiest hij dus niets. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON Buchholtz-AU: Overwegende dat met speciaal, we zijn binnen deze tags hier. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Die en die. 760 00:31:57,971 --> 00:31:58,512 Publiek: OK. 761 00:31:58,512 --> 00:31:58,920 Dus die tags uit de slash? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Ja. 763 00:31:59,740 --> 00:32:01,150 Heeft dat zin? 764 00:32:01,150 --> 00:32:03,685 Hoe het is eigenlijk proberen om reikwijdte beperken. 765 00:32:03,685 --> 00:32:04,810 ALLISON Buchholtz-AU: Ja. 766 00:32:04,810 --> 00:32:06,870 Ik denk dat dat waarschijnlijk de makkelijkste manier om na te denken over het. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Dus vonden we deze, en vonden we dit zowel geëvenaard speciale. 768 00:32:09,270 --> 00:32:11,400 En dan vragen we, binnen deze jongens, wat is cool? 769 00:32:11,400 --> 00:32:12,941 En binnen deze, deze is cool. 770 00:32:12,941 --> 00:32:14,500 Binnen deze, niets is cool. 771 00:32:14,500 --> 00:32:16,250 Dus dit is het enige label dat blijft. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON Buchholtz-AU: Overwegende koele is slechts binnen deze een-tags daar. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Precies. 774 00:32:21,070 --> 00:32:22,403 En wat is er bijzonder binnen die? 775 00:32:22,403 --> 00:32:22,930 Niets. 776 00:32:22,930 --> 00:32:25,270 Nu, wat ik zal zeggen is als er geen ruimte, 777 00:32:25,270 --> 00:32:29,880 je vraagt ​​wat is cool en speciale-- of wat is mooi en bijzonder, toch? 778 00:32:29,880 --> 00:32:35,370 Als je zegt .special.pretty, dat is hetzelfde als .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Want wat het verwijderen van de ruimte is vragen wordt, wanneer je .Speciale zeggen, 780 00:32:39,220 --> 00:32:40,970 je vraagt, OK, welke speciaal zijn? 781 00:32:40,970 --> 00:32:43,780 En dan van die, welke degenen zijn ook vrij, 782 00:32:43,780 --> 00:32:47,010 die hetzelfde, grammaticaal, als vraag- wat is mooi, 783 00:32:47,010 --> 00:32:49,500 en dan van die, wat is ook bijzonder? 784 00:32:49,500 --> 00:32:50,000 Rechts? 785 00:32:50,000 --> 00:32:53,099 Het is het verschil van wat is binnen wat is. 786 00:32:53,099 --> 00:32:53,640 Publiek: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Ja. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Geweldig. 790 00:32:58,030 --> 00:33:00,426 Dus met dat in het achterhoofd then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON Buchholtz-AU: Ik denk dat onze laatste ding is (in fancy Brits accent) 792 00:33:01,800 --> 00:33:02,510 de doos model. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: De box-- [grinnikt] Ik hou van de manier Allison zegt dat. 794 00:33:05,992 --> 00:33:06,950 Zodat de doos model ding. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON Buchholtz-AU: Net hebben een doos, ik zal uw doos model. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Dus laten we praten over dat. 797 00:33:11,310 --> 00:33:14,070 Dus nu hebben we veel doorgebracht tijd aan het praten over selectors. 798 00:33:14,070 --> 00:33:16,944 Door nu, jullie zijn waarschijnlijk, net als, meesters van selectors-- weet je, 799 00:33:16,944 --> 00:33:21,510 hoe u de inhoud precies te selecteren dat u wilt manipuleren op uw scherm. 800 00:33:21,510 --> 00:33:24,740 >> Dus nu de vraag is, hoe precies kunt u het manipuleren? 801 00:33:24,740 --> 00:33:27,010 Dus ik denk dat de meest elementaire manier om na te denken over dat 802 00:33:27,010 --> 00:33:30,294 is, nou ja, wat precies is een element in CSS? 803 00:33:30,294 --> 00:33:32,585 We hebben veel tijd besteed over praten, wat is een tag, 804 00:33:32,585 --> 00:33:36,140 of wat is de meest fundamentele representatie van een tag? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Een goede manier om na te denken over dat wil zeggen, wat vorm is zalm? 807 00:33:45,170 --> 00:33:47,295 Welke vorm is, net als de zalm-gekleurde achtergrond? 808 00:33:47,295 --> 00:33:47,880 >> Publiek: Het is een rechthoek. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: Het is een rechthoek, toch? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON Buchholtz-AU: Was niet een strikvraag. 811 00:33:50,956 --> 00:33:51,870 [Lachen] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Niet proberen om u zo laat misleiden jongens. 813 00:33:54,670 --> 00:33:57,510 Dus we hebben deze rechthoek. 814 00:33:57,510 --> 00:33:59,140 En de tag is een p, toch? 815 00:33:59,140 --> 00:34:02,280 Dus dat geeft ons een goed overtuiging dat de paragraaf 816 00:34:02,280 --> 00:34:07,440 wordt weergegeven als een rechthoek, althans in de geest van de browser, die 817 00:34:07,440 --> 00:34:08,715 het is. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON Buchholtz-AU: Ik bedoel, browsers zijn meestal rechthoekig, 819 00:34:11,423 --> 00:34:13,440 dus het is logisch. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: Het idee is hier dat alle labels in CSS 821 00:34:18,750 --> 00:34:21,790 worden weergegeven als een rechthoek. 822 00:34:21,790 --> 00:34:25,699 En elke rechthoek heeft vier onderdelen volgens CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Je hebt de eigenlijke inhoud. 824 00:34:27,830 --> 00:34:29,644 Dat is waar de tekst ligt. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON Buchholtz-AU: Misschien uw foto. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Ja. 827 00:34:31,303 --> 00:34:33,860 Je hebt padding, dat is gewoon een soort van witte ruimte. 828 00:34:33,860 --> 00:34:35,085 Dan heb je een grens. 829 00:34:35,085 --> 00:34:37,710 En dan heb je marge, die is witte ruimte buiten dat. 830 00:34:37,710 --> 00:34:39,460 Dus dat heeft geen zin voor iedereen, dus we zijn 831 00:34:39,460 --> 00:34:42,500 gaan praten over die voor een tweede. 832 00:34:42,500 --> 00:34:47,570 Dus hier, wat we gaan doen is gaan we een aantal divs maken, OK? 833 00:34:47,570 --> 00:34:48,420 Excuseer me terwijl Ik-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON Buchholtz-AU: Ik voel me als we moeten een schattige foto in te zetten. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: We zeker zou moeten. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON Buchholtz-AU: Ik voel me net als iedereen 837 00:34:53,389 --> 00:34:54,870 zouden kunnen profiteren van een leuke foto, is alles. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Kunnen we allemaal profiteren van a-- 839 00:34:56,774 --> 00:34:57,648 >> Publiek: Ja, zeker. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, cool. 841 00:34:58,790 --> 00:35:02,254 Dus moeten we een schattig zetten foto in ergens. 842 00:35:02,254 --> 00:35:05,295 ALLISON Buchholtz-AU: Ik voel me als een schattige konijntje kan nuttig zijn op dit moment. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Tuurlijk. 844 00:35:06,190 --> 00:35:06,950 ALLISON Buchholtz-AU: Einde van de week. 845 00:35:06,950 --> 00:35:07,390 Hebben iets adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: Hoe periode een kitten? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON Buchholtz-AU: Een kitten werkt, ook. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, omdat er is een site voor die. 849 00:35:11,300 --> 00:35:12,300 Het heet PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON Buchholtz-AU: Dat is geweldig. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Ja. 852 00:35:15,510 --> 00:35:18,040 ALLISON Buchholtz-AU: Net voor, zoals, placeholder beelden in uw website. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Er is ook PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 En er is PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON Buchholtz-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Echt waar? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, we doen niet hebben toegang tot internet hier. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON Buchholtz-AU: [kreunt] 860 00:35:29,875 --> 00:35:30,375 Tragisch. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Anders Ik wil je laten zien kerels 862 00:35:32,333 --> 00:35:33,870 hoe om afbeeldingen in uw website te plaatsen. 863 00:35:33,870 --> 00:35:36,370 We gaan proberen om dit te krijgen werken voordat we moeten gaan. 864 00:35:36,370 --> 00:35:38,660 Maar voor nu, we zijn gewoon gaan in kleuren praten dan. 865 00:35:38,660 --> 00:35:39,820 Wij willen foto's van kittens-- zetten 866 00:35:39,820 --> 00:35:40,210 >> ALLISON Buchholtz-AU: We deden. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --de internet's naar beneden voor het moment zijn. 868 00:35:43,110 --> 00:35:47,820 Dus hebben we twee divs, en we zijn gaan ze twee ids te geven. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 We gaan noemen "Eerste" en "tweede." 871 00:35:56,760 --> 00:36:01,184 Dus id = "eerste." 872 00:36:01,184 --> 00:36:02,850 En we gaan ze twee kleuren te geven. 873 00:36:02,850 --> 00:36:08,424 Dus hoe kunnen we iets te kiezen met een id van de "eerste"? 874 00:36:08,424 --> 00:36:09,840 ALLISON Buchholtz-AU: Dot of hash? 875 00:36:09,840 --> 00:36:10,730 Publiek: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfect. 877 00:36:12,940 --> 00:36:14,950 Sharp, hash, wat we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON Buchholtz-AU: Veel dingen te noemen. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 We gaan om zich te vestigen op de hashtag, en dat is wat we gaan om te gaan met. 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: Dus hashtag eerste. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON Buchholtz-AU: So u kunt tweet de seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag cool. 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 Dus we hebben "eerste" en "tweede." 890 00:36:33,660 --> 00:36:37,697 Dus eerst, we gaan hebben een achtergrond kleur van rood. 891 00:36:37,697 --> 00:36:39,030 ALLISON Buchholtz-AU: Uh, dikke darm. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON Buchholtz-AU: Ik zal uw spot-checker zijn. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison's got me. 895 00:36:43,960 --> 00:36:45,830 Background-color van blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Paars! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Paars. 898 00:36:47,726 --> 00:36:48,830 ALLISON Buchholtz-AU: Ja. 899 00:36:48,830 --> 00:36:50,630 Paarse mijn favoriete kleur, en we hebben het nog niet gebruikt. 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 Dat werkt. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Dus we zijn zullen twee divs hebben. 905 00:36:59,880 --> 00:37:01,654 Ze gaan helemaal leeg te zijn. 906 00:37:01,654 --> 00:37:03,070 We moeten waarschijnlijk wat tekst. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Dus "eerste" gaat worden "HELLO". 909 00:37:09,815 --> 00:37:10,940 En de "tweede" zal say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON Buchholtz-AU: Goodbye. 911 00:37:11,110 --> 00:37:12,514 >> Publiek: - "WERELD." 912 00:37:12,514 --> 00:37:14,122 Hallo, tot ziens. 913 00:37:14,122 --> 00:37:16,580 ALLISON Buchholtz-AU: Ik zag hen in onderling overleg de andere week. 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: Voor reals. 916 00:37:20,242 --> 00:37:21,200 Ze zijn niet zo geweldig. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Ik hou er niet van. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Wij hebben "HELLO" en "tot ziens." 920 00:37:26,060 --> 00:37:29,102 En nogmaals, CSS is gewoon geweldig, omdat het erkent onze kleuren. 921 00:37:29,102 --> 00:37:30,810 Niet nodig om nog bang te zijn dat ze bestaan. 922 00:37:30,810 --> 00:37:33,194 Zij doen. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON Buchholtz-AU: Ze bestaan. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Dus CSS Ik denk dat heeft 255 woorden om te praten over de kleur. 925 00:37:39,560 --> 00:37:42,986 Als je maar kunt bedenken van een kleur buiten die 255, als, zal ik onder de indruk. 926 00:37:42,986 --> 00:37:44,110 ALLISON Buchholtz-AU: Ja. 927 00:37:44,110 --> 00:37:45,560 Ik denk dat jullie kunnen hebben kom gewoon in direct na. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Dus hier, je zult zien hebben we twee dozen 929 00:37:47,727 --> 00:37:49,143 recht op de top van elkaar, toch? 930 00:37:49,143 --> 00:37:50,200 Hallo en tot ziens. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON Buchholtz-AU: Er is geen ruimte tussen. 932 00:37:51,460 --> 00:37:53,390 Ze zijn gewoon smooshed bovenop elkaar. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Dus het eerste wat Ik denk dat we moeten praten over 934 00:37:55,973 --> 00:38:02,960 is laten we say-- ook ja. 935 00:38:02,960 --> 00:38:08,020 Dus CSS staat voor hen als een soort dozen. 936 00:38:08,020 --> 00:38:10,100 En zoals dozen, ze content. 937 00:38:10,100 --> 00:38:14,540 En de inhoud is op dit moment een soort van de HELLO of de GOODBYE en dat is het. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Dus een van de eerste dingen die je kan doen is dat je kunt padding toevoegen. 940 00:38:19,790 --> 00:38:25,610 Padding zegt hoeveel ruimte het verlaten aan elke kant. 941 00:38:25,610 --> 00:38:29,200 Dus laten we zeggen dat ik wil zeggen 10 pixels aan elke kant. 942 00:38:29,200 --> 00:38:31,234 En ik zal ontleden, dat in een tweede. 943 00:38:31,234 --> 00:38:33,150 ALLISON Buchholtz-AU: Al deze dingen hier 944 00:38:33,150 --> 00:38:36,980 gaan zijn meestal in pixels voor de rest van het seminar. 945 00:38:36,980 --> 00:38:40,980 Je zult zien dat het heeft wat ruimte er omheen, toch? 946 00:38:40,980 --> 00:38:46,360 Dus wat je hier niet te zien is dat er deze onzichtbare soort padding 947 00:38:46,360 --> 00:38:49,600 aan elke kant, die zegt, als, OK, je hebt je doos content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON Buchholtz-AU: Wilt u om gewoon trek de te inspecteren element? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Ja, dat is een goed idee. 950 00:38:53,659 --> 00:38:56,700 ALLISON Buchholtz-AU: Ook vind ik dat het inspecteren element is een goede manier 951 00:38:56,700 --> 00:39:01,280 om erachter te komen of er iets gaande verkeerde, iets onverwachts gebeurt, 952 00:39:01,280 --> 00:39:04,570 inspecteren van de tags en zien wat het is net als overschreven is behulpzaam. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Dus ik ben niet zeker als jullie deze kleur kunt zien. 954 00:39:05,940 --> 00:39:06,470 Kunt u? 955 00:39:06,470 --> 00:39:10,120 Je zult dit padding zien op het soort rand. 956 00:39:10,120 --> 00:39:13,410 En dan zie je de werkelijke gehalte in het blauw, toch? 957 00:39:13,410 --> 00:39:16,820 Dus dat is het zeer basisprincipes van het vak model. 958 00:39:16,820 --> 00:39:17,674 Je hebt content. 959 00:39:17,674 --> 00:39:18,590 Dan heb je padding. 960 00:39:18,590 --> 00:39:20,440 >> Publiek: Waarom heb je niet alleen Gebruik de doos in the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON Buchholtz-AU: Right. 962 00:39:21,606 --> 00:39:24,745 Want het is gewoon te selecteren het element nu. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Andere dingen. 965 00:39:27,060 --> 00:39:29,780 Dus laten we praten over dat padding opdracht voor een tweede. 966 00:39:29,780 --> 00:39:36,380 Dus in CSS, metingen zou een unit. 967 00:39:36,380 --> 00:39:39,740 Dus eerst moet je het bedrag. 968 00:39:39,740 --> 00:39:41,460 Dus in dit geval, hebben we gezegd 10. 969 00:39:41,460 --> 00:39:44,780 En dan de volgende we hebben gezegd is pixels, px. 970 00:39:44,780 --> 00:39:49,160 Andere die u zou kunnen hebben zijn dingen als centimeters, inches. 971 00:39:49,160 --> 00:39:51,367 Je kunt dingen doen, zoals, wat is 10 centimeter? 972 00:39:51,367 --> 00:39:52,700 En het gaat belachelijk. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON Buchholtz-AU: Oh, jongen. 974 00:39:52,990 --> 00:39:53,460 >> Publiek: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS en Allison: Ja. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Dus dat is alles padding. 977 00:39:57,840 --> 00:39:59,255 Ik ga terug naar pixels. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON Buchholtz-AU: Pixels neigen te zijn, zoals de standaard. 979 00:40:01,754 --> 00:40:04,589 Als je kijkt naar een heleboel websites, ze meestal werken in pixels. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Dus je gaat om te zien ofwel pixels-- de anderen je zien 981 00:40:07,755 --> 00:40:13,952 is em, dat is een em is gelijk aan de hoogte van het lettertype 982 00:40:13,952 --> 00:40:15,160 die u momenteel gebruikt. 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: Het is een goede manier om te zeggen, als, ik wil zo veel ruimte als mijn lettertype 986 00:40:20,740 --> 00:40:21,514 is het nemen. 987 00:40:21,514 --> 00:40:23,180 ALLISON Buchholtz-AU: Wist niet dat. 988 00:40:23,180 --> 00:40:25,747 Je leert elke dag iets nieuws. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Er zijn een Veel metingen in CS. 990 00:40:27,955 --> 00:40:29,260 Ik stel voor dat je ze opzoeken. 991 00:40:29,260 --> 00:40:32,122 Voor al uw gevallen, denk ik pixels moet voldoende zijn. 992 00:40:32,122 --> 00:40:33,830 En ze zijn ook wat je gaat om te zien 993 00:40:33,830 --> 00:40:36,520 In de meeste voorbeelden online gedaan. 994 00:40:36,520 --> 00:40:38,320 Dus zullen we het bij laten pixels. 995 00:40:38,320 --> 00:40:42,420 >> U kunt ook, ik moet dus say-- padding sets alle vullingen. 996 00:40:42,420 --> 00:40:49,789 U kunt ook iets doen als "Padding-top" om gewoon set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON Buchholtz-AU: Misschien we zullen onze "HELLO" terug te krijgen. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to stel gewoon de padding op de bovenkant en niets anders. 999 00:40:55,480 --> 00:40:59,560 Dus de vier opdrachten zijn padding-top, padding-bottom, padding-links, 1000 00:40:59,560 --> 00:41:00,310 en padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON Buchholtz-AU: Net als je zou verwachten van een doos. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Ja. 1003 00:41:03,530 --> 00:41:05,240 Daar niets te gek. 1004 00:41:05,240 --> 00:41:08,230 Heeft dat zin? 1005 00:41:08,230 --> 00:41:11,990 Dat is padding. 1006 00:41:11,990 --> 00:41:14,110 Ik ga helemaal klaar de paddings terug naar 10. 1007 00:41:14,110 --> 00:41:17,010 En dan ga ik om verder te gaan naar de grens. 1008 00:41:17,010 --> 00:41:21,130 >> Dus wat grens ligt is grens is een raar commando. 1009 00:41:21,130 --> 00:41:24,450 Het duurt een soort van drie dingen tegelijk. 1010 00:41:24,450 --> 00:41:28,930 Dus de eerste is hoe groot je wilt dat het is als een meting. 1011 00:41:28,930 --> 00:41:30,662 Nogmaals, ik ben alleen met behulp van pixels. 1012 00:41:30,662 --> 00:41:32,620 En het laatste wat ik moet toevoegen aan de metingen 1013 00:41:32,620 --> 00:41:35,270 is het enige dat niet een eenheid nodig is 0. 1014 00:41:35,270 --> 00:41:37,390 Het is eigenlijk onjuist geven 0 een eenheid, 1015 00:41:37,390 --> 00:41:41,940 want 0 0 is heel centimeter, pixels, centimeters, wat dan ook. 1016 00:41:41,940 --> 00:41:43,960 Het allemaal betekent gewoon 0, toch? 1017 00:41:43,960 --> 00:41:46,710 Dus eerst je het de meting. 1018 00:41:46,710 --> 00:41:48,650 >> Dan geef je de stijl. 1019 00:41:48,650 --> 00:41:49,869 Dus ik ga zeggen "vast." 1020 00:41:49,869 --> 00:41:51,410 En we praten over wat dat betekent. 1021 00:41:51,410 --> 00:41:54,290 En dan tot slot, het geeft je een kleur. 1022 00:41:54,290 --> 00:41:56,850 Dus ik ga zeggen "zwart." 1023 00:41:56,850 --> 00:41:59,637 En dit zijn allemaal dingen die we hebben nu eerder gezien, behalve voor stijl, 1024 00:41:59,637 --> 00:42:00,720 maar we praten over dat. 1025 00:42:00,720 --> 00:42:04,120 Dus jullie hebben metingen gezien, en je hebt gezien kleuren. 1026 00:42:04,120 --> 00:42:10,410 En wat er gebeurt is dat we dit te krijgen mooie zwarte rand er omheen, toch? 1027 00:42:10,410 --> 00:42:11,620 Jullie zien hoe we dat deden? 1028 00:42:11,620 --> 00:42:12,760 >> Publiek: Ja. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Dus wat is dat? 1031 00:42:17,370 --> 00:42:19,160 Dus in de eerste plaats, het is één pixel. 1032 00:42:19,160 --> 00:42:20,880 Dat is vanzelfsprekend genoeg, toch? 1033 00:42:20,880 --> 00:42:23,254 Zoals, het is één pixel dik. 1034 00:42:23,254 --> 00:42:26,170 Of het zou één pixel zijn, maar ik ben ingezoomd, dus het is een beetje meer 1035 00:42:26,170 --> 00:42:26,490 dan dat. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON Buchholtz-AU: En we hebben deze belachelijke resolutie TV. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Ja. 1038 00:42:29,460 --> 00:42:33,640 Je kunt het groter maken, kleiner, wat dan ook. 1039 00:42:33,640 --> 00:42:35,630 Dus hier is een twee-pixel grens. 1040 00:42:35,630 --> 00:42:38,810 Je zult zien dat het twee keer zo dik. 1041 00:42:38,810 --> 00:42:40,172 Volgende wat je hebt is de kleur. 1042 00:42:40,172 --> 00:42:41,130 Dat is niet interessant. 1043 00:42:41,130 --> 00:42:42,710 Ik ben niet van plan om te praten over dat, echt. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON Buchholtz-AU: Maar de stijl misschien net een beetje interessant. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Ja. 1046 00:42:45,980 --> 00:42:48,560 Dus stijl, zijn er weinig degenen dat ik vaak zie gebruikt. 1047 00:42:48,560 --> 00:42:55,690 Eerst een solide, naast iemands gestippelde, en de laatste is onderbroken. 1048 00:42:55,690 --> 00:42:59,290 En hier is bezaaid. 1049 00:42:59,290 --> 00:43:02,980 Je zult zien dat ze een bos van stippen, toch? 1050 00:43:02,980 --> 00:43:09,030 Een goede manier om een ​​soort krijgt een mooie border gaan, streepjes zijn ook vrij populair. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON Buchholtz-AU: En dan natuurlijk, ik ben 1053 00:43:13,600 --> 00:43:16,660 zeker dat er genoeg andere stijlen die je kunt krijgen. 1054 00:43:16,660 --> 00:43:20,000 En we hebben een geweldige set van links aan het einde voor jullie 1055 00:43:20,000 --> 00:43:23,470 naar soort inzage en kijk naar meer coole CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: En dan het laatste wat, we zijn 1057 00:43:25,954 --> 00:43:27,870 gaan praten over de doos modellen echt snel. 1058 00:43:27,870 --> 00:43:30,070 Oh, en dan de grens, precies zoals het opvullen, 1059 00:43:30,070 --> 00:43:33,270 heb je ook dingen als -border links, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, die u toelaten te krijgen op een bepaalde grens. 1061 00:43:37,590 --> 00:43:40,650 Dus hier is gewoon de grens links-gedefinieerd. 1062 00:43:40,650 --> 00:43:43,060 Is dat zinvol? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON Buchholtz-AU: Het is een coole manier om dingen te benadrukken of voeg 1064 00:43:46,170 --> 00:43:47,545 lijnen tussen de verschillende elementen. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Absoluut. 1066 00:43:48,670 --> 00:43:50,940 Dus dat is onze grens. 1067 00:43:50,940 --> 00:43:52,790 En de laatste iemands marge. 1068 00:43:52,790 --> 00:43:55,892 Zoals padding marge's behalve dat het niet within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON Buchholtz-AU: Het is niet rond uw element 1070 00:43:57,975 --> 00:44:00,840 maar eigenlijk rond de gehele doos die we al zien. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Ja. 1072 00:44:02,770 --> 00:44:04,090 Allison zei dat het perfect. 1073 00:44:04,090 --> 00:44:07,550 Het is niet, zoals, in uw element, is het rond de hele doos. 1074 00:44:07,550 --> 00:44:10,900 Dat betekent dat zaken als achtergrond niet van toepassing zijn. 1075 00:44:10,900 --> 00:44:13,550 En het eigenlijk zegt, als, ik wil niets 1076 00:44:13,550 --> 00:44:15,230 in deze veel ruimte voor mij. 1077 00:44:15,230 --> 00:44:17,470 Dus als hier hebben we een marge van 10 pixels. 1078 00:44:17,470 --> 00:44:23,100 Dus niets binnen 10 pixels naast me zou moeten zijn. 1079 00:44:23,100 --> 00:44:26,210 Dat is een soort van haar ruimte, maar een soort van niet. 1080 00:44:26,210 --> 00:44:29,215 Dus dat is het zeer basisprincipes van het vak model. 1081 00:44:29,215 --> 00:44:30,090 Heeft dat zin? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Cool, cool. 1084 00:44:34,550 --> 00:44:35,800 ALLISON Buchholtz-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Dus nu denk ik dat we gewoon hebben onze koele middelen 1086 00:44:37,890 --> 00:44:41,220 dat we jullie zullen nemen door zeer snel. 1087 00:44:41,220 --> 00:44:44,815 En we zullen goed actually--, hebben we nog internet? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS REIMERS: Let's kijken of ik kan openen up-- 1089 00:44:47,860 --> 00:44:50,040 laat me zien als ik kan internet snel 1090 00:44:50,040 --> 00:44:53,317 terwijl Allison praat over iets Allison wil praten. 1091 00:44:53,317 --> 00:44:55,150 ALLISON Buchholtz-AU: Dus basically-- ik niet 1092 00:44:55,150 --> 00:44:57,930 weet wat ik kan zeggen op dit moment. 1093 00:44:57,930 --> 00:45:01,340 Maar dit zijn enkele echt goede middelen. 1094 00:45:01,340 --> 00:45:04,629 Dit zijn degenen die Tomas en ik heb gebruikt 1095 00:45:04,629 --> 00:45:06,420 en dat we eigenlijk gebruikt prep voor. 1096 00:45:06,420 --> 00:45:09,940 W3Schools is er een die je jongens moeten eerder hebben gezien. 1097 00:45:09,940 --> 00:45:12,440 Wij raden het voor een heleboel dingen met CSS. 1098 00:45:12,440 --> 00:45:15,060 Ik weet dat ik beveel het aan mijn afdeling de hele tijd. 1099 00:45:15,060 --> 00:45:21,050 >> Een van de grote dingen is dat het kunt u soort knoeien met CSS 1100 00:45:21,050 --> 00:45:23,830 en zie de veranderingen direct in deze 1101 00:45:23,830 --> 00:45:25,920 als, dubbel-venster weer te geven die het heeft. 1102 00:45:25,920 --> 00:45:29,980 Dus je hoeft geen zorgen te maken over het opzetten van uw eigen webpagina, 1103 00:45:29,980 --> 00:45:33,090 of het opzetten van vhost in uw lokale toestel en lokale host, 1104 00:45:33,090 --> 00:45:34,980 en het krijgen van al die dingen werken. 1105 00:45:34,980 --> 00:45:36,830 Het is ingebed rechts op de pagina. 1106 00:45:36,830 --> 00:45:39,042 >> En het heeft deze kleine lessen die je kunt 1107 00:45:39,042 --> 00:45:40,750 gaan door om te leren meer over selectors, 1108 00:45:40,750 --> 00:45:44,610 of leren over het manipuleren van uw lettertype, of een achtergrond of een afbeelding. 1109 00:45:44,610 --> 00:45:46,990 En heb je deze onmiddellijke resultaten die je 1110 00:45:46,990 --> 00:45:49,310 hoeft niet aan een doen andere prep werk voor. 1111 00:45:49,310 --> 00:45:51,060 Dus ik hou W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Het is geweldig. 1113 00:45:51,960 --> 00:45:52,670 Werkt het? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Ja. 1115 00:45:52,950 --> 00:45:53,720 Nee, dat is het niet. 1116 00:45:53,720 --> 00:45:55,636 Wilt u mij om te proberen en mijn computer opnieuw opstarten? 1117 00:45:55,636 --> 00:45:56,410 Of willen we to-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON Buchholtz-AU: Ik bedoel, goed, dit zal ook online zijn. 1119 00:46:01,490 --> 00:46:02,740 Alle dia's zullen online zijn. 1120 00:46:02,740 --> 00:46:05,470 Dus ik beveel deze doen. 1121 00:46:05,470 --> 00:46:07,880 >> Dit is geweldig als gewoon als een spiekbriefje. 1122 00:46:07,880 --> 00:46:10,690 Het is gewoon alle basis commando's die je hebt. 1123 00:46:10,690 --> 00:46:13,070 Het is geweldig als je voor het eerst bent beginnen uw website. 1124 00:46:13,070 --> 00:46:15,080 Want misschien je dat niet doet willen krijgen in alle 1125 00:46:15,080 --> 00:46:17,355 de echte Nitty Gritty ontwerp-heavy stuff. 1126 00:46:17,355 --> 00:46:20,230 Je hoeft alleen maar te formatteren op een manier dat soort zinvol en wil 1127 00:46:20,230 --> 00:46:21,490 doen voor het moment. 1128 00:46:21,490 --> 00:46:23,580 En als je echt wilt om erin te komen, ik weet 1129 00:46:23,580 --> 00:46:27,240 Dit is, zoals een van Tomas 'favoriet gevonden. 1130 00:46:27,240 --> 00:46:30,130 We waren te gebruiken om prep, en het is geweldig. 1131 00:46:30,130 --> 00:46:33,030 Het is met de ontwikkelaar van Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: Dus Mozilla zijn de mensen die Firefox te maken. 1133 00:46:36,490 --> 00:46:40,290 En het is gewoon hun eigen ontwikkelaars referentie, dat vind ik geweldig. 1134 00:46:40,290 --> 00:46:44,870 En het heeft een prachtige lijst van middelen. 1135 00:46:44,870 --> 00:46:45,530 Dus we have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON Buchholtz-AU: En dan de laatste noot is 1137 00:46:48,060 --> 00:46:50,120 wanneer je probeert te het ontwerp van uw website, 1138 00:46:50,120 --> 00:46:53,550 laten zich inspireren door de dingen dat je denkt dat ze mooi. 1139 00:46:53,550 --> 00:46:56,340 Inspecteren van het element, inspecteren van de broncode 1140 00:46:56,340 --> 00:46:59,370 kan zijn super behulpzaam voor het proberen te achterhalen 1141 00:46:59,370 --> 00:47:02,080 hoe u uw eigen website te stylen. 1142 00:47:02,080 --> 00:47:04,540 >> Vaak voel ik me als de beste Zo naast experimenten, 1143 00:47:04,540 --> 00:47:06,290 is gewoon om naar te kijken dingen die mooi zijn. 1144 00:47:06,290 --> 00:47:09,810 Ik vind het echt moeilijk om gewoon soort ontwerpen dingen op je eigen, 1145 00:47:09,810 --> 00:47:11,090 vooral in het begin. 1146 00:47:11,090 --> 00:47:14,740 Dus kijk op websites dat u genieten van kijken naar. 1147 00:47:14,740 --> 00:47:16,880 Erachter te komen wat maakt ze een beroep op u. 1148 00:47:16,880 --> 00:47:19,170 En dan voel je vrij om proberen en repliceren dat. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Right. 1150 00:47:20,410 --> 00:47:23,120 Zelfs zoals websites als dit, kunt u zien 1151 00:47:23,120 --> 00:47:25,460 er is zeker een div op de top. 1152 00:47:25,460 --> 00:47:29,920 En dan heb je nog een div binnen hier, dat is CSS Awesomeness. 1153 00:47:29,920 --> 00:47:32,480 En dan heb je een heleboel links hier aanmelden. 1154 00:47:32,480 --> 00:47:34,770 Als je echt alleen maar te inspecteren elementen, kunt u sorteren van 1155 00:47:34,770 --> 00:47:38,520 beginnen om te zien wat te doen websites eruit, en hoe kan ik 1156 00:47:38,520 --> 00:47:40,493 opnieuw dat als ik wilde. 1157 00:47:40,493 --> 00:47:41,890 Heeft dat zin? 1158 00:47:41,890 --> 00:47:43,670 Dus we hebben maar drie minuten over. 1159 00:47:43,670 --> 00:47:46,380 Dus vragen? 1160 00:47:46,380 --> 00:47:47,650 Een van hen? 1161 00:47:47,650 --> 00:47:48,350 Ja. 1162 00:47:48,350 --> 00:47:50,780 >> Publiek: voor de kleur rechthoek, hoe zou je 1163 00:47:50,780 --> 00:47:53,499 have-- als je niet wilt dat het gaan over de hele pagina, kon 1164 00:47:53,499 --> 00:47:56,400 je hebt gemaakt naar de overkant alleen de helft van de pagina of alleen de tekst? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Ja, absoluut. 1166 00:47:59,660 --> 00:48:02,780 Dus laat me zien eigenlijk. 1167 00:48:02,780 --> 00:48:04,670 Ik heb twee ideeën. 1168 00:48:04,670 --> 00:48:07,265 Dus eerst en vooral, kan ook gebruik maken van procenten. 1169 00:48:07,265 --> 00:48:08,140 >> Publiek: Echt waar? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON Buchholtz-AU: Dus iets op te zoeken is relatieve positionering. 1171 00:48:11,260 --> 00:48:13,385 Het is iets dat we geen tijd om in hebben, 1172 00:48:13,385 --> 00:48:16,392 maar het is iets wat ik zeker raden jullie het uitchecken. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: Dus procenten. 1174 00:48:17,580 --> 00:48:21,524 En zie hoe we het slechts 50% van de breedte? 1175 00:48:21,524 --> 00:48:24,190 ALLISON Buchholtz-AU: Als u eigenlijk weten het aantal pixels, 1176 00:48:24,190 --> 00:48:25,780 kunt u preciezer op die manier. 1177 00:48:25,780 --> 00:48:27,200 U kunt knoeien met het. 1178 00:48:27,200 --> 00:48:27,700 Maar 50%. 1179 00:48:27,700 --> 00:48:31,970 Als we onze browser resize, het zou het kleiner maken. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Nou, het is in principe 50% op dit moment, denk ik. 1181 00:48:35,250 --> 00:48:38,820 Het is 50%, en vervolgens de marge toegevoegd dat. 1182 00:48:38,820 --> 00:48:40,100 CSS heeft veel eigenaardigheden. 1183 00:48:40,100 --> 00:48:43,195 Dus nu is dit 50% van de paginabreedte. 1184 00:48:43,195 --> 00:48:46,860 Maar vergeet niet dat je 10 pixels genomen off van elke kant. 1185 00:48:46,860 --> 00:48:49,700 Dus als je te verplaatsen, dat tegen de linkerkant van de browser, 1186 00:48:49,700 --> 00:48:51,550 dan zou het eruit zien als 50%. 1187 00:48:51,550 --> 00:48:53,884 Nogmaals, zoals ik al zei, CSS kan zijn veel gok-en-check. 1188 00:48:53,884 --> 00:48:56,049 Zoals, je denkt dat iets is gaat gedragen op een manier, 1189 00:48:56,049 --> 00:48:57,805 maar het gedraagt ​​zich een totaal andere manier. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON Buchholtz-AU: En krijg je alleen maar slimmer, 1191 00:48:59,420 --> 00:49:02,020 en krijg je alleen maar een betere intuïtie voor het als je beweegt langs. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: En het wordt erger en erger. 1193 00:49:02,730 --> 00:49:03,496 Dus het is eigenlijk gewoon een race. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON Buchholtz-AU: Dat is super bemoedigend. 1195 00:49:05,454 --> 00:49:07,070 We willen dat ze graag CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS is geweldig. 1197 00:49:08,810 --> 00:49:10,354 Vergeet niet dat. 1198 00:49:10,354 --> 00:49:11,020 Andere vragen? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON Buchholtz-AU: Het één ding. 1200 00:49:14,297 --> 00:49:14,880 Nog iets anders? 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: Nou, als je jongens vragen later, 1204 00:49:18,523 --> 00:49:20,919 we zijn altijd beschikbaar zoals gewoonlijk. 1205 00:49:20,919 --> 00:49:22,960 U zult waarschijnlijk een aantal te zien van ons voor afstudeeropdrachten 1206 00:49:22,960 --> 00:49:24,280 en zeker bij de hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Absoluut. 1208 00:49:25,200 --> 00:49:25,720 En op de beurs. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON Buchholtz-AU: En op de beurs. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Kijk uit naar het zien van al uw awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON Buchholtz-AU: We zullen zien al uw geweldige websites 1213 00:49:29,420 --> 00:49:30,572 dat mooi zal zijn. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: u kunt altijd te zien, net als de websites 1215 00:49:32,780 --> 00:49:36,234 die had, net als, goede CSS en dan als degenen die niet proberen om CSS te doen. 1216 00:49:36,234 --> 00:49:39,150 ALLISON Buchholtz-AU: Ook een ander ding, een ding om te kijken naar 1217 00:49:39,150 --> 00:49:40,445 is Bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 Dus Bootstrap is geweldig. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google dat als u-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON Buchholtz-AU: Google het. 1221 00:49:43,573 --> 00:49:44,340 Het is geweldig. 1222 00:49:44,340 --> 00:49:45,620 U zult het geweldig vinden. 1223 00:49:45,620 --> 00:49:48,000 En nu dat je een basiskennis van CSS, 1224 00:49:48,000 --> 00:49:50,340 het zal veel meer zin te maken. 1225 00:49:50,340 --> 00:49:50,890 Geweldig. 1226 00:49:50,890 --> 00:49:51,480 Bedankt, jongens. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Dank je wel. 1228 00:49:53,330 --> 00:49:54,219