1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [MUSIK SPELA] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON Buchholtz-AU: So vi i princip bara att gå 5 00:00:12,224 --> 00:00:14,629 för att ge dig en nedsliten av CSS, eftersom vi vet 6 00:00:14,629 --> 00:00:16,420 att det inte var täckt i alla avsnitt. 7 00:00:16,420 --> 00:00:20,090 Och vi vill verkligen se till att du killar har detta verktyg till ditt förfogande, 8 00:00:20,090 --> 00:00:24,790 eftersom den har förmågan att göra dina webbplatser ser mycket sötare. 9 00:00:24,790 --> 00:00:28,660 >> Och om du bygger en hemsida, sedan du förmodligen vill göra det ganska. 10 00:00:28,660 --> 00:00:31,372 Jag menar, du behöver inte till, men jag skulle föreslå det. [Skrattar] 11 00:00:31,372 --> 00:00:35,430 Om du vill att användarna ska använda den, kanske du vill göra det lite [OHÖRBAR]. 12 00:00:35,430 --> 00:00:39,130 Så vi kommer att försöka ge dig bara några grundläggande verktyg och förståelse, 13 00:00:39,130 --> 00:00:42,340 så att när du går ut och du är forska saker om CSS, 14 00:00:42,340 --> 00:00:45,902 det är inte komplett rotvälska, som CSS ibland vara. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Yeah. 16 00:00:47,240 --> 00:00:49,930 Allison sa det ganska bra. 17 00:00:49,930 --> 00:00:53,250 Så jag antar att det första vi bör börja med är det som är CSS? 18 00:00:53,250 --> 00:00:55,750 Så CSS är fantastisk. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON Buchholtz-AU: Det är namnet på vårt seminarium. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Yeah. 22 00:00:58,434 --> 00:01:00,130 Det är verkligen viktigt att du förstår att då. 23 00:01:00,130 --> 00:01:03,090 Om du bara tar bort en sak, det är att CSS om häftigt. 24 00:01:03,090 --> 00:01:06,180 Två är CSS står för Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Så i sin kärna, är CSS en stilmall, som betyder 26 00:01:10,380 --> 00:01:13,200 det tillåter dig att styla en webbsida. 27 00:01:13,200 --> 00:01:16,609 Och sedan vad det betyder, det är en sätt att lägga stil till dina webbplatser. 28 00:01:16,609 --> 00:01:18,900 Så genom stil, menar vi allt det är inte structural-- 29 00:01:18,900 --> 00:01:24,350 så saker som färger, bakgrund bilder, gränser, liksom, stoppning, 30 00:01:24,350 --> 00:01:25,040 marginaler. 31 00:01:25,040 --> 00:01:27,310 Vi ska tala om vad allt det innebär i en bit. 32 00:01:27,310 --> 00:01:30,110 >> Så vi har bara gått vidare och öppnade både av dem upp i gedit. 33 00:01:30,110 --> 00:01:32,680 Så det här är index.html. 34 00:01:32,680 --> 00:01:34,800 Och detta är main.css. 35 00:01:34,800 --> 00:01:36,829 Så main.css har ingenting. 36 00:01:36,829 --> 00:01:38,412 ALLISON Buchholtz-AU: Nej stil hittills. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Inga. 38 00:01:39,245 --> 00:01:42,577 Och som du ser, det är en riktigt ful sajt. 39 00:01:42,577 --> 00:01:44,160 ALLISON Buchholtz-AU: Det är bara vanlig. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Yeah. 41 00:01:45,820 --> 00:01:49,150 Ja, det är inte fult, det är bara minimalistiska. 42 00:01:49,150 --> 00:01:53,430 Och så här har vi index.html. 43 00:01:53,430 --> 00:01:55,729 Och så för en snabb resumé av HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 du vill bara prata om sidan? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON Buchholtz-AU: Yeah. 46 00:01:58,395 --> 00:02:01,100 Så uppenbarligen har vi vår HTML tagg, som just namn HTML-fil. 47 00:02:01,100 --> 00:02:07,080 Vi har vår header här, med CSS Awesomeness, which-- om du går tillbaka. 48 00:02:07,080 --> 00:02:07,720 Var är det? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Ja, du kan se. 51 00:02:10,301 --> 00:02:12,092 ALLISON Buchholtz-AU: Och märker sidhuvudet 52 00:02:12,092 --> 00:02:14,120 är denna flik header rätt upp här. 53 00:02:14,120 --> 00:02:17,130 Och sedan "Hej världen!" är den text som vi har bara 54 00:02:17,130 --> 00:02:19,620 visning på webben sida, som är-- gå tillbaka. 55 00:02:19,620 --> 00:02:21,290 Tillbaka. 56 00:02:21,290 --> 00:02:24,287 Vilket är precis i vår kropp här-- oformaterad text. 57 00:02:24,287 --> 00:02:26,120 Också en sak att märker, om man tittar här, 58 00:02:26,120 --> 00:02:29,410 Tomas kopplas upp dessa två från vårt bildspel. 59 00:02:29,410 --> 00:02:32,035 Så länge du har alla tre av dessa, du är bra. 60 00:02:32,035 --> 00:02:34,044 De kan vara i vilken ordning som helst. 61 00:02:34,044 --> 00:02:39,368 Vad är viktigast är just det du har vart och ett av dessa tre saker. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Lägg ett doc typ? 64 00:02:41,111 --> 00:02:42,235 ALLISON Buchholtz-AU: Yeah. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Yeah. 66 00:02:43,068 --> 00:02:43,769 Cool. 67 00:02:43,769 --> 00:02:46,102 ALLISON Buchholtz-AU: Tydligen mina mikrofoner inte gillar mig. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Åh, ge oss en sekund bara medan Allison växlar ut hennes mikrofon. 69 00:02:49,650 --> 00:02:50,500 Så ja. 70 00:02:50,500 --> 00:02:52,030 Så vi har vår huvudsida. 71 00:02:52,030 --> 00:02:53,890 Det finns en slags unstyled. 72 00:02:53,890 --> 00:02:54,780 Vi har inte mycket. 73 00:02:54,780 --> 00:02:57,110 Vi har bara i princip text. 74 00:02:57,110 --> 00:02:59,470 Vi har formatmallen. 75 00:02:59,470 --> 00:03:00,220 Vi har titeln. 76 00:03:00,220 --> 00:03:04,020 Så bara bare-benfri komponenter göra en hemsida. 77 00:03:04,020 --> 00:03:08,880 >> Så från det, låt oss tala om vad CSS är 78 00:03:08,880 --> 00:03:11,270 och hur det ser ut och allt detta. 79 00:03:11,270 --> 00:03:12,047 Så för that-- 80 00:03:12,047 --> 00:03:13,755 ALLISON Buchholtz-AU: Tillbaka till bilderna. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Tillbaka till bilderna. 82 00:03:15,200 --> 00:03:17,240 Och Allison kan ta över. 83 00:03:17,240 --> 00:03:18,720 >> ALLISON Buchholtz-AU: Woo. 84 00:03:18,720 --> 00:03:19,220 OK. 85 00:03:19,220 --> 00:03:22,360 Så i ditt CSS-fil, du kommer att ha 86 00:03:22,360 --> 00:03:25,010 en hel del av dessa saker som kallas väljare. 87 00:03:25,010 --> 00:03:27,420 Det kommer bara att vara grundval av din CSS-fil. 88 00:03:27,420 --> 00:03:29,480 Det kommer bara att bli massor av dessa. 89 00:03:29,480 --> 00:03:30,780 Så väljaren. 90 00:03:30,780 --> 00:03:32,649 Detta är bara den allmänna anatomin. 91 00:03:32,649 --> 00:03:35,190 Vi kommer att gå igenom exempel, för om ni aldrig 92 00:03:35,190 --> 00:03:38,400 såg min avdelning, jag känner mig liknande saker i det abstrakta 93 00:03:38,400 --> 00:03:39,400 inte riktigt vettigt. 94 00:03:39,400 --> 00:03:41,110 Det hjälper alltid att se exemplen. 95 00:03:41,110 --> 00:03:42,420 >> Så vi har en del väljare. 96 00:03:42,420 --> 00:03:49,120 Det kommer att bli lite identifierare för vad vi vill att stilen att gälla. 97 00:03:49,120 --> 00:03:52,220 Och då kan vi ha någon uppsättning regler och värderingar. 98 00:03:52,220 --> 00:03:55,680 Så väljare som du kan se kan vara något i stil med kroppen, 99 00:03:55,680 --> 00:04:00,262 eller punkt med P, eller header, eller vad som helst, 100 00:04:00,262 --> 00:04:02,000 vad du vill att dina HTML-taggar för att vara. 101 00:04:02,000 --> 00:04:03,570 >> Så i det här fallet har vi kropp. 102 00:04:03,570 --> 00:04:06,985 Och vi har några regeln, vilket motsvarar detta 103 00:04:06,985 --> 00:04:09,610 vad din stil gäller. 104 00:04:09,610 --> 00:04:12,720 Så i det här fallet har vi bakgrundsfärg och typsnitt vikt. 105 00:04:12,720 --> 00:04:16,200 Så detta kommer att förändra bakgrund av vad som helst 106 00:04:16,200 --> 00:04:19,640 inom varje organ tagg i vår HTML-fil. 107 00:04:19,640 --> 00:04:22,810 Och det kommer att ge Det här ljusblå värde. 108 00:04:22,810 --> 00:04:24,820 >> Så det kommer att göra det bakgrund ljusblå. 109 00:04:24,820 --> 00:04:28,660 Och sedan något inom kroppen är kommer att ha ett typsnitt vikt fetstil. 110 00:04:28,660 --> 00:04:31,142 Så det är bara att gå till djärva all vår text. 111 00:04:31,142 --> 00:04:32,970 Och det här är bara en väljare. 112 00:04:32,970 --> 00:04:34,680 Men du kan ha väldigt många av dessa. 113 00:04:34,680 --> 00:04:38,730 Och som vi kommer att visa senare, lite mer i hur 114 00:04:38,730 --> 00:04:40,709 att arbeten och fler exempel där. 115 00:04:40,709 --> 00:04:41,750 Något du vill tillägga? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: Nej 117 00:04:42,499 --> 00:04:43,500 Allison fick det. 118 00:04:43,500 --> 00:04:46,144 Vi ska bara skära upp ett exempel här på vårt exempel sajt. 119 00:04:46,144 --> 00:04:47,310 Så låt oss verkligen ta detta. 120 00:04:47,310 --> 00:04:48,620 Den är perfekt. 121 00:04:48,620 --> 00:04:54,460 Så jag ska bara kopiera och klistra in denna rätt in i vår main.css fil. 122 00:04:54,460 --> 00:04:56,530 Och jag kommer att spara den. 123 00:04:56,530 --> 00:04:59,190 Och då kommer vi köra den. 124 00:04:59,190 --> 00:05:01,600 Så liten not, en av de mest frustrerande saker 125 00:05:01,600 --> 00:05:04,490 är om du inte sparar en fil, och då du, liksom, ladda om sidan, 126 00:05:04,490 --> 00:05:07,450 och liknande, varför inte förändringen som händer? 127 00:05:07,450 --> 00:05:07,950 Det händer. 128 00:05:07,950 --> 00:05:14,230 Så här såg vi att vi gjort vår hemsida en ljusblå bakgrund 129 00:05:14,230 --> 00:05:16,560 och några fetstil. 130 00:05:16,560 --> 00:05:20,730 >> Jag bör också nämna, om du killar har frågor om någonting 131 00:05:20,730 --> 00:05:23,622 vi gör, är du välkommen fri att stoppa oss och fråga oss. 132 00:05:23,622 --> 00:05:25,330 Vi är helt villiga till fält frågor. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON Buchholtz-AU: Självklart, med CSS, allt bygger på sig själv. 135 00:05:31,930 --> 00:05:34,107 Så om en sak inte vettigt nu, vi 136 00:05:34,107 --> 00:05:35,690 vill inte att för att mosse ner dig senare. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Så låt oss slags dissekera denna. 139 00:05:41,930 --> 00:05:44,210 Så vill du börja med väljaren här? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON Buchholtz-AU: Yeah. 141 00:05:45,979 --> 00:05:48,270 Som jag sa tidigare, kropp är bara vår väljaren här. 142 00:05:48,270 --> 00:05:50,950 Så om vi går tillbaka över till vår index-- ah. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Vilket jag bara stängt. 144 00:05:53,245 --> 00:05:54,530 Ge mig en sekund. 145 00:05:54,530 --> 00:05:58,286 Så File, Open, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON Buchholtz-AU: Cool. 147 00:05:59,410 --> 00:06:02,710 Så om du märker här, vi har dessa kropps taggar, eller hur? 148 00:06:02,710 --> 00:06:06,270 Så väljaren bara motsvarar taggarna som vi pratar om. 149 00:06:06,270 --> 00:06:07,670 Så kroppen just här. 150 00:06:07,670 --> 00:06:10,315 Så vad vi säger är everything-- kan vi gå tillbaka? 151 00:06:10,315 --> 00:06:12,065 Jag önskar att jag kunde bara som trycker på skärmen. 152 00:06:12,065 --> 00:06:14,410 Det skulle vara så mycket svalare. 153 00:06:14,410 --> 00:06:17,150 >> Så något inom dem body-taggar, som vi såg 154 00:06:17,150 --> 00:06:19,637 var precis, precis, texten, och kroppen i allmänhet 155 00:06:19,637 --> 00:06:20,970 avser, liksom, bakgrunden. 156 00:06:20,970 --> 00:06:22,720 Om du någonsin vill ändra bakgrunden, 157 00:06:22,720 --> 00:06:25,090 det kommer att vara i en body-taggen. 158 00:06:25,090 --> 00:06:27,120 Bara har dessa regler tillämpas på dem. 159 00:06:27,120 --> 00:06:32,040 >> Så om vi skulle gå till index.html och-- faktiskt, 160 00:06:32,040 --> 00:06:33,840 kan vi ha något utanför kroppen? 161 00:06:33,840 --> 00:06:37,340 Om vi ​​hade, liksom, en sidfot eller något, skulle det inte gälla för detta. 162 00:06:37,340 --> 00:06:40,900 Men något inom dessa kropps taggar kommer 163 00:06:40,900 --> 00:06:44,960 att påverkas av detta organ väljare som vi har gjort. 164 00:06:44,960 --> 00:06:47,405 Så om du skulle skriva något annat there-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Låt oss att gör det. 166 00:06:49,400 --> 00:06:55,330 Så om vi hade en div-- så det är bara en annan tagg som du kan ha. 167 00:06:55,330 --> 00:06:56,350 Jag ska stänga den. 168 00:06:56,350 --> 00:06:58,280 Eller låt oss göra detta till en punkt. 169 00:06:58,280 --> 00:07:01,430 Så p står för punkt. 170 00:07:01,430 --> 00:07:02,560 Och inom den punkten. 171 00:07:02,560 --> 00:07:05,650 Och då säger jag, "Det här är texten." 172 00:07:05,650 --> 00:07:06,369 Cool. 173 00:07:06,369 --> 00:07:09,160 Och sedan gjorde jag denna regel gäller för en punkt i stället för kroppen. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Du får se hur det endast gäller den nybildade punkt, höger, 176 00:07:17,320 --> 00:07:18,892 inte det hela. 177 00:07:18,892 --> 00:07:20,090 Betyder det vettigt? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON Buchholtz-AU: Så det här är allt kroppen, 179 00:07:21,840 --> 00:07:24,450 men nu vår väljaren bara motsvarar punkt. 180 00:07:24,450 --> 00:07:27,050 Så vi har bara fet och blått för denna specifika punkt, 181 00:07:27,050 --> 00:07:30,760 eftersom detta är det enda som är innesluten i p-taggen. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Låter det vettigt sorterar av hur saker kapsla annat? 183 00:07:35,349 --> 00:07:38,140 ALLISON Buchholtz-AU: Också, precis säga, liksom, ett av de bästa sätten 184 00:07:38,140 --> 00:07:40,889 att verkligen få bekväm med CSS är att bara göra saker som detta, 185 00:07:40,889 --> 00:07:42,050 bara prova det. 186 00:07:42,050 --> 00:07:46,700 Det är väldigt enkelt att skriva något ut, slog Refresh, och se vad som händer. 187 00:07:46,700 --> 00:07:48,940 Och som med de flesta CS, experimenterande kan ofta 188 00:07:48,940 --> 00:07:51,790 leda till en mycket bättre intuitiv förståelse. 189 00:07:51,790 --> 00:07:54,432 Ännu mer så än oss bara, gillar, pratar med dig. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absolut 100% överens på den punkten. 191 00:07:58,350 --> 00:08:02,430 Så om vi går tillbaka till detta, låt oss börja dissekera exakt vad dessa två gör. 192 00:08:02,430 --> 00:08:04,550 Så vi har två regler om detta. 193 00:08:04,550 --> 00:08:07,420 Så det första en är bakgrundsfärg. 194 00:08:07,420 --> 00:08:10,590 Och du ser att vi har satt det lika med ett värde, ljusblå. 195 00:08:10,590 --> 00:08:15,009 >> Så i CSS, är CSS sorterar av mycket löst om hur 196 00:08:15,009 --> 00:08:16,300 du är tillåtet att definiera färgen. 197 00:08:16,300 --> 00:08:17,800 Så du kan definiera dem vid namn. 198 00:08:17,800 --> 00:08:20,650 Du kan också göra något som "röd". 199 00:08:20,650 --> 00:08:25,270 Och sedan om vi går tillbaka till detta, du ser att bakgrunden är röd. 200 00:08:25,270 --> 00:08:29,040 Du kan också få really-- Jag tror att du kan bli ganska kreativ med detta, 201 00:08:29,040 --> 00:08:29,540 kan inte du? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON Buchholtz-AU: Jag tror att du kan använda hex. 203 00:08:31,170 --> 00:08:31,250 Kan inte du? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Yeah. 205 00:08:32,083 --> 00:08:32,969 Så du kan använda hex. 206 00:08:32,969 --> 00:08:34,490 Men jag tänker namn-wise. 207 00:08:34,490 --> 00:08:35,385 Finns det inte? 208 00:08:35,385 --> 00:08:37,260 ALLISON Buchholtz-AU: Du kan göra en hel del. 209 00:08:37,260 --> 00:08:43,350 Ganska mycket som de flesta färger som du kan name-- ut, jag tror lax är en. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Vi ska försöka lax. 211 00:08:45,322 --> 00:08:47,530 ALLISON Buchholtz-AU: Jag tror chartreuse är där. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Yeah. 213 00:08:48,050 --> 00:08:48,550 Se? 214 00:08:48,550 --> 00:08:50,080 Så du kan få ganska kreativ. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON Buchholtz-AU: Du kunde få ganska kreativ. 216 00:08:52,246 --> 00:08:55,750 Liksom, om du kan tänka på färgnamn, är det förmodligen där. 217 00:08:55,750 --> 00:08:57,840 Om du verkligen vill ha fina detalj, kan du gå hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Yeah. 219 00:08:58,673 --> 00:08:59,390 Så hexadecimalt. 220 00:08:59,390 --> 00:09:05,280 Om ni kommer ihåg detta tillbaka från din gamla PSET, Bild Recover, 221 00:09:05,280 --> 00:09:08,300 ni haft att göra med dessa hexvärdena. 222 00:09:08,300 --> 00:09:15,280 Och sorts att sammanfatta vad som är, hex har tre värden som lagrats i den. 223 00:09:15,280 --> 00:09:17,250 Så det är i grupper om två steg. 224 00:09:17,250 --> 00:09:19,300 De två första representerar det röda värdet. 225 00:09:19,300 --> 00:09:22,420 Den andra en representerar det gröna värdet. 226 00:09:22,420 --> 00:09:25,020 Och den sista är blå? 227 00:09:25,020 --> 00:09:30,050 >> Så FF råkar representera en hexadecimal 255. 228 00:09:30,050 --> 00:09:35,480 Så du har 255 röda, 255 grön, och 0 för blått. 229 00:09:35,480 --> 00:09:37,670 Och värden varierar mellan 0 och 255. 230 00:09:37,670 --> 00:09:38,350 >> PUBLIK: Höger. 231 00:09:38,350 --> 00:09:41,472 Så i huvudsak, kunde vi söker internet för vilken färg vi vill, 232 00:09:41,472 --> 00:09:43,912 och identifiera faktiskt känt färgspektrum combo, 233 00:09:43,912 --> 00:09:45,130 och då kunde vi lägga den i? 234 00:09:45,130 --> 00:09:46,380 ALLISON Buchholtz-AU: Exakt. 235 00:09:46,380 --> 00:09:52,900 Så du har ganska mycket full kontroll över de färger du vill inom CSS. 236 00:09:52,900 --> 00:09:55,069 Ska vi prata om bakgrundsbilder senare? 237 00:09:55,069 --> 00:09:56,110 Eller vill vi göra det? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Yeah. 239 00:09:56,240 --> 00:09:57,010 Absolut. 240 00:09:57,010 --> 00:10:00,830 Så först, bara för att visa att rött och grönt är gul. 241 00:10:00,830 --> 00:10:03,120 Och om du behöver lite hjälp med att hitta detta, du 242 00:10:03,120 --> 00:10:05,575 kan Google något som "färgväljaren." 243 00:10:05,575 --> 00:10:07,200 ALLISON Buchholtz-AU: Åh, det är så bra. 244 00:10:07,200 --> 00:10:09,090 Jag älskar färgväljaren. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com är ett bra exempel. 246 00:10:11,360 --> 00:10:14,580 Och här ser du att du har en full Photoshop-liknande färgväljaren. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON Buchholtz-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Även de coola saker är du kan generera färgscheman 249 00:10:16,980 --> 00:10:18,896 så att du inte behöver, liknande, kolliderar färger. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: Och sedan Här är hex värdet här uppe. 251 00:10:22,780 --> 00:10:27,800 Så du kan alltid hitta på nätet i grunden platser för att få hex värdet från. 252 00:10:27,800 --> 00:10:31,667 Det är inte sortera av det precis, precis, vi se färgerna i världen i antal. 253 00:10:31,667 --> 00:10:34,000 Det är mer att vi går online och hitta vilken färg vi vill, 254 00:10:34,000 --> 00:10:36,850 och sedan ta tal nedåt. 255 00:10:36,850 --> 00:10:39,590 Eftersom det är bara en riktigt lätt sätt att referera saker i CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON Buchholtz-AU: Och sedan finns det also-- 257 00:10:40,350 --> 00:10:41,630 Jag glömmer det exakta namnet på webbplatsen. 258 00:10:41,630 --> 00:10:43,838 Men det är definitivt, jag tänka, något från Adobe 259 00:10:43,838 --> 00:10:48,350 som genererar färgscheman för dig, vilket är riktigt coolt, eftersom du 260 00:10:48,350 --> 00:10:50,580 definitely-- det ibland svårt att räkna ut, 261 00:10:50,580 --> 00:10:53,729 åh, om jag vill använda denna färg, vad som kan vara en annan användbar en 262 00:10:53,729 --> 00:10:56,395 att använda någon annanstans på min webbplats till, liknande, gör det trevligt och sammanhängande. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allisons pratar om ett av Adobe heter Kuler, tror jag. 265 00:11:04,260 --> 00:11:04,885 Det är K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON Buchholtz-AU: Jag tror det. 267 00:11:06,259 --> 00:11:07,610 Jag är ganska säker på att det är den. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: Min favorit har alltid varit 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: Vilket är now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON Buchholtz-AU: Ah, är detta vackra. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: Och du kan i princip säga, liksom, 273 00:11:18,818 --> 00:11:21,700 Jag vill tre färger bredvid varandra. 274 00:11:21,700 --> 00:11:25,030 Och sedan ska vi göra något trevligt. 275 00:11:25,030 --> 00:11:29,210 Och då kan du få ett exempel om vad som skulle kunna se ut. 276 00:11:29,210 --> 00:11:32,470 Och sedan om du hovrar över någon av dem, det ger dig hex värdet. 277 00:11:32,470 --> 00:11:35,010 >> Så precis som ett bra sätt att börja funderar färgscheman 278 00:11:35,010 --> 00:11:39,570 eller vilka färger på en webbplats kan gå bra ihop. 279 00:11:39,570 --> 00:11:45,655 Eftersom det kan vara förvånansvärt inte så lätt att plocka som du tror. 280 00:11:45,655 --> 00:11:48,280 Och sedan den andra cool sak Jag har alltid funnit om denna webbplats 281 00:11:48,280 --> 00:11:51,480 är om du träffar Exempel, det ska visa vad ett exempel webbplats 282 00:11:51,480 --> 00:11:54,800 kan se ut med hjälp av den färgschema. 283 00:11:54,800 --> 00:11:56,270 Hur som helst. 284 00:11:56,270 --> 00:11:57,863 >> Tillbaka till själva CSS. 285 00:11:57,863 --> 00:12:01,112 ALLISON Buchholtz-AU: Men självklart, vi vet dessa referenser kan vara användbara. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: Nej, de definitivt kan vara till hjälp. 287 00:12:03,195 --> 00:12:04,720 Så den andra regeln, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON Buchholtz-AU: Yeah. 289 00:12:05,844 --> 00:12:08,280 Den andra regeln är bara motsvarar vår teckensnitt. 290 00:12:08,280 --> 00:12:11,520 Så textvikt är bara typ of-- så att vikten skulle 291 00:12:11,520 --> 00:12:15,220 vara om du vill bara, liksom, normala eller liknande, tunnare typsnitt, 292 00:12:15,220 --> 00:12:17,251 eller i detta fall, liksom, djärvt. 293 00:12:17,251 --> 00:12:17,750 Jag glömmer. 294 00:12:17,750 --> 00:12:21,557 Vad är det om du ville det-- är där ett tunnare än bara, liksom, normalt? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: Jag gör faktiskt inte veta om det är en tunnare. 296 00:12:24,140 --> 00:12:24,680 ALLISON Buchholtz-AU: jag glömmer. 297 00:12:24,680 --> 00:12:26,300 Så textvikt vi vanligtvis bara använda för fet. 298 00:12:26,300 --> 00:12:29,010 Om du vill komma riktigt in Det kommer vi att visa dig. 299 00:12:29,010 --> 00:12:34,317 W3Schools har alla de olika saker du kan göra för teckensnitt. 300 00:12:34,317 --> 00:12:36,900 Men i grund och botten, om du någonsin vill att ändra något om typsnitt, 301 00:12:36,900 --> 00:12:39,330 det alltid kommer att vara, liknande, font-någonting. 302 00:12:39,330 --> 00:12:43,450 Så det blir som, font-family om du är försöka förändra den aktuella typen. 303 00:12:43,450 --> 00:12:47,390 Det blir font-style om du vill göra det som kursiv, 304 00:12:47,390 --> 00:12:49,710 eller kursiv stil, eller whatnot. 305 00:12:49,710 --> 00:12:53,570 Eller till och med font-färg, om Vi ville ändra på det. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Japp. 307 00:12:55,621 --> 00:12:56,925 Så du kan ändra på det. 308 00:12:56,925 --> 00:12:59,360 Och sorts bara resumé nu, så du kan 309 00:12:59,360 --> 00:13:01,400 ser att vi har väljaren här uppe. 310 00:13:01,400 --> 00:13:03,000 Vi har dessa klammerparenteser. 311 00:13:03,000 --> 00:13:06,735 Och då har vi regler avgränsas med semikolon. 312 00:13:06,735 --> 00:13:08,100 Betyder det vettigt? 313 00:13:08,100 --> 00:13:09,130 Yeah? 314 00:13:09,130 --> 00:13:10,500 Cool. 315 00:13:10,500 --> 00:13:13,200 Så om det är good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON Buchholtz-AU: Back. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Låt oss tala specifikt om vilken typ av väljare som vi har. 318 00:13:17,590 --> 00:13:19,790 "Orsak just nu vi har sorts just visat taggar. 319 00:13:19,790 --> 00:13:21,696 Men ni kunde se det rimliga. 320 00:13:21,696 --> 00:13:23,570 Säg att du har två stycken på en sida och du 321 00:13:23,570 --> 00:13:26,087 vill kunna stil en men inte den andra, 322 00:13:26,087 --> 00:13:29,170 du inte bara vill begränsa dig att behöva använda olika faktiska HTML 323 00:13:29,170 --> 00:13:33,410 taggar för att ge dem olika stilar. 324 00:13:33,410 --> 00:13:35,995 >> Så vi har tre grundläggande typer av selektorer. 325 00:13:35,995 --> 00:13:37,120 ALLISON Buchholtz-AU: Yeah. 326 00:13:37,120 --> 00:13:39,828 Så vi har taggen, vilket är vad Vi har pratat om just nu. 327 00:13:39,828 --> 00:13:42,430 Så det är ungefär som din kropp eller p. 328 00:13:42,430 --> 00:13:46,280 Och då har vi klass, vilket är När vi definierar det i vår CSS-fil, 329 00:13:46,280 --> 00:13:49,907 Det kommer alltid att pricka, oavsett du vill ha namnet på din klass ska vara. 330 00:13:49,907 --> 00:13:51,490 Och detta kan gälla för flera saker. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Säg att du har fem stycken och två av tre av dem 333 00:13:57,610 --> 00:14:00,580 måste formaterad på samma, skulle du använda en klass till det. 334 00:14:00,580 --> 00:14:03,040 Och detta är bara hur vi gör det. 335 00:14:03,040 --> 00:14:05,600 Vi ska ge er ett exempel på där detta faktiskt visar upp. 336 00:14:05,600 --> 00:14:11,030 Men om du hade kanske några tagg p, efter det, skulle du skriva, 337 00:14:11,030 --> 00:14:14,170 klass är lika oavsett klasser du vill använda för det. 338 00:14:14,170 --> 00:14:19,280 Så oavsett klass väljare som vi vill att gälla för denna specifika punkt, 339 00:14:19,280 --> 00:14:21,300 Vi kunde bara skriva så här. 340 00:14:21,300 --> 00:14:24,080 Naturligtvis tror jag ett exempel kommer att göra det mycket mer konkret. 341 00:14:24,080 --> 00:14:27,270 >> Den andra har vi är id, som vi betecknar 342 00:14:27,270 --> 00:14:29,707 med en hash, eller pund, eller hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON Buchholtz-AU: octothorpe. 345 00:14:32,430 --> 00:14:34,550 Det funkar också. 346 00:14:34,550 --> 00:14:36,640 Och detta borde verkligen vara unik. 347 00:14:36,640 --> 00:14:39,880 De bör endast gälla en sak på din sida. 348 00:14:39,880 --> 00:14:43,820 Så oavsett om det är en viss punkt, eller något objekt i en lista, eller vad, 349 00:14:43,820 --> 00:14:45,090 detta bör vara unikt. 350 00:14:45,090 --> 00:14:48,730 Och på samma sätt som vi bara säga, liksom, class = "Class1 Class2," 351 00:14:48,730 --> 00:14:51,577 Detta kan bara vara id vad vi har. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Yeah. 353 00:14:52,410 --> 00:14:54,330 Så låt oss definitivt prata om exempel här. 354 00:14:54,330 --> 00:14:58,170 Och jag kommer bara att dyka rakt tillbaka in i koden. 355 00:14:58,170 --> 00:15:02,090 Så låt oss titta på vårt HTML. 356 00:15:02,090 --> 00:15:03,960 Och så vi just nu har en punkt. 357 00:15:03,960 --> 00:15:05,510 Detta är en text. 358 00:15:05,510 --> 00:15:09,151 Jag kommer bara att ändra det. "Det här är text 1." 359 00:15:09,151 --> 00:15:11,150 Och sedan ska vi ha en "Det här är texten 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON Buchholtz-AU: Second ett. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Japp. 362 00:15:13,540 --> 00:15:16,810 Så vi har nu "Detta är text 2," rätt? 363 00:15:16,810 --> 00:15:21,560 Och vi kommer att se att om vi ladda om sidan, vad vi ska hitta 364 00:15:21,560 --> 00:15:23,067 är vi ska find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON Buchholtz-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Yeah. 367 00:15:24,983 --> 00:15:27,570 Vi kommer att hitta en "Det här är text 1, "och" Det här är texten 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON Buchholtz-AU: Och ut vackra gula färg. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: Och du ser att vår väljaren just nu, 370 00:15:31,066 --> 00:15:34,940 som gäller för p-talet, eller stycken, drabbar dem båda, 371 00:15:34,940 --> 00:15:38,700 eftersom båda möta förutsättning att de är både en p-tagg. 372 00:15:38,700 --> 00:15:40,360 Det känns självklart. 373 00:15:40,360 --> 00:15:43,340 Så frågan är, ja, vad om vi ville bara få en? 374 00:15:43,340 --> 00:15:46,350 Så precis som Allison sa, vi har två andra sätt att göra det. 375 00:15:46,350 --> 00:15:47,320 Jag ska börja med id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON Buchholtz-AU: Låt oss börja med id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: Och båda av dessa är attribut. 378 00:15:50,405 --> 00:15:53,200 Så attribut finns i HTML. 379 00:15:53,200 --> 00:15:55,600 Och vad de är är något som du lägger 380 00:15:55,600 --> 00:15:58,840 inuti taggen som är separat från taggnamnet. 381 00:15:58,840 --> 00:16:01,301 Så du kan ha flera attribut. 382 00:16:01,301 --> 00:16:01,800 Yeah? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON Buchholtz-AU: Jag tänkte bara att säga, från din ex från PSET 7, 384 00:16:03,950 --> 00:16:06,650 Om någon av er försöker rikta saker till centrum, 385 00:16:06,650 --> 00:16:08,550 du kanske har använt "Text align = center." 386 00:16:08,550 --> 00:16:10,550 Och du märkt det förmodligen borde ha centrerat 387 00:16:10,550 --> 00:16:12,650 din text eller din navigeringsfältet. 388 00:16:12,650 --> 00:16:15,499 Så det är bara också ett attribut att du kanske känner till. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Det finns ett gäng av attribut som du ser. 390 00:16:18,040 --> 00:16:18,539 Yeah. 391 00:16:18,539 --> 00:16:21,250 Liksom bra referens till PSET 7. 392 00:16:21,250 --> 00:16:23,150 Vi har id. 393 00:16:23,150 --> 00:16:25,080 Du kan också ha klass, saker som detta. 394 00:16:25,080 --> 00:16:27,250 En enda tagg kan ha många attribut. 395 00:16:27,250 --> 00:16:33,140 Så börjar med id, låt oss låtsas att vi vill ha ett id of-- jag vet inte. 396 00:16:33,140 --> 00:16:35,140 Vi kallar det speciella, eftersom detta är vi 397 00:16:35,140 --> 00:16:37,867 kommer att göra djärva och stryka, och vad som helst. 398 00:16:37,867 --> 00:16:39,950 ALLISON Buchholtz-AU: Det är kommer bli super speciell. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Så detta en, har vi id speciell. 400 00:16:42,360 --> 00:16:48,140 Så sättet för att välja det, då är i main.css, snarare än att ha en p-tagg, 401 00:16:48,140 --> 00:16:51,500 du gör #special, OK? 402 00:16:51,500 --> 00:16:55,538 Och som väljer det sak med id speciell. 403 00:16:55,538 --> 00:16:57,295 Innebär detta vettigt för alla? 404 00:16:57,295 --> 00:16:57,920 PUBLIK: Ja. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Så nu om vi går tillbaka, vi see-- hoppsan. 407 00:17:04,440 --> 00:17:06,240 Yeah. 408 00:17:06,240 --> 00:17:09,460 Vi får se att det bara väljer den med id speciell. 409 00:17:09,460 --> 00:17:10,622 Yeah? 410 00:17:10,622 --> 00:17:11,900 Låter coolt. 411 00:17:11,900 --> 00:17:12,570 Ja. 412 00:17:12,570 --> 00:17:15,456 >> PUBLIK: Kan något ha en attribut av både klass och ett id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Ja. 414 00:17:16,359 --> 00:17:16,900 PUBLIK: OK. 415 00:17:16,900 --> 00:17:20,887 Och vad händer om du sedan ge det vissa regler i CSS som konflikten? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Absolut. 417 00:17:21,970 --> 00:17:23,940 Vi definitivt kommer att prata om det. 418 00:17:23,940 --> 00:17:31,890 Så exakt vad du fick på, kan du också ha klasser. 419 00:17:31,890 --> 00:17:36,380 Så låt oss låtsas att jag hade tre stycken och jag 420 00:17:36,380 --> 00:17:38,730 ville att styla den första två men inte den tredje. 421 00:17:38,730 --> 00:17:42,850 Tja, kanske din första idé vara, ja, jag kunde bara ge den andra ett id. 422 00:17:42,850 --> 00:17:45,590 Men du kan inte, eftersom ett id, precis som Allison sa, 423 00:17:45,590 --> 00:17:47,330 måste vara unikt. 424 00:17:47,330 --> 00:17:50,860 >> Så istället för ett id, vad du kan använda är att du kan använda en klass. 425 00:17:50,860 --> 00:17:57,880 Och en class-- vad den tillåter du behöver göra är i princip säga, 426 00:17:57,880 --> 00:17:59,610 Detta hör som en del av en grupp. 427 00:17:59,610 --> 00:18:02,410 I det här fallet, vår grupp kallas Special. 428 00:18:02,410 --> 00:18:06,500 Och vad vi ska göra då är vi ska säga-- stället pund, 429 00:18:06,500 --> 00:18:08,070 vi kommer att använda punkt. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 Och märker att pundet och dot existerar endast inom CSS-filen, 432 00:18:11,950 --> 00:18:12,797 inte i HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON Buchholtz-AU: Ja. 434 00:18:13,880 --> 00:18:15,185 Viktig skillnad. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Jag har hade så mycket kamp, 436 00:18:17,510 --> 00:18:23,990 eftersom jag satte hash i HTML och sedan bara kändes dumt länge. 437 00:18:23,990 --> 00:18:27,470 Se hur det väljer båda de med den klassen? 438 00:18:27,470 --> 00:18:28,210 Cool. 439 00:18:28,210 --> 00:18:29,950 >> Nu kan saker har flera klasser. 440 00:18:29,950 --> 00:18:32,790 Låt oss säga att jag ville göra det första två har en bakgrund av gul 441 00:18:32,790 --> 00:18:36,770 och den andra två har en teckenfärg i blått. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Jag vet inte riktigt varför jag skulle vill göra det, men jag kan. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON Buchholtz-AU: Might inte rekommenderas det för din hemsida. 445 00:18:42,401 --> 00:18:43,880 Men för våra syften, kommer den att göra. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Det är inte en bra färgschema. 447 00:18:46,294 --> 00:18:49,210 ALLISON Buchholtz-AU: Tja, gul och blått är min skola färger. 448 00:18:49,210 --> 00:18:50,947 Jag vet inte, dock. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison höga Skolan hade en stor färgschema. 450 00:18:53,530 --> 00:18:54,520 [LAUGHTER] 451 00:18:54,520 --> 00:18:59,120 Så vad vi kan kalla detta är Låt oss kalla this-- så vi har Special 452 00:18:59,120 --> 00:19:00,030 och vi har nätt. 453 00:19:00,030 --> 00:19:02,405 Jag föreslår, för detta använder du mycket mer beskrivande namn. 454 00:19:02,405 --> 00:19:05,820 ALLISON Buchholtz-AU: Ja, det skulle jag kalla detta, liksom, gul eller blå. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: Vi är inte verkligen göra en riktig hemsida, 456 00:19:08,314 --> 00:19:09,730 vilket är anledningen till att vi inte gör det. 457 00:19:09,730 --> 00:19:11,521 Men om du verkligen hade en verklig webbplats, du 458 00:19:11,521 --> 00:19:16,220 kan ha, liksom, artikelrubrik, artikelns innehåll, första ordet, 459 00:19:16,220 --> 00:19:21,920 sånt, som tillåter du att vara mycket mer beskrivande. 460 00:19:21,920 --> 00:19:23,550 Dessa är verkligen precis som variabler. 461 00:19:23,550 --> 00:19:28,390 De bör namnges på ett sätt där du kan, like-- yeah, som sådan. 462 00:19:28,390 --> 00:19:29,470 Perfect. 463 00:19:29,470 --> 00:19:30,480 >> Så bakgrundsfärg. 464 00:19:30,480 --> 00:19:35,920 Och sedan ska vi säga-- så sätt att ändra färg är bara "färg." 465 00:19:35,920 --> 00:19:38,412 Och vi kommer att göra det blå. 466 00:19:38,412 --> 00:19:40,150 Det är coolt. 467 00:19:40,150 --> 00:19:42,640 Så nu har vi två första har speciella. 468 00:19:42,640 --> 00:19:45,972 Nästa man kommer att har "class = pretty." 469 00:19:45,972 --> 00:19:49,180 ALLISON Buchholtz-AU: Och sedan du kommer vill lägga "pretty" till den mittersta. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Japp. 471 00:19:49,971 --> 00:19:52,970 Och sedan till den mittersta, att lägga "pretty" vad händer 472 00:19:52,970 --> 00:19:56,880 är du bara ha ett utrymme. 473 00:19:56,880 --> 00:19:59,800 Så klassattribut är ett utrymme separerad lista 474 00:19:59,800 --> 00:20:02,450 av alla klasser som gäller för den taggen. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Det är inte så här man tillhör någon form av särskild klass som kallas 477 00:20:05,750 --> 00:20:07,180 "Special, utrymme, söt." 478 00:20:07,180 --> 00:20:10,870 Det tillhör två classes-- speciell och vacker. 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 >> Och sedan om vi ser på vad som händer, vi är 482 00:20:17,010 --> 00:20:21,850 kommer att se till att första har gul bakgrund, svart text. 483 00:20:21,850 --> 00:20:22,450 Andra en-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON Buchholtz-AU: --has fetstil gul bakgrund med blå text. 485 00:20:26,160 --> 00:20:29,330 Och vår sista man har bara blå text som vi tilldelats. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Hur väljare fungerar? 488 00:20:32,491 --> 00:20:32,990 Grymt. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON Buchholtz-AU: Vill vi prata om konflikten nu då? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Så ja. 491 00:20:35,780 --> 00:20:36,310 Absolut. 492 00:20:36,310 --> 00:20:38,380 Så vad händer om du ha en konflikt, eller hur? 493 00:20:38,380 --> 00:20:44,740 Låt oss låtsas den första sätter upp något like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON Buchholtz-AU: Kanske här ändrar bakgrunden? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Yeah. 496 00:20:48,090 --> 00:20:51,699 Så vi ska göra "pretty" ändra bakgrunden till laxen. 497 00:20:51,699 --> 00:20:54,740 ALLISON Buchholtz-AU: Du är bara med alla de stora färgerna i dag, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Yeah. 499 00:20:55,573 --> 00:20:58,200 Eftersom jag fick veta att jag kan använder lax som en riktig färg. 500 00:20:58,200 --> 00:21:00,270 Så vi kommer bara att göra det. 501 00:21:00,270 --> 00:21:01,770 Jag tycker också Sunset är en riktig färg. 502 00:21:01,770 --> 00:21:03,103 PUBLIK: Sunset är en riktig färg? 503 00:21:03,103 --> 00:21:04,572 ALLISON Buchholtz-AU: Låt oss prova. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Efter denna demo bara för att i fall det förstör, 505 00:21:07,735 --> 00:21:08,943 Jag vill inte bli felsökning. 506 00:21:08,943 --> 00:21:11,580 Så vi vet lax är en riktig färg. 507 00:21:11,580 --> 00:21:15,626 Så några gissningar om vad som kommer att hända? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON Buchholtz-AU: Någon idé? 509 00:21:17,522 --> 00:21:20,002 >> PUBLIK: [OHÖRBAR]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Yeah. 511 00:21:20,920 --> 00:21:22,150 Så du fick det helt rätt. 512 00:21:22,150 --> 00:21:24,930 I grund och botten, det tar den sista regeln att den gavs. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON Buchholtz-AU: Så det här är där kaskad träder i kraft. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Så minns hur vi hade att kaskadstilmallar? 515 00:21:31,080 --> 00:21:33,660 Så genom att vi slags menar att vi har ett gäng regler 516 00:21:33,660 --> 00:21:37,115 som tillämpas på toppen av varandra, och de kan också åsidosätta varandra. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON Buchholtz-AU: So oavsett s nedtill 518 00:21:39,380 --> 00:21:41,540 åsidosätter vad är i toppen. 519 00:21:41,540 --> 00:21:45,842 Du kunde ha regler som helt negera något i förväg. 520 00:21:45,842 --> 00:21:48,300 Det är också därför du vill vara försiktig när du är styling, 521 00:21:48,300 --> 00:21:51,465 så att du inte skapar regler som du bara helt tvingande. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Eller kanske du vill skriva över reglerna. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON Buchholtz-AU: Eller kanske du gör. 524 00:21:53,920 --> 00:21:54,300 Ja. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Låtsas att du har en klass som gäller för det mesta, 526 00:21:57,175 --> 00:22:01,220 men låt oss säga att du vill ändra bakgrundsfärg till rött och teckensnitt 527 00:22:01,220 --> 00:22:03,140 vikt fetstil för de flesta saker, men för en, 528 00:22:03,140 --> 00:22:06,098 du bara vill att bakgrundsfärgen att vara röd, men du vill att alla andra 529 00:22:06,098 --> 00:22:09,990 egenskaper, kan du göra något liknande "font-weight = normal," 530 00:22:09,990 --> 00:22:12,760 vilket skulle då ångra det djärva förändring. 531 00:22:12,760 --> 00:22:14,480 Yeah? 532 00:22:14,480 --> 00:22:17,250 Återigen, det bästa sättet, tror jag Allison sa det, är bara träna. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON Buchholtz-AU: Experiment. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Öva, öva, praxis, och experimentera. 535 00:22:20,090 --> 00:22:22,950 Jag vet att många människor som tror CSS är bara en massa gissning-och-check 536 00:22:22,950 --> 00:22:25,580 i slutet av dagen, där om du vill göra something-- liknande, 537 00:22:25,580 --> 00:22:27,663 Har du en ungefärlig uppfattning, men du fortfarande förmodligen behöva 538 00:22:27,663 --> 00:22:31,390 att prova för att se du vet hur det ser ut. 539 00:22:31,390 --> 00:22:34,482 >> PUBLIK: När du ansöker klasser, mer än en 540 00:22:34,482 --> 00:22:37,339 till samma stycke eller avsnitt, det gör det 541 00:22:37,339 --> 00:22:39,505 Oavsett vilken ordning du kan skriver dem i citat? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: Nej, inte alls. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON Buchholtz-AU: Det viktiga är beställningen inom din CSS-formatmall. 544 00:22:45,764 --> 00:22:47,430 PUBLIK: Kan du upprepa frågan? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON Buchholtz-AU: Inom klass, när du ger klasser 547 00:22:53,990 --> 00:22:56,964 till något i HTML, gör det någon roll vilken ordning de är i? 548 00:22:56,964 --> 00:22:58,130 Det spelar ingen roll ordern. 549 00:22:58,130 --> 00:23:02,915 Det viktiga är ordningen på klassväljare inom din CSS, 550 00:23:02,915 --> 00:23:04,306 inom din stilmall. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: Ljud bra? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON Buchholtz-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: Och sedan vi ska fortsätta att-- 554 00:23:11,539 --> 00:23:13,330 ALLISON Buchholtz-AU: Vad har vi nästa? 555 00:23:13,330 --> 00:23:14,245 Jag glömmer. 556 00:23:14,245 --> 00:23:16,087 Åh, vi har bara exempel. 557 00:23:16,087 --> 00:23:17,295 Men vi har sorts gjort dem. 558 00:23:17,295 --> 00:23:18,990 Vi har gjort exempel i farten. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Vi får kombinera väljarna snart. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON Buchholtz-AU: Åh, vi får kombinera väljare. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Så vissa exempel är att vi har 562 00:23:25,260 --> 00:23:29,630 # Dog-- pund, eller hashtag, eller octothorpe, eller vad 563 00:23:29,630 --> 00:23:32,050 du vill ringa that-- skarp. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON Buchholtz-AU: Sharp hund. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Då har du .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Något har ett id av hund, det finns bara en hund på sidan. 568 00:23:41,600 --> 00:23:43,870 Något har en id katt, det finns bara en katt. 569 00:23:43,870 --> 00:23:45,665 Det kan finnas många husdjur på sidan. 570 00:23:45,665 --> 00:23:47,570 Det är därför vi gav det klasser. 571 00:23:47,570 --> 00:23:48,740 Du har ett exempel på s. 572 00:23:48,740 --> 00:23:50,490 Och sedan så en av de sista exemplet, som 573 00:23:50,490 --> 00:23:53,790 är något vi inte har pratat om, är vad som händer när du kombinerar dem. 574 00:23:53,790 --> 00:23:54,580 Så p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Så för det, låt oss gå tillbaka till kod och införa another-- ja. 577 00:24:02,950 --> 00:24:04,290 Så tillbaka hit. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON Buchholtz-AU: Jag känns som det här är really-- 579 00:24:04,850 --> 00:24:08,105 som bara tittar genom exempel är verkligen sättet att lära sig detta. 580 00:24:08,105 --> 00:24:09,360 Så det är vad vi gör. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Så låt oss låtsas att vi bara vill markera text 2, eller hur? 582 00:24:14,030 --> 00:24:16,530 Så vi kan definitivt inte göra det med ett id. 583 00:24:16,530 --> 00:24:19,620 Tja, vi kan göra det med en id, men det har inte ett id. 584 00:24:19,620 --> 00:24:22,490 Jag skulle kunna lägga till en, men låt oss låtsas att jag inte vill lägga en 585 00:24:22,490 --> 00:24:24,910 eller redan har något annat. 586 00:24:24,910 --> 00:24:26,516 Jag kan inte göra det med det. 587 00:24:26,516 --> 00:24:28,870 Taggen är definitivt inte unikt, rätt? 588 00:24:28,870 --> 00:24:30,670 Och inte heller är klassen. 589 00:24:30,670 --> 00:24:32,314 Men du kan kombinera dessa saker. 590 00:24:32,314 --> 00:24:35,230 Låt oss säga att vi ville göra något som endast gäller för saker som 591 00:24:35,230 --> 00:24:39,420 har klassen särskilda och som har klassen söt. 592 00:24:39,420 --> 00:24:48,150 >> Så vad du kan göra är i main.css, du kan säga, låt oss först ta bort det här. 593 00:24:48,150 --> 00:24:50,240 Du kan kombinera dessa. 594 00:24:50,240 --> 00:24:51,430 Så du kan göra .special. 595 00:24:51,430 --> 00:24:52,110 Inget utrymme. 596 00:24:52,110 --> 00:24:54,770 Bara .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Vad det betyder är något vilket är både speciell och vacker. 598 00:25:00,550 --> 00:25:01,900 Betyder det vettigt? 599 00:25:01,900 --> 00:25:04,190 Och om vi går här, vad du kommer att se 600 00:25:04,190 --> 00:25:09,734 är denna regel gäller endast för andra en, som har båda dessa. 601 00:25:09,734 --> 00:25:11,400 Och du kan göra det för en massa saker. 602 00:25:11,400 --> 00:25:13,270 Du kan säga-- låt oss låtsas att jag bara ville 603 00:25:13,270 --> 00:25:18,300 att göra saker som har klassen ganska och som också är ett stycke tagg. 604 00:25:18,300 --> 00:25:19,920 Så p.pretty. 605 00:25:19,920 --> 00:25:23,585 Låt oss låtsas att jag hade något ganska på taggen kroppen. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Jag kan köra och jag kan se att det är bara 608 00:25:28,490 --> 00:25:32,720 kommer att gälla för det som är stycken med klassen ganska. 609 00:25:32,720 --> 00:25:35,650 Och du kan kombinera dessa, princip, så många du vill. 610 00:25:35,650 --> 00:25:38,580 Så du kan bara sätta ihop dem. 611 00:25:38,580 --> 00:25:39,604 Betyder det vettigt? 612 00:25:39,604 --> 00:25:41,770 ALLISON Buchholtz-AU: So detta är mer användbar typ av 613 00:25:41,770 --> 00:25:45,490 när, var Tomas sade tidigare, kanske du har en mycket komplicerad hemsida, 614 00:25:45,490 --> 00:25:48,050 och du redan har en hel del av dessa regler skrivna, 615 00:25:48,050 --> 00:25:51,170 och du behöver bara kombinera två från förr. 616 00:25:51,170 --> 00:25:55,350 Som istället för att skriva ett helt nya väljare och ändra det där, 617 00:25:55,350 --> 00:25:58,592 Du kan bara kombinera dem där den överlappar. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Eller du kanske hittar out-- ibland 619 00:26:00,670 --> 00:26:04,290 det finns en klass som gör typsnitt färg som blå, 620 00:26:04,290 --> 00:26:06,740 och det finns en annan klass som gör bakgrunden blå. 621 00:26:06,740 --> 00:26:07,840 Och som bara inte kommer att fungera. 622 00:26:07,840 --> 00:26:10,924 Så du skriver ett specialfall, där, like-- men om den har både, vad du är 623 00:26:10,924 --> 00:26:13,548 kommer att göra är att du kommer att gör här en här blå nyans 624 00:26:13,548 --> 00:26:15,310 och här denna andra blå nyans. 625 00:26:15,310 --> 00:26:15,580 Rätt? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON Buchholtz-AU: Bra för dessa typer av undantag. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Så för att tänker på problem 628 00:26:21,220 --> 00:26:25,000 som kan uppstå när man kombinerar dem. 629 00:26:25,000 --> 00:26:27,020 Cool. 630 00:26:27,020 --> 00:26:29,692 Så tillbaka till vår presentation. 631 00:26:29,692 --> 00:26:31,400 ALLISON Buchholtz-AU: Vi är nästan där. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: Och det har slutat att ansluta. 633 00:26:34,022 --> 00:26:36,494 ALLISON Buchholtz-AU: Åh, nej. 634 00:26:36,494 --> 00:26:39,125 ALLISON Buchholtz-AU: CS på kontoret, internet går ner. 635 00:26:39,125 --> 00:26:40,360 Åh, ironin. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Så lyckligtvis vi kan presentera utan internet, antar jag, 637 00:26:45,620 --> 00:26:47,380 eftersom vi har alla bilderna här. 638 00:26:47,380 --> 00:26:49,304 Så låt oss tala om förhållandet för taggar. 639 00:26:49,304 --> 00:26:50,470 ALLISON Buchholtz-AU: Rätt. 640 00:26:50,470 --> 00:26:52,660 Så bara typ att gå off av vad Tomas sagt, 641 00:26:52,660 --> 00:26:54,180 Detta är bara ett annat sätt att göra det. 642 00:26:54,180 --> 00:26:57,840 Så vi har några förälder väljare med ett barn väljare. 643 00:26:57,840 --> 00:27:02,815 Så i detta exempel här, har vi några kropp med en klass navbar, klass knappen. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Åh, förlåt. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON Buchholtz-AU: Och grunden, vad detta betyder 647 00:27:06,180 --> 00:27:11,070 är markera alla barnen, som alla dessa typer av väljare, 648 00:27:11,070 --> 00:27:13,040 inom denna förälder väljare. 649 00:27:13,040 --> 00:27:16,004 Och de är de enda det någonsin kommer att gälla för. 650 00:27:16,004 --> 00:27:17,755 Jag vet inte om du har ett bättre sätt of-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Så jag gissa sätt att tänka 652 00:27:19,504 --> 00:27:22,440 om detta är ihåg innan hur vi sorts gillar sätta ihop dem. 653 00:27:22,440 --> 00:27:26,340 Och då det innebär ett element som matchar alla dessa. 654 00:27:26,340 --> 00:27:29,530 Vad detta säger är, jag vill du matcha allt 655 00:27:29,530 --> 00:27:33,220 inom some-- jag vill dig att hitta en väljare. 656 00:27:33,220 --> 00:27:35,670 Och sedan inom det, jag vill ha dig att matcha nya saker. 657 00:27:35,670 --> 00:27:36,170 Rätt? 658 00:27:36,170 --> 00:27:40,900 Så i CSS, handlar det om sorts att kunna matcha dessa poster. 659 00:27:40,900 --> 00:27:43,050 Och du kan försöka matcha poster inom andra objekt. 660 00:27:43,050 --> 00:27:46,510 >> Så låt oss faktiskt göra ett exempel, och vi tror att det kommer att förtydliga. 661 00:27:46,510 --> 00:27:53,090 Så låt oss låtsas att vi har speciella, speciell söt, oavsett. 662 00:27:53,090 --> 00:27:55,690 Och sedan har vi en länk, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Så kom ihåg, en är en länk. 665 00:28:02,370 --> 00:28:03,900 Det kommer inte att gå någonstans. 666 00:28:03,900 --> 00:28:11,500 Och vi kommer att ge den klassen länken, antar jag. 667 00:28:11,500 --> 00:28:13,335 Låt oss ge den class-- ge mig en idé. 668 00:28:13,335 --> 00:28:14,460 ALLISON Buchholtz-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: Coo-- låt oss går det klass söt. 670 00:28:16,420 --> 00:28:16,930 Varför inte? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON Buchholtz-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: Så just nu vackra saker 673 00:28:23,040 --> 00:28:26,000 kommer att göra bakgrunden blå, bakgrundsfärg på lax. 674 00:28:26,000 --> 00:28:27,969 Det är vettigt. 675 00:28:27,969 --> 00:28:28,760 Och om vi gör this-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON Buchholtz-AU: Vill du lägga till text 677 00:28:29,620 --> 00:28:31,078 så hyperlänken visar faktiskt upp? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Att skulle vara ett bra samtal. 679 00:28:35,088 --> 00:28:37,921 ALLISON Buchholtz-AU: "Orsak höger nu är vi bara gonna får ingenting. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Så det här är en länk. 681 00:28:39,690 --> 00:28:42,202 "Det här är en länk." 682 00:28:42,202 --> 00:28:45,820 Åh, och detta kommer att vara en annan länk. 683 00:28:45,820 --> 00:28:47,280 Låt oss ge den klassen "cool." 684 00:28:47,280 --> 00:28:50,295 Du har rätt. 685 00:28:50,295 --> 00:28:50,795 Cool. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Så just nu ska vi ta tag i detta. 688 00:28:56,010 --> 00:28:57,269 Vi kommer att kasta en. 689 00:28:57,269 --> 00:28:59,060 Vi har en i speciell tagg, och vi också 690 00:28:59,060 --> 00:29:01,150 kommer att ha en i den vackra taggen. 691 00:29:01,150 --> 00:29:05,449 Och just nu vad vi ska göra är att vi ska göra cool-- 692 00:29:05,449 --> 00:29:06,490 Vad vill vi att det ska göra? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON Buchholtz-AU: Kan vi göra den större? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Låt oss ge det en gräns. 696 00:29:13,800 --> 00:29:14,840 ALLISON Buchholtz-AU: Vi kunde gränsar. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Yeah. 698 00:29:15,673 --> 00:29:18,560 Så vi kommer att göra något liknande, gräns är-- och vi är 699 00:29:18,560 --> 00:29:20,971 kommer att förklara allt detta i en sekund. 700 00:29:20,971 --> 00:29:21,470 För now-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON Buchholtz-AU: Till rutan modellen. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Men nu är vi bara kommer att ge det en gräns. 703 00:29:27,300 --> 00:29:29,580 Så vad det betyder är att du är kommer att se dessa länkar. 704 00:29:29,580 --> 00:29:32,788 Och du kommer att se att de har Dessa, liksom, fula svarta kanter, vilket 705 00:29:32,788 --> 00:29:33,820 är coolt. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON Buchholtz-AU: Vår hemsida är så söt. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Yeah. 708 00:29:35,333 --> 00:29:38,930 Vår hemsida är fantastisk. 709 00:29:38,930 --> 00:29:41,585 Så dessa två är länkar, och de verkar. 710 00:29:41,585 --> 00:29:44,160 Nu låtsas jag bara ville göra det här 711 00:29:44,160 --> 00:29:50,072 om det inte var inom något som hade en bakgrund av lax. 712 00:29:50,072 --> 00:29:52,280 Så kom ihåg att detta har en bakgrund av lax, 713 00:29:52,280 --> 00:29:54,000 eftersom det är av klass söt. 714 00:29:54,000 --> 00:29:59,777 >> Men vi vill säga att endast kyler vilket är i klass speciell, inte i klass 715 00:29:59,777 --> 00:30:02,890 söt, bör ha den gränsen. 716 00:30:02,890 --> 00:30:12,549 Tja, vad du kan göra är att du kan säga, .special, utrymme, Kyla. 717 00:30:12,549 --> 00:30:15,590 Och vad det gör, när du tror om det, är det i princip säger, 718 00:30:15,590 --> 00:30:19,530 OK, hitta mig allt som matchar speciellt. 719 00:30:19,530 --> 00:30:24,104 Sen inom dessa taggar, hitta mig allt som är coolt. 720 00:30:24,104 --> 00:30:27,270 ALLISON Buchholtz-AU: Så ett annat sätt som kan vara bra att tänka på detta, 721 00:30:27,270 --> 00:30:29,810 föra den tillbaka till C, är precis som tanken på omfattningen. 722 00:30:29,810 --> 00:30:34,020 Så när du har lite väljare, som de 723 00:30:34,020 --> 00:30:38,460 att vi har jobbat för innan detta, hela din webbsida, alla dina HTML 724 00:30:38,460 --> 00:30:40,180 är inom din räckvidd, eller hur? 725 00:30:40,180 --> 00:30:43,090 Men när vi har dessa förälder-barn relationer, 726 00:30:43,090 --> 00:30:47,130 det är som om du minska ner där du är ute på en viss plats, 727 00:30:47,130 --> 00:30:50,540 som om, liksom, vi ser inom en specifik funktion i stället 728 00:30:50,540 --> 00:30:52,007 av hela vår fil. 729 00:30:52,007 --> 00:30:55,090 PUBLIK: Så med det i åtanke, skulle Det har framhävde om vi hade changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON Buchholtz-AU: Ordningen? 731 00:30:56,423 --> 00:30:59,320 PUBLIK: --Den klass i CSS att Kyla, utrymme, .special? 732 00:30:59,320 --> 00:31:01,153 ALLISON Buchholtz-AU: Ja, för då att 733 00:31:01,153 --> 00:31:04,420 skulle säga, omfattning det till allt som har svalt, 734 00:31:04,420 --> 00:31:07,235 och sedan titta på vad has-- Jag menar, liksom, i det här fallet, 735 00:31:07,235 --> 00:31:08,860 Jag tror inte att det skulle ha ändrat den. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Om vi ​​hade sagt vad? 737 00:31:10,318 --> 00:31:10,906 Ursäkta. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON Buchholtz-AU: Om vi omfattning det svalna och sedan 739 00:31:12,660 --> 00:31:14,550 leta efter saker av speciella, Det skulle vara samma, faktiskt. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Så det skulle inte vara. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON Buchholtz-AU: Det skulle inte? 742 00:31:16,590 --> 00:31:17,590 Åh, jaha. 743 00:31:17,590 --> 00:31:18,090 Jag har fel. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Så anledningen det är different-- gemensam mistake-- 745 00:31:21,480 --> 00:31:27,140 är att just nu bara länken har svalt, eller hur? 746 00:31:27,140 --> 00:31:32,176 Jag antar att min fråga till er är, vad på denna sida matchas av Kyla? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Det finns två taggar här, eller hur? 749 00:31:38,340 --> 00:31:39,770 Vilket är den här och den här. 750 00:31:39,770 --> 00:31:40,590 Båda matcha coolt. 751 00:31:40,590 --> 00:31:42,200 Ingenting gör annat. 752 00:31:42,200 --> 00:31:46,460 Så om du sa, Kyla, utrymme, .special, vad du ska säga är, 753 00:31:46,460 --> 00:31:48,824 inom dessa taggar, vad är speciellt? 754 00:31:48,824 --> 00:31:49,865 ALLISON Buchholtz-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Det är vad det-- rätt. 756 00:31:51,800 --> 00:31:52,310 Eftersom det är som bara något här. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: Så det väljer ingenting. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON Buchholtz-AU: skäl med speciell, vi inom dessa taggar här. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: De och dem. 760 00:31:57,971 --> 00:31:58,512 PUBLIK: OK. 761 00:31:58,512 --> 00:31:58,920 Så dessa taggar från snedstreck? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Ja. 763 00:31:59,740 --> 00:32:01,150 Betyder det vettigt? 764 00:32:01,150 --> 00:32:03,685 Hur det är i princip försöker att begränsa omfattningen. 765 00:32:03,685 --> 00:32:04,810 ALLISON Buchholtz-AU: Yeah. 766 00:32:04,810 --> 00:32:06,870 Jag tror det är förmodligen den enklaste sättet att tänka på det. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Så vi tyckte att det här, och Vi tyckte att det här både matchas speciell. 768 00:32:09,270 --> 00:32:11,400 Och sedan är vi frågar, inom dessa killar, vad är hett? 769 00:32:11,400 --> 00:32:12,941 Och inom den här, den här är coolt. 770 00:32:12,941 --> 00:32:14,500 Inom den här, ingenting är coolt. 771 00:32:14,500 --> 00:32:16,250 Så detta är den enda tagg som återstår. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON Buchholtz-AU: skäl coolt är bara inom dessa a-taggar där. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Exakt. 774 00:32:21,070 --> 00:32:22,403 Och vad som är speciellt inom de? 775 00:32:22,403 --> 00:32:22,930 Ingenting. 776 00:32:22,930 --> 00:32:25,270 Nu, vad jag kommer att säga är om det fanns inget utrymme, 777 00:32:25,270 --> 00:32:29,880 du frågar vad som är coolt och special-- eller vad är ganska och speciellt, eller hur? 778 00:32:29,880 --> 00:32:35,370 Om du säger .special.pretty, det är samma som .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> För vad du tar bort utrymmet är frågar är, när du säger .special, 780 00:32:39,220 --> 00:32:40,970 du frågar, OK, vilka som är speciellt? 781 00:32:40,970 --> 00:32:43,780 Och sedan av dem, vilket dessa är också ganska, 782 00:32:43,780 --> 00:32:47,010 som är densamma, grammatiskt, som frågar, vad är söt, 783 00:32:47,010 --> 00:32:49,500 och sedan för dem, vad är också speciell? 784 00:32:49,500 --> 00:32:50,000 Rätt? 785 00:32:50,000 --> 00:32:53,099 Det är skillnaden i vad är inom det som är. 786 00:32:53,099 --> 00:32:53,640 PUBLIK: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Yeah. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Grymt. 790 00:32:58,030 --> 00:33:00,426 Så med det i åtanke then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON Buchholtz-AU: Jag tror vår sista sak är (i Fancy brittisk accent) 792 00:33:01,800 --> 00:33:02,510 rutan modellen. 793 00:33:02,510 --> 00:33:05,992 >> Tomas REIMERS: Den box-- [småskrattar] Jag älskar hur Allison säger att. 794 00:33:05,992 --> 00:33:06,950 Så rutmodellen sak. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON Buchholtz-AU: Bara ha en låda, jag ska vara din box modell. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Så låt oss prata om det. 797 00:33:11,310 --> 00:33:14,070 Så just nu har vi tillbringat en hel del tid att prata om väljare. 798 00:33:14,070 --> 00:33:16,944 Vid det här laget, ni är förmodligen, liksom, mästare i selectors-- du vet, 799 00:33:16,944 --> 00:33:21,510 exakt hur att välja det innehåll som du vill manipulera på skärmen. 800 00:33:21,510 --> 00:33:24,740 >> Så nu är frågan, hur exakt kan du manipulera den? 801 00:33:24,740 --> 00:33:27,010 Så jag antar att det mest grundläggande sätt att tänka på det 802 00:33:27,010 --> 00:33:30,294 är, väl, vad exakt är ett led i CSS? 803 00:33:30,294 --> 00:33:32,585 Vi har tillbringat mycket tid talar om, vad är en tagg, 804 00:33:32,585 --> 00:33:36,140 eller vad är det mest grundläggande representation av en tagg? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Ett bra sätt att tänka på det vill säga vilken form är laxen? 807 00:33:45,170 --> 00:33:47,295 Vilken form är, typ, lax-färgad bakgrund? 808 00:33:47,295 --> 00:33:47,880 >> PUBLIK: Det är en rektangel. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: Det är en rektangel, eller hur? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON Buchholtz-AU: Var inte en kuggfråga. 811 00:33:50,956 --> 00:33:51,870 [LAUGHTER] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Inte försöker att lura er här sent. 813 00:33:54,670 --> 00:33:57,510 Så vi har denna rektangel. 814 00:33:57,510 --> 00:33:59,140 Och taggen är en p, eller hur? 815 00:33:59,140 --> 00:34:02,280 Så det ger oss bra tron att punkt 816 00:34:02,280 --> 00:34:07,440 representeras som en rektangel vid stone i sinnet av webbläsaren, vilket 817 00:34:07,440 --> 00:34:08,715 det är. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON Buchholtz-AU: Jag menar, webbläsare är vanligtvis rektangulära, 819 00:34:11,423 --> 00:34:13,440 så det är vettigt. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: Tanken här är att alla taggar inom CSS 821 00:34:18,750 --> 00:34:21,790 representeras som en rektangel. 822 00:34:21,790 --> 00:34:25,699 Och varje rektangel har fyra delar enligt CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Du har det faktiska innehållet. 824 00:34:27,830 --> 00:34:29,644 Det är där texten ligger. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON Buchholtz-AU: Kanske din bild. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Yeah. 827 00:34:31,303 --> 00:34:33,860 Du har stoppning, vilket är bara något slags vitt utrymme. 828 00:34:33,860 --> 00:34:35,085 Då har du en gräns. 829 00:34:35,085 --> 00:34:37,710 Och då har du marginal, vilket är blank utanför detta. 830 00:34:37,710 --> 00:34:39,460 Så det är meningslöst till någon, så vi är 831 00:34:39,460 --> 00:34:42,500 kommer att tala om det för en sekund. 832 00:34:42,500 --> 00:34:47,570 Så just här, vad vi ska göra är vi ska skapa några divar, OK? 833 00:34:47,570 --> 00:34:48,420 Ursäkta mig medan I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON Buchholtz-AU: Jag känner gillar Vi bör sätta en söt bild i. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Vi definitivt borde. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON Buchholtz-AU: Jag känner mig som alla 837 00:34:53,389 --> 00:34:54,870 kunde dra nytta av en gullig bild, är allt. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Kan vi alla nytta av en-- 839 00:34:56,774 --> 00:34:57,648 >> PUBLIK: Ja, visst. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, cool. 841 00:34:58,790 --> 00:35:02,254 Så vi bör sätta en söt bild i någonstans. 842 00:35:02,254 --> 00:35:05,295 ALLISON Buchholtz-AU: Jag känner mig som en söt kanin kan vara användbart just nu. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Visst. 844 00:35:06,190 --> 00:35:06,950 ALLISON Buchholtz-AU: Slutet av veckan. 845 00:35:06,950 --> 00:35:07,390 Har något adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: Hur skjutningen en kattunge? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON Buchholtz-AU: En kattunge fungerar också. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, eftersom det finns en plats för det. 849 00:35:11,300 --> 00:35:12,300 Det kallas PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON Buchholtz-AU: Det är utmärkt. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Ja. 852 00:35:15,510 --> 00:35:18,040 ALLISON Buchholtz-AU: Bara för, liksom, platshållare bilder i din webbplats. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Det finns också PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Och det finns PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON Buchholtz-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Verkligen? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Åh, det gör vi inte har tillgång till internet här. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON Buchholtz-AU: [stön] 860 00:35:29,875 --> 00:35:30,375 Tragiskt. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Annars, Jag skulle visa er 862 00:35:32,333 --> 00:35:33,870 hur man sätter bilder på din webbplats. 863 00:35:33,870 --> 00:35:36,370 Vi ska försöka få det här fungerar innan vi måste gå. 864 00:35:36,370 --> 00:35:38,660 Men för nu, vi är bara kommer att tala i färger då. 865 00:35:38,660 --> 00:35:39,820 Vi vill sätta bilder på kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON Buchholtz-AU: Vi gjorde. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --Den internets ner för tillfället är. 868 00:35:43,110 --> 00:35:47,820 Så vi har två divar, och vi är kommer att ge dem två ids. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Vi kommer att kalla det "Första" och "andra". 871 00:35:56,760 --> 00:36:01,184 Så id = "först." 872 00:36:01,184 --> 00:36:02,850 Och vi kommer att ge dem två färger. 873 00:36:02,850 --> 00:36:08,424 Så hur ska vi välja något med ett id "första"? 874 00:36:08,424 --> 00:36:09,840 ALLISON Buchholtz-AU: Dot eller hash? 875 00:36:09,840 --> 00:36:10,730 PUBLIK: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfekt. 877 00:36:12,940 --> 00:36:14,950 Sharp, hash, oavsett we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON Buchholtz-AU: Massor av saker att kalla det. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Vi kommer att bosätta sig på hashtag, och det är vad vi kommer att gå med. 881 00:36:19,800 --> 00:36:20,300 OK? 882 00:36:20,300 --> 00:36:20,735 >> ALLISON Buchholtz-AU: Hashtag. 883 00:36:20,735 --> 00:36:22,340 >> TOMAS REIMERS: Så hashtag första. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON Buchholtz-AU: So du kan twittra den 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 Så vi har "första" och "andra". 890 00:36:33,660 --> 00:36:37,697 Så först, vi kommer att ha en bakgrundsfärg rött. 891 00:36:37,697 --> 00:36:39,030 ALLISON Buchholtz-AU: Öh, kolon. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Japp. 893 00:36:40,281 --> 00:36:42,281 ALLISON Buchholtz-AU: Jag ska vara din plats-checker. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allisons fick mig. 895 00:36:43,960 --> 00:36:45,830 Bakgrund-färg på blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Lila! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Lila. 898 00:36:47,726 --> 00:36:48,830 ALLISON Buchholtz-AU: Ja. 899 00:36:48,830 --> 00:36:50,630 Lila är min favoritfärg, och vi har inte använt den ännu. 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 Det fungerar. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Så vi är kommer att ha två divar. 905 00:36:59,880 --> 00:37:01,654 De kommer att vara helt tomt. 906 00:37:01,654 --> 00:37:03,070 Vi borde nog ha lite text. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Så "första" kommer att vara "HELLO". 909 00:37:09,815 --> 00:37:10,940 Och det "andra" kommer säga-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON Buchholtz-AU: Adjö. 911 00:37:11,110 --> 00:37:12,514 >> Publik: - "världen". 912 00:37:12,514 --> 00:37:14,122 Hej, adjö. 913 00:37:14,122 --> 00:37:16,580 ALLISON Buchholtz-AU: Jag såg dem i samförstånd den andra veckan. 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: För Real. 916 00:37:20,242 --> 00:37:21,200 De är inte så bra. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Jag gillar det inte. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Vi har "Hej" och "GOODBYE." 920 00:37:26,060 --> 00:37:29,102 Och återigen, är CSS bara awesome, eftersom det erkänner våra färger. 921 00:37:29,102 --> 00:37:30,810 Behöver inte ens orolig att de existerar. 922 00:37:30,810 --> 00:37:33,194 De gör. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON Buchholtz-AU: De finns. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Så CSS tror jag har 255 ord för att prata om färg. 925 00:37:39,560 --> 00:37:42,986 Om du kan tänka på en färg utanför de 255, som kommer jag att vara imponerad. 926 00:37:42,986 --> 00:37:44,110 ALLISON Buchholtz-AU: Yeah. 927 00:37:44,110 --> 00:37:45,560 Jag tror att ni kan ha precis kommit in rätt efter. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Så här, ser du att vi har två lådor 929 00:37:47,727 --> 00:37:49,143 ovanpå varandra, eller hur? 930 00:37:49,143 --> 00:37:50,200 Hej och adjö. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON Buchholtz-AU: Det finns inget utrymme i mellan. 932 00:37:51,460 --> 00:37:53,390 De är bara smooshed ovanpå varandra. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Så det första Jag antar att vi borde prata om 934 00:37:55,973 --> 00:38:02,960 är låt oss säga-- också ja. 935 00:38:02,960 --> 00:38:08,020 Så CSS representerar dem som en slags lådor. 936 00:38:08,020 --> 00:38:10,100 Och som boxar, de har innehåll. 937 00:38:10,100 --> 00:38:14,540 Och innehållet är just nu sorts Hello eller adjö och det är det. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Så en av de första saker som du kan göra är att du kan lägga stoppning. 940 00:38:19,790 --> 00:38:25,610 Padding säger hur mycket utrymme Det bör lämna på varje sida. 941 00:38:25,610 --> 00:38:29,200 Så låt oss säga att jag vill ha sagt 10 pixlar på varje sida. 942 00:38:29,200 --> 00:38:31,234 Och jag kommer att dissekera det i en sekund. 943 00:38:31,234 --> 00:38:33,150 ALLISON Buchholtz-AU: Alla dessa saker här 944 00:38:33,150 --> 00:38:36,980 kommer att vara mestadels i pixlar för resten av seminariet. 945 00:38:36,980 --> 00:38:40,980 Du kommer att se att det har lite utrymme runt det, eller hur? 946 00:38:40,980 --> 00:38:46,360 Så vad du inte ser här är att det finns denna osynliga sorts stoppning 947 00:38:46,360 --> 00:38:49,600 på varje sida, som säger, liksom, OK, du har din låda med content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON Buchholtz-AU: Vill du att bara dra upp inspektera elementet? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Ja, det är en bra idé. 950 00:38:53,659 --> 00:38:56,700 ALLISON Buchholtz-AU: Också, tycker jag att inspektera elementet är ett bra sätt 951 00:38:56,700 --> 00:39:01,280 att räkna ut om något händer fel, något oväntat händer, 952 00:39:01,280 --> 00:39:04,570 inspektera taggar och se vad det är som skrivs över är till hjälp. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Så jag är inte säker om ni kan se här färgen. 954 00:39:05,940 --> 00:39:06,470 Kan du? 955 00:39:06,470 --> 00:39:10,120 Du ser den här stoppning på den typ av kanten. 956 00:39:10,120 --> 00:39:13,410 Och sedan ser du den faktiska Innehållet i blått, eller hur? 957 00:39:13,410 --> 00:39:16,820 Så det är mycket grunderna i rutan modellen. 958 00:39:16,820 --> 00:39:17,674 Du har innehåll. 959 00:39:17,674 --> 00:39:18,590 Då har du utfyllnad. 960 00:39:18,590 --> 00:39:20,440 >> PUBLIK: Varför inte du bara Använd rutan inne the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON Buchholtz-AU: Rätt. 962 00:39:21,606 --> 00:39:24,745 Eftersom det bara att välja elementet just nu. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Japp. 964 00:39:26,050 --> 00:39:27,060 Andra saker. 965 00:39:27,060 --> 00:39:29,780 Så låt oss prata om det stoppning kommando för en sekund. 966 00:39:29,780 --> 00:39:36,380 Så i CSS, mätningar måste ha en enhet. 967 00:39:36,380 --> 00:39:39,740 Så först måste beloppet. 968 00:39:39,740 --> 00:39:41,460 Så i det här fallet har vi sagt 10. 969 00:39:41,460 --> 00:39:44,780 Och sedan nästa vi har sagt är pixlar, px. 970 00:39:44,780 --> 00:39:49,160 Andra som du kan ha är saker som centimeter, inches. 971 00:39:49,160 --> 00:39:51,367 Du kan göra saker gillar, vad är 10 inches? 972 00:39:51,367 --> 00:39:52,700 Och det kommer att bli löjligt. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON Buchholtz-AU: Åh, boy. 974 00:39:52,990 --> 00:39:53,460 >> PUBLIK: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS och Allison: Yeah. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Så det är allt utfyllnad. 977 00:39:57,840 --> 00:39:59,255 Jag kommer att gå tillbaka till pixlar. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON Buchholtz-AU: Pixlar tenderar att vara, liksom, standarden. 979 00:40:01,754 --> 00:40:04,589 När man tittar på många webbplatser, de oftast arbetar i pixlar. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Så du kommer att se antingen pixels-- de andra du ser 981 00:40:07,755 --> 00:40:13,952 är em, som är en em är lika med höjden på typsnittet 982 00:40:13,952 --> 00:40:15,160 som du för närvarande använder. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON Buchholtz-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: Det är ett bra sätt att säga, gillar, jag vill ha så mycket utrymme som min typsnitt 986 00:40:20,740 --> 00:40:21,514 är att ta. 987 00:40:21,514 --> 00:40:23,180 ALLISON Buchholtz-AU: Visste inte att. 988 00:40:23,180 --> 00:40:25,747 Man lär sig något nytt varje dag. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Det finns en många mätningar i CS. 990 00:40:27,955 --> 00:40:29,260 Jag föreslår att du leta upp dem. 991 00:40:29,260 --> 00:40:32,122 För alla dina ärenden, tror jag pixlar bör räcka. 992 00:40:32,122 --> 00:40:33,830 Och de är också vad du kommer att se 993 00:40:33,830 --> 00:40:36,520 i de flesta exemplen göras online. 994 00:40:36,520 --> 00:40:38,320 Så vi ska lämna det på pixlar. 995 00:40:38,320 --> 00:40:42,420 >> Du kan också, ska jag säga-- så padding sätter alla av stoppningar. 996 00:40:42,420 --> 00:40:49,789 Du kan också göra något liknande "Padding-top" att bara set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON Buchholtz-AU: Kanske vi kommer att få vår "HELLO" tillbaka. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to bara ställa in stoppning på toppen och ingenting annat. 999 00:40:55,480 --> 00:40:59,560 Så de fyra kommandona padding-top, padding-bottom, padding-vänster, 1000 00:40:59,560 --> 00:41:00,310 och stoppning-höger. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON Buchholtz-AU: Precis som du kan förvänta dig för en låda. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Yeah. 1003 00:41:03,530 --> 00:41:05,240 Inget alltför galet där. 1004 00:41:05,240 --> 00:41:08,230 Betyder det vettigt? 1005 00:41:08,230 --> 00:41:11,990 Så det är stoppning. 1006 00:41:11,990 --> 00:41:14,110 Jag kommer att ställa alla de stoppningar tillbaka till 10. 1007 00:41:14,110 --> 00:41:17,010 Och då kommer jag att gå vidare till gränsen. 1008 00:41:17,010 --> 00:41:21,130 >> Så vad gränsen är är gränsen är en konstig kommando. 1009 00:41:21,130 --> 00:41:24,450 Det tar slags tre saker samtidigt. 1010 00:41:24,450 --> 00:41:28,930 Så det första är hur stor du vill att det ska vara som en mätning. 1011 00:41:28,930 --> 00:41:30,662 Igen, jag bara använder pixlar. 1012 00:41:30,662 --> 00:41:32,620 Och det sista jag bör lägga till mätningar 1013 00:41:32,620 --> 00:41:35,270 är det en sak som behöver inte en enhet är 0. 1014 00:41:35,270 --> 00:41:37,390 Det är faktiskt fel för att ge 0 en enhet, 1015 00:41:37,390 --> 00:41:41,940 eftersom 0 är 0 tvärs inches, pixlar, centimeter, oavsett. 1016 00:41:41,940 --> 00:41:43,960 Det hela betyder bara 0, eller hur? 1017 00:41:43,960 --> 00:41:46,710 Så första du ge det mätningen. 1018 00:41:46,710 --> 00:41:48,650 >> Då kan du ge den stilen. 1019 00:41:48,650 --> 00:41:49,869 Så jag kommer att säga "solid". 1020 00:41:49,869 --> 00:41:51,410 Och vi ska tala om vad det betyder. 1021 00:41:51,410 --> 00:41:54,290 Och sedan slutligen du ge det en färg. 1022 00:41:54,290 --> 00:41:56,850 Så jag kommer att säga "svart". 1023 00:41:56,850 --> 00:41:59,637 Och allt detta är saker vi har nu sett förut, med undantag för stil, 1024 00:41:59,637 --> 00:42:00,720 men vi ska prata om det. 1025 00:42:00,720 --> 00:42:04,120 Så ni har sett mätningar, och du har sett färger. 1026 00:42:04,120 --> 00:42:10,410 Och vad som händer är att vi får detta trevlig svart ram runt det, eller hur? 1027 00:42:10,410 --> 00:42:11,620 Ni ser hur vi gjorde det? 1028 00:42:11,620 --> 00:42:12,760 >> PUBLIK: Ja. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Så vad är det? 1031 00:42:17,370 --> 00:42:19,160 Så först av allt, det är en pixel. 1032 00:42:19,160 --> 00:42:20,880 Det är självklart nog, eller hur? 1033 00:42:20,880 --> 00:42:23,254 Precis, det är en pixel tjock. 1034 00:42:23,254 --> 00:42:26,170 Eller det skulle vara en pixel, men jag är zoomas in, så det är lite mer 1035 00:42:26,170 --> 00:42:26,490 än så. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON Buchholtz-AU: Och vi har detta löjliga upplösning TV. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Yeah. 1038 00:42:29,460 --> 00:42:33,640 Du kan göra det större, mindre, vad som helst. 1039 00:42:33,640 --> 00:42:35,630 Så här är en två-pixel gränsen. 1040 00:42:35,630 --> 00:42:38,810 Du ser att det är dubbelt så tjock. 1041 00:42:38,810 --> 00:42:40,172 Nästa sak du har är färgen. 1042 00:42:40,172 --> 00:42:41,130 Det är inte intressant. 1043 00:42:41,130 --> 00:42:42,710 Jag tänker inte prata om det, egentligen. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON Buchholtz-AU: Men stilen kanske bara lite intressant. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Yeah. 1046 00:42:45,980 --> 00:42:48,560 Så stil, det finns få sådana som jag ser som vanligen används. 1047 00:42:48,560 --> 00:42:55,690 Första ens fasta, nästa ens prickade, och den sista är streckad. 1048 00:42:55,690 --> 00:42:59,290 Och här är prickade. 1049 00:42:59,290 --> 00:43:02,980 Du ser att de är ett gäng prickar, eller hur? 1050 00:43:02,980 --> 00:43:09,030 Ett bra sätt att sorts få en fin gräns gå, streck är också ganska populärt. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON Buchholtz-AU: Och sedan naturligtvis, jag är 1053 00:43:13,600 --> 00:43:16,660 säker på att det finns många andra stilar som du kan få. 1054 00:43:16,660 --> 00:43:20,000 Och vi har en stor uppsättning länkar i slutet för er 1055 00:43:20,000 --> 00:43:23,470 till typ av granska och titta på mer cool CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: Och sedan det sista är vi 1057 00:43:25,954 --> 00:43:27,870 kommer att tala om box modeller riktigt snabbt. 1058 00:43:27,870 --> 00:43:30,070 Åh, och sedan gränsen, precis som stoppning, 1059 00:43:30,070 --> 00:43:33,270 du har också saker som border-vänster, gräns-höger, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, vilket gör att du för att komma åt en specifik gräns. 1061 00:43:37,590 --> 00:43:40,650 Så här är precis gränsen vänster definierad. 1062 00:43:40,650 --> 00:43:43,060 Betyder det vettigt? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON Buchholtz-AU: Det är en cool sätt att betona saker eller lägga 1064 00:43:46,170 --> 00:43:47,545 linjer mellan olika element. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Absolut. 1066 00:43:48,670 --> 00:43:50,940 Så det är vår gräns. 1067 00:43:50,940 --> 00:43:52,790 Och den sista marginal. 1068 00:43:52,790 --> 00:43:55,892 Marginal är som stoppning förutom att det inte är within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON Buchholtz-AU: Det är inte runt elementet 1070 00:43:57,975 --> 00:44:00,840 men faktiskt runt hela box som vi har sett. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Yeah. 1072 00:44:02,770 --> 00:44:04,090 Allison sa det perfekt. 1073 00:44:04,090 --> 00:44:07,550 Det är inte, som, i din inslag, det är runt hela rutan. 1074 00:44:07,550 --> 00:44:10,900 Det betyder saker som bakgrunds gäller inte det. 1075 00:44:10,900 --> 00:44:13,550 Och det i princip säger, gillar, jag vill inte ha något 1076 00:44:13,550 --> 00:44:15,230 i denna mycket utrymme för mig. 1077 00:44:15,230 --> 00:44:17,470 Så som här har vi en marginal på 10 pixlar. 1078 00:44:17,470 --> 00:44:23,100 Så ingenting inom 10 pixlar bör vara bredvid mig. 1079 00:44:23,100 --> 00:44:26,210 Det är typ av dess utrymme men typ av inte. 1080 00:44:26,210 --> 00:44:29,215 Så det är mycket grunderna i rutan modellen. 1081 00:44:29,215 --> 00:44:30,090 Betyder det vettigt? 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 Så nu tror jag att vi bara har våra häftiga resurser 1086 00:44:37,890 --> 00:44:41,220 att vi tar er genom mycket snabbt. 1087 00:44:41,220 --> 00:44:44,815 Och vi ska actually-- väl, har vi internet än? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS Reimers: Låt oss se om jag kan öppna up-- 1089 00:44:47,860 --> 00:44:50,040 låt mig bara se om jag kan få internet snabbt 1090 00:44:50,040 --> 00:44:53,317 medan Allison berättar om någonting Allison vill prata om. 1091 00:44:53,317 --> 00:44:55,150 ALLISON Buchholtz-AU: Så basically-- jag inte 1092 00:44:55,150 --> 00:44:57,930 vet vad jag kan säga på denna punkt. 1093 00:44:57,930 --> 00:45:01,340 Men dessa är några riktigt bra resurser. 1094 00:45:01,340 --> 00:45:04,629 Dessa är de som Tomas och jag har använt 1095 00:45:04,629 --> 00:45:06,420 och att vi faktiskt används för att prep för detta. 1096 00:45:06,420 --> 00:45:09,940 W3Schools är en som du killar skulle ha sett förut. 1097 00:45:09,940 --> 00:45:12,440 Vi rekommenderar det för en massa saker med CSS. 1098 00:45:12,440 --> 00:45:15,060 Jag vet att jag rekommenderar det till min avsnitt hela tiden. 1099 00:45:15,060 --> 00:45:21,050 >> En av de stora saker är att det gör att du kan sorts bråka med CSS 1100 00:45:21,050 --> 00:45:23,830 och se ändringarna omedelbart i detta, 1101 00:45:23,830 --> 00:45:25,920 gillar, visa dubbelfönster som den har. 1102 00:45:25,920 --> 00:45:29,980 Så du behöver inte oroa dig ställa in din egen webbsida, 1103 00:45:29,980 --> 00:45:33,090 eller inrätta vhost i ditt lokala apparaten och lokala värden, 1104 00:45:33,090 --> 00:45:34,980 och att få allt det där fungerar. 1105 00:45:34,980 --> 00:45:36,830 Det är inbäddat rätt inom sidan. 1106 00:45:36,830 --> 00:45:39,042 >> Och det har dessa små lektioner som du kan 1107 00:45:39,042 --> 00:45:40,750 gå igenom för att lära mer om väljare, 1108 00:45:40,750 --> 00:45:44,610 eller lära sig om att manipulera din typsnitt, eller en bakgrund, eller en bild. 1109 00:45:44,610 --> 00:45:46,990 Och du har dessa momentana resultat som du 1110 00:45:46,990 --> 00:45:49,310 behöver inte göra något andra prep arbete för. 1111 00:45:49,310 --> 00:45:51,060 Så jag älskar W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Det är fantastiskt. 1113 00:45:51,960 --> 00:45:52,670 Funkar det? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Yeah. 1115 00:45:52,950 --> 00:45:53,720 Nej, det är inte. 1116 00:45:53,720 --> 00:45:55,636 Vill du att jag ska försöka och starta om datorn? 1117 00:45:55,636 --> 00:45:56,410 Eller vill vi ha att-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON Buchholtz-AU: Jag menar, väl, detta kommer också att vara på nätet. 1119 00:46:01,490 --> 00:46:02,740 Alla bilderna kommer att vara online. 1120 00:46:02,740 --> 00:46:05,470 Så jag bara starkt rekommendera att göra dessa. 1121 00:46:05,470 --> 00:46:07,880 >> Detta är stor som bara som en fusklapp. 1122 00:46:07,880 --> 00:46:10,690 Det är bara alla grundläggande kommandon som du har. 1123 00:46:10,690 --> 00:46:13,070 Det är bra när man är först börjat din webbplats. 1124 00:46:13,070 --> 00:46:15,080 Eftersom kanske du inte vill komma in alla 1125 00:46:15,080 --> 00:46:17,355 den verkliga nitty gritty design tunga grejer. 1126 00:46:17,355 --> 00:46:20,230 Du behöver bara formatera det på ett sätt den typen av vettigt och vilja 1127 00:46:20,230 --> 00:46:21,490 gör för närvarande. 1128 00:46:21,490 --> 00:46:23,580 Och om du verkligen vill att komma in i det, jag vet 1129 00:46:23,580 --> 00:46:27,240 detta är, liksom, en av Tomas favorit referenser. 1130 00:46:27,240 --> 00:46:30,130 Vi använde det till prep, och det är fantastiskt. 1131 00:46:30,130 --> 00:46:33,030 Det är den Utvecklare från Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: Så Mozilla är de människor som gör Firefox. 1133 00:46:36,490 --> 00:46:40,290 Och det är bara deras egna utvecklare referens, vilket jag tycker är fantastisk. 1134 00:46:40,290 --> 00:46:44,870 Och den har en underbar lista över resurser. 1135 00:46:44,870 --> 00:46:45,530 Så vi have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON Buchholtz-AU: Och sedan sista anmärkning är 1137 00:46:48,060 --> 00:46:50,120 när du försöker designa din webbplats, 1138 00:46:50,120 --> 00:46:53,550 hämtar inspiration från saker som du tycker är söt. 1139 00:46:53,550 --> 00:46:56,340 Inspektera element, inspektera källkoden 1140 00:46:56,340 --> 00:46:59,370 kan vara super bra för att försöka lista ut 1141 00:46:59,370 --> 00:47:02,080 hur man styla din egen webbplats. 1142 00:47:02,080 --> 00:47:04,540 >> Ofta känner jag mig som den bästa sätt, förutom experiment, 1143 00:47:04,540 --> 00:47:06,290 är bara att titta på saker som är ganska. 1144 00:47:06,290 --> 00:47:09,810 Jag tycker att det är verkligen svårt att bara sorts designa saker på egen hand, 1145 00:47:09,810 --> 00:47:11,090 speciellt i början. 1146 00:47:11,090 --> 00:47:14,740 Så snälla titta på webbsidor att du gillar att titta på. 1147 00:47:14,740 --> 00:47:16,880 Räkna ut vad som gör dem lockande för dig. 1148 00:47:16,880 --> 00:47:19,170 Och då gärna prova och replikera. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Höger. 1150 00:47:20,410 --> 00:47:23,120 Även som webbplatser så här, kan man se 1151 00:47:23,120 --> 00:47:25,460 det finns definitivt en div i toppen. 1152 00:47:25,460 --> 00:47:29,920 Och då du har en annan div inom här, vilket är CSS Awesomeness. 1153 00:47:29,920 --> 00:47:32,480 Och så har du ett gäng länkar här. 1154 00:47:32,480 --> 00:47:34,770 Om du verkligen bara inspektera element, kan du sortera på 1155 00:47:34,770 --> 00:47:38,520 börja se vad gör hemsidor se ut, och hur kan jag 1156 00:47:38,520 --> 00:47:40,493 åter att om jag ville. 1157 00:47:40,493 --> 00:47:41,890 Betyder det vettigt? 1158 00:47:41,890 --> 00:47:43,670 Så vi har bara tre minuter kvar. 1159 00:47:43,670 --> 00:47:46,380 Så frågor? 1160 00:47:46,380 --> 00:47:47,650 Någon av dem? 1161 00:47:47,650 --> 00:47:48,350 Ja. 1162 00:47:48,350 --> 00:47:50,780 >> PUBLIK: För färgen rektangel, hur skulle du 1163 00:47:50,780 --> 00:47:53,499 have-- om du inte vill ha det går över hela sidan, kunde 1164 00:47:53,499 --> 00:47:56,400 du har gjort det går över bara halva sidan eller bara texten? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Ja, absolut. 1166 00:47:59,660 --> 00:48:02,780 Så låt mig se faktiskt. 1167 00:48:02,780 --> 00:48:04,670 Jag har två idéer. 1168 00:48:04,670 --> 00:48:07,265 Så först av allt, du kan också använda procenthalter. 1169 00:48:07,265 --> 00:48:08,140 >> PUBLIK: Verkligen? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON Buchholtz-AU: Så något att slå upp är relativ positionering. 1171 00:48:11,260 --> 00:48:13,385 Det är något som vi har inte tid att komma in, 1172 00:48:13,385 --> 00:48:16,392 men det är något jag definitivt rekommenderar ni checkar ut. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: So PROCENT. 1174 00:48:17,580 --> 00:48:21,524 Och se hur vi gjorde det bara 50% av bredden? 1175 00:48:21,524 --> 00:48:24,190 ALLISON Buchholtz-AU: Om du faktiskt vet antalet pixlar, 1176 00:48:24,190 --> 00:48:25,780 du kan vara mer exakt på det sättet. 1177 00:48:25,780 --> 00:48:27,200 Du kan pilla runt med den. 1178 00:48:27,200 --> 00:48:27,700 Men 50%. 1179 00:48:27,700 --> 00:48:31,970 Om vi ​​skulle ändra storlek vår webbläsare, Det skulle göra det mindre. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Tja, det är princip 50% just nu, tror jag. 1181 00:48:35,250 --> 00:48:38,820 Det är 50%, och sedan marginalen har lagts till det. 1182 00:48:38,820 --> 00:48:40,100 CSS har en hel del fel. 1183 00:48:40,100 --> 00:48:43,195 Så just nu är 50% av sidans bredd. 1184 00:48:43,195 --> 00:48:46,860 Men kom ihåg att du har 10 pixlar tas bort från varje sida. 1185 00:48:46,860 --> 00:48:49,700 Så om du skulle flytta det mot den vänstra kanten av webbläsaren, 1186 00:48:49,700 --> 00:48:51,550 då skulle det se ut 50%. 1187 00:48:51,550 --> 00:48:53,884 Igen, som jag sa, CSS kan vara en hel del gissning-och-check. 1188 00:48:53,884 --> 00:48:56,049 Liksom, du tror något är kommer att bete sig på ett sätt, 1189 00:48:56,049 --> 00:48:57,805 men den beter sig ett helt annat sätt. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON Buchholtz-AU: Och du bara få smartare, 1191 00:48:59,420 --> 00:49:02,020 och du bara få en bättre intuition för det som du flyttar längs. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: Och det blir värre och värre. 1193 00:49:02,730 --> 00:49:03,496 Så det är egentligen bara en tävling. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON Buchholtz-AU: Det är super uppmuntrande. 1195 00:49:05,454 --> 00:49:07,070 Vi vill att de ska vilja CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS är häftigt. 1197 00:49:08,810 --> 00:49:10,354 Kom ihåg det. 1198 00:49:10,354 --> 00:49:11,020 Övriga frågor? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON Buchholtz-AU: En sak. 1200 00:49:14,297 --> 00:49:14,880 Något annat? 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: Tja, om du killar har några frågor senare, 1204 00:49:18,523 --> 00:49:20,919 vi är alltid tillgängliga som vanligt. 1205 00:49:20,919 --> 00:49:22,960 Du kommer förmodligen se några av oss för slutprojekt 1206 00:49:22,960 --> 00:49:24,280 och definitivt på hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Absolut. 1208 00:49:25,200 --> 00:49:25,720 Och på mässan. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON Buchholtz-AU: Och på mässan. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Ser fram emot att se alla dina awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON Buchholtz-AU: Vi får se alla dina grymma webbplatser 1213 00:49:29,420 --> 00:49:30,572 som kommer att vara vacker. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Du kan alltid se, liksom, de webbplatser 1215 00:49:32,780 --> 00:49:36,234 som hade, liksom, bra CSS och sedan som de som inte försöker göra CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON Buchholtz-AU: Även en annan sak, en sak att undersöka 1217 00:49:39,150 --> 00:49:40,445 är Bootstrapping. 1218 00:49:40,445 --> 00:49:41,805 Så Bootstrap är stor. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google att om dig-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON Buchholtz-AU: Google det. 1221 00:49:43,573 --> 00:49:44,340 Det är fantastiskt. 1222 00:49:44,340 --> 00:49:45,620 Du kommer att älska det. 1223 00:49:45,620 --> 00:49:48,000 Och nu när du har en grundläggande förståelse för CSS, 1224 00:49:48,000 --> 00:49:50,340 det ska göra mycket mer känsla. 1225 00:49:50,340 --> 00:49:50,890 Grymt. 1226 00:49:50,890 --> 00:49:51,480 Tack, killar. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Tack så mycket. 1228 00:49:53,330 --> 00:49:54,219