1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [GIOCO MUSIC] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON Buchholtz-AU: So Siamo fondamentalmente solo andando 5 00:00:12,224 --> 00:00:14,629 per darvi una carrellata di CSS, perché sappiamo 6 00:00:14,629 --> 00:00:16,420 che non era coperto in tutte le sezioni. 7 00:00:16,420 --> 00:00:20,090 E vogliamo davvero fare in modo che si ragazzi hanno questo strumento a vostra disposizione, 8 00:00:20,090 --> 00:00:24,790 perché ha la capacità di rendere i vostri siti web appaiono molto più bella. 9 00:00:24,790 --> 00:00:28,660 >> E se si sta costruendo un sito web, allora probabilmente vuole fare abbastanza. 10 00:00:28,660 --> 00:00:31,372 Voglio dire, non è necessario, ma io suggerirei di esso. [Ride] 11 00:00:31,372 --> 00:00:35,430 Se si desidera che gli utenti lo utilizzano, si potrebbe vuole fare un po 'di [incomprensibile]. 12 00:00:35,430 --> 00:00:39,130 Quindi stiamo andando a cercare di dare solo alcuni strumenti di base e la comprensione, 13 00:00:39,130 --> 00:00:42,340 in modo che quando si va fuori e tu sei ricerca cose su CSS, 14 00:00:42,340 --> 00:00:45,902 non è completa senza senso, come CSS a volte di essere. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Sì. 16 00:00:47,240 --> 00:00:49,930 Allison ha detto abbastanza bene. 17 00:00:49,930 --> 00:00:53,250 Quindi credo che la prima cosa che dovrebbe iniziare con è che cosa sono i CSS? 18 00:00:53,250 --> 00:00:55,750 Così CSS è impressionante. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON Buchholtz-AU: Questo è il nome del nostro seminario. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Sì. 22 00:00:58,434 --> 00:01:00,130 E 'davvero importante che si capisce che per allora. 23 00:01:00,130 --> 00:01:03,090 Se si prende solo una via cosa, è che i CSS, se impressionante. 24 00:01:03,090 --> 00:01:06,180 Due è CSS sta per Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 Quindi al suo interno, CSS è un foglio di stile, che significa 26 00:01:10,380 --> 00:01:13,200 permette per lo stile di una pagina web. 27 00:01:13,200 --> 00:01:16,609 E poi che cosa significa, è un modo per aggiungere stile al tuo sito web. 28 00:01:16,609 --> 00:01:18,900 Così, lo stile, si intende tutto che non è structural-- 29 00:01:18,900 --> 00:01:24,350 quindi le cose come i colori, sfondo immagini, confini, come, imbottitura, 30 00:01:24,350 --> 00:01:25,040 margini. 31 00:01:25,040 --> 00:01:27,310 Parleremo di ciò che tutto ciò significa in un po '. 32 00:01:27,310 --> 00:01:30,110 >> Così abbiamo appena andato avanti e aperto sia di quelli in gedit. 33 00:01:30,110 --> 00:01:32,680 Quindi questo è index.html. 34 00:01:32,680 --> 00:01:34,800 E questo è main.css. 35 00:01:34,800 --> 00:01:36,829 Così main.css non ha nulla. 36 00:01:36,829 --> 00:01:38,412 ALLISON Buchholtz-AU: No stile finora. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Nessuno. 38 00:01:39,245 --> 00:01:42,577 E come vedrete, è un sito davvero brutto. 39 00:01:42,577 --> 00:01:44,160 ALLISON Buchholtz-AU: E 'semplicemente. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Sì. 41 00:01:45,820 --> 00:01:49,150 Sì, non è brutto, è solo minimalista. 42 00:01:49,150 --> 00:01:53,430 E poi qui abbiamo index.html. 43 00:01:53,430 --> 00:01:55,729 E così per un breve recap di HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 si vuole parlare solo di pagina? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON Buchholtz-AU: Sì. 46 00:01:58,395 --> 00:02:01,100 Così, ovviamente, abbiamo il nostro HTML tag, che solo i nomi di file HTML. 47 00:02:01,100 --> 00:02:07,080 Noi abbiamo la nostra intestazione qui, con i CSS Awesomeness, which-- se si va indietro. 48 00:02:07,080 --> 00:02:07,720 Dov'è? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Sì, si può vedere. 51 00:02:10,301 --> 00:02:12,092 ALLISON Buchholtz-AU: E notare l'intestazione 52 00:02:12,092 --> 00:02:14,120 è questa intestazione scheda fino qui. 53 00:02:14,120 --> 00:02:17,130 E poi "Ciao, mondo!" è il testo che abbiamo appena 54 00:02:17,130 --> 00:02:19,620 visualizzazione sul web pagina, che è-- tornare indietro. 55 00:02:19,620 --> 00:02:21,290 Indietro. 56 00:02:21,290 --> 00:02:24,287 Che è solo nel nostro corpo qui-- il testo normale. 57 00:02:24,287 --> 00:02:26,120 Inoltre, una cosa da notare, se si guarda qui, 58 00:02:26,120 --> 00:02:29,410 Tomas commutato up questi due dalla nostra presentazione. 59 00:02:29,410 --> 00:02:32,035 Quindi, fintanto che avete tutti tre di questi, che stai bene. 60 00:02:32,035 --> 00:02:34,044 Essi possono essere in qualsiasi ordine che vogliono. 61 00:02:34,044 --> 00:02:39,368 Che cosa è più importante è proprio questo avete ciascuna di queste tre cose. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Cool. 63 00:02:40,340 --> 00:02:41,111 Aggiungere un tipo doc? 64 00:02:41,111 --> 00:02:42,235 ALLISON Buchholtz-AU: Sì. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Sì. 66 00:02:43,068 --> 00:02:43,769 Freddo. 67 00:02:43,769 --> 00:02:46,102 ALLISON Buchholtz-AU: A quanto pare, i miei microfoni non piace a me. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, ci danno un secondo solo mentre Allison passa fuori il suo microfono. 69 00:02:49,650 --> 00:02:50,500 Quindi sì. 70 00:02:50,500 --> 00:02:52,030 Così abbiamo la nostra pagina principale. 71 00:02:52,030 --> 00:02:53,890 È un po 'senza stile. 72 00:02:53,890 --> 00:02:54,780 Non abbiamo molto. 73 00:02:54,780 --> 00:02:57,110 Non ci resta che fondamentalmente testo. 74 00:02:57,110 --> 00:02:59,470 Abbiamo il foglio di stile. 75 00:02:59,470 --> 00:03:00,220 Abbiamo il titolo. 76 00:03:00,220 --> 00:03:04,020 Quindi, solo bare-disossate componenti rendono un sito web. 77 00:03:04,020 --> 00:03:08,880 >> Quindi da lì, andiamo parlare di ciò che è CSS 78 00:03:08,880 --> 00:03:11,270 e quello che sembra e tutto il resto. 79 00:03:11,270 --> 00:03:12,047 Così per che-- 80 00:03:12,047 --> 00:03:13,755 ALLISON Buchholtz-AU: Torna alle diapositive. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Torna alle diapositive. 82 00:03:15,200 --> 00:03:17,240 E Allison può prendere il sopravvento. 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 Quindi nel tuo file CSS, si sta andando ad avere 86 00:03:22,360 --> 00:03:25,010 un sacco di queste cose chiamate selettori. 87 00:03:25,010 --> 00:03:27,420 Questo sarà solo il base del file CSS. 88 00:03:27,420 --> 00:03:29,480 E 'solo sarà un sacco di questi. 89 00:03:29,480 --> 00:03:30,780 Così selettore. 90 00:03:30,780 --> 00:03:32,649 Questo è solo l'anatomia generale. 91 00:03:32,649 --> 00:03:35,190 Stiamo per passare attraverso esempi, perché se voi ragazzi mai 92 00:03:35,190 --> 00:03:38,400 guardato mia sezione, mi sento come le cose in astratto 93 00:03:38,400 --> 00:03:39,400 in realtà non ha senso. 94 00:03:39,400 --> 00:03:41,110 Aiuta sempre vedere gli esempi. 95 00:03:41,110 --> 00:03:42,420 >> Così abbiamo un po 'di selezione. 96 00:03:42,420 --> 00:03:49,120 Che sta per essere qualche identificatore quello che vogliamo lo stile da applicare. 97 00:03:49,120 --> 00:03:52,220 E allora possiamo avere qualsiasi set di regole e valori. 98 00:03:52,220 --> 00:03:55,680 Così selettori che si potrebbe vedere potrebbe essere qualcosa di simile a corpo, 99 00:03:55,680 --> 00:04:00,262 o paragrafo con P, o intestazione, o qualsiasi altra cosa, 100 00:04:00,262 --> 00:04:02,000 quello che vuoi i tuoi tag HTML per essere. 101 00:04:02,000 --> 00:04:03,570 >> Quindi, in questo caso, abbiamo corpo. 102 00:04:03,570 --> 00:04:06,985 E abbiamo qualche regola, che corrisponde 103 00:04:06,985 --> 00:04:09,610 a che cosa il vostro stile applicato. 104 00:04:09,610 --> 00:04:12,720 Quindi, in questo caso, abbiamo colore di sfondo e del carattere. 105 00:04:12,720 --> 00:04:16,200 Quindi questo sta per cambiare sfondo del nulla 106 00:04:16,200 --> 00:04:19,640 all'interno di qualsiasi tag body del nostro file HTML. 107 00:04:19,640 --> 00:04:22,810 E sta andando a dare è questo valore azzurro. 108 00:04:22,810 --> 00:04:24,820 >> Così sta andando a fare il sfondo azzurro. 109 00:04:24,820 --> 00:04:28,660 E poi qualsiasi cosa all'interno del corpo è andando ad avere un peso grassetto. 110 00:04:28,660 --> 00:04:31,142 Quindi è solo andando a audace tutto il nostro testo. 111 00:04:31,142 --> 00:04:32,970 E questo è solo un selettore. 112 00:04:32,970 --> 00:04:34,680 Ma si potrebbe avere molto molti di questi. 113 00:04:34,680 --> 00:04:38,730 E come stiamo per dimostrare più tardi, un po 'di più sul modo in cui 114 00:04:38,730 --> 00:04:40,709 che funziona e altri esempi lì. 115 00:04:40,709 --> 00:04:41,750 Tutto quello che vuoi aggiungere? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: No. 117 00:04:42,499 --> 00:04:43,500 Allison ottenuto. 118 00:04:43,500 --> 00:04:46,144 Stiamo solo andando a tagliare di un esempio qui sul nostro sito esempio. 119 00:04:46,144 --> 00:04:47,310 Quindi cerchiamo di prendere effettivamente questo. 120 00:04:47,310 --> 00:04:48,620 E 'perfetto. 121 00:04:48,620 --> 00:04:54,460 Così sto solo andando a copiare e incollare tale diritto nel nostro file main.css. 122 00:04:54,460 --> 00:04:56,530 E ho intenzione di salvarlo. 123 00:04:56,530 --> 00:04:59,190 E poi ci eseguirlo. 124 00:04:59,190 --> 00:05:01,600 Nota Così lato, uno dei la maggior parte delle cose frustranti 125 00:05:01,600 --> 00:05:04,490 è che se non si salva un file, e allora, come, ricaricare la pagina, 126 00:05:04,490 --> 00:05:07,450 e come, perché non è il cambiamento accadendo? 127 00:05:07,450 --> 00:05:07,950 Succede. 128 00:05:07,950 --> 00:05:14,230 Così qui abbiamo visto che abbiamo fatto il nostro sito web uno sfondo azzurro 129 00:05:14,230 --> 00:05:16,560 e qualche testo in grassetto. 130 00:05:16,560 --> 00:05:20,730 >> Vorrei anche ricordare, se si ragazzi hanno domande su qualsiasi cosa 131 00:05:20,730 --> 00:05:23,622 stiamo facendo, non esitate liberi di fermarci e chiederci. 132 00:05:23,622 --> 00:05:25,330 Siamo totalmente disposti per rispondere alle domande. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON Buchholtz-AU: Ovviamente, con CSS, tutto si basa su se stessa. 135 00:05:31,930 --> 00:05:34,107 Quindi, se una cosa non lo fa senso ora, abbiamo 136 00:05:34,107 --> 00:05:35,690 non vogliono che a Bog giù più tardi. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Quindi cerchiamo di tipo di sezionare questo. 139 00:05:41,930 --> 00:05:44,210 Quindi vuoi avviare con il selettore qui? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON Buchholtz-AU: Sì. 141 00:05:45,979 --> 00:05:48,270 Come dicevo prima, il corpo è solo il nostro selezionatore qui. 142 00:05:48,270 --> 00:05:50,950 Quindi, se torniamo al nostro ah index--. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: che ho appena chiuso. 144 00:05:53,245 --> 00:05:54,530 Dammi un secondo. 145 00:05:54,530 --> 00:05:58,286 Così 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 Quindi, se si nota qui, avere questi tag body, giusto? 148 00:06:02,710 --> 00:06:06,270 Così il selettore corrisponde solo a i tag che stiamo parlando. 149 00:06:06,270 --> 00:06:07,670 Così il corpo proprio qui. 150 00:06:07,670 --> 00:06:10,315 Quindi quello che stiamo dicendo è everything-- possiamo tornare indietro? 151 00:06:10,315 --> 00:06:12,065 Vorrei poter solo come toccare lo schermo. 152 00:06:12,065 --> 00:06:14,410 Sarebbe molto più fresco. 153 00:06:14,410 --> 00:06:17,150 >> Quindi qualsiasi cosa tra quelle tag body, che abbiamo visto 154 00:06:17,150 --> 00:06:19,637 era proprio, come, il testo, e il corpo in generale 155 00:06:19,637 --> 00:06:20,970 si riferisce a, come, lo sfondo. 156 00:06:20,970 --> 00:06:22,720 Se vi capitasse di voler cambiare lo sfondo, 157 00:06:22,720 --> 00:06:25,090 che sta per essere in un tag body. 158 00:06:25,090 --> 00:06:27,120 Appena ha queste regole applicate a loro. 159 00:06:27,120 --> 00:06:32,040 >> Quindi, se dovessimo andare a index.html e- realtà, 160 00:06:32,040 --> 00:06:33,840 possiamo avere qualcosa al di fuori del corpo? 161 00:06:33,840 --> 00:06:37,340 Se avessimo, come, un piè di pagina o qualcosa, non si applica a questo. 162 00:06:37,340 --> 00:06:40,900 Ma qualsiasi cosa all'interno questi tag corpo sta 163 00:06:40,900 --> 00:06:44,960 di essere colpiti da questo organismo selettore che abbiamo fatto. 164 00:06:44,960 --> 00:06:47,405 Quindi, se si digita qualcos'altro there-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Facciamo comprendere il rischio. 166 00:06:49,400 --> 00:06:55,330 Quindi, se abbiamo avuto un div-- così che è solo un altro tag si può avere. 167 00:06:55,330 --> 00:06:56,350 Io vado per chiuderla. 168 00:06:56,350 --> 00:06:58,280 O facciamo questo un paragrafo. 169 00:06:58,280 --> 00:07:01,430 Così p sta per paragrafo. 170 00:07:01,430 --> 00:07:02,560 E all'interno di tale paragrafo. 171 00:07:02,560 --> 00:07:05,650 E allora io dico, "Questo è il testo." 172 00:07:05,650 --> 00:07:06,369 Freddo. 173 00:07:06,369 --> 00:07:09,160 E poi ho fatto questa regola si applica a un paragrafo invece del corpo. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Vedrai come si applica solo alle il punto di recente formazione, a destra, 176 00:07:17,320 --> 00:07:18,892 non il tutto. 177 00:07:18,892 --> 00:07:20,090 Questo fa senso? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON Buchholtz-AU: Quindi questo è tutto il corpo, 179 00:07:21,840 --> 00:07:24,450 ma ora il nostro selezionatore solo corrisponde al paragrafo. 180 00:07:24,450 --> 00:07:27,050 Quindi non ci resta che audace e blu per questo specifico paragrafo, 181 00:07:27,050 --> 00:07:30,760 perché questa è l'unica cosa che è racchiuso all'interno del tag p. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Ha senso genere di come le cose incapsulare altre cose? 183 00:07:35,349 --> 00:07:38,140 ALLISON Buchholtz-AU: Inoltre, basta a dire, come, uno dei modi migliori 184 00:07:38,140 --> 00:07:40,889 per ottenere davvero confortevole con i CSS è di fare proprio le cose in questo modo, 185 00:07:40,889 --> 00:07:42,050 basta provare. 186 00:07:42,050 --> 00:07:46,700 E 'molto semplice da digitare qualcosa out, ha colpito Refresh, e vedere cosa succede. 187 00:07:46,700 --> 00:07:48,940 E come con la maggior parte CS, sperimentazione può spesso 188 00:07:48,940 --> 00:07:51,790 portare ad una migliore comprensione intuitiva. 189 00:07:51,790 --> 00:07:54,432 Ancor più che noi semplicemente, come, parlare con te. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Assolutamente 100% d'accordo su questo punto. 191 00:07:58,350 --> 00:08:02,430 Quindi, se torniamo a questo, cominciamo dissezione esattamente ciò che questi due fanno. 192 00:08:02,430 --> 00:08:04,550 Quindi abbiamo due regole in questo. 193 00:08:04,550 --> 00:08:07,420 Quindi il primo è il colore di sfondo. 194 00:08:07,420 --> 00:08:10,590 E si vede che abbiamo impostiamo pari ad un valore, azzurro. 195 00:08:10,590 --> 00:08:15,009 >> Così in CSS, CSS è sorta di molto sciolto su come 196 00:08:15,009 --> 00:08:16,300 si è permesso di definire il colore. 197 00:08:16,300 --> 00:08:17,800 Così li può definire in base al nome. 198 00:08:17,800 --> 00:08:20,650 Si può anche fare qualcosa di simile a "rosso". 199 00:08:20,650 --> 00:08:25,270 E poi se andiamo di nuovo a questo, vedrai che lo sfondo è rosso. 200 00:08:25,270 --> 00:08:29,040 È inoltre possibile ottenere really-- te credo può ottenere abbastanza creativo con questo, 201 00:08:29,040 --> 00:08:29,540 non si può? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON Buchholtz-AU: I pensa di poter utilizzare esadecimale. 203 00:08:31,170 --> 00:08:31,250 No? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Sì. 205 00:08:32,083 --> 00:08:32,969 Quindi è possibile utilizzare esadecimale. 206 00:08:32,969 --> 00:08:34,490 Ma sto pensando nome-saggio. 207 00:08:34,490 --> 00:08:35,385 Non sono lì? 208 00:08:35,385 --> 00:08:37,260 ALLISON Buchholtz-AU: Si può fare un bel po '. 209 00:08:37,260 --> 00:08:43,350 Più o meno come la maggior parte i colori che si può nome-- come, credo che il salmone è uno. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Noi stiamo andando provare il salmone. 211 00:08:45,322 --> 00:08:47,530 ALLISON Buchholtz-AU: I pensare chartreuse è in là. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Sì. 213 00:08:48,050 --> 00:08:48,550 Vedi? 214 00:08:48,550 --> 00:08:50,080 Così si può ottenere abbastanza creativo. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON Buchholtz-AU: Lei potrebbe diventare piuttosto creativo. 216 00:08:52,246 --> 00:08:55,750 Come, se si può pensare di nome del colore, probabilmente in là. 217 00:08:55,750 --> 00:08:57,840 Se si vuole veramente bene dettaglio, si può andare hex. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Sì. 219 00:08:58,673 --> 00:08:59,390 Così esadecimale. 220 00:08:59,390 --> 00:09:05,280 Se voi ragazzi ricordo questo ritorno dal vecchio PSET, Immagine Recover, 221 00:09:05,280 --> 00:09:08,300 voi ragazzi avevano a che fare con questi valori esadecimali. 222 00:09:08,300 --> 00:09:15,280 E una sorta di ricapitolare ciò che è, esagono ha tre valori memorizzati in esso. 223 00:09:15,280 --> 00:09:17,250 Quindi è in gruppi di due incrementi. 224 00:09:17,250 --> 00:09:19,300 I primi due rappresentano il valore rossa. 225 00:09:19,300 --> 00:09:22,420 Il secondo rappresenta il valore verde. 226 00:09:22,420 --> 00:09:25,020 E l'ultima è blu? 227 00:09:25,020 --> 00:09:30,050 >> Così FF succede a rappresentare un esadecimale 255. 228 00:09:30,050 --> 00:09:35,480 In modo da avere 255 rosso, 255 verde e 0 per il blu. 229 00:09:35,480 --> 00:09:37,670 E i valori compresi tra 0 e 255. 230 00:09:37,670 --> 00:09:38,350 >> AUDIENCE: Giusto. 231 00:09:38,350 --> 00:09:41,472 Quindi, in sostanza, si potrebbe cercare Internet per tutto il colore che vogliamo, 232 00:09:41,472 --> 00:09:43,912 e identificare la realtà conosciuta combo spettro dei colori, 233 00:09:43,912 --> 00:09:45,130 e allora potremmo mettere in? 234 00:09:45,130 --> 00:09:46,380 ALLISON Buchholtz-AU: Esattamente. 235 00:09:46,380 --> 00:09:52,900 In modo da avere più o meno il controllo completo sopra i colori che volete all'interno di CSS. 236 00:09:52,900 --> 00:09:55,069 Stiamo andando a parlare immagini di sfondo più tardi? 237 00:09:55,069 --> 00:09:56,110 O vogliamo farlo? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Sì. 239 00:09:56,240 --> 00:09:57,010 Assolutamente. 240 00:09:57,010 --> 00:10:00,830 Quindi, prima, solo per dimostrare che rosso e verde è giallo. 241 00:10:00,830 --> 00:10:03,120 E se avete bisogno di un po ' aiuto per trovare questo, 242 00:10:03,120 --> 00:10:05,575 può Google qualcosa come "selettore colore." 243 00:10:05,575 --> 00:10:07,200 ALLISON Buchholtz-AU: Oh, è così buono. 244 00:10:07,200 --> 00:10:09,090 Amo Color Picker. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com è un buon esempio. 246 00:10:11,360 --> 00:10:14,580 E qui, vedrete che avete un selettore di colori di Photoshop come pieno. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON Buchholtz-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Inoltre, le cose interessanti sono voi può generare combinazioni di colori 249 00:10:16,980 --> 00:10:18,896 in modo che non avete, come, scontrandosi colori. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: E poi ecco il valore esadecimale qui. 251 00:10:22,780 --> 00:10:27,800 Così si può sempre trovare on-line in fondo luoghi per ottenere il valore esadecimale. 252 00:10:27,800 --> 00:10:31,667 Non è una sorta di che, proprio, come, noi vedere i colori del mondo in numero. 253 00:10:31,667 --> 00:10:34,000 E 'più che andiamo in linea e scopriamo che colore che vogliamo, 254 00:10:34,000 --> 00:10:36,850 e poi prendere il numero verso il basso. 255 00:10:36,850 --> 00:10:39,590 Perché è solo una davvero facile modo per fare riferimento le cose in CS. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON Buchholtz-AU: E poi c'è also-- 257 00:10:40,350 --> 00:10:41,630 Non ricordo il nome esatto del sito. 258 00:10:41,630 --> 00:10:43,838 Ma c'è sicuramente, ho pensare, qualcosa da Adobe 259 00:10:43,838 --> 00:10:48,350 che genera combinazioni di colori per voi, che è davvero cool, perché si 260 00:10:48,350 --> 00:10:50,580 definitely-- a volte difficile da capire, 261 00:10:50,580 --> 00:10:53,729 oh, se voglio usare questo colore, quello che potrebbe essere un altro utile 262 00:10:53,729 --> 00:10:56,395 utilizzare altrove sul mio sito, come, rendono piacevole e coeso. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison di parlare uno per Adobe Kuler chiamato, credo. 265 00:11:04,260 --> 00:11:04,885 E 'K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON Buchholtz-AU: Penso di sì. 267 00:11:06,259 --> 00:11:07,610 Sono abbastanza sicuro che è quello. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: Il mio preferito è sempre 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: Quale è now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON Buchholtz-AU: Ah, questo è bello. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: E voi può sostanzialmente dire, come, 273 00:11:18,818 --> 00:11:21,700 Voglio tre colori accanto all'altro. 274 00:11:21,700 --> 00:11:25,030 E poi facciamo qualcosa di bello. 275 00:11:25,030 --> 00:11:29,210 E allora si può ottenere un esempio di quello che potrebbe sembrare. 276 00:11:29,210 --> 00:11:32,470 E poi se si passa su qualsiasi loro, ti dà il valore esadecimale. 277 00:11:32,470 --> 00:11:35,010 >> Così come un buon modo per iniziare pensando di combinazioni di colori 278 00:11:35,010 --> 00:11:39,570 o che colori in un sito web potrebbe andare bene insieme. 279 00:11:39,570 --> 00:11:45,655 Perché questo può essere sorprendentemente non facile da prendere come si pensa. 280 00:11:45,655 --> 00:11:48,280 E poi l'altra cosa interessante Ho sempre trovato su questo sito 281 00:11:48,280 --> 00:11:51,480 è se si colpisce esempi, sarà mostrare ciò che un sito esempio 282 00:11:51,480 --> 00:11:54,800 potrebbe apparire come l'utilizzo di quella combinazione di colori. 283 00:11:54,800 --> 00:11:56,270 Comunque. 284 00:11:56,270 --> 00:11:57,863 >> Torna alla CSS reale. 285 00:11:57,863 --> 00:12:01,112 ALLISON Buchholtz-AU: Ma, ovviamente, abbiamo Conosco questi riferimenti potrebbero essere utili. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: No, sicuramente può essere utile. 287 00:12:03,195 --> 00:12:04,720 Quindi la seconda regola, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON Buchholtz-AU: Sì. 289 00:12:05,844 --> 00:12:08,280 La seconda regola è solo corrispondente al nostro carattere. 290 00:12:08,280 --> 00:12:11,520 Così il peso del carattere è solo gentile di-- modo che il peso sarebbe 291 00:12:11,520 --> 00:12:15,220 essere se si desidera solo, come, normale o, come, i caratteri più sottili, 292 00:12:15,220 --> 00:12:17,251 o in questo caso, come, audace. 293 00:12:17,251 --> 00:12:17,750 Ho dimenticato. 294 00:12:17,750 --> 00:12:21,557 Qual è il se si voleva it-- è lì uno più sottile di un semplice, come normale? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: Io in realtà non sapere se c'è uno più sottile. 296 00:12:24,140 --> 00:12:24,680 ALLISON Buchholtz-AU: non ricordo. 297 00:12:24,680 --> 00:12:26,300 Così il peso del carattere abbiamo in genere basta usare per il grassetto. 298 00:12:26,300 --> 00:12:29,010 Se si vuole ottenere davvero in esso, andiamo a mostrarvi. 299 00:12:29,010 --> 00:12:34,317 W3Schools ha tutte le diverse cose che si possono fare per i font. 300 00:12:34,317 --> 00:12:36,900 Ma in fondo, se volete mai cambiare nulla di font, 301 00:12:36,900 --> 00:12:39,330 sta andando sempre essere, come, font-qualcosa. 302 00:12:39,330 --> 00:12:43,450 Così sarà come, font-family se siete cercando di cambiare il tipo effettivo. 303 00:12:43,450 --> 00:12:47,390 Sarà font-style se vogliono farlo come corsivo, 304 00:12:47,390 --> 00:12:49,710 o corsivo, o roba del genere. 305 00:12:49,710 --> 00:12:53,570 O anche font-color, se abbiamo deciso di cambiare la situazione. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 Così si può cambiare la situazione. 308 00:12:56,925 --> 00:12:59,360 E una sorta di proprio per recap ora, in modo da poter 309 00:12:59,360 --> 00:13:01,400 vedere che abbiamo il selettore qui. 310 00:13:01,400 --> 00:13:03,000 Abbiamo questi parentesi graffe. 311 00:13:03,000 --> 00:13:06,735 E poi abbiamo delle regole delimitato da punti e virgola. 312 00:13:06,735 --> 00:13:08,100 Questo fa senso? 313 00:13:08,100 --> 00:13:09,130 Sì? 314 00:13:09,130 --> 00:13:10,500 Freddo. 315 00:13:10,500 --> 00:13:13,200 Quindi, se questo è buono-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON Buchholtz-AU: Back. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Parliamo specificamente su che tipo di selettori che abbiamo. 318 00:13:17,590 --> 00:13:19,790 Perche 'in questo momento che abbiamo sorta di appena mostrato tags. 319 00:13:19,790 --> 00:13:21,696 Ma voi ragazzi poteste vedere plausibile. 320 00:13:21,696 --> 00:13:23,570 Diciamo che sono due punti su una pagina e si 321 00:13:23,570 --> 00:13:26,087 vogliono essere in grado di stile uno ma non l'altro, 322 00:13:26,087 --> 00:13:29,170 non si vuole solo limitarsi di dover utilizzare diversi HTML reale 323 00:13:29,170 --> 00:13:33,410 tag per dare loro diversi stili. 324 00:13:33,410 --> 00:13:35,995 >> Quindi abbiamo tre di base tipi di selettori. 325 00:13:35,995 --> 00:13:37,120 ALLISON Buchholtz-AU: Sì. 326 00:13:37,120 --> 00:13:39,828 Così abbiamo tag, che è ciò che abbiamo parlato in questo momento. 327 00:13:39,828 --> 00:13:42,430 Ecco, questo è un po 'come il vostro corpo o p. 328 00:13:42,430 --> 00:13:46,280 E poi abbiamo una classe, che è quando lo definiamo nel nostro file CSS, 329 00:13:46,280 --> 00:13:49,907 sta andando sempre essere dot, a prescindere si desidera che il nome della classe per essere. 330 00:13:49,907 --> 00:13:51,490 E questo può essere applicato a più cose. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Dire che hai cinque paragrafi e due dei tre 333 00:13:57,610 --> 00:14:00,580 devono essere in stile stesso, si dovrebbe applicare una classe ad esso. 334 00:14:00,580 --> 00:14:03,040 E questo è solo il modo in cui lo facciamo. 335 00:14:03,040 --> 00:14:05,600 Vi daremo un esempio di dove questo in realtà si presenta. 336 00:14:05,600 --> 00:14:11,030 Ma se si ha forse qualche tag p, dopo che, si dovrebbe scrivere, 337 00:14:11,030 --> 00:14:14,170 classe uguale qualunque classi si vuole applicare ad esso. 338 00:14:14,170 --> 00:14:19,280 Quindi, qualunque selettori di classe che vogliamo di applicare al presente paragrafo specifico, 339 00:14:19,280 --> 00:14:21,300 potremmo scrivere come questo. 340 00:14:21,300 --> 00:14:24,080 Certo, penso che un esempio renderà molto più concreto. 341 00:14:24,080 --> 00:14:27,270 >> L'altro abbiamo è id, che indicheremo 342 00:14:27,270 --> 00:14:29,707 con un hash, o cancelletto, o hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: cancelletto. 344 00:14:30,790 --> 00:14:32,430 ALLISON Buchholtz-AU: cancelletto. 345 00:14:32,430 --> 00:14:34,550 Che funziona, anche. 346 00:14:34,550 --> 00:14:36,640 E questo dovrebbe essere davvero unico. 347 00:14:36,640 --> 00:14:39,880 Essi dovrebbero applicarsi solo alle una cosa sulla tua pagina. 348 00:14:39,880 --> 00:14:43,820 Quindi, se questo è un paragrafo specifico, o qualche elemento in una lista, o qualsiasi altra cosa, 349 00:14:43,820 --> 00:14:45,090 questo dovrebbe essere unico. 350 00:14:45,090 --> 00:14:48,730 E nello stesso modo che solo dire, come, class = "Class1 class2," 351 00:14:48,730 --> 00:14:51,577 questo può essere solo id di ciò che abbiamo. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Sì. 353 00:14:52,410 --> 00:14:54,330 Quindi cerchiamo di parlare sicuramente su esempi qui. 354 00:14:54,330 --> 00:14:58,170 E sto solo andando a tuffarsi subito indietro nel codice. 355 00:14:58,170 --> 00:15:02,090 Quindi diamo un'occhiata al nostro HTML. 356 00:15:02,090 --> 00:15:03,960 E così abbiamo adesso abbiamo un paragrafo. 357 00:15:03,960 --> 00:15:05,510 Questo è il testo. 358 00:15:05,510 --> 00:15:09,151 Sto solo andando a modificare esso. "Questo è un testo 1." 359 00:15:09,151 --> 00:15:11,150 E poi andremo a avere un "Questo è il testo 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON Buchholtz-AU: secondo. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 Così ora abbiamo "Questo è il testo 2," giusto? 363 00:15:16,810 --> 00:15:21,560 E stiamo andando a vedere che se ricarichiamo Nella pagina, quello che stiamo andando a trovare 364 00:15:21,560 --> 00:15:23,067 è che stiamo andando 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: Sì. 367 00:15:24,983 --> 00:15:27,570 Andiamo a trovare un "Questo è text 1 "e" Questo è il testo 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON Buchholtz-AU: E colore giallo fuori incantevole. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: E vedrai che il nostro selector in questo momento, 370 00:15:31,066 --> 00:15:34,940 che si applica a p di, o punti, colpisce entrambi, 371 00:15:34,940 --> 00:15:38,700 perché entrambi incontrano il condizione che sono entrambi un tag p. 372 00:15:38,700 --> 00:15:40,360 Questo ha un senso totale. 373 00:15:40,360 --> 00:15:43,340 Quindi la domanda è, beh, cosa se volessimo ottenere solo uno? 374 00:15:43,340 --> 00:15:46,350 Quindi, esattamente come Allison stava dicendo, abbiamo altri due modi per farlo. 375 00:15:46,350 --> 00:15:47,320 Ho intenzione di iniziare con id. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON Buchholtz-AU: Cominciamo con id. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: Ed entrambi di questi sono attributi. 378 00:15:50,405 --> 00:15:53,200 Quindi esistono attributi in HTML. 379 00:15:53,200 --> 00:15:55,600 E quello che sono è qualcosa che si aggiunge 380 00:15:55,600 --> 00:15:58,840 all'interno del tag, che è separato dal nome del tag. 381 00:15:58,840 --> 00:16:01,301 Così si può avere più attributi. 382 00:16:01,301 --> 00:16:01,800 Sì? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON Buchholtz-AU: Stavo per dire, dal vostro esempio da PSET 7, 384 00:16:03,950 --> 00:16:06,650 se qualcuno di voi cercare di allineare cose per il centro, 385 00:16:06,650 --> 00:16:08,550 si potrebbe avere usato "Text align = center." 386 00:16:08,550 --> 00:16:10,550 E avete notato probabilmente avrebbe centrato 387 00:16:10,550 --> 00:16:12,650 il testo o la vostra barra di navigazione. 388 00:16:12,650 --> 00:16:15,499 Ecco, questo è solo anche un attributo che si potrebbe avere familiarità con. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: C'è un mucchio di attributi che vedrete. 390 00:16:18,040 --> 00:16:18,539 Sì. 391 00:16:18,539 --> 00:16:21,250 Come buon riferimento per PSET 7. 392 00:16:21,250 --> 00:16:23,150 Abbiamo id. 393 00:16:23,150 --> 00:16:25,080 Si può anche avere classe, cose come questa. 394 00:16:25,080 --> 00:16:27,250 Un singolo tag può avere molti attributi. 395 00:16:27,250 --> 00:16:33,140 Quindi partendo da id, facciamo finta che vogliono avere un id di-- Non lo so. 396 00:16:33,140 --> 00:16:35,140 Chiameremo speciale, perché questo, siamo 397 00:16:35,140 --> 00:16:37,867 andando a fare in grassetto, e sottolineare, e quant'altro. 398 00:16:37,867 --> 00:16:39,950 ALLISON Buchholtz-AU: E ' Sara 'super-speciale. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: Quindi questo uno, abbiamo id speciale. 400 00:16:42,360 --> 00:16:48,140 Quindi il modo per selezionare che, poi, è in main.css, piuttosto che avere un tag p, 401 00:16:48,140 --> 00:16:51,500 fate #special, OK? 402 00:16:51,500 --> 00:16:55,538 E che seleziona il cosa con id speciale. 403 00:16:55,538 --> 00:16:57,295 Questo senso a tutti? 404 00:16:57,295 --> 00:16:57,920 PUBBLICO: Sì. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Cool. 406 00:16:59,110 --> 00:17:04,440 Così ora se andiamo indietro, ci see-- whoops. 407 00:17:04,440 --> 00:17:06,240 Sì. 408 00:17:06,240 --> 00:17:09,460 Vedremo che solo seleziona quello con id speciale. 409 00:17:09,460 --> 00:17:10,622 Sì? 410 00:17:10,622 --> 00:17:11,900 Suoni fresco. 411 00:17:11,900 --> 00:17:12,570 Sì. 412 00:17:12,570 --> 00:17:15,456 >> AUDIENCE: Può qualcosa avere un attribuire sia di classe e un id? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Sì. 414 00:17:16,359 --> 00:17:16,900 AUDIENCE: OK. 415 00:17:16,900 --> 00:17:20,887 E poi che cosa succede se poi dare che alcune regole di CSS che il conflitto? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Assolutamente. 417 00:17:21,970 --> 00:17:23,940 Stiamo sicuramente andando per parlare di questo. 418 00:17:23,940 --> 00:17:31,890 Quindi esattamente che cosa stavate ottenendo a, si può anche avere classi. 419 00:17:31,890 --> 00:17:36,380 Quindi cerchiamo di far finta che avevo tre paragrafi e I 420 00:17:36,380 --> 00:17:38,730 voluto per lo stile al primo due ma non il terzo. 421 00:17:38,730 --> 00:17:42,850 Beh, la prima idea potrebbe essere, beh, io potrebbe solo dare il secondo un id. 422 00:17:42,850 --> 00:17:45,590 Ma non si può, perché un id, esattamente come Allison stava dicendo, 423 00:17:45,590 --> 00:17:47,330 deve essere univoco. 424 00:17:47,330 --> 00:17:50,860 >> Così, invece di un id, quello che si possibile utilizzare è possibile utilizzare una classe. 425 00:17:50,860 --> 00:17:57,880 E un class-- quello che permette di fare è fondamentalmente dire, 426 00:17:57,880 --> 00:17:59,610 questo appartiene come parte di un gruppo. 427 00:17:59,610 --> 00:18:02,410 In questo caso, il nostro gruppo è chiamato Special. 428 00:18:02,410 --> 00:18:06,500 E quello che andremo a fare, allora è stiamo andando a say-- piuttosto che libbra, 429 00:18:06,500 --> 00:18:08,070 stiamo andando a utilizzare dot. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 E notare che la sterlina e dot esistere solo all'interno del file CSS, 432 00:18:11,950 --> 00:18:12,797 non all'interno del codice HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON Buchholtz-AU: Sì. 434 00:18:13,880 --> 00:18:15,185 Distinzione importante. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Ho avuto così tanto lottare, 436 00:18:17,510 --> 00:18:23,990 perché ho messo l'hash del HTML e poi appena sentito stupido per un lungo periodo. 437 00:18:23,990 --> 00:18:27,470 Vedi come seleziona entrambi quelli con quella classe? 438 00:18:27,470 --> 00:18:28,210 Freddo. 439 00:18:28,210 --> 00:18:29,950 >> Ora, le cose possono avere più classi. 440 00:18:29,950 --> 00:18:32,790 Diciamo che ho voluto fare il primo due hanno uno sfondo giallo 441 00:18:32,790 --> 00:18:36,770 e la seconda due hanno un colore del carattere di blu. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Io in realtà non so perché mi piacerebbe volerlo fare, ma posso. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON Buchholtz-AU: potrebbe non raccomandato per il tuo sito. 445 00:18:42,401 --> 00:18:43,880 Ma per i nostri scopi, lo farà. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Non è una buona combinazione di colori. 447 00:18:46,294 --> 00:18:49,210 ALLISON Buchholtz-AU: Beh, giallo e blu sono i miei colori delle scuole superiori. 448 00:18:49,210 --> 00:18:50,947 Non lo so, però. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison alta scuola aveva un sistema di grande colore. 450 00:18:53,530 --> 00:18:54,520 [Risate] 451 00:18:54,520 --> 00:18:59,120 Allora quello che possiamo chiamare questo è Chiamiamo questo-- quindi abbiamo Special 452 00:18:59,120 --> 00:19:00,030 e abbiamo abbastanza. 453 00:19:00,030 --> 00:19:02,405 Suggerisco, per questo, si utilizza nomi più descrittivi. 454 00:19:02,405 --> 00:19:05,820 ALLISON Buchholtz-AU: Sì, lo farei chiamare questo, come, giallo o blu. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: Non siamo davvero facendo un vero e proprio sito web, 456 00:19:08,314 --> 00:19:09,730 che è il motivo per cui non stiamo facendo. 457 00:19:09,730 --> 00:19:11,521 Ma se effettivamente ha avuto un vero e proprio sito web, voi 458 00:19:11,521 --> 00:19:16,220 potrebbe avere, come, intestazione articolo, contenuto dell'articolo, prima parola, 459 00:19:16,220 --> 00:19:21,920 cose del genere, che permettono di essere molto più descrittivo. 460 00:19:21,920 --> 00:19:23,550 Questi sono in realtà solo come variabili. 461 00:19:23,550 --> 00:19:28,390 Essi devono essere denominati in modo in cui è possibile, like-- sì, in quanto tale. 462 00:19:28,390 --> 00:19:29,470 Perfetto. 463 00:19:29,470 --> 00:19:30,480 >> Così il colore di sfondo. 464 00:19:30,480 --> 00:19:35,920 E poi andremo a say-- così il modo per cambiare colore è solo "colore". 465 00:19:35,920 --> 00:19:38,412 E stiamo andando a renderlo blu. 466 00:19:38,412 --> 00:19:40,150 Questo è figo. 467 00:19:40,150 --> 00:19:42,640 Così ora abbiamo il primi due hanno di speciale. 468 00:19:42,640 --> 00:19:45,972 Il prossimo sta andando a hanno "class = abbastanza." 469 00:19:45,972 --> 00:19:49,180 ALLISON Buchholtz-AU: e poi ti voglio aggiungere "abbastanza" per quello centrale. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 E poi quello centrale, aggiungere "pretty", cosa succede 472 00:19:52,970 --> 00:19:56,880 è basta avere uno spazio. 473 00:19:56,880 --> 00:19:59,800 Così l'attributo class è un elenco separato da spazi 474 00:19:59,800 --> 00:20:02,450 di tutte le classi che si applicano a quel tag. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Non è come questo appartiene una sorta di classe speciale chiamata 477 00:20:05,750 --> 00:20:07,180 "Speciale, spazio, piuttosto." 478 00:20:07,180 --> 00:20:10,870 Appartiene a due classes-- speciale e carina. 479 00:20:10,870 --> 00:20:12,492 Sì? 480 00:20:12,492 --> 00:20:14,360 Freddo. 481 00:20:14,360 --> 00:20:17,010 >> E poi se guardiamo a ciò che accade, siamo 482 00:20:17,010 --> 00:20:21,850 andando a vedere che prima ha sfondo giallo, testo nero. 483 00:20:21,850 --> 00:20:22,450 Secondo tra-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON Buchholtz-AU: --has bold sfondo giallo con testo blu. 485 00:20:26,160 --> 00:20:29,330 E il nostro ultimo ha solo il testo blu che abbiamo assegnato ad esso. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Come funzionano selettori? 488 00:20:32,491 --> 00:20:32,990 Impressionante. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON Buchholtz-AU: Vogliamo parlare del conflitto ora allora? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Quindi sì. 491 00:20:35,780 --> 00:20:36,310 Assolutamente. 492 00:20:36,310 --> 00:20:38,380 Che cosa succede se si avere un conflitto, giusto? 493 00:20:38,380 --> 00:20:44,740 Facciamo finta il primo imposta qualcosa like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON Buchholtz-AU: forse questo cambia lo sfondo? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Sì. 496 00:20:48,090 --> 00:20:51,699 Quindi stiamo andando a fare "bella" cambiare lo sfondo al salmone. 497 00:20:51,699 --> 00:20:54,740 ALLISON Buchholtz-AU: Sei solo con tutti i grandi colori di oggi, Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Sì. 499 00:20:55,573 --> 00:20:58,200 Perché ho scoperto che posso utilizzare salmone come colore reale. 500 00:20:58,200 --> 00:21:00,270 Quindi stiamo solo andando a farlo. 501 00:21:00,270 --> 00:21:01,770 Penso anche Sunset è un colore reale. 502 00:21:01,770 --> 00:21:03,103 AUDIENCE: Sunset è un colore vero e proprio? 503 00:21:03,103 --> 00:21:04,572 ALLISON Buchholtz-AU: proviamo. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Dopo questa demo proprio perché nel caso in cui scombina, 505 00:21:07,735 --> 00:21:08,943 Io non voglio essere il debug. 506 00:21:08,943 --> 00:21:11,580 Così sappiamo salmone è un colore reale. 507 00:21:11,580 --> 00:21:15,626 Quindi, qualsiasi ipotesi su che cosa succederà? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON Buchholtz-AU: Qualche idea? 509 00:21:17,522 --> 00:21:20,002 >> AUDIENCE: [incomprensibile]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Sì. 511 00:21:20,920 --> 00:21:22,150 Così avete ottenuto esattamente giusto. 512 00:21:22,150 --> 00:21:24,930 In sostanza, ci vuole il ultima regola che è stato dato. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON Buchholtz-AU: Quindi questo è dove cascata entrata in vigore. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Quindi ricorda come aveva che fogli di stile CSS? 515 00:21:31,080 --> 00:21:33,660 Quindi da questo, abbiamo tipo di intendiamo che abbiamo un po 'di regole 516 00:21:33,660 --> 00:21:37,115 che applicano uno sopra l'altro, e possono anche ignorare l'altro. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON Buchholtz-AU: So qualunque sia di in basso 518 00:21:39,380 --> 00:21:41,540 sovrascriverà tutto quello che è in alto. 519 00:21:41,540 --> 00:21:45,842 Si potrebbe avere regole che completamente negare qualcosa in anticipo. 520 00:21:45,842 --> 00:21:48,300 Questo è anche il motivo per cui si vuole essere attento quando sei styling, 521 00:21:48,300 --> 00:21:51,465 in modo da non sta creando regole che sei solo completamente imperative. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: O forse vogliono sovrascrivere regole. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON Buchholtz-AU: O forse si fa. 524 00:21:53,920 --> 00:21:54,300 Sì. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Fingere di avere un Classe che si applica alla maggior parte delle cose, 526 00:21:57,175 --> 00:22:01,220 ma diciamo che si desidera cambiare la colore di sfondo al rosso e il tipo di carattere 527 00:22:01,220 --> 00:22:03,140 peso in grassetto per la maggior parte cose, ma per una, 528 00:22:03,140 --> 00:22:06,098 si vuole solo il colore di sfondo ad essere rosso, ma si desidera che tutti gli altri 529 00:22:06,098 --> 00:22:09,990 proprietà, si potrebbe fare qualcosa come "font-weight = normale," 530 00:22:09,990 --> 00:22:12,760 che sarebbe poi annullare quel cambiamento in grassetto. 531 00:22:12,760 --> 00:22:14,480 Sì? 532 00:22:14,480 --> 00:22:17,250 Anche in questo caso, il modo migliore, penso Allison ha detto, è solo pratica. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON Buchholtz-AU: Sperimentazione. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Pratica, pratica, pratica, e sperimentare. 535 00:22:20,090 --> 00:22:22,950 Conosco un sacco di persone che pensano CSS è solo un sacco di indovinare-e-check 536 00:22:22,950 --> 00:22:25,580 alla fine della giornata, dove se si vuole fare something-- come, 537 00:22:25,580 --> 00:22:27,663 hai una vaga idea, ma è ancora probabilmente bisogno 538 00:22:27,663 --> 00:22:31,390 provarlo per assicurarsi si sa che cosa assomiglia. 539 00:22:31,390 --> 00:22:34,482 >> AUDIENCE: Quando si sta applicando classi, più 540 00:22:34,482 --> 00:22:37,339 allo stesso paragrafo o sezione, lo fa 541 00:22:37,339 --> 00:22:39,505 importa in che ordine si può digitarli nelle citazioni? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: No, per niente. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON Buchholtz-AU: ciò che conta è l'ordine entro il vostro foglio di stile CSS. 544 00:22:45,764 --> 00:22:47,430 AUDIENCE: Può ripetere la domanda? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON Buchholtz-AU: Entro classe, quando si sta dando lezioni 547 00:22:53,990 --> 00:22:56,964 a qualcosa nel codice HTML, fa importa quale ordine sono in? 548 00:22:56,964 --> 00:22:58,130 Non importa l'ordine. 549 00:22:58,130 --> 00:23:02,915 Ciò che conta è l'ordine del selettori di classe all'interno del vostro CSS, 550 00:23:02,915 --> 00:23:04,306 all'interno del vostro foglio di stile. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: buon suono? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON Buchholtz-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: E poi abbiamo intenzione di continuare a a-- 554 00:23:11,539 --> 00:23:13,330 ALLISON Buchholtz-AU: Che cosa abbiamo adesso? 555 00:23:13,330 --> 00:23:14,245 Ho dimenticato. 556 00:23:14,245 --> 00:23:16,087 Oh, non ci resta che esempi. 557 00:23:16,087 --> 00:23:17,295 Ma noi abbiamo genere di fatto quelli. 558 00:23:17,295 --> 00:23:18,990 Abbiamo fatto esempi al volo. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Arriviamo a combinare i selettori presto. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON Buchholtz-AU: Oh, si arriva a unire selettori. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: Così alcuni esempi è che abbiamo 562 00:23:25,260 --> 00:23:29,630 # Pound dog--, o hashtag, o cancelletto, o qualsiasi altra cosa 563 00:23:29,630 --> 00:23:32,050 si desidera chiamare che-- tagliente. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON Buchholtz-AU: Sharp cane. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Allora avete .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Qualcosa ha un id di cane, c'è solo un cane sulla pagina. 568 00:23:41,600 --> 00:23:43,870 Qualcosa ha un id di gatto, c'è solo un gatto. 569 00:23:43,870 --> 00:23:45,665 Ci possono essere molti animali nella pagina. 570 00:23:45,665 --> 00:23:47,570 Ecco perché abbiamo dato che le classi. 571 00:23:47,570 --> 00:23:48,740 Avete un esempio di p. 572 00:23:48,740 --> 00:23:50,490 E poi così uno dei ultimo esempio, che 573 00:23:50,490 --> 00:23:53,790 è qualcosa che non abbiamo parlato, è quello che succede quando si combinano. 574 00:23:53,790 --> 00:23:54,580 Così p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Quindi, per questo, torniamo al Codice e di introdurre another-- sì. 577 00:24:02,950 --> 00:24:04,290 Quindi, di nuovo qui. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON Buchholtz-AU: I sentire come questo è really-- 579 00:24:04,850 --> 00:24:08,105 come solo guardando attraverso esempi è davvero il modo per imparare questo. 580 00:24:08,105 --> 00:24:09,360 Ecco, questo è quello che stiamo facendo. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Quindi facciamo finta che vogliono solo selezionare il testo 2, giusto? 582 00:24:14,030 --> 00:24:16,530 Così abbiamo sicuramente non possiamo farlo con un id. 583 00:24:16,530 --> 00:24:19,620 Beh, potremmo farlo con un id, ma non ha un id. 584 00:24:19,620 --> 00:24:22,490 Potrei aggiungere uno, ma facciamo finta che non ho voglia di aggiungere un 585 00:24:22,490 --> 00:24:24,910 o ha già qualcos'altro. 586 00:24:24,910 --> 00:24:26,516 Io non posso farlo con questo. 587 00:24:26,516 --> 00:24:28,870 Il tag non è decisamente unico, giusto? 588 00:24:28,870 --> 00:24:30,670 E non è la classe. 589 00:24:30,670 --> 00:24:32,314 Ma è possibile combinare queste cose. 590 00:24:32,314 --> 00:24:35,230 Diciamo che abbiamo voluto fare qualcosa che si applica solo alle cose che 591 00:24:35,230 --> 00:24:39,420 hanno la classe speciale e che hanno la classe piuttosto. 592 00:24:39,420 --> 00:24:48,150 >> Che cosa si può fare è in main.css, si può dire, si deve prima eliminare questo. 593 00:24:48,150 --> 00:24:50,240 È possibile combinare questi. 594 00:24:50,240 --> 00:24:51,430 Così si può fare .Special. 595 00:24:51,430 --> 00:24:52,110 Nessuno spazio. 596 00:24:52,110 --> 00:24:54,770 Solo .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Ciò significa qualcosa che è speciale e carina. 598 00:25:00,550 --> 00:25:01,900 Questo fa senso? 599 00:25:01,900 --> 00:25:04,190 E se andiamo qui, cosa si sta andando a vedere 600 00:25:04,190 --> 00:25:09,734 è questa regola si applica solo alla secondo, che ha sia di quelli. 601 00:25:09,734 --> 00:25:11,400 E si può fare per un sacco di cose. 602 00:25:11,400 --> 00:25:13,270 Puoi say-- facciamo finta Volevo solo 603 00:25:13,270 --> 00:25:18,300 per fare le cose che hanno la classe piuttosto e che sono anche un tag di paragrafo. 604 00:25:18,300 --> 00:25:19,920 Così p.pretty. 605 00:25:19,920 --> 00:25:23,585 Facciamo finta che ho avuto qualcosa di abbastanza sul corpo tag. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Posso correre questo e io può vedere che è solo 608 00:25:28,490 --> 00:25:32,720 andando ad applicarsi a cose che sono paragrafi con la classe piuttosto. 609 00:25:32,720 --> 00:25:35,650 E è possibile combinare questi, fondamentalmente, come molti come si desidera. 610 00:25:35,650 --> 00:25:38,580 Così si può semplicemente mettere insieme. 611 00:25:38,580 --> 00:25:39,604 Questo fa senso? 612 00:25:39,604 --> 00:25:41,770 ALLISON Buchholtz-AU: So questo tipo di è più utile 613 00:25:41,770 --> 00:25:45,490 quando, Tomas diceva in precedenza, forse avete un sito web molto complicato, 614 00:25:45,490 --> 00:25:48,050 e avete già un sacco di queste regole scritte, 615 00:25:48,050 --> 00:25:51,170 e avete solo bisogno di combinare due da prima. 616 00:25:51,170 --> 00:25:55,350 Come invece di scrivere un intero nuovo selettore e cambiando lì, 617 00:25:55,350 --> 00:25:58,592 si può solo unire loro dove si sovrappone. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: O potrebbe trovare fuori-- volte 619 00:26:00,670 --> 00:26:04,290 c'è una classe che rende il colore del carattere come il blu, 620 00:26:04,290 --> 00:26:06,740 e c'è un'altra classe che rende lo sfondo blu. 621 00:26:06,740 --> 00:26:07,840 E che proprio non funziona. 622 00:26:07,840 --> 00:26:10,924 Così si scrive un caso speciale, dove, like-- ma se ha entrambi, quello che stai 623 00:26:10,924 --> 00:26:13,548 intenzione di fare è che si sta andando a rendere questo questa tonalità di blu 624 00:26:13,548 --> 00:26:15,310 e questo quest'altro tonalità di blu. 625 00:26:15,310 --> 00:26:15,580 Giusto? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON Buchholtz-AU: Buono per quei tipi di eccezioni. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Quindi, per pensare ai problemi 628 00:26:21,220 --> 00:26:25,000 che potrebbero sorgere quando si combinano. 629 00:26:25,000 --> 00:26:27,020 Freddo. 630 00:26:27,020 --> 00:26:29,692 Ma torniamo alla nostra presentazione. 631 00:26:29,692 --> 00:26:31,400 ALLISON Buchholtz-AU: Ci siamo quasi. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: E ha smesso di collegamento. 633 00:26:34,022 --> 00:26:36,494 ALLISON Buchholtz-AU: Oh, no. 634 00:26:36,494 --> 00:26:39,125 ALLISON Buchholtz-AU: CS a l'ufficio, internet va giù. 635 00:26:39,125 --> 00:26:40,360 Oh, l'ironia. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Così fortunatamente, possiamo presenta senza internet, immagino, 637 00:26:45,620 --> 00:26:47,380 perché abbiamo tutte le diapositive qui. 638 00:26:47,380 --> 00:26:49,304 Quindi cerchiamo di parlare del rapporto di tag. 639 00:26:49,304 --> 00:26:50,470 ALLISON Buchholtz-AU: Giusto. 640 00:26:50,470 --> 00:26:52,660 Quindi, solo tipo di corso fuori di quello che ha detto Tomas, 641 00:26:52,660 --> 00:26:54,180 questo è solo un altro modo per farlo. 642 00:26:54,180 --> 00:26:57,840 Così abbiamo alcuni genitori del selettore con un selettore bambino. 643 00:26:57,840 --> 00:27:02,815 Quindi, in questo esempio qui, abbiamo qualche corpo con una barra di navigazione di classe, dei pulsanti. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, mi dispiace. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON Buchholtz-AU: E in fondo, che cosa significa 647 00:27:06,180 --> 00:27:11,070 è selezionare tutti i bambini, come tutti questi tipi di selettori, 648 00:27:11,070 --> 00:27:13,040 all'interno di questo selettore principale. 649 00:27:13,040 --> 00:27:16,004 E questi sono gli unici è mai andare da applicare. 650 00:27:16,004 --> 00:27:17,755 Non so se si avere un modo migliore di-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Così ho indovinare il modo di pensare 652 00:27:19,504 --> 00:27:22,440 questo è ricordare prima come abbiamo una sorta di loro come messo insieme. 653 00:27:22,440 --> 00:27:26,340 E poi che significa un elemento che corrisponde a tutti questi. 654 00:27:26,340 --> 00:27:29,530 Ciò sta dicendo è, io desidera di abbinare tutto 655 00:27:29,530 --> 00:27:33,220 all'interno some-- Voglio a trovare un selettore. 656 00:27:33,220 --> 00:27:35,670 E poi all'interno di quella, voglio di abbinare le cose nuove. 657 00:27:35,670 --> 00:27:36,170 Giusto? 658 00:27:36,170 --> 00:27:40,900 Così in CSS, è tutta una questione di genere essere in grado di abbinare questi elementi. 659 00:27:40,900 --> 00:27:43,050 E si può cercare di far corrispondere elementi all'interno di altri oggetti. 660 00:27:43,050 --> 00:27:46,510 >> Quindi cerchiamo di fare in realtà un esempio, e pensiamo che sarà chiarire. 661 00:27:46,510 --> 00:27:53,090 Quindi cerchiamo di far finta che abbiamo speciale, davvero speciale, a prescindere. 662 00:27:53,090 --> 00:27:55,690 E poi abbiamo un collegamento, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Quindi ricordate, a è un collegamento. 665 00:28:02,370 --> 00:28:03,900 Non è intenzione di andare da nessuna parte. 666 00:28:03,900 --> 00:28:11,500 E stiamo per dare il legame di classe, credo. 667 00:28:11,500 --> 00:28:13,335 Diamogli il Mi class-- dare un'idea. 668 00:28:13,335 --> 00:28:14,460 ALLISON Buchholtz-AU: Cool. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: Coo-- facciamo andare da la classe abbastanza. 670 00:28:16,420 --> 00:28:16,930 Perché no? 671 00:28:16,930 --> 00:28:17,971 >> ALLISON Buchholtz-AU: OK. 672 00:28:17,971 --> 00:28:23,040 TOMAS REIMERS: So le cose in questo momento belle 673 00:28:23,040 --> 00:28:26,000 stanno per rendere lo sfondo blu, colore di sfondo di salmone. 674 00:28:26,000 --> 00:28:27,969 Questo ha un senso. 675 00:28:27,969 --> 00:28:28,760 E se lo facciamo questo-- 676 00:28:28,760 --> 00:28:29,620 >> ALLISON Buchholtz-AU: Vuoi aggiungere testo 677 00:28:29,620 --> 00:28:31,078 così il collegamento ipertestuale in realtà si presenta? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Che sarebbe una buona chiamata. 679 00:28:35,088 --> 00:28:37,921 ALLISON Buchholtz-AU: Perche 'giusto ora stiamo solo andando ottenere nulla. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Quindi questo è un collegamento. 681 00:28:39,690 --> 00:28:42,202 "Si tratta di un collegamento." 682 00:28:42,202 --> 00:28:45,820 Oh, e questo sta andando per essere un altro collegamento. 683 00:28:45,820 --> 00:28:47,280 Diamogli la classe "cool". 684 00:28:47,280 --> 00:28:50,295 Hai ragione. 685 00:28:50,295 --> 00:28:50,795 Freddo. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 Così adesso stiamo andando a prendere questo. 688 00:28:56,010 --> 00:28:57,269 Stiamo per lanciare uno. 689 00:28:57,269 --> 00:28:59,060 Abbiamo uno nel tag speciale, e abbiamo anche 690 00:28:59,060 --> 00:29:01,150 stanno per avere uno nel grazioso tag. 691 00:29:01,150 --> 00:29:05,449 E proprio ora che cosa stiamo andando a fare è che stiamo andando a fare cool-- 692 00:29:05,449 --> 00:29:06,490 cosa vogliamo fare? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON Buchholtz-AU: Possiamo rendere più grande? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Diamo un confine. 696 00:29:13,800 --> 00:29:14,840 ALLISON Buchholtz-AU: Potremmo confine. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Sì. 698 00:29:15,673 --> 00:29:18,560 Quindi stiamo andando a fare qualcosa come, è-- confine e siamo 699 00:29:18,560 --> 00:29:20,971 andando a spiegare tutto questo in un secondo. 700 00:29:20,971 --> 00:29:21,470 Per ora-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON Buchholtz-AU: Per il modello di dialogo. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Ma per ora, siamo solo andando a dare un bordo. 703 00:29:27,300 --> 00:29:29,580 Quindi ciò significa che sei andare a vedere questi collegamenti. 704 00:29:29,580 --> 00:29:32,788 E si sta andando a vedere che hanno questi, come, brutti bordi neri, che 705 00:29:32,788 --> 00:29:33,820 è cool. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON Buchholtz-AU: Il nostro sito è così bella. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Sì. 708 00:29:35,333 --> 00:29:38,930 Il nostro sito è impressionante. 709 00:29:38,930 --> 00:29:41,585 Quindi questi due sono i collegamenti, e appaiono. 710 00:29:41,585 --> 00:29:44,160 Ora facciamo finta I solo voluto fare questo 711 00:29:44,160 --> 00:29:50,072 se non fosse dentro qualcosa che aveva un fondo di salmone. 712 00:29:50,072 --> 00:29:52,280 Quindi ricorda che questo ha uno sfondo di salmone, 713 00:29:52,280 --> 00:29:54,000 perché è di classe carina. 714 00:29:54,000 --> 00:29:59,777 >> Ma vogliamo dire che raffredda solo che sono in classe speciale, non in classe 715 00:29:59,777 --> 00:30:02,890 piuttosto, dovrebbe avere quel confine. 716 00:30:02,890 --> 00:30:12,549 Beh, cosa si può fare si è può dire, .Special, spazio, .cool. 717 00:30:12,549 --> 00:30:15,590 E ciò che sta facendo, quando si pensa a questo proposito, è che è fondamentalmente dicendo, 718 00:30:15,590 --> 00:30:19,530 OK, mi trovare tutto che corrisponde speciale. 719 00:30:19,530 --> 00:30:24,104 Poi all'interno di questi tag, trovare me tutto quello che è cool. 720 00:30:24,104 --> 00:30:27,270 ALLISON Buchholtz-AU: Quindi un altro modo che potrebbe essere buona per pensare a questo, 721 00:30:27,270 --> 00:30:29,810 riportandolo a C, è proprio come l'idea del campo di applicazione. 722 00:30:29,810 --> 00:30:34,020 Quindi, quando si ha un po ' selettore, come quelle 723 00:30:34,020 --> 00:30:38,460 che abbiamo lavorato per prima di questo, l'intera pagina web, tutto il codice HTML 724 00:30:38,460 --> 00:30:40,180 è all'interno della vostra portata, giusto? 725 00:30:40,180 --> 00:30:43,090 Ma quando abbiamo questi relazioni padre-figlio, 726 00:30:43,090 --> 00:30:47,130 è come se si sta restringendo, dove siete alla ricerca di un luogo specifico, 727 00:30:47,130 --> 00:30:50,540 come se, come, stiamo cercando all'interno una funzione specifica invece 728 00:30:50,540 --> 00:30:52,007 di tutto il nostro file. 729 00:30:52,007 --> 00:30:55,090 AUDIENCE: Quindi, con questo in mente, sarebbe essa ha importava se avevamo changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON Buchholtz-AU: L'ordine? 731 00:30:56,423 --> 00:30:59,320 AUDIENCE: --La classe CSS a .cool, spazio, .Special? 732 00:30:59,320 --> 00:31:01,153 ALLISON Buchholtz-AU: Sì, perché poi che 733 00:31:01,153 --> 00:31:04,420 direi, portata a tutto ciò che ha freddo, 734 00:31:04,420 --> 00:31:07,235 e poi guardare a ciò has-- Voglio dire, come, in questo caso, 735 00:31:07,235 --> 00:31:08,860 Non credo che sarebbe cambiato. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Se avesse detto che cosa? 737 00:31:10,318 --> 00:31:10,906 Scusi. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON Buchholtz-AU: Se noi portata raffreddare e poi 739 00:31:12,660 --> 00:31:14,550 cercare le cose di speciale, sarebbe lo stesso, in realtà. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Quindi non sarebbe. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON Buchholtz-AU: Non sarebbe? 742 00:31:16,590 --> 00:31:17,590 Oh, oh, va bene. 743 00:31:17,590 --> 00:31:18,090 Mi sbaglio. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Quindi la ragione è different-- mistake-- comune 745 00:31:21,480 --> 00:31:27,140 è che in questo momento solo il collegamento ha freddo, giusto? 746 00:31:27,140 --> 00:31:32,176 Credo che la mia domanda a voi ragazzi è, ciò in questa pagina non sia coperto da .cool? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Ci sono due tag qui, giusto? 749 00:31:38,340 --> 00:31:39,770 Che è questo e questo. 750 00:31:39,770 --> 00:31:40,590 Entrambi corrispondono fresco. 751 00:31:40,590 --> 00:31:42,200 Nient'altro fa. 752 00:31:42,200 --> 00:31:46,460 Quindi, se lei ha detto, .cool, spazio, .Special, cosa hai intenzione di dire è, 753 00:31:46,460 --> 00:31:48,824 all'interno di questi tag, che cosa c'è di speciale? 754 00:31:48,824 --> 00:31:49,865 ALLISON Buchholtz-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Questo è ciò che it-- giusto. 756 00:31:51,800 --> 00:31:52,310 Perché è come se solo qualcosa qui. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: Quindi seleziona nulla. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON Buchholtz-AU: considerando che, con speciale, siamo all'interno di questi tag qui. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Quelli e quelle. 760 00:31:57,971 --> 00:31:58,512 AUDIENCE: OK. 761 00:31:58,512 --> 00:31:58,920 Così questi tag dal slash? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Sì. 763 00:31:59,740 --> 00:32:01,150 Questo fa senso? 764 00:32:01,150 --> 00:32:03,685 Come è fondamentalmente cercando di restringere la portata. 765 00:32:03,685 --> 00:32:04,810 ALLISON Buchholtz-AU: Sì. 766 00:32:04,810 --> 00:32:06,870 Penso che sia probabilmente il modo più semplice per pensarci. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: Così abbiamo trovato questo, e abbiamo trovato questo sia abbinato speciale. 768 00:32:09,270 --> 00:32:11,400 E poi stiamo chiedendo, entro questi ragazzi, che cosa è cool? 769 00:32:11,400 --> 00:32:12,941 E all'interno di questo, di questo fresco. 770 00:32:12,941 --> 00:32:14,500 All'interno di questo, non c'è niente di fresco. 771 00:32:14,500 --> 00:32:16,250 Quindi questo è l'unico tag che rimane. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON Buchholtz-AU: Mentre fresco è proprio all'interno di questi tag a lì. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Esattamente. 774 00:32:21,070 --> 00:32:22,403 E che cosa c'è di speciale tra quelle? 775 00:32:22,403 --> 00:32:22,930 Niente. 776 00:32:22,930 --> 00:32:25,270 Ora, quello che posso dire è se non c'era spazio, 777 00:32:25,270 --> 00:32:29,880 si sta chiedendo che cosa è cool e special-- o ciò che è bello e speciale, giusto? 778 00:32:29,880 --> 00:32:35,370 Se dici .special.pretty, che è lo stesso .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Perché ciò eliminando lo spazio è chiedendo è, quando si dice .Special, 780 00:32:39,220 --> 00:32:40,970 stai chiedendo, OK, quali sono speciali? 781 00:32:40,970 --> 00:32:43,780 E poi di quelli che quelli sono anche piuttosto, 782 00:32:43,780 --> 00:32:47,010 che è lo stesso, grammaticalmente, come richiesto, ciò che è bello, 783 00:32:47,010 --> 00:32:49,500 e poi di quelli, ciò che è anche speciale? 784 00:32:49,500 --> 00:32:50,000 Giusto? 785 00:32:50,000 --> 00:32:53,099 E 'la differenza di ciò che è all'interno di quello che è. 786 00:32:53,099 --> 00:32:53,640 AUDIENCE: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Sì. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Impressionante. 790 00:32:58,030 --> 00:33:00,426 Quindi, con questo in mente then-- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON Buchholtz-AU: Penso che il nostro ultimo cosa è (IN OPERATO BRITISH ACCENT) 792 00:33:01,800 --> 00:33:02,510 il box model. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: Il box-- [Ride] Amo il modo in Allison dice. 794 00:33:05,992 --> 00:33:06,950 Così il box model cosa. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON Buchholtz-AU: Basta una scatola, sarò il vostro modello di dialogo. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Allora parliamo di questo. 797 00:33:11,310 --> 00:33:14,070 Così adesso abbiamo speso un sacco di tempo a parlare di selettori. 798 00:33:14,070 --> 00:33:16,944 Ormai, voi ragazzi siete probabilmente, come, maestri di selectors-- sapete, 799 00:33:16,944 --> 00:33:21,510 come selezionare esattamente il contenuto che si vuole manipolare sul vostro schermo. 800 00:33:21,510 --> 00:33:24,740 >> Così ora la domanda è: come esattamente si può manipolare? 801 00:33:24,740 --> 00:33:27,010 Quindi credo che la più elementare modo di pensare che 802 00:33:27,010 --> 00:33:30,294 è, beh, che cosa esattamente è un elemento in CSS? 803 00:33:30,294 --> 00:33:32,585 Abbiamo speso un sacco di tempo parlando, che cosa è un tag, 804 00:33:32,585 --> 00:33:36,140 o quello che è il più fondamentale rappresentazione di un tag? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Un buon modo di pensare che è, ciò che forma è il salmone? 807 00:33:45,170 --> 00:33:47,295 Che forma ha, come, il color salmone sfondo? 808 00:33:47,295 --> 00:33:47,880 >> AUDIENCE: E 'un rettangolo. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: E 'un rettangolo, giusto? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON Buchholtz-AU: Non era una domanda trabocchetto. 811 00:33:50,956 --> 00:33:51,870 [Risate] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Non cercando per ingannare voi ragazzi questo ritardo. 813 00:33:54,670 --> 00:33:57,510 Quindi abbiamo questo rettangolo. 814 00:33:57,510 --> 00:33:59,140 E il tag è una p, giusto? 815 00:33:59,140 --> 00:34:02,280 In modo che ci dà una buona convinzione che il paragrafo 816 00:34:02,280 --> 00:34:07,440 è rappresentato come un rettangolo, almeno nella mente del browser, che 817 00:34:07,440 --> 00:34:08,715 esso è. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON Buchholtz-AU: voglio dire, i browser sono in genere di forma rettangolare, 819 00:34:11,423 --> 00:34:13,440 quindi ha senso. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: L'idea è che tutti i tag all'interno di CSS 821 00:34:18,750 --> 00:34:21,790 sono rappresentati come un rettangolo. 822 00:34:21,790 --> 00:34:25,699 E ogni rettangolo ha quattro le parti in base al CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Avete il contenuto effettivo. 824 00:34:27,830 --> 00:34:29,644 Ecco dove il testo si trova. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON Buchholtz-AU: Forse la tua foto. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Sì. 827 00:34:31,303 --> 00:34:33,860 Hai imbottitura, che è solo una sorta di spazio bianco. 828 00:34:33,860 --> 00:34:35,085 Allora avete un bordo. 829 00:34:35,085 --> 00:34:37,710 E poi ci sono margini, che è spazio bianco al di fuori di questo. 830 00:34:37,710 --> 00:34:39,460 In modo che non ha senso a nessuno, così siamo 831 00:34:39,460 --> 00:34:42,500 andando a parlare di questo per un secondo. 832 00:34:42,500 --> 00:34:47,570 Così proprio qui, che cosa stiamo andando a fare è che stiamo andando a creare qualche div, OK? 833 00:34:47,570 --> 00:34:48,420 Mi scusi mentre I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON Buchholtz-AU: mi sento come dovremmo mettere una foto carina in. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Abbiamo sicuramente dovrebbe. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON Buchholtz-AU: Mi sento come tutti 837 00:34:53,389 --> 00:34:54,870 potrebbe beneficiare di un carino foto, è tutto. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: possiamo tutto il beneficio da a-- 839 00:34:56,774 --> 00:34:57,648 >> PUBBLICO: Sì, certo. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, fresco. 841 00:34:58,790 --> 00:35:02,254 Quindi dovremmo mettere un simpatico picture in qualche parte. 842 00:35:02,254 --> 00:35:05,295 ALLISON Buchholtz-AU: mi sento come un simpatico coniglietto potrebbe essere utile in questo momento. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Certo. 844 00:35:06,190 --> 00:35:06,950 ALLISON Buchholtz-AU: fine della settimana. 845 00:35:06,950 --> 00:35:07,390 Avere qualcosa adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: come incontro un gattino? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON Buchholtz-AU: Un gattino funziona, anche. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, perché c'è un sito per questo. 849 00:35:11,300 --> 00:35:12,300 Si chiama PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON Buchholtz-AU: E 'fantastico. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Sì. 852 00:35:15,510 --> 00:35:18,040 ALLISON Buchholtz-AU: Solo per, come, immagini segnaposto nel tuo sito web. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 C'è anche PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 E c'è PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON Buchholtz-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Davvero? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, non lo facciamo avere una connessione internet. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON Buchholtz-AU: [geme] 860 00:35:29,875 --> 00:35:30,375 Tragico. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: In caso contrario, Vorrei mostrarvi ragazzi 862 00:35:32,333 --> 00:35:33,870 come mettere le immagini nel tuo sito web. 863 00:35:33,870 --> 00:35:36,370 Stiamo andando a cercare di ottenere questo lavorando prima dobbiamo andare. 864 00:35:36,370 --> 00:35:38,660 Ma per ora, siamo solo andando a parlare con colori allora. 865 00:35:38,660 --> 00:35:39,820 Vogliamo mettere le immagini di kittens-- 866 00:35:39,820 --> 00:35:40,210 >> ALLISON Buchholtz-AU: abbiamo fatto. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: di --il internet giù per il momento essere. 868 00:35:43,110 --> 00:35:47,820 Quindi abbiamo due div, e siamo andando a dare loro due ids. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Stiamo per chiamare "Prima" e "seconda". 871 00:35:56,760 --> 00:36:01,184 Così id = "prima". 872 00:36:01,184 --> 00:36:02,850 E stiamo andando a dare loro due colori. 873 00:36:02,850 --> 00:36:08,424 Quindi, come possiamo selezioniamo qualcosa con un id di "prima"? 874 00:36:08,424 --> 00:36:09,840 ALLISON Buchholtz-AU: Dot o hash? 875 00:36:09,840 --> 00:36:10,730 AUDIENCE: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfetto. 877 00:36:12,940 --> 00:36:14,950 Sharp, hash, a prescindere we-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON Buchholtz-AU: Ci sono un sacco di cose da chiamano. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Stiamo andando a stabilirsi su hashtag, e questo è quello che stiamo per andare con. 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: Così hashtag di prima. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON Buchholtz-AU: So è possibile tweet il seminar-- 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag fresco. 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, sì. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 Così abbiamo "prima" e "seconda". 890 00:36:33,660 --> 00:36:37,697 Quindi, prima, stiamo andando ad avere un colore di sfondo rosso. 891 00:36:37,697 --> 00:36:39,030 ALLISON Buchholtz-AU: Uh, colon. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON Buchholtz-AU: Sarò il vostro punto-checker. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison mi ha fatto. 895 00:36:43,960 --> 00:36:45,830 Background-color di blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Viola! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Viola. 898 00:36:47,726 --> 00:36:48,830 ALLISON Buchholtz-AU: Sì. 899 00:36:48,830 --> 00:36:50,630 Il mio colore preferito di Viola, e non abbiamo ancora usato. 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 Che funziona. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: Quindi siamo andando ad avere due div. 905 00:36:59,880 --> 00:37:01,654 Stanno andando essere completamente vuoto. 906 00:37:01,654 --> 00:37:03,070 Probabilmente dovremmo avere del testo. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 Quindi, "prima" sta per essere "CIAO". 909 00:37:09,815 --> 00:37:10,940 E la "seconda" si say-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON Buchholtz-AU: Addio. 911 00:37:11,110 --> 00:37:12,514 >> AUDIENCE: - "WORLD". 912 00:37:12,514 --> 00:37:14,122 Ciao, arrivederci. 913 00:37:14,122 --> 00:37:16,580 ALLISON Buchholtz-AU: ho visto li in concerto l'altra settimana. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: i Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON Buchholtz-AU: per reali. 916 00:37:20,242 --> 00:37:21,200 Non sono un gran che. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Non mi piace. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Abbiamo "CIAO" e "arrivederci". 920 00:37:26,060 --> 00:37:29,102 E ancora, CSS è semplicemente incredibile, perché riconosce i nostri colori. 921 00:37:29,102 --> 00:37:30,810 Non è necessario neanche temono che esistono. 922 00:37:30,810 --> 00:37:33,194 Lo fanno. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON Buchholtz-AU: Loro esistono. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Così CSS credo abbia 255 parole per parlare di colore. 925 00:37:39,560 --> 00:37:42,986 Se si può pensare a un colore fuori chi 255, come, mi sarà impressionato. 926 00:37:42,986 --> 00:37:44,110 ALLISON Buchholtz-AU: Sì. 927 00:37:44,110 --> 00:37:45,560 Penso che voi ragazzi possono avere appena arrivato in subito dopo. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: Ecco, vedrete abbiamo due scatole 929 00:37:47,727 --> 00:37:49,143 proprio sopra l'altro, giusto? 930 00:37:49,143 --> 00:37:50,200 CIAO e ADDIO. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON Buchholtz-AU: Non c'è spazio in mezzo. 932 00:37:51,460 --> 00:37:53,390 Stanno solo smooshed proprio sopra l'altro. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Quindi la prima cosa Credo che dovremmo parlare di 934 00:37:55,973 --> 00:38:02,960 è diamo say-- anche sì. 935 00:38:02,960 --> 00:38:08,020 Così CSS li rappresenta come una sorta di scatole. 936 00:38:08,020 --> 00:38:10,100 E come scatole, che hanno contenuto. 937 00:38:10,100 --> 00:38:14,540 E il contenuto in questo momento è una sorta di il CIAO o l'arrivederci e il gioco è fatto. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Così una delle prime cose che si può fare è che si può aggiungere imbottitura. 940 00:38:19,790 --> 00:38:25,610 Imbottitura dice quanto spazio esso dovrebbe lasciare su ogni lato. 941 00:38:25,610 --> 00:38:29,200 Quindi diciamo che voglio dire 10 pixel per ogni lato. 942 00:38:29,200 --> 00:38:31,234 E io sezionare che in un secondo. 943 00:38:31,234 --> 00:38:33,150 ALLISON Buchholtz-AU: Tutte queste cose qui 944 00:38:33,150 --> 00:38:36,980 stanno per essere per lo più in pixel per il resto del seminario. 945 00:38:36,980 --> 00:38:40,980 Stai andando a vedere che ha po 'di spazio intorno ad esso, giusto? 946 00:38:40,980 --> 00:38:46,360 Allora, cosa che non si vede qui è c'è questo tipo di imbottitura invisibile 947 00:38:46,360 --> 00:38:49,600 su ciascun lato, che dice, come, OK, avete la vostra casella di content-- 948 00:38:49,600 --> 00:38:51,680 >> ALLISON Buchholtz-AU: Volete per tirare appena il elemento ispezionare? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Sì, questa è una buona idea. 950 00:38:53,659 --> 00:38:56,700 ALLISON Buchholtz-AU: Inoltre, trovo che l'elemento ispezionare è un buon modo 951 00:38:56,700 --> 00:39:01,280 per capire se c'è qualcosa che non va sbagliato, succede qualcosa di inaspettato, 952 00:39:01,280 --> 00:39:04,570 ispezionare i tag e vedere cosa è come sovrascritto è utile. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Quindi io non sono sicuro se voi potete vedere questo colore. 954 00:39:05,940 --> 00:39:06,470 Puoi? 955 00:39:06,470 --> 00:39:10,120 Vedrete questa imbottitura sul tipo di bordo. 956 00:39:10,120 --> 00:39:13,410 E poi si vede l'attuale contenuti in blu, giusto? 957 00:39:13,410 --> 00:39:16,820 Ecco, questo è il molto basi del box model. 958 00:39:16,820 --> 00:39:17,674 Avete contenuti. 959 00:39:17,674 --> 00:39:18,590 Allora avete imbottitura. 960 00:39:18,590 --> 00:39:20,440 >> AUDIENCE: Perché non basta utilizzare la casella all'interno the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON Buchholtz-AU: Giusto. 962 00:39:21,606 --> 00:39:24,745 Perché è proprio la selezione l'elemento in questo momento. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Altre cose. 965 00:39:27,060 --> 00:39:29,780 Quindi parliamo di che Comando imbottitura per un secondo. 966 00:39:29,780 --> 00:39:36,380 Quindi, in CSS, misure necessario avere un'unità. 967 00:39:36,380 --> 00:39:39,740 Quindi, prima di avere la quantità. 968 00:39:39,740 --> 00:39:41,460 Quindi, in questo caso, abbiamo detto 10. 969 00:39:41,460 --> 00:39:44,780 E poi quella successiva Abbiamo detto è pixel, px. 970 00:39:44,780 --> 00:39:49,160 Altri quelli che potreste avere sono cose come centimetri, centimetri. 971 00:39:49,160 --> 00:39:51,367 È possibile fare cose come, ciò che è di 10 pollici? 972 00:39:51,367 --> 00:39:52,700 E che sta per essere ridicolo. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON Buchholtz-AU: Oh, boy. 974 00:39:52,990 --> 00:39:53,460 >> AUDIENCE: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> Tomas e ALLISON: Sì. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Quindi questo è tutto imbottitura. 977 00:39:57,840 --> 00:39:59,255 Ho intenzione di tornare a pixel. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON Buchholtz-AU: Pixel tendono ad essere, come, lo standard. 979 00:40:01,754 --> 00:40:04,589 Quando si guarda un sacco di siti web, la maggior parte essi lavorano in pixel. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Così si sta andando a vedere o pixels-- gli altri quelli che vedete 981 00:40:07,755 --> 00:40:13,952 è em, che è uno em è pari all'altezza del carattere 982 00:40:13,952 --> 00:40:15,160 che si sta utilizzando. 983 00:40:15,160 --> 00:40:16,201 >> ALLISON Buchholtz-AU: Mm. 984 00:40:16,201 --> 00:40:17,574 985 00:40:17,574 --> 00:40:20,740 TOMAS REIMERS: E 'un buon modo per dire, come, io voglio tutto lo spazio come il mio carattere 986 00:40:20,740 --> 00:40:21,514 sta prendendo. 987 00:40:21,514 --> 00:40:23,180 ALLISON Buchholtz-AU: non sapevo che. 988 00:40:23,180 --> 00:40:25,747 Si impara qualcosa di nuovo ogni giorno. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Ci sono un molte misure in CS. 990 00:40:27,955 --> 00:40:29,260 Vi suggerisco di guardare in su. 991 00:40:29,260 --> 00:40:32,122 Per tutti i vostri casi, credo pixel dovrebbero essere sufficienti. 992 00:40:32,122 --> 00:40:33,830 E sono anche quello che si sta andando a vedere 993 00:40:33,830 --> 00:40:36,520 nella maggior parte dei esempi fatto in linea. 994 00:40:36,520 --> 00:40:38,320 Così lasceremo a pixel. 995 00:40:38,320 --> 00:40:42,420 >> È anche possibile, dovrei say-- così imbottitura Imposta tutti gli imbottiture. 996 00:40:42,420 --> 00:40:49,789 È anche possibile fare qualcosa di simile "Padding-top" a solo set-- 997 00:40:49,789 --> 00:40:52,080 ALLISON Buchholtz-AU: forse avremo il nostro "CIAO" indietro. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to basta impostare il imbottitura sulla parte superiore e nient'altro. 999 00:40:55,480 --> 00:40:59,560 Così i quattro comandi sono padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 e padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON Buchholtz-AU: Proprio come ci si aspetterebbe da una scatola. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Sì. 1003 00:41:03,530 --> 00:41:05,240 Niente di troppo pazzo lì. 1004 00:41:05,240 --> 00:41:08,230 Questo fa senso? 1005 00:41:08,230 --> 00:41:11,990 In modo che sia imbottitura. 1006 00:41:11,990 --> 00:41:14,110 Ho intenzione di impostare tutto le imbottiture torna alla 10. 1007 00:41:14,110 --> 00:41:17,010 E poi ho intenzione di passare al confine. 1008 00:41:17,010 --> 00:41:21,130 >> Allora, qual è confine è border è un comando strano. 1009 00:41:21,130 --> 00:41:24,450 Ci vuole una sorta di tre cose in una volta. 1010 00:41:24,450 --> 00:41:28,930 Così il primo è quanto grande voglio che sia come una misura. 1011 00:41:28,930 --> 00:41:30,662 Ancora una volta, sto usando solo i pixel. 1012 00:41:30,662 --> 00:41:32,620 E l'ultima cosa che dovrebbe aggiungere alle misure 1013 00:41:32,620 --> 00:41:35,270 è l'unica cosa che non ha bisogno di una unità è 0. 1014 00:41:35,270 --> 00:41:37,390 In realtà è errato per dare 0 un'unità, 1015 00:41:37,390 --> 00:41:41,940 perché 0 è 0 attraverso pollici, pixel, centimetri, qualunque. 1016 00:41:41,940 --> 00:41:43,960 Tutto Significa solo 0, giusto? 1017 00:41:43,960 --> 00:41:46,710 Quindi, prima si dà la misura. 1018 00:41:46,710 --> 00:41:48,650 >> Poi si dà lo stile. 1019 00:41:48,650 --> 00:41:49,869 Quindi ho intenzione di dire "solido". 1020 00:41:49,869 --> 00:41:51,410 E parleremo di ciò che significa. 1021 00:41:51,410 --> 00:41:54,290 E poi, infine, si dà un colore. 1022 00:41:54,290 --> 00:41:56,850 Quindi ho intenzione di dire "nero". 1023 00:41:56,850 --> 00:41:59,637 E queste sono tutte cose che abbiamo Ora visto prima, eccetto stile, 1024 00:41:59,637 --> 00:42:00,720 ma parleremo di questo. 1025 00:42:00,720 --> 00:42:04,120 Quindi voi ragazzi avete visto misurazioni, e avete visto i colori. 1026 00:42:04,120 --> 00:42:10,410 E quello che succede è che otteniamo questo bello bordo nero intorno ad esso, giusto? 1027 00:42:10,410 --> 00:42:11,620 Ragazzi vedere come abbiamo fatto? 1028 00:42:11,620 --> 00:42:12,760 >> PUBBLICO: Sì. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Cool. 1030 00:42:14,850 --> 00:42:17,370 Così che cosa si tratta? 1031 00:42:17,370 --> 00:42:19,160 Quindi, prima di tutto, è un pixel. 1032 00:42:19,160 --> 00:42:20,880 Questo è evidente a sufficienza, giusto? 1033 00:42:20,880 --> 00:42:23,254 Come, è denso di un pixel. 1034 00:42:23,254 --> 00:42:26,170 O sarebbe un pixel, ma sono zoom in, quindi è un po 'di più 1035 00:42:26,170 --> 00:42:26,490 di quello. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON Buchholtz-AU: E abbiamo presente risoluzione ridicola TV. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Sì. 1038 00:42:29,460 --> 00:42:33,640 Si può rendere più grande, più piccolo, qualunque cosa. 1039 00:42:33,640 --> 00:42:35,630 Quindi, ecco un bordo a due pixel. 1040 00:42:35,630 --> 00:42:38,810 Vedrete che è due volte più spessa. 1041 00:42:38,810 --> 00:42:40,172 La prossima cosa che hai è il colore. 1042 00:42:40,172 --> 00:42:41,130 Non è interessante. 1043 00:42:41,130 --> 00:42:42,710 Non ho intenzione di parlare a tale proposito, davvero. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON Buchholtz-AU: Ma lo stile potrebbe essere solo un po 'interessante. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Sì. 1046 00:42:45,980 --> 00:42:48,560 Quindi stile, ci sono pochi quelli che vedo usato comunemente. 1047 00:42:48,560 --> 00:42:55,690 Prima di uno solido, successiva di punteggiato, e l'ultimo di quella tratteggiata. 1048 00:42:55,690 --> 00:42:59,290 E qui è costellata. 1049 00:42:59,290 --> 00:43:02,980 Vedrai che sono un mucchio di punti, giusto? 1050 00:43:02,980 --> 00:43:09,030 Un buon modo per una sorta di ottenere un bel confine andare, trattini sono anche piuttosto popolari. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON Buchholtz-AU: E poi, naturalmente, io sono 1053 00:43:13,600 --> 00:43:16,660 sicuro che ci sono molti altri stili che si possono ottenere. 1054 00:43:16,660 --> 00:43:20,000 E abbiamo una grande serie di link alla fine per voi ragazzi 1055 00:43:20,000 --> 00:43:23,470 al tipo di esaminare e guardare più fresco CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: E poi l'ultima cosa, siamo 1057 00:43:25,954 --> 00:43:27,870 andando a parlare del modelli contenitore reale veloce. 1058 00:43:27,870 --> 00:43:30,070 Oh, e poi di confine, esattamente come imbottitura, 1059 00:43:30,070 --> 00:43:33,270 hai anche cose come border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, che permettono per arrivare a un bordo specifico. 1061 00:43:37,590 --> 00:43:40,650 Così qui è solo il bordo sinistro-definito. 1062 00:43:40,650 --> 00:43:43,060 Fa questo ha un senso? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON Buchholtz-AU: E 'un freddo modo per sottolineare le cose o aggiungere 1064 00:43:46,170 --> 00:43:47,545 linee tra i diversi elementi. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Assolutamente. 1066 00:43:48,670 --> 00:43:50,940 Ecco, questo è il nostro confine. 1067 00:43:50,940 --> 00:43:52,790 E il margine dell'ultimo uno. 1068 00:43:52,790 --> 00:43:55,892 Padding come di Margin tranne che non è within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON Buchholtz-AU: E ' non intorno vostro elemento 1070 00:43:57,975 --> 00:44:00,840 ma in realtà intorno all'intero scatola che che abbiamo visto. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Sì. 1072 00:44:02,770 --> 00:44:04,090 Allison ha detto perfettamente. 1073 00:44:04,090 --> 00:44:07,550 Non è, come, all'interno della vostra elemento, è in giro per l'intera scatola. 1074 00:44:07,550 --> 00:44:10,900 Ciò significa che le cose come sfondo non si applicano ad esso. 1075 00:44:10,900 --> 00:44:13,550 E dice in sostanza, come, non voglio niente 1076 00:44:13,550 --> 00:44:15,230 in questo spazio per me. 1077 00:44:15,230 --> 00:44:17,470 Così come qui abbiamo un margine di 10 pixel. 1078 00:44:17,470 --> 00:44:23,100 Quindi nulla entro 10 pixel dovrebbe essere accanto a me. 1079 00:44:23,100 --> 00:44:26,210 Questo è il genere della sua spazio ma tipo di no. 1080 00:44:26,210 --> 00:44:29,215 Ecco, questo è il molto basi del box model. 1081 00:44:29,215 --> 00:44:30,090 Questo fa senso? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Freddo, freddo. 1084 00:44:34,550 --> 00:44:35,800 ALLISON Buchholtz-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 Così ora penso che abbiamo appena le nostre risorse fresche 1086 00:44:37,890 --> 00:44:41,220 che prenderemo ragazzi attraverso molto rapidamente. 1087 00:44:41,220 --> 00:44:44,815 E noi actually-- bene, Non abbiamo ancora internet? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS Reimers: LET'S vedere se posso aprire up-- 1089 00:44:47,860 --> 00:44:50,040 fammi vedere se ho può ottenere internet rapidamente 1090 00:44:50,040 --> 00:44:53,317 mentre Allison parla di qualsiasi cosa Allison vuole parlare. 1091 00:44:53,317 --> 00:44:55,150 ALLISON Buchholtz-AU: Quindi basically-- non mi 1092 00:44:55,150 --> 00:44:57,930 so che altro posso dire a questo punto. 1093 00:44:57,930 --> 00:45:01,340 Ma questi sono solo alcuni davvero buone risorse. 1094 00:45:01,340 --> 00:45:04,629 Questi sono quelli che Tomas e ho usato 1095 00:45:04,629 --> 00:45:06,420 e che in realtà utilizzati per preparare per questo. 1096 00:45:06,420 --> 00:45:09,940 W3Schools è uno che si ragazzi avrebbero dovuto visto prima. 1097 00:45:09,940 --> 00:45:12,440 Lo consigliamo per una sacco di cose con i CSS. 1098 00:45:12,440 --> 00:45:15,060 So che consiglio a mia sezione per tutto il tempo. 1099 00:45:15,060 --> 00:45:21,050 >> Una delle grandi cose è che Consente di genere di pasticciare con i CSS 1100 00:45:21,050 --> 00:45:23,830 e vedere i cambiamenti istantaneamente in questo, 1101 00:45:23,830 --> 00:45:25,920 come, vedere doppio finestra che ha. 1102 00:45:25,920 --> 00:45:29,980 Quindi non dovete preoccuparvi di impostare la propria pagina web, 1103 00:45:29,980 --> 00:45:33,090 o la creazione di vhost in appliance locale e host locale, 1104 00:45:33,090 --> 00:45:34,980 e ottenere tutta quella roba di lavoro. 1105 00:45:34,980 --> 00:45:36,830 Si è incorporato proprio all'interno della pagina. 1106 00:45:36,830 --> 00:45:39,042 >> E ha questi piccoli lezioni che è possibile 1107 00:45:39,042 --> 00:45:40,750 passare per imparare di più su selettori, 1108 00:45:40,750 --> 00:45:44,610 o conoscere manipolare il vostro font, o un fondo, o un'immagine. 1109 00:45:44,610 --> 00:45:46,990 E voi avete questi risultati istantanei che si 1110 00:45:46,990 --> 00:45:49,310 non hanno a che fare qualsiasi altri lavori di preparazione per. 1111 00:45:49,310 --> 00:45:51,060 Così mi piace W3Schools. 1112 00:45:51,060 --> 00:45:51,960 E 'favoloso. 1113 00:45:51,960 --> 00:45:52,670 Sta funzionando? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Sì. 1115 00:45:52,950 --> 00:45:53,720 No, non lo è. 1116 00:45:53,720 --> 00:45:55,636 Vuoi che provi e riavviare il computer? 1117 00:45:55,636 --> 00:45:56,410 O vogliamo a-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON Buchholtz-AU: voglio dire, bene, questo sarà anche on-line. 1119 00:46:01,490 --> 00:46:02,740 Tutte le diapositive saranno on-line. 1120 00:46:02,740 --> 00:46:05,470 Così ho solo consiglio vivamente di fare questi. 1121 00:46:05,470 --> 00:46:07,880 >> Questo è grande come solo come un foglietto. 1122 00:46:07,880 --> 00:46:10,690 E 'solo tutta la base comandi che avete. 1123 00:46:10,690 --> 00:46:13,070 E 'bello quando si è in primo luogo partendo tuo sito web. 1124 00:46:13,070 --> 00:46:15,080 Perché forse non lo fai vuole entrare in tutte le 1125 00:46:15,080 --> 00:46:17,355 il vero Nitty Gritty Design-heavy stuff. 1126 00:46:17,355 --> 00:46:20,230 Hai solo bisogno di formattare in modo quel tipo di senso e volontà 1127 00:46:20,230 --> 00:46:21,490 fare per il momento. 1128 00:46:21,490 --> 00:46:23,580 E se si vuole veramente per entrare in esso, lo so 1129 00:46:23,580 --> 00:46:27,240 questo è, come, uno dei Riferimenti preferiti di Tomas. 1130 00:46:27,240 --> 00:46:30,130 Stavamo usando per preparazione, ed è favoloso. 1131 00:46:30,130 --> 00:46:33,030 E 'il Sviluppatore da Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: So Mozilla sono le persone che fanno Firefox. 1133 00:46:36,490 --> 00:46:40,290 Ed è proprio il loro sviluppo riferimento, che credo sia fantastico. 1134 00:46:40,290 --> 00:46:44,870 Ed ha una meravigliosa elenco di risorse. 1135 00:46:44,870 --> 00:46:45,530 Così abbiamo have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON Buchholtz-AU: E poi l'ultima nota è 1137 00:46:48,060 --> 00:46:50,120 quando si sta cercando di progettare il vostro sito web, 1138 00:46:50,120 --> 00:46:53,550 trarre ispirazione da cose che si pensa siano abbastanza. 1139 00:46:53,550 --> 00:46:56,340 Ispezione del elemento, ispezionando il codice sorgente 1140 00:46:56,340 --> 00:46:59,370 può essere super disponibile per cercare di capire 1141 00:46:59,370 --> 00:47:02,080 come per lo stile il proprio sito web. 1142 00:47:02,080 --> 00:47:04,540 >> Spesso, mi sento come il migliore modo, oltre sperimentazione, 1143 00:47:04,540 --> 00:47:06,290 è solo da guardare cose che sono abbastanza. 1144 00:47:06,290 --> 00:47:09,810 Trovo davvero difficile solo tipo di progettare le cose da soli, 1145 00:47:09,810 --> 00:47:11,090 soprattutto all'inizio. 1146 00:47:11,090 --> 00:47:14,740 Quindi, per favore guardare siti web che ti piace guardare. 1147 00:47:14,740 --> 00:47:16,880 Capire che cosa fa loro appello a voi. 1148 00:47:16,880 --> 00:47:19,170 E quindi sentitevi liberi di cercare di replicare questo. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Giusto. 1150 00:47:20,410 --> 00:47:23,120 Anche come siti web in questo modo, è possibile vedere 1151 00:47:23,120 --> 00:47:25,460 c'è sicuramente un div in alto. 1152 00:47:25,460 --> 00:47:29,920 E poi avete un altro div all'interno qui, che è CSS Awesomeness. 1153 00:47:29,920 --> 00:47:32,480 E poi hai un sacco di link qui. 1154 00:47:32,480 --> 00:47:34,770 Se davvero solo ispezionare elementi, è possibile ordinare di 1155 00:47:34,770 --> 00:47:38,520 iniziare a vedere che cosa fare siti web simile, e come posso 1156 00:47:38,520 --> 00:47:40,493 ricreare che se volevo. 1157 00:47:40,493 --> 00:47:41,890 Questo fa senso? 1158 00:47:41,890 --> 00:47:43,670 Così abbiamo solo tre minuti dalla. 1159 00:47:43,670 --> 00:47:46,380 Così domande? 1160 00:47:46,380 --> 00:47:47,650 Qualcuno di loro? 1161 00:47:47,650 --> 00:47:48,350 Sì. 1162 00:47:48,350 --> 00:47:50,780 >> AUDIENCE: Per il colore rettangolo, come faresti 1163 00:47:50,780 --> 00:47:53,499 have-- se non si desidera attraversando l'intera pagina, potrebbe 1164 00:47:53,499 --> 00:47:56,400 avete fatto andare tutto solo metà della pagina o solo il testo? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Sì, assolutamente. 1166 00:47:59,660 --> 00:48:02,780 Quindi fammi vedere realmente. 1167 00:48:02,780 --> 00:48:04,670 Ho due idee. 1168 00:48:04,670 --> 00:48:07,265 Quindi, prima di tutto, può anche utilizzare percentuali. 1169 00:48:07,265 --> 00:48:08,140 >> AUDIENCE: Davvero? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON Buchholtz-AU: So qualcosa per cercare è posizionamento relativo. 1171 00:48:11,260 --> 00:48:13,385 E 'qualcosa che abbiamo non hanno il tempo di entrare in, 1172 00:48:13,385 --> 00:48:16,392 ma è qualcosa che sicuramente consigliamo di ragazzi di verificare. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: percentuali così. 1174 00:48:17,580 --> 00:48:21,524 E vedere come abbiamo fatto solo il 50% della larghezza? 1175 00:48:21,524 --> 00:48:24,190 ALLISON Buchholtz-AU: Se in realtà conoscere il numero di pixel, 1176 00:48:24,190 --> 00:48:25,780 si può essere più precisi in questo modo. 1177 00:48:25,780 --> 00:48:27,200 Si può giocherellare con esso. 1178 00:48:27,200 --> 00:48:27,700 Ma il 50%. 1179 00:48:27,700 --> 00:48:31,970 Se dovessimo ridimensionare il nostro browser, renderebbe più piccolo. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Beh, è fondamentalmente il 50% in questo momento, penso. 1181 00:48:35,250 --> 00:48:38,820 E '50%, e quindi il margine è stato aggiunto a questo. 1182 00:48:38,820 --> 00:48:40,100 CSS ha un sacco di stranezze. 1183 00:48:40,100 --> 00:48:43,195 Così adesso è 50% della larghezza della pagina. 1184 00:48:43,195 --> 00:48:46,860 Ma ricordate che avete 10 pixel tolti da ogni lato. 1185 00:48:46,860 --> 00:48:49,700 Quindi, se si dovesse muovere quella contro il bordo sinistro del browser, 1186 00:48:49,700 --> 00:48:51,550 allora sarebbe simile al 50%. 1187 00:48:51,550 --> 00:48:53,884 Ancora una volta, come ho detto, CSS può essere un sacco di indovinare-e-check. 1188 00:48:53,884 --> 00:48:56,049 Come, pensi che qualcosa sia andando a comportarsi in un modo, 1189 00:48:56,049 --> 00:48:57,805 ma comporta un modo completamente diverso. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON Buchholtz-AU: E basta avere più intelligente, 1191 00:48:59,420 --> 00:49:02,020 e basta avere una migliore l'intuizione per come si muovono lungo. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: E diventa sempre peggio. 1193 00:49:02,730 --> 00:49:03,496 Quindi è davvero solo una gara. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON Buchholtz-AU: Questo è eccellente incoraggiante. 1195 00:49:05,454 --> 00:49:07,070 Vogliamo che come CSS. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS è impressionante. 1197 00:49:08,810 --> 00:49:10,354 Ricordate che. 1198 00:49:10,354 --> 00:49:11,020 Altre domande? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON Buchholtz-AU: L'unica cosa. 1200 00:49:14,297 --> 00:49:14,880 Qualunque altra cosa? 1201 00:49:14,880 --> 00:49:15,140 Freddo. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON Buchholtz-AU: Beh, se si ragazzi hanno tutte le domande più tardi, 1204 00:49:18,523 --> 00:49:20,919 siamo sempre disponibili come al solito. 1205 00:49:20,919 --> 00:49:22,960 Probabilmente vedrete alcuni di noi per progetti finali 1206 00:49:22,960 --> 00:49:24,280 e sicuramente al hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Assolutamente. 1208 00:49:25,200 --> 00:49:25,720 E in fiera. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON Buchholtz-AU: E in fiera. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Vediamo l'ora di vedere tutti i tuoi awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON Buchholtz-AU: Vedremo tutti i vostri siti web impressionante 1213 00:49:29,420 --> 00:49:30,572 che sarà bello. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Si può sempre vedere, come i siti web 1215 00:49:32,780 --> 00:49:36,234 che aveva, come, buona CSS e quindi come quelli che non cercano di fare i CSS. 1216 00:49:36,234 --> 00:49:39,150 ALLISON Buchholtz-AU: Inoltre, un altro cosa, una cosa da guardare in 1217 00:49:39,150 --> 00:49:40,445 è bootstrap. 1218 00:49:40,445 --> 00:49:41,805 Così Bootstrap è grande. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google che se you-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON Buchholtz-AU: Google esso. 1221 00:49:43,573 --> 00:49:44,340 E 'favoloso. 1222 00:49:44,340 --> 00:49:45,620 Ti piacerà. 1223 00:49:45,620 --> 00:49:48,000 Ed ora che avete un conoscenza di base di CSS, 1224 00:49:48,000 --> 00:49:50,340 si farà molto più senso. 1225 00:49:50,340 --> 00:49:50,890 Impressionante. 1226 00:49:50,890 --> 00:49:51,480 Grazie, ragazzi. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Grazie mille. 1228 00:49:53,330 --> 00:49:54,219