1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,500 >> [Musikwiedergabe] 3 00:00:04,500 --> 00:00:10,099 4 00:00:10,099 --> 00:00:12,224 ALLISON BUCHHOLTZ-AU: So wir sind im Grunde nur gehen 5 00:00:12,224 --> 00:00:14,629 Sie einen Überblick zu geben, von CSS, weil wir wissen, 6 00:00:14,629 --> 00:00:16,420 daß es nicht bedeckt war in allen Abschnitten. 7 00:00:16,420 --> 00:00:20,090 Und wir sicherstellen, dass Sie wollen Jungs haben dieses Tool zur Verfügung, 8 00:00:20,090 --> 00:00:24,790 weil sie die Fähigkeit, hat Ihre Webseiten sehen viel schöner. 9 00:00:24,790 --> 00:00:28,660 >> Und wenn Sie den Aufbau einer Website, dann wollen Sie wahrscheinlich ziemlich zu machen. 10 00:00:28,660 --> 00:00:31,372 Ich meine, Sie müssen nicht zu, aber ich würde es schlagen. [Lacht] 11 00:00:31,372 --> 00:00:35,430 Wenn Sie Benutzer sie benutzen wollen, können Sie will es ein wenig [unverständlich] zu machen. 12 00:00:35,430 --> 00:00:39,130 Also wir werden versuchen, Ihnen nur einige grundlegende Tools und das Verständnis, 13 00:00:39,130 --> 00:00:42,340 so dass, wenn Sie gehen und Sie sind Erforschung Dinge über CSS, 14 00:00:42,340 --> 00:00:45,902 es ist nicht vollständig Kauderwelsch, wie CSS manchmal sein. 15 00:00:45,902 --> 00:00:47,240 >> TOMAS REIMERS: Ja. 16 00:00:47,240 --> 00:00:49,930 Allison sagte, dass es ziemlich gut. 17 00:00:49,930 --> 00:00:53,250 Also ich denke, das erste, was wir sollten ist, was CSS zu beginnen? 18 00:00:53,250 --> 00:00:55,750 So CSS is awesome. 19 00:00:55,750 --> 00:00:56,250 CSS-- 20 00:00:56,250 --> 00:00:58,320 >> ALLISON BUCHHOLTZ-AU: Das ist, der Name unseres Seminars. 21 00:00:58,320 --> 00:00:58,434 >> TOMAS REIMERS: Ja. 22 00:00:58,434 --> 00:01:00,130 Es ist wirklich wichtig, dass Sie verstehen, dass bis dahin. 23 00:01:00,130 --> 00:01:03,090 Wenn Sie nur nehmen ein Sache, es ist, dass CSS wenn awesome. 24 00:01:03,090 --> 00:01:06,180 Zwei ist CSS steht für Cascading Style Sheets. 25 00:01:06,180 --> 00:01:10,380 So in seinem Kern, ist CSS ein Stylesheet, was bedeutet, 26 00:01:10,380 --> 00:01:13,200 es erlaubt Ihnen, eine Web-Seite formatieren. 27 00:01:13,200 --> 00:01:16,609 Und dann, was das bedeutet, es ist ein Weg, um Stil, um Ihre Webseiten hinzuzufügen. 28 00:01:16,609 --> 00:01:18,900 So nach Stil, dann meinen wir alles das ist nicht structural-- 29 00:01:18,900 --> 00:01:24,350 so Dinge wie Farben, Hintergrund Bilder, Grenzen, wie, Polsterung, 30 00:01:24,350 --> 00:01:25,040 Margen. 31 00:01:25,040 --> 00:01:27,310 Wir werden darüber reden, was all das bedeutet, in ein wenig. 32 00:01:27,310 --> 00:01:30,110 >> Also haben wir einfach weitergemacht und eröffnet diese beiden in gedit. 33 00:01:30,110 --> 00:01:32,680 Das ist also index.HTML. 34 00:01:32,680 --> 00:01:34,800 Und das ist main.css. 35 00:01:34,800 --> 00:01:36,829 So main.css nichts. 36 00:01:36,829 --> 00:01:38,412 ALLISON BUCHHOLTZ-AU: Keine Stil so weit. 37 00:01:38,412 --> 00:01:39,245 TOMAS REIMERS: Keine. 38 00:01:39,245 --> 00:01:42,577 Und wie Sie sehen werden, ist es eine wirklich hässliche Seite. 39 00:01:42,577 --> 00:01:44,160 ALLISON BUCHHOLTZ-AU: Es ist einfach nur. 40 00:01:44,160 --> 00:01:45,820 TOMAS REIMERS: Ja. 41 00:01:45,820 --> 00:01:49,150 Ja, es ist nicht hässlich, es ist nur minimalistisch. 42 00:01:49,150 --> 00:01:53,430 Und dann haben wir hier index.html. 43 00:01:53,430 --> 00:01:55,729 Und so für eine schnelle Rückblick auf HTML, Allison, 44 00:01:55,729 --> 00:01:57,270 Sie wollen, nur um die Seite zu sprechen? 45 00:01:57,270 --> 00:01:58,395 >> ALLISON BUCHHOLTZ-AU: Ja. 46 00:01:58,395 --> 00:02:01,100 So offensichtlich, haben wir unsere HTML Tag, die nur Namen HTML-Datei. 47 00:02:01,100 --> 00:02:07,080 Wir haben unsere Kopf hier, mit CSS Awesomeness, which--, wenn Sie zurückgehen. 48 00:02:07,080 --> 00:02:07,720 Wo ist das? 49 00:02:07,720 --> 00:02:09,136 >> TOMAS REIMERS: Oh. 50 00:02:09,136 --> 00:02:10,301 Ja, Sie sehen können. 51 00:02:10,301 --> 00:02:12,092 ALLISON BUCHHOLTZ-AU: Und beachten Sie die Kopf 52 00:02:12,092 --> 00:02:14,120 ist diese Registerkarte Kopf hier oben. 53 00:02:14,120 --> 00:02:17,130 Und dann: "Hallo, Welt!" ist der Text, die wir gerade haben 54 00:02:17,130 --> 00:02:19,620 Anzeigen auf dem Web Seite, die zurück ist--. 55 00:02:19,620 --> 00:02:21,290 Zurück. 56 00:02:21,290 --> 00:02:24,287 Das ist gerade in unserem Körper hier-- den Klartext. 57 00:02:24,287 --> 00:02:26,120 Auch eine Sache, bemerken, wenn Sie hier suchen, 58 00:02:26,120 --> 00:02:29,410 Tomas schaltet bis diese zwei aus unserer Folie. 59 00:02:29,410 --> 00:02:32,035 So lange, wie Sie alle haben drei von ihnen, du bist in Ordnung. 60 00:02:32,035 --> 00:02:34,044 Sie können in beliebiger Reihenfolge sie wollen. 61 00:02:34,044 --> 00:02:39,368 Das Wichtigste ist, genau das zu Sie haben jede dieser drei Dinge. 62 00:02:39,368 --> 00:02:40,340 >> TOMAS REIMERS: Kühl. 63 00:02:40,340 --> 00:02:41,111 Fügen Sie eine doc-Typ? 64 00:02:41,111 --> 00:02:42,235 ALLISON BUCHHOLTZ-AU: Ja. 65 00:02:42,235 --> 00:02:43,068 TOMAS REIMERS: Ja. 66 00:02:43,068 --> 00:02:43,769 Kühle. 67 00:02:43,769 --> 00:02:46,102 ALLISON BUCHHOLTZ-AU: Offenbar meine Mikrofone mögen mich nicht. 68 00:02:46,102 --> 00:02:49,650 TOMAS REIMERS: Oh, geben Sie uns eine Sekunde nur während Allison schaltet sich ihr Mikrofon. 69 00:02:49,650 --> 00:02:50,500 Also ja. 70 00:02:50,500 --> 00:02:52,030 So haben wir unsere Hauptseite. 71 00:02:52,030 --> 00:02:53,890 Es ist eine Art ungeschminkt. 72 00:02:53,890 --> 00:02:54,780 Wir haben nicht viel. 73 00:02:54,780 --> 00:02:57,110 Wir haben im Grunde nur Text. 74 00:02:57,110 --> 00:02:59,470 Wir haben das Stylesheet. 75 00:02:59,470 --> 00:03:00,220 Wir haben den Titel. 76 00:03:00,220 --> 00:03:04,020 Also einfach mit bloßen Knochen Komponenten machen eine Website. 77 00:03:04,020 --> 00:03:08,880 >> Also von dort aus, lassen Sie uns darüber reden, was CSS ist 78 00:03:08,880 --> 00:03:11,270 und, wie es aussieht und das alles. 79 00:03:11,270 --> 00:03:12,047 Also für dass-- 80 00:03:12,047 --> 00:03:13,755 ALLISON BUCHHOLTZ-AU: Zurück zu den Folien. 81 00:03:13,755 --> 00:03:15,200 TOMAS REIMERS: Zurück zu den Folien. 82 00:03:15,200 --> 00:03:17,240 Und Allison übernehmen kann. 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 Also in Ihrem CSS-Datei, Sie gehen zu müssen sind 86 00:03:22,360 --> 00:03:25,010 viele dieser Dinge genannt Selektoren. 87 00:03:25,010 --> 00:03:27,420 Das wird nur sein, die Grundlage Ihrer CSS-Datei. 88 00:03:27,420 --> 00:03:29,480 Es ist nur los zu sein viele, viele von diesen. 89 00:03:29,480 --> 00:03:30,780 So Wähler. 90 00:03:30,780 --> 00:03:32,649 Dies ist nur der allgemeinen Anatomie. 91 00:03:32,649 --> 00:03:35,190 Wir werden durchgehen Beispiele, denn wenn euch nie 92 00:03:35,190 --> 00:03:38,400 sah meine Abschnitt, ich fühle mich wie die Dinge in der Zusammenfassung 93 00:03:38,400 --> 00:03:39,400 nicht wirklich sinnvoll. 94 00:03:39,400 --> 00:03:41,110 Es hilft immer, um die Beispiele zu sehen. 95 00:03:41,110 --> 00:03:42,420 >> So haben wir einige Wahl. 96 00:03:42,420 --> 00:03:49,120 Das wird einige Bezeichner für sein was wir wollen den Stil zu gelten. 97 00:03:49,120 --> 00:03:52,220 Und dann können wir welche haben eine Reihe von Regeln und Werten. 98 00:03:52,220 --> 00:03:55,680 So Selektoren, die Sie sehen, könnte so etwas wie Körper, 99 00:03:55,680 --> 00:04:00,262 oder Absatz mit P, oder Kopfzeile, oder was auch immer, 100 00:04:00,262 --> 00:04:02,000 was auch immer Sie möchten, dass Ihre HTML-Tags sein. 101 00:04:02,000 --> 00:04:03,570 >> Also in diesem Fall, wir haben Körper. 102 00:04:03,570 --> 00:04:06,985 Und wir haben eine Regel, das entspricht 103 00:04:06,985 --> 00:04:09,610 zu, was Ihr Stil gilt. 104 00:04:09,610 --> 00:04:12,720 Also in diesem Fall, wir haben Hintergrundfarbe und Schriftstärke. 105 00:04:12,720 --> 00:04:16,200 Also das wird sich ändern der Hintergrund etwas 106 00:04:16,200 --> 00:04:19,640 innerhalb eines Body-Tag der HTML-Datei. 107 00:04:19,640 --> 00:04:22,810 Und es wird zu geben es dieses Licht Blau-Wert. 108 00:04:22,810 --> 00:04:24,820 >> Also es geht um das zu machen Hintergrund hellblau. 109 00:04:24,820 --> 00:04:28,660 Und dann nichts im Körper werde ein Schriftschnitt fett haben. 110 00:04:28,660 --> 00:04:31,142 So ist es nur geht, um bold alle unsere Texte. 111 00:04:31,142 --> 00:04:32,970 Und das ist nur ein Wahl. 112 00:04:32,970 --> 00:04:34,680 Aber Sie haben konnten sehr viele von ihnen. 113 00:04:34,680 --> 00:04:38,730 Und wir werden zeigen, später, ein wenig mehr darüber, wie 114 00:04:38,730 --> 00:04:40,709 dass Werke und mehr Beispiele gibt. 115 00:04:40,709 --> 00:04:41,750 Alles, was Sie hinzufügen möchten? 116 00:04:41,750 --> 00:04:42,499 >> TOMAS REIMERS: Nein 117 00:04:42,499 --> 00:04:43,500 Allison bekam sie. 118 00:04:43,500 --> 00:04:46,144 Wir sind gerade dabei, zu zerschneiden ein Beispiel hier auf unserem Beispiel-Site. 119 00:04:46,144 --> 00:04:47,310 Lassen Sie uns also tatsächlich nehmen dies. 120 00:04:47,310 --> 00:04:48,620 Es ist perfekt. 121 00:04:48,620 --> 00:04:54,460 Also ich werde einfach kopieren und einfügen dass direkt in unsere main.css Datei. 122 00:04:54,460 --> 00:04:56,530 Und ich werde es zu speichern. 123 00:04:56,530 --> 00:04:59,190 Und dann werden wir es laufen. 124 00:04:59,190 --> 00:05:01,600 So Randnotiz, einer der frustrierenden Dinge 125 00:05:01,600 --> 00:05:04,490 wird, wenn Sie nicht speichern Sie eine Datei, und dann sie, wie, laden Sie die Seite, 126 00:05:04,490 --> 00:05:07,450 und wie, warum nicht die Änderung passiert? 127 00:05:07,450 --> 00:05:07,950 Es geschieht. 128 00:05:07,950 --> 00:05:14,230 Also hier haben wir gesehen, dass wir unsere Website ein hellblauen Hintergrund 129 00:05:14,230 --> 00:05:16,560 und einige Fettschrift. 130 00:05:16,560 --> 00:05:20,730 >> Ich sollte auch erwähnen, wenn Sie Jungs Fragen über alles haben 131 00:05:20,730 --> 00:05:23,622 wir tun, wenden Sie sich frei, uns zu stoppen und fragen Sie uns. 132 00:05:23,622 --> 00:05:25,330 Wir sind total bereit Fragen zu Feld. 133 00:05:25,330 --> 00:05:27,951 134 00:05:27,951 --> 00:05:31,930 >> ALLISON BUCHHOLTZ-AU: Offensichtlich mit CSS, baut alles auf sich selbst. 135 00:05:31,930 --> 00:05:34,107 Also, wenn eine Sache nicht Sinn jetzt, wir 136 00:05:34,107 --> 00:05:35,690 wollen nicht, dass Sie später festfahren. 137 00:05:35,690 --> 00:05:38,390 138 00:05:38,390 --> 00:05:41,930 >> TOMAS REIMERS: Also lassen Sie uns Art sezieren diese. 139 00:05:41,930 --> 00:05:44,210 Also Sie starten möchten mit dem Wahl hier? 140 00:05:44,210 --> 00:05:45,979 >> ALLISON BUCHHOLTZ-AU: Ja. 141 00:05:45,979 --> 00:05:48,270 Wie ich bereits sagte, Körper ist nur unser Wahl hier. 142 00:05:48,270 --> 00:05:50,950 Also, wenn wir wieder über unsere index-- ah. 143 00:05:50,950 --> 00:05:53,245 >> TOMAS REIMERS: Was ich gerade geschlossen. 144 00:05:53,245 --> 00:05:54,530 Gib mir eine Sekunde. 145 00:05:54,530 --> 00:05:58,286 So Datei, Öffnen, index.html. 146 00:05:58,286 --> 00:05:59,410 ALLISON BUCHHOLTZ-AU: Kühl. 147 00:05:59,410 --> 00:06:02,710 Also, wenn Sie hier bemerken wir haben diese Body-Tags, nicht wahr? 148 00:06:02,710 --> 00:06:06,270 So ist die Wahl entspricht nur die Variablen, die wir hier reden. 149 00:06:06,270 --> 00:06:07,670 So Körper hier richtig. 150 00:06:07,670 --> 00:06:10,315 Also, was wir sagen ist everything-- können wir wiederkommen? 151 00:06:10,315 --> 00:06:12,065 Ich wünschte, ich könnte einfach wie den Bildschirm berühren. 152 00:06:12,065 --> 00:06:14,410 Es wäre so viel kühler. 153 00:06:14,410 --> 00:06:17,150 >> Also alles in die Body-Tags, die wir sahen, 154 00:06:17,150 --> 00:06:19,637 war nur, wie der Text, und der Körper im Allgemeinen 155 00:06:19,637 --> 00:06:20,970 bezieht sich, wie der Hintergrund. 156 00:06:20,970 --> 00:06:22,720 Wenn Sie schon immer einmal ändern Sie den Hintergrund, 157 00:06:22,720 --> 00:06:25,090 das wird in einem Body-Tag sein. 158 00:06:25,090 --> 00:06:27,120 Nur hat diese Regeln auf sie angewendet. 159 00:06:27,120 --> 00:06:32,040 >> Also, wenn wir hier um zu gehen index.html und-- tatsächlich, 160 00:06:32,040 --> 00:06:33,840 können wir etwas haben außerhalb des Körpers? 161 00:06:33,840 --> 00:06:37,340 Wenn wir, wie, eine Fußzeile oder etwas, wäre es nicht darauf an. 162 00:06:37,340 --> 00:06:40,900 Aber alles, was innerhalb diese Body-Tags wird 163 00:06:40,900 --> 00:06:44,960 die von diesem Körper betroffen sein Selektor, die wir gemacht haben. 164 00:06:44,960 --> 00:06:47,405 Also, wenn Sie mit der Eingabe waren etwas anderes sind-- 165 00:06:47,405 --> 00:06:49,400 >> TOMAS REIMERS: Lassen Sie uns fahren, dass zu Hause. 166 00:06:49,400 --> 00:06:55,330 Also, wenn wir hatten eine div-- also ist das nur ein weiterer Tag Sie haben können. 167 00:06:55,330 --> 00:06:56,350 Ich werde es zu schließen. 168 00:06:56,350 --> 00:06:58,280 Oder wir machen dies zu einem Absatz. 169 00:06:58,280 --> 00:07:01,430 So p steht für Absatz. 170 00:07:01,430 --> 00:07:02,560 Und in diesem Absatz. 171 00:07:02,560 --> 00:07:05,650 Und dann sage ich: "Das ist Text." 172 00:07:05,650 --> 00:07:06,369 Kühle. 173 00:07:06,369 --> 00:07:09,160 Und dann habe ich diese Regel anwenden ein Absatz an Stelle des Körpers. 174 00:07:09,160 --> 00:07:12,390 175 00:07:12,390 --> 00:07:17,320 Sie werden sehen, wie sie sich nur auf das neu gebildete Absatz, rechts, 176 00:07:17,320 --> 00:07:18,892 nicht das Ganze. 177 00:07:18,892 --> 00:07:20,090 Ist das sinnvoll? 178 00:07:20,090 --> 00:07:21,840 >> ALLISON BUCHHOLTZ-AU: Das ist also alles Körper, 179 00:07:21,840 --> 00:07:24,450 aber jetzt unsere Wahl gerade entspricht dem Absatz. 180 00:07:24,450 --> 00:07:27,050 Also haben wir einfach nur fett und blau Für diese bestimmte Nummer, 181 00:07:27,050 --> 00:07:30,760 denn dies ist die einzige Sache, dass innerhalb des p-Tag umschlossen. 182 00:07:30,760 --> 00:07:35,349 >> TOMAS REIMERS: Macht das Sinn sort , wie die Dinge zu kapseln anderem? 183 00:07:35,349 --> 00:07:38,140 ALLISON BUCHHOLTZ-AU: Auch, zu sagen, wie, eine der besten Möglichkeiten, 184 00:07:38,140 --> 00:07:40,889 um wirklich bequem mit CSS ist genau das zu tun, Dinge wie diese, 185 00:07:40,889 --> 00:07:42,050 einfach ausprobieren. 186 00:07:42,050 --> 00:07:46,700 Es ist sehr einfach, etwas zu geben aus, schlagen Aktualisieren, und sehen, was passiert. 187 00:07:46,700 --> 00:07:48,940 Und wie bei den meisten CS, Experimente können oft 188 00:07:48,940 --> 00:07:51,790 führen zu einer viel besser intuitives Verständnis. 189 00:07:51,790 --> 00:07:54,432 Noch mehr als uns nur, wie, mit dir zu reden. 190 00:07:54,432 --> 00:07:58,350 >> TOMAS REIMERS: Absolut 100% stimmen in diesem Punkt. 191 00:07:58,350 --> 00:08:02,430 Also, wenn wir wieder in dieses zu gehen, lassen Sie uns beginnen Sezieren genau das, was die beiden tun. 192 00:08:02,430 --> 00:08:04,550 Wir haben also zwei Regeln zu diesem Thema. 193 00:08:04,550 --> 00:08:07,420 So die erste ist die Hintergrundfarbe. 194 00:08:07,420 --> 00:08:10,590 Und Sie sehen, dass wir es festgelegt haben gleich einem Wert, hellblau. 195 00:08:10,590 --> 00:08:15,009 >> So in CSS, ist CSS Art der sehr locker, wie 196 00:08:15,009 --> 00:08:16,300 dürfen Sie Farbe zu definieren. 197 00:08:16,300 --> 00:08:17,800 So kann man sie beim Namen zu definieren. 198 00:08:17,800 --> 00:08:20,650 Sie können auch so etwas wie "red". 199 00:08:20,650 --> 00:08:25,270 Und dann, wenn wir wieder in diese, Sie werden sehen, dass der Hintergrund ist rot. 200 00:08:25,270 --> 00:08:29,040 Sie können auch really-- Ich glaube, Sie kann ziemlich kreativ mit diesen zu bekommen, 201 00:08:29,040 --> 00:08:29,540 nicht wahr? 202 00:08:29,540 --> 00:08:31,170 >> ALLISON BUCHHOLTZ-AU: I denke, man kann hex verwenden. 203 00:08:31,170 --> 00:08:31,250 Nicht wahr? 204 00:08:31,250 --> 00:08:32,083 >> TOMAS REIMERS: Ja. 205 00:08:32,083 --> 00:08:32,969 So können Sie hex verwenden. 206 00:08:32,969 --> 00:08:34,490 Aber ich denke, Name-weise. 207 00:08:34,490 --> 00:08:35,385 Gibt es nicht? 208 00:08:35,385 --> 00:08:37,260 ALLISON BUCHHOLTZ-AU: Sie können ziemlich viele tun. 209 00:08:37,260 --> 00:08:43,350 Ziemlich genau wie die meisten Farben, die Sie kann wie name--, ich glaube, Lachs gehört. 210 00:08:43,350 --> 00:08:45,322 >> TOMAS REIMERS: Wir werden versuchen, Lachs. 211 00:08:45,322 --> 00:08:47,530 ALLISON BUCHHOLTZ-AU: I denken Chartreuse ist drin. 212 00:08:47,530 --> 00:08:48,050 TOMAS REIMERS: Ja. 213 00:08:48,050 --> 00:08:48,550 Siehst du? 214 00:08:48,550 --> 00:08:50,080 So können Sie ziemlich kreativ. 215 00:08:50,080 --> 00:08:52,246 >> ALLISON BUCHHOLTZ-AU: Sie könnte ganz schön kreativ. 216 00:08:52,246 --> 00:08:55,750 Wie, wenn Sie von der denken kann, Farbbezeichnung, ist es wahrscheinlich drin. 217 00:08:55,750 --> 00:08:57,840 Wenn Sie wirklich wollen Fein Einzelheiten können Sie hex gehen. 218 00:08:57,840 --> 00:08:58,673 >> TOMAS REIMERS: Ja. 219 00:08:58,673 --> 00:08:59,390 So hexadezimal. 220 00:08:59,390 --> 00:09:05,280 Wenn euch erinnere mich an diese zurück von Ihrem alten PSET, Bildwiederherstellung, 221 00:09:05,280 --> 00:09:08,300 euch zu tun hatte mit diesen Hex-Werte. 222 00:09:08,300 --> 00:09:15,280 Und irgendwie zu rekapitulieren, was das ist, hex besitzt drei darin gespeicherten Werten. 223 00:09:15,280 --> 00:09:17,250 Es ist also in Gruppen von zwei Schritten. 224 00:09:17,250 --> 00:09:19,300 Die ersten beiden vertreten die Rot-Wert. 225 00:09:19,300 --> 00:09:22,420 Die zweite stellt die Grün-Wert. 226 00:09:22,420 --> 00:09:25,020 Und die letzte ist blau? 227 00:09:25,020 --> 00:09:30,050 >> So FF passiert vertreten eine hexadezimale 255. 228 00:09:30,050 --> 00:09:35,480 So haben Sie 255 rot, 255 grün, und 0 für blau. 229 00:09:35,480 --> 00:09:37,670 Und Werte liegen zwischen 0 und 255. 230 00:09:37,670 --> 00:09:38,350 >> ZIELGRUPPE: Richtig. 231 00:09:38,350 --> 00:09:41,472 So im Wesentlichen, wir suchen könnten das Internet für jeden Farb wir wollen, 232 00:09:41,472 --> 00:09:43,912 und Identifizierung der tatsächlich bekannt Farbspektrum-Combo, 233 00:09:43,912 --> 00:09:45,130 und dann könnten wir sie in setzen? 234 00:09:45,130 --> 00:09:46,380 ALLISON BUCHHOLTZ-AU: Genau. 235 00:09:46,380 --> 00:09:52,900 So haben Sie so ziemlich die komplette Kontrolle über die Farben, die Sie wollen in CSS. 236 00:09:52,900 --> 00:09:55,069 Werden wir, darüber zu sprechen Hintergrundbilder später? 237 00:09:55,069 --> 00:09:56,110 Oder wollen wir das tun? 238 00:09:56,110 --> 00:09:56,240 >> TOMAS REIMERS: Ja. 239 00:09:56,240 --> 00:09:57,010 Absolut. 240 00:09:57,010 --> 00:10:00,830 Also zuerst, nur um zu zeigen, dass Rot und Grün ist gelb. 241 00:10:00,830 --> 00:10:03,120 Und wenn Sie etwas brauchen, Hilfe bei der Suche dieser, Sie 242 00:10:03,120 --> 00:10:05,575 kann Google etwas wie "Farbauswahl". 243 00:10:05,575 --> 00:10:07,200 ALLISON BUCHHOLTZ-AU: Oh, es ist so gut. 244 00:10:07,200 --> 00:10:09,090 Ich liebe die Farbauswahl. 245 00:10:09,090 --> 00:10:11,360 >> TOMAS REIMERS: colorpicker.com ist ein gutes Beispiel. 246 00:10:11,360 --> 00:10:14,580 Und hier, sehen Sie, dass Sie Voll Photoshop-ähnlichen Farbwähler. 247 00:10:14,580 --> 00:10:14,920 >> ALLISON BUCHHOLTZ-AU: Mm-hm. 248 00:10:14,920 --> 00:10:16,980 Auch Sie sind die coolen Dinge können Farbschemata erzeugen 249 00:10:16,980 --> 00:10:18,896 so dass Sie nicht haben, wie, grellen Farbkontrasten. 250 00:10:18,896 --> 00:10:22,780 TOMAS REIMERS: Und dann hier ist der Hex-Wert hier oben. 251 00:10:22,780 --> 00:10:27,800 So finden Sie immer Online Grunde Orte, um den Hex-Wert ausgegeben werden soll. 252 00:10:27,800 --> 00:10:31,667 Es ist nicht von dieser nur zu sortieren, wie wir sehen die Farben der Welt in Zahlen. 253 00:10:31,667 --> 00:10:34,000 Es ist mehr, dass wir online gehen und finden Sie, welche Farbe wir wollen, 254 00:10:34,000 --> 00:10:36,850 und dann die Nummer. 255 00:10:36,850 --> 00:10:39,590 Da ist es nur eine einfach Weg, um Dinge in CS verweisen. 256 00:10:39,590 --> 00:10:40,350 >> ALLISON BUCHHOLTZ-AU: Und dann gibt es also-- 257 00:10:40,350 --> 00:10:41,630 Ich vergesse den genauen Namen des Ortes. 258 00:10:41,630 --> 00:10:43,838 Aber es ist auf jeden Fall, ich denken, etwas von Adobe 259 00:10:43,838 --> 00:10:48,350 dass generiert Farbschemata für Sie, das ist wirklich cool, weil man 260 00:10:48,350 --> 00:10:50,580 definitely-- es manchmal schwer, herauszufinden, 261 00:10:50,580 --> 00:10:53,729 oh, wenn ich diese Farbe zu verwenden, was man ein weiteres nützliches sein 262 00:10:53,729 --> 00:10:56,395 an anderer Stelle auf meiner Website zu bedienen, wie, machen es schön und Zusammenhalt. 263 00:10:56,395 --> 00:11:00,430 264 00:11:00,430 --> 00:11:04,260 >> TOMAS REIMERS: Allison sprechen einen von Adobe Kuler genannt, denke ich. 265 00:11:04,260 --> 00:11:04,885 Es ist K-U-L-E-R. 266 00:11:04,885 --> 00:11:06,259 ALLISON BUCHHOLTZ-AU: Ich denke schon. 267 00:11:06,259 --> 00:11:07,610 Ich bin mir ziemlich sicher, das ist das eine. 268 00:11:07,610 --> 00:11:11,050 >> TOMAS REIMERS: Meine Lieblings hat immer 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: Was ist now-- 271 00:11:16,010 --> 00:11:16,860 >> ALLISON BUCHHOLTZ-AU: Ah, das ist schön. 272 00:11:16,860 --> 00:11:18,818 >> TOMAS REIMERS: Und Sie kann grundsätzlich sagen, wie, 273 00:11:18,818 --> 00:11:21,700 Ich möchte drei Farben nebeneinander. 274 00:11:21,700 --> 00:11:25,030 Und dann machen wir etwas Schönes. 275 00:11:25,030 --> 00:11:29,210 Und dann können Sie ein Beispiel zu bekommen was das aussehen könnte. 276 00:11:29,210 --> 00:11:32,470 Und dann, wenn Sie den Mauszeiger über einem der sie, es gibt Ihnen den Hex-Wert. 277 00:11:32,470 --> 00:11:35,010 >> So wie ein guter Anfang Gedanken über Farbschemata 278 00:11:35,010 --> 00:11:39,570 oder welche Farben in einer Website könnten gut zusammen. 279 00:11:39,570 --> 00:11:45,655 Denn das überraschend sein kann, nicht so leicht zu erlernen, wie Sie denken. 280 00:11:45,655 --> 00:11:48,280 Und dann die andere coole Sache Ich war schon immer von dieser Seite gefunden 281 00:11:48,280 --> 00:11:51,480 ist, wenn Sie Beispiele zu schlagen, werde es zu zeigen, was ein Beispiel Website 282 00:11:51,480 --> 00:11:54,800 könnte wie mit diesem Farbschema zu suchen. 283 00:11:54,800 --> 00:11:56,270 Wie auch immer. 284 00:11:56,270 --> 00:11:57,863 >> Zurück zur aktuellen CSS. 285 00:11:57,863 --> 00:12:01,112 ALLISON BUCHHOLTZ-AU: Aber natürlich, wir wissen diese Hinweise nützlich sein könnten. 286 00:12:01,112 --> 00:12:03,195 TOMAS REIMERS: Nein, sie auf jeden Fall hilfreich sein. 287 00:12:03,195 --> 00:12:04,720 So der zweiten Regel, Allison? 288 00:12:04,720 --> 00:12:05,844 >> ALLISON BUCHHOLTZ-AU: Ja. 289 00:12:05,844 --> 00:12:08,280 Die zweite Regel ist einfach entsprechend unserer Schrift. 290 00:12:08,280 --> 00:12:11,520 So Schriftstärke ist nur irgendwie von-- so das Gewicht würde 291 00:12:11,520 --> 00:12:15,220 , wenn Sie wollen einfach nur, wie, normal oder, wie, dünner Schriftarten 292 00:12:15,220 --> 00:12:17,251 oder in diesem Fall, wie, fett. 293 00:12:17,251 --> 00:12:17,750 Ich vergesse. 294 00:12:17,750 --> 00:12:21,557 Was ist das, wenn man wollte es-- ist da eine dünnere als nur, wie, normal? 295 00:12:21,557 --> 00:12:24,140 TOMAS REIMERS: Ich weiß nicht wirklich wissen, ob es eine dünnere. 296 00:12:24,140 --> 00:12:24,680 ALLISON BUCHHOLTZ-AU: ich vergesse. 297 00:12:24,680 --> 00:12:26,300 So haben wir in der Regel Schriftstärke benutzen Sie einfach für Fettschrift. 298 00:12:26,300 --> 00:12:29,010 Wenn Sie wirklich in zu erhalten es, wir werden es Ihnen zeigen. 299 00:12:29,010 --> 00:12:34,317 W3Schools hat all die verschiedenen Dinge, die Sie für die Schriften zu tun. 300 00:12:34,317 --> 00:12:36,900 Aber im Grunde, wenn man sich nur wünschen etwas über Schriftart zu ändern, 301 00:12:36,900 --> 00:12:39,330 ist es immer sein wird, wie, font-etwas. 302 00:12:39,330 --> 00:12:43,450 Also es wird wie, font-family sein, wenn Sie versuchen, den tatsächlichen Typ verändern. 303 00:12:43,450 --> 00:12:47,390 Es wird font-style, wenn Sie sein will es wie Schreibschrift zu machen, 304 00:12:47,390 --> 00:12:49,710 oder kursiv, oder was. 305 00:12:49,710 --> 00:12:53,570 Oder sogar Schriftfarbe, wenn wir wollten das ändern. 306 00:12:53,570 --> 00:12:55,621 >> TOMAS REIMERS: Yup. 307 00:12:55,621 --> 00:12:56,925 So können Sie das ändern. 308 00:12:56,925 --> 00:12:59,360 Und irgendwie, nur um Zusammenfassung an, damit Sie können 309 00:12:59,360 --> 00:13:01,400 zu sehen, dass wir die Auswahltaste nach oben hier. 310 00:13:01,400 --> 00:13:03,000 Wir haben diese geschweiften Klammern. 311 00:13:03,000 --> 00:13:06,735 Und dann haben wir Regeln durch ein Semikolon getrennt. 312 00:13:06,735 --> 00:13:08,100 Ist das sinnvoll? 313 00:13:08,100 --> 00:13:09,130 Ja? 314 00:13:09,130 --> 00:13:10,500 Kühle. 315 00:13:10,500 --> 00:13:13,200 Also wenn das good-- 316 00:13:13,200 --> 00:13:14,424 >> ALLISON BUCHHOLTZ-AU: Zurück. 317 00:13:14,424 --> 00:13:17,590 TOMAS REIMERS: Lassen Sie uns speziell sprechen über welche Art von Selektoren wir haben. 318 00:13:17,590 --> 00:13:19,790 Denn gerade jetzt wir haben Art gerade gezeigt Tags. 319 00:13:19,790 --> 00:13:21,696 Aber ihr Jungs sehen konnte es plausibel. 320 00:13:21,696 --> 00:13:23,570 Angenommen, Sie haben zwei Absätze auf einer Seite und Sie 321 00:13:23,570 --> 00:13:26,087 wollen in der Lage sein Stil eine, aber nicht die andere, 322 00:13:26,087 --> 00:13:29,170 Sie wollen nicht nur, um sich selbst zu begrenzen auf verschiedene tatsächliche HTML verwenden zu müssen 323 00:13:29,170 --> 00:13:33,410 Tags, um sie verschiedenen Stilen zu geben. 324 00:13:33,410 --> 00:13:35,995 >> Also haben wir drei Grund haben Arten von Selektoren. 325 00:13:35,995 --> 00:13:37,120 ALLISON BUCHHOLTZ-AU: Ja. 326 00:13:37,120 --> 00:13:39,828 So haben wir Tag, was was ist wir haben etwa bereits jetzt sprechen. 327 00:13:39,828 --> 00:13:42,430 Also das ist eine Art, wie Sie Ihren Körper oder p. 328 00:13:42,430 --> 00:13:46,280 Und dann haben wir Klasse, das ist, wenn wir sie definieren, in unserem CSS-Datei, 329 00:13:46,280 --> 00:13:49,907 es wird immer zu Punkt sein, was auch immer Sie wollen den Namen Ihrer Klasse zu sein. 330 00:13:49,907 --> 00:13:51,490 Und dies kann mehrere Dinge gelten. 331 00:13:51,490 --> 00:13:54,610 332 00:13:54,610 --> 00:13:57,610 >> Sagen Sie fünf Absätze haben und zwei der drei von ihnen 333 00:13:57,610 --> 00:14:00,580 müssen gleich gestaltet werden, Sie würde eine Klasse, sie anzuwenden. 334 00:14:00,580 --> 00:14:03,040 Und das ist nur die Art, wie wir es tun. 335 00:14:03,040 --> 00:14:05,600 Registrieren Sie ein Beispiel geben wo dies tatsächlich auftaucht. 336 00:14:05,600 --> 00:14:11,030 Aber wenn Sie etwas Tag hatte vielleicht p, nachdem sie, würden Sie schreiben, 337 00:14:11,030 --> 00:14:14,170 Klasse entspricht unabhängig von Klassen Sie, um es anwenden möchten. 338 00:14:14,170 --> 00:14:19,280 Also unabhängig von Klassen-Selektoren, die wir wollen auf diese spezifischen Absatz anzuwenden, 339 00:14:19,280 --> 00:14:21,300 wir konnten einfach so schreiben. 340 00:14:21,300 --> 00:14:24,080 Natürlich, ich glaube, ein Beispiel wird es viel konkreter. 341 00:14:24,080 --> 00:14:27,270 >> Das andere, das wir haben id ist, die wir bezeichnen 342 00:14:27,270 --> 00:14:29,707 mit einem Doppelkreuz oder Hashtag. 343 00:14:29,707 --> 00:14:30,790 TOMAS REIMERS: Octothorpe. 344 00:14:30,790 --> 00:14:32,430 ALLISON BUCHHOLTZ-AU: Octothorpe. 345 00:14:32,430 --> 00:14:34,550 Das funktioniert auch. 346 00:14:34,550 --> 00:14:36,640 Und das sollte man wirklich eindeutig sein. 347 00:14:36,640 --> 00:14:39,880 Sie sollten nur gelten eine Sache auf Ihrer Seite. 348 00:14:39,880 --> 00:14:43,820 Egal, ob das ist eine bestimmte Nummer, oder ein Element in einer Liste, oder was auch immer, 349 00:14:43,820 --> 00:14:45,090 dies sollte eindeutig sein. 350 00:14:45,090 --> 00:14:48,730 Und in der gleichen Weise, die wir gerade sagen, wie, class = "class1 class2" 351 00:14:48,730 --> 00:14:51,577 dies kann nur id, was wir haben. 352 00:14:51,577 --> 00:14:52,410 TOMAS REIMERS: Ja. 353 00:14:52,410 --> 00:14:54,330 Lassen Sie uns also auf jeden Fall sprechen um Beispiele. 354 00:14:54,330 --> 00:14:58,170 Und ich werde einfach zu tauchen gerade zurück in den Code. 355 00:14:58,170 --> 00:15:02,090 Lassen Sie uns also einen Blick auf unsere HTML. 356 00:15:02,090 --> 00:15:03,960 Und so haben wir im Augenblick haben einen Absatz. 357 00:15:03,960 --> 00:15:05,510 Dies ist Text. 358 00:15:05,510 --> 00:15:09,151 Ich werde einfach zu verändern es. "Das ist Text 1." 359 00:15:09,151 --> 00:15:11,150 Und dann werden wir zu gehen haben eine "Dies ist Text 2." 360 00:15:11,150 --> 00:15:12,525 >> ALLISON BUCHHOLTZ-AU: Zweite ein. 361 00:15:12,525 --> 00:15:13,540 TOMAS REIMERS: Yup. 362 00:15:13,540 --> 00:15:16,810 So haben wir jetzt "Dies ist Text 2", nicht wahr? 363 00:15:16,810 --> 00:15:21,560 Und wir werden sehen, dass, wenn wir neu zu laden die Seite, was wir zu finden 364 00:15:21,560 --> 00:15:23,067 ist wir werden find-- 365 00:15:23,067 --> 00:15:24,150 ALLISON BUCHHOLTZ-AU: Ooh. 366 00:15:24,150 --> 00:15:24,983 TOMAS REIMERS: Ja. 367 00:15:24,983 --> 00:15:27,570 Wir werden finden, ein "Das ist Text 1 "und" Dies ist Text 2. " 368 00:15:27,570 --> 00:15:28,650 >> ALLISON BUCHHOLTZ-AU: Und aus schönen gelbe Farbe. 369 00:15:28,650 --> 00:15:31,066 >> TOMAS REIMERS: Und Sie werden sehen, dass unsere Wähler im Augenblick, 370 00:15:31,066 --> 00:15:34,940 die auf der p gilt, oder Absätze, wirkt sie beide, 371 00:15:34,940 --> 00:15:38,700 weil beide treffen die vorausgesetzt, sie sind beide ein p-Tag. 372 00:15:38,700 --> 00:15:40,360 Das macht Sinn. 373 00:15:40,360 --> 00:15:43,340 Die Frage ist also, na ja, was wenn wir wollten nur noch eine? 374 00:15:43,340 --> 00:15:46,350 So genau wie Allison sagte, wir haben zwei weitere Möglichkeiten, das zu tun. 375 00:15:46,350 --> 00:15:47,320 Ich werde mit der ID zu starten. 376 00:15:47,320 --> 00:15:48,405 >> ALLISON BUCHHOLTZ-AU: Lassen Sie uns mit ID zu starten. 377 00:15:48,405 --> 00:15:50,405 >> TOMAS REIMERS: Und beide dies sind Eigenschaften. 378 00:15:50,405 --> 00:15:53,200 So Attribute vorhanden in HTML. 379 00:15:53,200 --> 00:15:55,600 Und was sie sind etwas, das Sie hinzufügen, 380 00:15:55,600 --> 00:15:58,840 innerhalb des Tags, das ist getrennt von der Tag-Namen. 381 00:15:58,840 --> 00:16:01,301 So können Sie mehrere Attribute haben. 382 00:16:01,301 --> 00:16:01,800 Ja? 383 00:16:01,800 --> 00:16:03,950 >> ALLISON BUCHHOLTZ-AU: Ich wollte gerade von PSET 7 sagen, von Ihrem Beispiel 384 00:16:03,950 --> 00:16:06,650 wenn einer von euch versuchen, ausrichten Dinge in die Mitte, 385 00:16:06,650 --> 00:16:08,550 Sie könnte verwendet haben "Text align = center." 386 00:16:08,550 --> 00:16:10,550 Und Sie können es wahrscheinlich bemerkt, sollte zentriert 387 00:16:10,550 --> 00:16:12,650 Ihren Text oder Ihr Navigationsleiste. 388 00:16:12,650 --> 00:16:15,499 Also das ist eben auch ein Attribut dass Sie vielleicht vertraut sind. 389 00:16:15,499 --> 00:16:18,040 TOMAS REIMERS: Es gibt eine Menge der Attribute, die Sie sehen. 390 00:16:18,040 --> 00:16:18,539 Ja. 391 00:16:18,539 --> 00:16:21,250 Wie gut Verweis auf PSET 7. 392 00:16:21,250 --> 00:16:23,150 Wir haben id. 393 00:16:23,150 --> 00:16:25,080 Sie können auch Klasse, Dinge wie diese. 394 00:16:25,080 --> 00:16:27,250 Ein einzelner Tag kann viele Attribute haben. 395 00:16:27,250 --> 00:16:33,140 Also mit id, lass uns so tun, als wir möchte eine ID von-- Ich weiß nicht, zu haben. 396 00:16:33,140 --> 00:16:35,140 Wir nennen es spezielle, weil diese, wir sind 397 00:16:35,140 --> 00:16:37,867 werde fett zu machen, und zu unterstreichen, und was auch immer. 398 00:16:37,867 --> 00:16:39,950 ALLISON BUCHHOLTZ-AU: Es ist gonna be Super Special. 399 00:16:39,950 --> 00:16:42,360 TOMAS REIMERS: So einer, haben wir spezielle ID. 400 00:16:42,360 --> 00:16:48,140 So ist die Art und Weise zu wählen, und dann ist in main.css, anstatt eine p-Tag, 401 00:16:48,140 --> 00:16:51,500 Sie #special tun, okay? 402 00:16:51,500 --> 00:16:55,538 Und das wählt der Sache mit id Besonderes. 403 00:16:55,538 --> 00:16:57,295 Macht das Sinn für jedermann? 404 00:16:57,295 --> 00:16:57,920 ZIELGRUPPE: Ja. 405 00:16:57,920 --> 00:16:59,110 TOMAS REIMERS: Kühl. 406 00:16:59,110 --> 00:17:04,440 So, jetzt, wenn wir zurückgehen, wir see-- hoppla. 407 00:17:04,440 --> 00:17:06,240 Ja. 408 00:17:06,240 --> 00:17:09,460 Wir werden sehen, dass es nur wählt der mit id Besonderes. 409 00:17:09,460 --> 00:17:10,622 Ja? 410 00:17:10,622 --> 00:17:11,900 Find ich gut. 411 00:17:11,900 --> 00:17:12,570 Ja. 412 00:17:12,570 --> 00:17:15,456 >> ZIELGRUPPE: Kann etwas haben ein Attribut sowohl der Klasse und einer ID? 413 00:17:15,456 --> 00:17:16,359 >> TOMAS REIMERS: Ja. 414 00:17:16,359 --> 00:17:16,900 ZIELGRUPPE: OK. 415 00:17:16,900 --> 00:17:20,887 Und was passiert, wenn man dann geben es einige Regeln in CSS, die im Widerspruch? 416 00:17:20,887 --> 00:17:21,970 TOMAS REIMERS: Auf jeden Fall. 417 00:17:21,970 --> 00:17:23,940 Wir werden auf jeden Fall , darüber zu sprechen. 418 00:17:23,940 --> 00:17:31,890 Also genau das, was man erwarten würde an, können Sie auch Klassen. 419 00:17:31,890 --> 00:17:36,380 Also lassen Sie uns so tun, als ich drei Absätze und ich 420 00:17:36,380 --> 00:17:38,730 wollte der erste Stil zwei, aber nicht die dritte. 421 00:17:38,730 --> 00:17:42,850 Nun, Ihre Idee auch sein mag, na ja, ich konnte nur geben der zweite eine ID. 422 00:17:42,850 --> 00:17:45,590 Aber man kann nicht, weil eine ID, genau wie Allison sagte, 423 00:17:45,590 --> 00:17:47,330 muss eindeutig sein. 424 00:17:47,330 --> 00:17:50,860 >> Also anstatt eine ID, was Sie verwenden können, ist, dass man eine Klasse zu verwenden. 425 00:17:50,860 --> 00:17:57,880 Und ein class--, was es ermöglicht Sie tun müssen, ist im Grunde sagen, 426 00:17:57,880 --> 00:17:59,610 Dazu gehört als Teil einer Gruppe. 427 00:17:59,610 --> 00:18:02,410 In diesem Fall wird unsere Gruppe wird als Special. 428 00:18:02,410 --> 00:18:06,500 Und was wir dann zu tun ist wir werden sagen-- anstatt Pfund, 429 00:18:06,500 --> 00:18:08,070 wir werden Punkt zu verwenden. 430 00:18:08,070 --> 00:18:08,740 OK? 431 00:18:08,740 --> 00:18:11,950 Und beachten Sie, dass das Pfund und Punkt nur in der CSS-Datei vorhanden ist, 432 00:18:11,950 --> 00:18:12,797 nicht innerhalb der HTML. 433 00:18:12,797 --> 00:18:13,880 ALLISON BUCHHOLTZ-AU: Ja. 434 00:18:13,880 --> 00:18:15,185 Wichtige Unterscheidung. 435 00:18:15,185 --> 00:18:17,510 >> TOMAS REIMERS: Ich habe hatte so viel Kampf, 436 00:18:17,510 --> 00:18:23,990 weil ich den Hash in der HTML und dann einfach das Gefühl für eine lange Zeit dumm. 437 00:18:23,990 --> 00:18:27,470 Sehen Sie, wie beide wählt die, die mit dieser Klasse? 438 00:18:27,470 --> 00:18:28,210 Kühle. 439 00:18:28,210 --> 00:18:29,950 >> Jetzt können Dinge mehrere Klassen haben. 440 00:18:29,950 --> 00:18:32,790 Sagen wir, ich wollte das zuerst zwei haben einen Hintergrund der gelben 441 00:18:32,790 --> 00:18:36,770 und das zweite zwei haben eine Schriftfarbe blau. 442 00:18:36,770 --> 00:18:37,270 OK. 443 00:18:37,270 --> 00:18:39,735 Ich weiß wirklich nicht, warum ich würde das tun wollen, aber ich kann. 444 00:18:39,735 --> 00:18:42,401 >> ALLISON BUCHHOLTZ-AU: Könnte nicht empfohlen es für Ihre Website. 445 00:18:42,401 --> 00:18:43,880 Aber für unsere Zwecke, werde es tun. 446 00:18:43,880 --> 00:18:46,294 >> TOMAS REIMERS: Es ist nicht eine gute Farbschema. 447 00:18:46,294 --> 00:18:49,210 ALLISON BUCHHOLTZ-AU: Nun, gelb und blau sind meine High-School-Farben. 448 00:18:49,210 --> 00:18:50,947 Ich weiß nicht, wenn. 449 00:18:50,947 --> 00:18:53,530 TOMAS REIMERS: Allison Hoch Schule hatte eine tolle Farbgebung. 450 00:18:53,530 --> 00:18:54,520 [Gelächter] 451 00:18:54,520 --> 00:18:59,120 Also, was wir können dies Nennen wir this-- so haben wir Sonder 452 00:18:59,120 --> 00:19:00,030 und wir haben recht. 453 00:19:00,030 --> 00:19:02,405 Ich schlage vor, hierfür verwenden Sie viel mehr aussagekräftige Namen. 454 00:19:02,405 --> 00:19:05,820 ALLISON BUCHHOLTZ-AU: Ja, das würde ich nennen dies, wie, gelb oder blau. 455 00:19:05,820 --> 00:19:08,314 >> TOMAS REIMERS: Wir sind nicht wirklich einen echten Website, 456 00:19:08,314 --> 00:19:09,730 weshalb wir nicht tun. 457 00:19:09,730 --> 00:19:11,521 Aber wenn Sie wirklich hatte eine echte Website erklären Sie sich 458 00:19:11,521 --> 00:19:16,220 haben könnte, wie, Artikel-Header, Inhalt des Artikels, erste Wort, 459 00:19:16,220 --> 00:19:21,920 Dinge wie die, die es erlauben Sie viel mehr aussagekräftig sein. 460 00:19:21,920 --> 00:19:23,550 Diese sind wirklich genau wie Variablen. 461 00:19:23,550 --> 00:19:28,390 Sie sollten in einer Weise, wo benannt Sie können, like-- ja, als solche. 462 00:19:28,390 --> 00:19:29,470 Perfect. 463 00:19:29,470 --> 00:19:30,480 >> So Hintergrundfarbe. 464 00:19:30,480 --> 00:19:35,920 Und dann werden wir so die sagen-- Weg, um Farbe zu ändern ist nur "Farbe". 465 00:19:35,920 --> 00:19:38,412 Und wir werden sie blau zu machen. 466 00:19:38,412 --> 00:19:40,150 Das ist cool. 467 00:19:40,150 --> 00:19:42,640 So, jetzt haben wir die ersten beiden haben spezielle. 468 00:19:42,640 --> 00:19:45,972 Nächste ist zu gehen haben "class = hübsch." 469 00:19:45,972 --> 00:19:49,180 ALLISON BUCHHOLTZ-AU: Und dann werden Sie wollen "hübsch", um der Mitte hinzuzufügen. 470 00:19:49,180 --> 00:19:49,971 TOMAS REIMERS: Yup. 471 00:19:49,971 --> 00:19:52,970 Und dann zu dem mittleren, hinzufügen "hübsch", was passiert, 472 00:19:52,970 --> 00:19:56,880 ist, dass Sie nur einen Raum zu haben. 473 00:19:56,880 --> 00:19:59,800 Also das Klassenattribut ist eine durch Leerzeichen getrennte Liste 474 00:19:59,800 --> 00:20:02,450 aller Klassen dass an diesem Tag gelten. 475 00:20:02,450 --> 00:20:02,959 OK? 476 00:20:02,959 --> 00:20:05,750 Es ist nicht wie dieses gehört eine Art Sonderklasse genannt 477 00:20:05,750 --> 00:20:07,180 "Sonder, Raum, hübsch." 478 00:20:07,180 --> 00:20:10,870 Es gehört zu zwei classes-- Sonder und hübsch. 479 00:20:10,870 --> 00:20:12,492 Ja? 480 00:20:12,492 --> 00:20:14,360 Kühle. 481 00:20:14,360 --> 00:20:17,010 >> Und dann, wenn wir uns was passiert, wir sind 482 00:20:17,010 --> 00:20:21,850 gehen, um zu sehen, dass erste hat gelben Hintergrund, schwarzem Text. 483 00:20:21,850 --> 00:20:22,450 Zweitens one-- 484 00:20:22,450 --> 00:20:26,160 >> ALLISON BUCHHOLTZ-AU: --has fett gelber Hintergrund mit blauem Text. 485 00:20:26,160 --> 00:20:29,330 Und unsere letzte gerade hat der blauer Text, wir zugeordnet. 486 00:20:29,330 --> 00:20:30,870 >> TOMAS REIMERS: Cool? 487 00:20:30,870 --> 00:20:32,491 Wie Selektoren arbeiten? 488 00:20:32,491 --> 00:20:32,990 Ehrfürchtig. 489 00:20:32,990 --> 00:20:34,720 >> ALLISON BUCHHOLTZ-AU: Wollen wir sprechen über den Konflikt nun also? 490 00:20:34,720 --> 00:20:35,780 >> TOMAS REIMERS: Also ja. 491 00:20:35,780 --> 00:20:36,310 Absolut. 492 00:20:36,310 --> 00:20:38,380 Was passiert also, wenn Sie einen Konflikt haben, nicht wahr? 493 00:20:38,380 --> 00:20:44,740 Nehmen wir an, die erste stellt etwas like-- 494 00:20:44,740 --> 00:20:47,240 ALLISON BUCHHOLTZ-AU: Vielleicht dieses wird die Hintergrund? 495 00:20:47,240 --> 00:20:48,090 TOMAS REIMERS: Ja. 496 00:20:48,090 --> 00:20:51,699 So werden wir machen "hübsch" ändern Sie den Hintergrund, um Lachs. 497 00:20:51,699 --> 00:20:54,740 ALLISON BUCHHOLTZ-AU: Sie sind nur mit alle großen Farben heute Tomas. 498 00:20:54,740 --> 00:20:55,573 TOMAS REIMERS: Ja. 499 00:20:55,573 --> 00:20:58,200 Da fand ich heraus, ich kann benutzen Lachs als reale Farbe. 500 00:20:58,200 --> 00:21:00,270 Also werden wir nur gehen, um das zu tun. 501 00:21:00,270 --> 00:21:01,770 Ich denke auch, Sunset ist eine echte Farbe. 502 00:21:01,770 --> 00:21:03,103 ZIELGRUPPE: Sonnenuntergang ist eine echte Farbe? 503 00:21:03,103 --> 00:21:04,572 ALLISON BUCHHOLTZ-AU: Versuchen wir es. 504 00:21:04,572 --> 00:21:07,735 TOMAS REIMERS: Nach dieser Demo nur weil, falls es vermasselt, 505 00:21:07,735 --> 00:21:08,943 Ich will nicht werden, das Debuggen. 506 00:21:08,943 --> 00:21:11,580 So wissen wir, Lachs ist eine echte Farbe. 507 00:21:11,580 --> 00:21:15,626 Also irgendwelche Vermutungen auf Was wird passieren? 508 00:21:15,626 --> 00:21:17,522 >> ALLISON BUCHHOLTZ-AU: Irgendeine Idee? 509 00:21:17,522 --> 00:21:20,002 >> ZIELGRUPPE: [unverständlich]. 510 00:21:20,002 --> 00:21:20,920 >> TOMAS REIMERS: Ja. 511 00:21:20,920 --> 00:21:22,150 Also, Sie haben es genau richtig. 512 00:21:22,150 --> 00:21:24,930 Grundsätzlich kommt es das letzte Regel, die es gegeben wurde. 513 00:21:24,930 --> 00:21:27,860 >> ALLISON BUCHHOLTZ-AU: Das ist also wo Kaskadierung in Kraft tritt. 514 00:21:27,860 --> 00:21:31,080 >> TOMAS REIMERS: Also denken Sie daran, wie wir hatte die Cascading Style Sheets? 515 00:21:31,080 --> 00:21:33,660 So nach, dass wir irgendwie bedeuten dass wir eine Reihe von Regeln 516 00:21:33,660 --> 00:21:37,115 wobei auf der jeweils anderen anzuwenden und sie können aber auch einander überschreiben. 517 00:21:37,115 --> 00:21:39,380 >> ALLISON BUCHHOLTZ-AU: So was auch immer die am Boden 518 00:21:39,380 --> 00:21:41,540 überschreibt, was an der Spitze ist. 519 00:21:41,540 --> 00:21:45,842 Sie können Regeln, die komplett sind negieren etwas voraus. 520 00:21:45,842 --> 00:21:48,300 Das ist auch, warum Sie sein wollen Vorsicht beim Styling sind, 521 00:21:48,300 --> 00:21:51,465 so dass Sie nicht die Erstellung von Regeln sind, dass Sie gerade komplett überschreiben. 522 00:21:51,465 --> 00:21:53,340 >> TOMAS REIMERS: Oder vielleicht wollen, um Regeln zu überschreiben. 523 00:21:53,340 --> 00:21:53,920 >> ALLISON BUCHHOLTZ-AU: Oder vielleicht tun. 524 00:21:53,920 --> 00:21:54,300 Ja. 525 00:21:54,300 --> 00:21:57,175 >> TOMAS REIMERS: Pretend Sie eine Klasse, die die meisten Dinge gilt, 526 00:21:57,175 --> 00:22:01,220 aber sagen wir Ihnen, die geändert werden soll Hintergrundfarbe auf Rot und der Schriftart 527 00:22:01,220 --> 00:22:03,140 Gewicht zu fett für die meisten Dinge, aber für ein, 528 00:22:03,140 --> 00:22:06,098 Sie wollen nur die Hintergrundfarbe sein rotes aber alle anderen wollen 529 00:22:06,098 --> 00:22:09,990 Eigenschaften, können Sie etwas tun wie "font-weight = normal" 530 00:22:09,990 --> 00:22:12,760 was würde dann rückgängig zu machen, dass die mutige Veränderung. 531 00:22:12,760 --> 00:22:14,480 Ja? 532 00:22:14,480 --> 00:22:17,250 Auch hier ist der beste Weg, ich denke, Allison sagte, es ist nur die Praxis. 533 00:22:17,250 --> 00:22:18,080 >> ALLISON BUCHHOLTZ-AU: Experimentieren. 534 00:22:18,080 --> 00:22:20,090 >> TOMAS REIMERS: Üben, üben, Praxis und Experiment. 535 00:22:20,090 --> 00:22:22,950 Ich kenne eine Menge Leute, die denken, CSS ist nur eine Menge guess-and-Check 536 00:22:22,950 --> 00:22:25,580 am Ende des Tages, wo, wenn Sie something-- wie tun wollen, 537 00:22:25,580 --> 00:22:27,663 Sie haben eine ungefähre Vorstellung davon, aber Sie wahrscheinlich immer noch brauchen 538 00:22:27,663 --> 00:22:31,390 um es auszuprobieren, um sicherzustellen, Sie wissen, wie es aussieht. 539 00:22:31,390 --> 00:22:34,482 >> ZIELGRUPPE: Wenn Sie bewerben Klassen mehr als eine 540 00:22:34,482 --> 00:22:37,339 auf den gleichen Absatz oder Abschnitt, nicht wahr 541 00:22:37,339 --> 00:22:39,505 Egal, was Sie können, um geben Sie diese in Anführungszeichen? 542 00:22:39,505 --> 00:22:40,992 >> TOMAS REIMERS: Nein, überhaupt nicht. 543 00:22:40,992 --> 00:22:45,764 >> ALLISON BUCHHOLTZ-AU: Was zählt ist, die Reihenfolge in Ihrem CSS-Stylesheet. 544 00:22:45,764 --> 00:22:47,430 ZIELGRUPPE: Könnten Sie die Frage wiederholen? 545 00:22:47,430 --> 00:22:50,680 TOMAS REIMERS: Oh. 546 00:22:50,680 --> 00:22:53,990 ALLISON BUCHHOLTZ-AU: Innerhalb Klasse, wenn du gibst Klassen 547 00:22:53,990 --> 00:22:56,964 etwas in der HTML, tut es eine Rolle, in welcher Reihenfolge sie sind? 548 00:22:56,964 --> 00:22:58,130 Es muss nicht die Reihenfolge egal. 549 00:22:58,130 --> 00:23:02,915 Was zählt, ist die Reihenfolge der Klassen-Selektoren in CSS, 550 00:23:02,915 --> 00:23:04,306 in Ihrem Stylesheet. 551 00:23:04,306 --> 00:23:06,982 >> TOMAS REIMERS: Sound good? 552 00:23:06,982 --> 00:23:08,532 >> ALLISON BUCHHOLTZ-AU: Lovely. 553 00:23:08,532 --> 00:23:11,539 >> TOMAS REIMERS: Und dann wir werden auch weiterhin zu-- 554 00:23:11,539 --> 00:23:13,330 ALLISON BUCHHOLTZ-AU: Was müssen wir als nächstes? 555 00:23:13,330 --> 00:23:14,245 Ich vergesse. 556 00:23:14,245 --> 00:23:16,087 Oh, wir haben nur Beispiele. 557 00:23:16,087 --> 00:23:17,295 Aber wir haben Art getan, die. 558 00:23:17,295 --> 00:23:18,990 Wir haben Beispiele im laufenden Betrieb erfolgen. 559 00:23:18,990 --> 00:23:20,540 >> TOMAS REIMERS: Wir lernen verbinden die Selektoren bald. 560 00:23:20,540 --> 00:23:22,790 >> ALLISON BUCHHOLTZ-AU: Oh, wir erhalten, Selektoren kombinieren. 561 00:23:22,790 --> 00:23:25,260 TOMAS REIMERS: So einige Beispiele ist, wir haben 562 00:23:25,260 --> 00:23:29,630 # Dog-- Pfund oder hashtag, oder Rautenzeichen, oder was auch immer 563 00:23:29,630 --> 00:23:32,050 Sie anrufen dass-- scharfe möchten. 564 00:23:32,050 --> 00:23:34,875 >> ALLISON BUCHHOLTZ-AU: Sharp Hund. 565 00:23:34,875 --> 00:23:36,470 >> TOMAS REIMERS: Dann haben Sie .pets. 566 00:23:36,470 --> 00:23:39,059 567 00:23:39,059 --> 00:23:41,600 Etwas hat eine ID von Hund, es gibt nur einen Hund auf der Seite. 568 00:23:41,600 --> 00:23:43,870 Etwas muss die ID Katze, es gibt nur eine Katze. 569 00:23:43,870 --> 00:23:45,665 Es kann viele Tiere auf der Seite sein. 570 00:23:45,665 --> 00:23:47,570 Das ist, warum wir gaben, dass Klassen. 571 00:23:47,570 --> 00:23:48,740 Sie haben ein Beispiel p. 572 00:23:48,740 --> 00:23:50,490 Und dann so eine der letzte Beispiel, das 573 00:23:50,490 --> 00:23:53,790 ist etwas, was wir noch nicht gesprochen haben, ist das, was passiert, wenn man sie zu kombinieren. 574 00:23:53,790 --> 00:23:54,580 So p.pets. 575 00:23:54,580 --> 00:23:57,510 576 00:23:57,510 --> 00:24:02,950 >> Also für die, gehen wir zurück zu den Code und einzuführen another-- ja. 577 00:24:02,950 --> 00:24:04,290 Also wieder hier. 578 00:24:04,290 --> 00:24:04,850 >> ALLISON BUCHHOLTZ-AU: I das Gefühl, das ist really-- 579 00:24:04,850 --> 00:24:08,105 wie gerade auf der Suche anhand von Beispielen ist wirklich der Weg, dies zu erlernen. 580 00:24:08,105 --> 00:24:09,360 Also das ist, was wir tun. 581 00:24:09,360 --> 00:24:14,030 >> TOMAS REIMERS: Also lassen Sie uns so tun, als wir wollen nur Text 2, rechts wählen? 582 00:24:14,030 --> 00:24:16,530 So können wir auf jeden Fall nicht tun, dass mit einer ID. 583 00:24:16,530 --> 00:24:19,620 Nun, wir könnten das mit einem zu tun id, aber es spielt keine Kennung. 584 00:24:19,620 --> 00:24:22,490 Ich könnte man hinzufügen, aber wir behaupten, dass ich nicht wollte, der seine 585 00:24:22,490 --> 00:24:24,910 oder hat es schon etwas anderes. 586 00:24:24,910 --> 00:24:26,516 Ich kann das nicht mit dem. 587 00:24:26,516 --> 00:24:28,870 Der Tag ist auf jeden Fall nicht eindeutig, oder? 588 00:24:28,870 --> 00:24:30,670 Und weder ist die Klasse. 589 00:24:30,670 --> 00:24:32,314 Aber man kann diese Dinge zu kombinieren. 590 00:24:32,314 --> 00:24:35,230 Nehmen wir an, dass wir etwas tun wollte, die nur für Dinge, die 591 00:24:35,230 --> 00:24:39,420 die Klasse und Sonder was haben die Klasse ziemlich. 592 00:24:39,420 --> 00:24:48,150 >> Also, was Sie tun können, ist in main.css, Sie können sagen, lassen Sie uns zuerst löschen diese. 593 00:24:48,150 --> 00:24:50,240 Sie können diese kombinieren. 594 00:24:50,240 --> 00:24:51,430 So können Sie .Special tun können. 595 00:24:51,430 --> 00:24:52,110 Kein Platz. 596 00:24:52,110 --> 00:24:54,770 Nur .special.pretty. 597 00:24:54,770 --> 00:25:00,550 Was das bedeutet, ist etwas, was sowohl spezielle und hübsch. 598 00:25:00,550 --> 00:25:01,900 Ist das sinnvoll? 599 00:25:01,900 --> 00:25:04,190 Und wenn wir hier gehen, was Sie gehen zu sehen 600 00:25:04,190 --> 00:25:09,734 ist diese Regel gilt nur für die zweite, die beide von denen hat. 601 00:25:09,734 --> 00:25:11,400 Und Sie können, dass für eine Menge Dinge zu tun. 602 00:25:11,400 --> 00:25:13,270 Sie können sagen-- lassen behaupten, ich wollte nur 603 00:25:13,270 --> 00:25:18,300 die Dinge, die die Klasse ziemlich tun haben und die auch ein Absatz-Tag. 604 00:25:18,300 --> 00:25:19,920 So p.pretty. 605 00:25:19,920 --> 00:25:23,585 Nehmen wir an, dass ich etwas ziemlich auf dem Tag Körper. 606 00:25:23,585 --> 00:25:25,850 OK? 607 00:25:25,850 --> 00:25:28,490 Das kann ich laufen und ich kann sehen, dass es nur 608 00:25:28,490 --> 00:25:32,720 werde, die Dinge, die sind anzuwenden Absätze mit der Klasse ziemlich. 609 00:25:32,720 --> 00:25:35,650 Und Sie können diese zu kombinieren, im Grunde, so viele, wie Sie wollen. 610 00:25:35,650 --> 00:25:38,580 So setzt man sie zusammen. 611 00:25:38,580 --> 00:25:39,604 Ist das sinnvoll? 612 00:25:39,604 --> 00:25:41,770 ALLISON BUCHHOLTZ-AU: So diese Art von nützlicher 613 00:25:41,770 --> 00:25:45,490 wenn, Tomas bereits sagte, vielleicht Sie haben eine sehr komplizierte Website, 614 00:25:45,490 --> 00:25:48,050 und schon haben Sie eine Menge diese Regeln geschrieben, 615 00:25:48,050 --> 00:25:51,170 und Sie müssen nur kombinieren zwei aus der Zeit vor. 616 00:25:51,170 --> 00:25:55,350 Wie anstatt ein ganzes neue Wahl und es veränderte sie, 617 00:25:55,350 --> 00:25:58,592 einfach kombinieren kann sie, wo es Überschneidungen. 618 00:25:58,592 --> 00:26:00,670 >> TOMAS REIMERS: Oder Sie möglicherweise manchmal out-- 619 00:26:00,670 --> 00:26:04,290 es ist eine Klasse, die macht Farbe Schriftart wie blau, 620 00:26:04,290 --> 00:26:06,740 und es gibt eine andere Klasse, die macht den Hintergrund blau. 621 00:26:06,740 --> 00:26:07,840 Und das einfach nicht funktionieren. 622 00:26:07,840 --> 00:26:10,924 So können Sie einen Sonderfall zu schreiben, wo, like-- aber wenn es beides hat, was Sie 623 00:26:10,924 --> 00:26:13,548 zu tun ist, Sie zu gehen machen dieses eine dieser Blauton 624 00:26:13,548 --> 00:26:15,310 und dieser diese anderen Blauton. 625 00:26:15,310 --> 00:26:15,580 Richtig? 626 00:26:15,580 --> 00:26:17,955 >> ALLISON BUCHHOLTZ-AU: Gut für diejenigen Arten von Ausnahmen. 627 00:26:17,955 --> 00:26:21,220 TOMAS REIMERS: Also, um denken über Probleme 628 00:26:21,220 --> 00:26:25,000 das könnte entstehen, wenn Sie sie zu kombinieren. 629 00:26:25,000 --> 00:26:27,020 Kühle. 630 00:26:27,020 --> 00:26:29,692 Also zurück zu unserer Präsentation. 631 00:26:29,692 --> 00:26:31,400 ALLISON BUCHHOLTZ-AU: Wir sind fast da. 632 00:26:31,400 --> 00:26:34,022 TOMAS REIMERS: Und es hat aufgehört verbindet. 633 00:26:34,022 --> 00:26:36,494 ALLISON BUCHHOLTZ-AU: Oh, nein. 634 00:26:36,494 --> 00:26:39,125 ALLISON BUCHHOLTZ-AU: CS an das Büro, geht Internet herunter. 635 00:26:39,125 --> 00:26:40,360 Oh, die Ironie. 636 00:26:40,360 --> 00:26:45,620 >> TOMAS REIMERS: Also zum Glück können wir präsentieren ohne das Internet, denke ich, 637 00:26:45,620 --> 00:26:47,380 denn wir haben alle Folien hier. 638 00:26:47,380 --> 00:26:49,304 Also lassen Sie uns über das zu sprechen Beziehung von Tags. 639 00:26:49,304 --> 00:26:50,470 ALLISON BUCHHOLTZ-AU: Richtig. 640 00:26:50,470 --> 00:26:52,660 Also nur irgendwie geht off, was Tomas sagte, 641 00:26:52,660 --> 00:26:54,180 das ist nur eine andere Art, es zu tun. 642 00:26:54,180 --> 00:26:57,840 Also haben wir etwas Mutter Wähler mit einem Kind-Selektor. 643 00:26:57,840 --> 00:27:02,815 Also in diesem Beispiel hier haben wir einige Körper mit einer Klasse Navigationsleiste, Klasse Taste. 644 00:27:02,815 --> 00:27:03,315 Ah. 645 00:27:03,315 --> 00:27:03,990 >> TOMAS REIMERS: Oh, sorry. 646 00:27:03,990 --> 00:27:06,180 >> ALLISON BUCHHOLTZ-AU: Und im Grunde, was das bedeutet 647 00:27:06,180 --> 00:27:11,070 wird alle Kinder auszuwählen, wie Alle diese Arten von Selektoren 648 00:27:11,070 --> 00:27:13,040 innerhalb dieses Elternwahl. 649 00:27:13,040 --> 00:27:16,004 Und das sind die einzigen, es jemals zu bewerben. 650 00:27:16,004 --> 00:27:17,755 Ich weiß nicht, ob Sie einen besseren Weg von-- 651 00:27:17,755 --> 00:27:19,504 TOMAS REIMERS: Also ich schätze die Art und Weise zu denken, 652 00:27:19,504 --> 00:27:22,440 dabei ist, denken Sie daran, wie vor wir irgendwie zusammen sie mögen. 653 00:27:22,440 --> 00:27:26,340 Und das bedeutet, dass ein Element das passt alles zusammen. 654 00:27:26,340 --> 00:27:29,530 Was dies sagt, ist, ich wollen Sie alles zu entsprechen 655 00:27:29,530 --> 00:27:33,220 innerhalb some-- Ich möchte Sie einen Selektor zu finden. 656 00:27:33,220 --> 00:27:35,670 Und dann in das möchte ich Sie, neue Dinge zu entsprechen. 657 00:27:35,670 --> 00:27:36,170 Richtig? 658 00:27:36,170 --> 00:27:40,900 So in CSS, es ist alles über Art in der Lage, diese Elemente entsprechen. 659 00:27:40,900 --> 00:27:43,050 Und Sie können versuchen, passen Artikel innerhalb andere Gegenstände. 660 00:27:43,050 --> 00:27:46,510 >> Also lassen Sie uns ein Beispiel tatsächlich tun, und wir denken, dass Sie zu klären. 661 00:27:46,510 --> 00:27:53,090 Also lassen Sie uns so tun, als wir spezielle, Sonder hübsch, was auch immer. 662 00:27:53,090 --> 00:27:55,690 Und dann haben wir einen Link, OK? 663 00:27:55,690 --> 00:27:59,780 664 00:27:59,780 --> 00:28:02,370 Also denken Sie daran, eine ist ein Link. 665 00:28:02,370 --> 00:28:03,900 Es wird nicht überall hingehen. 666 00:28:03,900 --> 00:28:11,500 Und wir werden, um ihm die Klasse Link, denke ich. 667 00:28:11,500 --> 00:28:13,335 Lass es uns die class-- mir eine Idee geben. 668 00:28:13,335 --> 00:28:14,460 ALLISON BUCHHOLTZ-AU: Kühl. 669 00:28:14,460 --> 00:28:16,420 TOMAS REIMERS: COO- uns gelassen gehen sie die Klasse ziemlich. 670 00:28:16,420 --> 00:28:16,930 Warum nicht? 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 jetzt schöne Dinge 673 00:28:23,040 --> 00:28:26,000 werden den Hintergrund stellen Blau, Hintergrundfarbe der Lachs. 674 00:28:26,000 --> 00:28:27,969 Das macht Sinn. 675 00:28:27,969 --> 00:28:28,760 Und wenn wir this-- tun 676 00:28:28,760 --> 00:28:29,620 >> ALLISON BUCHHOLTZ-AU: Haben Sie Text hinzufügen möchten 677 00:28:29,620 --> 00:28:31,078 so der Hyperlink tatsächlich auftaucht? 678 00:28:31,078 --> 00:28:35,088 TOMAS REIMERS: Das wäre ein guter Ruf ist. 679 00:28:35,088 --> 00:28:37,921 ALLISON BUCHHOLTZ-AU: Weil rechts jetzt sind wir nur gonna bekommen nichts. 680 00:28:37,921 --> 00:28:39,690 TOMAS REIMERS: Also das ist ein Link. 681 00:28:39,690 --> 00:28:42,202 "Dies ist ein Link." 682 00:28:42,202 --> 00:28:45,820 Ach ja, und das wird zum anderen Glied. 683 00:28:45,820 --> 00:28:47,280 Geben wir es die Klasse "cool". 684 00:28:47,280 --> 00:28:50,295 Sie haben Recht. 685 00:28:50,295 --> 00:28:50,795 Kühle. 686 00:28:50,795 --> 00:28:53,590 687 00:28:53,590 --> 00:28:56,010 So jetzt werden wir diese zu greifen. 688 00:28:56,010 --> 00:28:57,269 Wir werden einen zu werfen. 689 00:28:57,269 --> 00:28:59,060 Wir haben einen in der speziellen Tag, und wir haben auch 690 00:28:59,060 --> 00:29:01,150 gehen, um eine in der hübschen Tag haben. 691 00:29:01,150 --> 00:29:05,449 Und gerade jetzt, was wir zu gehen zu tun ist, wir werden machen cool-- 692 00:29:05,449 --> 00:29:06,490 Was wollen wir es zu tun? 693 00:29:06,490 --> 00:29:10,347 694 00:29:10,347 --> 00:29:12,180 ALLISON BUCHHOLTZ-AU: Können wir es größer? 695 00:29:12,180 --> 00:29:13,800 TOMAS REIMERS: Lassen Sie geben ihm eine Grenze. 696 00:29:13,800 --> 00:29:14,840 ALLISON BUCHHOLTZ-AU: Wir könnten angrenzen. 697 00:29:14,840 --> 00:29:15,673 TOMAS REIMERS: Ja. 698 00:29:15,673 --> 00:29:18,560 So werden wir etwas tun wie, Grenz ist-- und wir sind 699 00:29:18,560 --> 00:29:20,971 werde das alles in einem zweiten zu erklären. 700 00:29:20,971 --> 00:29:21,470 Zur Zeit-- 701 00:29:21,470 --> 00:29:24,592 >> ALLISON BUCHHOLTZ-AU: Um die Box-Modell. 702 00:29:24,592 --> 00:29:27,300 TOMAS REIMERS: Aber jetzt sind wir nur geht es einen Rahmen zu geben. 703 00:29:27,300 --> 00:29:29,580 Was das bedeutet ist, bist du gehen, um diese sichtbar. 704 00:29:29,580 --> 00:29:32,788 Und du wirst sehen, dass sie diese, wie, hässliche schwarze Ränder, die 705 00:29:32,788 --> 00:29:33,820 ist cool. 706 00:29:33,820 --> 00:29:34,500 >> ALLISON BUCHHOLTZ-AU: Unsere Website ist so hübsch. 707 00:29:34,500 --> 00:29:35,333 >> TOMAS REIMERS: Ja. 708 00:29:35,333 --> 00:29:38,930 Unsere Webseite ist ehrfürchtig. 709 00:29:38,930 --> 00:29:41,585 So sind diese beiden Links und sie erscheinen. 710 00:29:41,585 --> 00:29:44,160 Nun wollen wir so tun, als ich nur wollte, dies zu tun 711 00:29:44,160 --> 00:29:50,072 wenn es nicht innerhalb von etwas die hatte einen Hintergrund der Lachs. 712 00:29:50,072 --> 00:29:52,280 Also denken Sie daran, dass diese eine hat einen Hintergrund der Lachs, 713 00:29:52,280 --> 00:29:54,000 denn es ist der Klasse ziemlich. 714 00:29:54,000 --> 00:29:59,777 >> Aber wir sagen, dass nur kühlt wollen , die in der Klasse spezielle, nicht in der Klasse sind 715 00:29:59,777 --> 00:30:02,890 hübsch, sollte diese Grenze. 716 00:30:02,890 --> 00:30:12,549 Nun, was Sie tun können, ist, dass Sie kann sagen, .Special, Raum, .cool. 717 00:30:12,549 --> 00:30:15,590 Und, was das tut, wenn man bedenkt, darüber, ist es im Grunde sagen, 718 00:30:15,590 --> 00:30:19,530 OK, mir alles zu finden dass passt besonders. 719 00:30:19,530 --> 00:30:24,104 Dann innerhalb dieser Tags finden mir alles, was ist cool. 720 00:30:24,104 --> 00:30:27,270 ALLISON BUCHHOLTZ-AU: So ein anderer Weg das könnte gut, darüber nachzudenken sein, 721 00:30:27,270 --> 00:30:29,810 bringt es zurück zu C, ebenso wie die Idee der Rahmen. 722 00:30:29,810 --> 00:30:34,020 Also, wenn Sie einige haben Auswahl, wie die, die 723 00:30:34,020 --> 00:30:38,460 dass wir für die vorher gearbeitet, Ihre gesamte Web-Seite, alle Ihre HTML- 724 00:30:38,460 --> 00:30:40,180 ist in Ihrer Reichweite, nicht wahr? 725 00:30:40,180 --> 00:30:43,090 Aber wenn wir diese Eltern-Kind-Beziehungen, 726 00:30:43,090 --> 00:30:47,130 es ist, als ob Sie Gung, wo bist Sie zu einem bestimmten Ort suchen, 727 00:30:47,130 --> 00:30:50,540 als ob, wie, die wir im Rahmen der Suche eine spezifische Funktion anstelle 728 00:30:50,540 --> 00:30:52,007 unseres gesamten Datei. 729 00:30:52,007 --> 00:30:55,090 ZIELGRUPPE: So mit dem im Verstand, würde sie haben zählte wenn wir changed-- 730 00:30:55,090 --> 00:30:56,423 ALLISON BUCHHOLTZ-AU: Die Bestellung? 731 00:30:56,423 --> 00:30:59,320 ZIELGRUPPE: --die Klasse in CSS um .cool, Raum, .Special? 732 00:30:59,320 --> 00:31:01,153 ALLISON BUCHHOLTZ-AU: Ja, denn dann ist das 733 00:31:01,153 --> 00:31:04,420 würde sagen, Umfang es zu alles, coole hat, 734 00:31:04,420 --> 00:31:07,235 und dann, zu welchem ​​has-- suchen Ich meine, wie in diesem Fall, 735 00:31:07,235 --> 00:31:08,860 Ich glaube nicht, es wäre es geändert haben. 736 00:31:08,860 --> 00:31:10,318 >> TOMAS REIMERS: Wenn wir das, was gesagt? 737 00:31:10,318 --> 00:31:10,906 Entschuldigung. 738 00:31:10,906 --> 00:31:12,660 >> ALLISON BUCHHOLTZ-AU: Wenn wir Rahmen Sie es abkühlen und dann 739 00:31:12,660 --> 00:31:14,550 Ihre Sachen aus speziellen, Es wäre dasselbe tatsächlich sein. 740 00:31:14,550 --> 00:31:16,260 >> TOMAS REIMERS: Also wäre es nicht. 741 00:31:16,260 --> 00:31:16,590 >> ALLISON BUCHHOLTZ-AU: Er würde das nicht? 742 00:31:16,590 --> 00:31:17,590 Oh, na ja. 743 00:31:17,590 --> 00:31:18,090 Ich mich irre. 744 00:31:18,090 --> 00:31:21,480 >> TOMAS REIMERS: Also der Grund, es ist different-- gemeinsamen mistake-- 745 00:31:21,480 --> 00:31:27,140 ist, dass jetzt nur der Link ist cool, nicht wahr? 746 00:31:27,140 --> 00:31:32,176 Ich denke, meine Frage an euch ist, , was auf dieser Seite wird von .cool abgestimmt? 747 00:31:32,176 --> 00:31:35,984 748 00:31:35,984 --> 00:31:38,340 Es gibt zwei Tags hier, nicht wahr? 749 00:31:38,340 --> 00:31:39,770 Welches ist dieses und dieses. 750 00:31:39,770 --> 00:31:40,590 Beide entsprechen cool. 751 00:31:40,590 --> 00:31:42,200 Nichts anderes tut. 752 00:31:42,200 --> 00:31:46,460 Also, wenn Sie sagte, .cool, Raum, .Special, was du zu sagen, ist gerade, 753 00:31:46,460 --> 00:31:48,824 innerhalb dieser Tags, was ist das Besondere? 754 00:31:48,824 --> 00:31:49,865 ALLISON BUCHHOLTZ-AU: Hm. 755 00:31:49,865 --> 00:31:51,800 Das ist, was es-- rechts. 756 00:31:51,800 --> 00:31:52,310 Weil es wie nur hier. 757 00:31:52,310 --> 00:31:53,310 >> TOMAS REIMERS: So wählt er nichts. 758 00:31:53,310 --> 00:31:56,530 >> ALLISON BUCHHOLTZ-AU: Während bei spezielle, wir sind in diesen Tags hier. 759 00:31:56,530 --> 00:31:57,971 >> TOMAS REIMERS: Diese und jene. 760 00:31:57,971 --> 00:31:58,512 ZIELGRUPPE: OK. 761 00:31:58,512 --> 00:31:58,920 Also diese Tags aus dem Schrägstrich? 762 00:31:58,920 --> 00:31:59,740 >> TOMAS REIMERS: Ja. 763 00:31:59,740 --> 00:32:01,150 Ist das sinnvoll? 764 00:32:01,150 --> 00:32:03,685 Wie ist es im Grunde versuchen, Umfang einzugrenzen. 765 00:32:03,685 --> 00:32:04,810 ALLISON BUCHHOLTZ-AU: Ja. 766 00:32:04,810 --> 00:32:06,870 Ich denke, das ist wahrscheinlich die einfachste Weg, um darüber nachzudenken. 767 00:32:06,870 --> 00:32:09,270 >> TOMAS REIMERS: So fanden wir das, und Wir fanden diese beides ausgeglichen Besonderes. 768 00:32:09,270 --> 00:32:11,400 Und dann werden wir gefragt, innerhalb diese Jungs, was cool ist? 769 00:32:11,400 --> 00:32:12,941 Und in diesem einen, das hier ist cool. 770 00:32:12,941 --> 00:32:14,500 Innerhalb dieser, ist nichts cool. 771 00:32:14,500 --> 00:32:16,250 Das ist also der einzige Tag, das bleibt. 772 00:32:16,250 --> 00:32:20,112 >> ALLISON BUCHHOLTZ-AU: Während kühlen ist nur innerhalb dieser ein Tags gibt. 773 00:32:20,112 --> 00:32:21,070 TOMAS REIMERS: Genau. 774 00:32:21,070 --> 00:32:22,403 Und was ist das Besondere in denen? 775 00:32:22,403 --> 00:32:22,930 Nichts. 776 00:32:22,930 --> 00:32:25,270 Nun, was ich sagen will, ist wenn es keinen Raum, 777 00:32:25,270 --> 00:32:29,880 Sie fragen, was cool ist und special-- oder was ist hübsch und spezielle, nicht wahr? 778 00:32:29,880 --> 00:32:35,370 Wenn Sie sagen, .special.pretty, das ist die gleichen wie .pretty.special. 779 00:32:35,370 --> 00:32:39,220 >> Denn das, was das Entfernen der Platz gefragt wird, wenn Sie .Special sagen, 780 00:32:39,220 --> 00:32:40,970 Sie fragen, OK, welche sind speziell sind? 781 00:32:40,970 --> 00:32:43,780 Und von denen, die diejenigen sind auch hübsch, 782 00:32:43,780 --> 00:32:47,010 was dasselbe, grammatisch, wie die Frage, was ist schön, 783 00:32:47,010 --> 00:32:49,500 und dann von denen, was auch besonders? 784 00:32:49,500 --> 00:32:50,000 Richtig? 785 00:32:50,000 --> 00:32:53,099 Es ist der Unterschied von was ist in, was ist. 786 00:32:53,099 --> 00:32:53,640 ZIELGRUPPE: OK. 787 00:32:53,640 --> 00:32:54,473 TOMAS REIMERS: Ja. 788 00:32:54,473 --> 00:32:56,670 789 00:32:56,670 --> 00:32:58,030 Ehrfürchtig. 790 00:32:58,030 --> 00:33:00,426 So mit dem im Verstand dann- 791 00:33:00,426 --> 00:33:01,800 >> ALLISON BUCHHOLTZ-AU: Ich denke, unsere letzte Sache ist (in der Phantasie britischen Akzent) 792 00:33:01,800 --> 00:33:02,510 das Box-Modell. 793 00:33:02,510 --> 00:33:05,992 >> TOMAS REIMERS: Die box-- [CHUCKLES] Ich liebe die Art Allison sagt,. 794 00:33:05,992 --> 00:33:06,950 Also die Box-Modell Sache. 795 00:33:06,950 --> 00:33:09,644 >> ALLISON BUCHHOLTZ-AU: Haben Sie einfach ein Feld, werde ich Ihre Box-Modell sein. 796 00:33:09,644 --> 00:33:11,310 TOMAS REIMERS: Also lassen Sie uns darüber reden. 797 00:33:11,310 --> 00:33:14,070 So jetzt haben wir eine Menge verbrachte der Zeit im Gespräch über Selektoren. 798 00:33:14,070 --> 00:33:16,944 Mittlerweile seid ihr wohl, wie, Meister der selectors-- Sie wissen, 799 00:33:16,944 --> 00:33:21,510 wie Sie den Inhalt genau wählen, dass Sie auf dem Bildschirm manipulieren wollen. 800 00:33:21,510 --> 00:33:24,740 >> So, jetzt die Frage ist, wie genau, können Sie sie zu manipulieren? 801 00:33:24,740 --> 00:33:27,010 Also ich denke, die einfachste Weg, um darüber nachzudenken 802 00:33:27,010 --> 00:33:30,294 ist, nun ja, was genau ist ein Element in CSS? 803 00:33:30,294 --> 00:33:32,585 Wir haben viel Zeit damit verbracht, reden, was ist ein Tag, 804 00:33:32,585 --> 00:33:36,140 oder, was das einfachste Darstellung eines Tag? 805 00:33:36,140 --> 00:33:39,870 806 00:33:39,870 --> 00:33:45,170 >> Ein guter Weg, um darüber nachzudenken das heißt, was Form ist Lachs? 807 00:33:45,170 --> 00:33:47,295 Welche Form hat, wie die lachsfarbenen Hintergrund? 808 00:33:47,295 --> 00:33:47,880 >> ZIELGRUPPE: Es ist ein Rechteck. 809 00:33:47,880 --> 00:33:49,040 >> TOMAS REIMERS: Es ist ein Rechteck, nicht wahr? 810 00:33:49,040 --> 00:33:50,956 >> ALLISON BUCHHOLTZ-AU: War das nicht eine Fangfrage. 811 00:33:50,956 --> 00:33:51,870 [Gelächter] 812 00:33:51,870 --> 00:33:54,670 >> TOMAS REIMERS: Nicht versuchen, um Ihnen so spät Trick Jungs. 813 00:33:54,670 --> 00:33:57,510 So haben wir dieses Rechtecks. 814 00:33:57,510 --> 00:33:59,140 Und der Tag ist ein p, oder? 815 00:33:59,140 --> 00:34:02,280 Also das gibt uns gute Glauben, dass der Absatz 816 00:34:02,280 --> 00:34:07,440 wird als ein Rechteck dargestellt, dest in den Köpfen der Browser, die 817 00:34:07,440 --> 00:34:08,715 es ist. 818 00:34:08,715 --> 00:34:11,423 >> ALLISON BUCHHOLTZ-AU: Ich meine, Browser sind in der Regel rechteckig, 819 00:34:11,423 --> 00:34:13,440 so macht es Sinn. 820 00:34:13,440 --> 00:34:18,750 >> TOMAS REIMERS: Die Idee hier ist dass alle Tags in CSS 821 00:34:18,750 --> 00:34:21,790 sind als ein Rechteck dargestellt. 822 00:34:21,790 --> 00:34:25,699 Und jedes Rechteck hat vier Teile nach CSS, OK? 823 00:34:25,699 --> 00:34:27,830 Sie haben den eigentlichen Inhalt. 824 00:34:27,830 --> 00:34:29,644 Das ist, wo der Text liegt. 825 00:34:29,644 --> 00:34:30,470 >> ALLISON BUCHHOLTZ-AU: Vielleicht ist Ihr Bild. 826 00:34:30,470 --> 00:34:31,303 >> TOMAS REIMERS: Ja. 827 00:34:31,303 --> 00:34:33,860 Sie haben Polster, das ist, nur eine Art Leerraum. 828 00:34:33,860 --> 00:34:35,085 Dann haben Sie eine Grenze. 829 00:34:35,085 --> 00:34:37,710 Und dann muss man Marge, die ist Leerraum außerhalb davon. 830 00:34:37,710 --> 00:34:39,460 Also das macht keinen Sinn für jeden, also sind wir 831 00:34:39,460 --> 00:34:42,500 werde darüber für eine Sekunde sprechen. 832 00:34:42,500 --> 00:34:47,570 Also hier, was wir tun werden wird, wir werden einige divs zu erstellen, OK? 833 00:34:47,570 --> 00:34:48,420 Entschuldigen Sie mich, während I-- 834 00:34:48,420 --> 00:34:51,506 >> ALLISON BUCHHOLTZ-AU: Ich fühle mich wie sollten wir ein nettes Bild in. 835 00:34:51,506 --> 00:34:52,520 >> TOMAS REIMERS: Wir auf jeden Fall sein sollte. 836 00:34:52,520 --> 00:34:53,389 >> ALLISON BUCHHOLTZ-AU: Ich fühle mich wie jeder 837 00:34:53,389 --> 00:34:54,870 könnten von einem profitieren niedliches Bild, das ist alles. 838 00:34:54,870 --> 00:34:56,774 >> TOMAS REIMERS: Können wir alle profitieren von a-- 839 00:34:56,774 --> 00:34:57,648 >> ZIELGRUPPE: Ja, sicher. 840 00:34:57,648 --> 00:34:58,790 TOMAS REIMERS: OK, cool. 841 00:34:58,790 --> 00:35:02,254 Also sollten wir einen netten setzen Bild in irgendwo. 842 00:35:02,254 --> 00:35:05,295 ALLISON BUCHHOLTZ-AU: Ich fühle mich wie ein niedlichen Häschen könnte gerade jetzt sinnvoll sein. 843 00:35:05,295 --> 00:35:06,190 TOMAS REIMERS: Sicher. 844 00:35:06,190 --> 00:35:06,950 ALLISON BUCHHOLTZ-AU: Ende der Woche. 845 00:35:06,950 --> 00:35:07,390 Haben Sie etwas adorab-- 846 00:35:07,390 --> 00:35:08,520 >> TOMAS REIMERS: Wie Kampf ein Kätzchen? 847 00:35:08,520 --> 00:35:09,220 >> ALLISON BUCHHOLTZ-AU: Ein Kätzchen funktioniert auch. 848 00:35:09,220 --> 00:35:11,300 >> TOMAS REIMERS: Cool, weil es gibt einen Ort dafür. 849 00:35:11,300 --> 00:35:12,300 Es heißt PlaceKitten. 850 00:35:12,300 --> 00:35:14,719 ALLISON BUCHHOLTZ-AU: Das ist toll. 851 00:35:14,719 --> 00:35:15,510 TOMAS REIMERS: Ja. 852 00:35:15,510 --> 00:35:18,040 ALLISON BUCHHOLTZ-AU: Nur für, wie, Platzhalterbilder in Ihre Website. 853 00:35:18,040 --> 00:35:18,914 TOMAS REIMERS: Mm-hm. 854 00:35:18,914 --> 00:35:21,520 Es gibt auch PlacePuppy. 855 00:35:21,520 --> 00:35:22,832 Und es gibt PlaceBacon. 856 00:35:22,832 --> 00:35:24,340 >> ALLISON BUCHHOLTZ-AU: PlaceBacon? 857 00:35:24,340 --> 00:35:25,350 Wirklich? 858 00:35:25,350 --> 00:35:28,190 >> TOMAS REIMERS: Oh, wir nicht hier haben Internetzugang. 859 00:35:28,190 --> 00:35:29,875 >> ALLISON BUCHHOLTZ-AU: [seufzt] 860 00:35:29,875 --> 00:35:30,375 Tragische. 861 00:35:30,375 --> 00:35:32,333 TOMAS REIMERS: Andernfalls Ich würde Jungs zeigen, 862 00:35:32,333 --> 00:35:33,870 wie Sie Bilder in Ihrer Website. 863 00:35:33,870 --> 00:35:36,370 Wir werden versuchen, dies zu umgehen arbeiten, bevor wir gehen müssen. 864 00:35:36,370 --> 00:35:38,660 Aber für jetzt, gerade wir werde in Farben sprechen dann. 865 00:35:38,660 --> 00:35:39,820 Wir wollen Bilder kittens-- setzen 866 00:35:39,820 --> 00:35:40,210 >> ALLISON BUCHHOLTZ-AU: Wir taten. 867 00:35:40,210 --> 00:35:43,110 >> TOMAS REIMERS: --die Internets unten Im Moment sind hier. 868 00:35:43,110 --> 00:35:47,820 So haben wir zwei divs, und wir sind gehen sie zwei Ids zu geben. 869 00:35:47,820 --> 00:35:51,380 870 00:35:51,380 --> 00:35:56,760 Wir werden es nennen "Ersten" und "zweiten". 871 00:35:56,760 --> 00:36:01,184 So id = "zuerst." 872 00:36:01,184 --> 00:36:02,850 Und wir werden sie zwei Farben zu geben. 873 00:36:02,850 --> 00:36:08,424 Wie können wir also etwas wählen mit der ID "erste"? 874 00:36:08,424 --> 00:36:09,840 ALLISON BUCHHOLTZ-AU: Dot oder Hash? 875 00:36:09,840 --> 00:36:10,730 ZIELGRUPPE: Sharp. 876 00:36:10,730 --> 00:36:12,940 TOMAS REIMERS: Sharp, perfekt. 877 00:36:12,940 --> 00:36:14,950 Sharp, hasch, was wir-- 878 00:36:14,950 --> 00:36:15,680 >> ALLISON BUCHHOLTZ-AU: Viele Dinge zu nennen. 879 00:36:15,680 --> 00:36:16,430 >> TOMAS REIMERS: OK. 880 00:36:16,430 --> 00:36:19,800 Wir werden auf Hashtag zu regeln, und das ist, was wir mit zu gehen. 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: So hashtag erste. 884 00:36:22,340 --> 00:36:24,506 >> ALLISON BUCHHOLTZ-AU: So Sie seminar-- tweet können 885 00:36:24,506 --> 00:36:27,582 hashtag CSS, hashtag cool. 886 00:36:27,582 --> 00:36:29,040 TOMAS REIMERS: Hashtag Awesomeness. 887 00:36:29,040 --> 00:36:30,730 ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, ja. 888 00:36:30,730 --> 00:36:31,480 TOMAS REIMERS: OK. 889 00:36:31,480 --> 00:36:33,660 So haben wir "erste" und "zweite". 890 00:36:33,660 --> 00:36:37,697 Also zuerst, wir gehen zu müssen, eine Hintergrundfarbe rot. 891 00:36:37,697 --> 00:36:39,030 ALLISON BUCHHOLTZ-AU: Äh, Doppelpunkt. 892 00:36:39,030 --> 00:36:40,281 TOMAS REIMERS: Yup. 893 00:36:40,281 --> 00:36:42,281 ALLISON BUCHHOLTZ-AU: Ich werde deine Punktprüfung sein. 894 00:36:42,281 --> 00:36:43,960 TOMAS REIMERS: Allison hat mich. 895 00:36:43,960 --> 00:36:45,830 Hintergrund-Farbe blue-- 896 00:36:45,830 --> 00:36:46,810 >> TOMAS REIMERS: Lila! 897 00:36:46,810 --> 00:36:47,726 >> TOMAS REIMERS: Lila. 898 00:36:47,726 --> 00:36:48,830 ALLISON BUCHHOLTZ-AU: Ja. 899 00:36:48,830 --> 00:36:50,630 Purples meine Lieblingsfarbe, und wir haben es noch nicht benutzt. 900 00:36:50,630 --> 00:36:51,546 >> TOMAS REIMERS: Violett. 901 00:36:51,546 --> 00:36:53,361 ALLISON BUCHHOLTZ-AU: Violett. 902 00:36:53,361 --> 00:36:53,860 Das funktioniert. 903 00:36:53,860 --> 00:36:56,482 904 00:36:56,482 --> 00:36:59,880 >> TOMAS REIMERS: So sind wir werde zwei divs haben. 905 00:36:59,880 --> 00:37:01,654 Sie werden völlig leer zu sein. 906 00:37:01,654 --> 00:37:03,070 Wir sollten wahrscheinlich einen Text. 907 00:37:03,070 --> 00:37:05,580 908 00:37:05,580 --> 00:37:09,815 So "erste" sein wird "HALLO". 909 00:37:09,815 --> 00:37:10,940 Und die "zweite" wird sagen-- 910 00:37:10,940 --> 00:37:11,110 >> ALLISON BUCHHOLTZ-AU: Auf Wiedersehen. 911 00:37:11,110 --> 00:37:12,514 >> ZIELGRUPPE: - "WORLD". 912 00:37:12,514 --> 00:37:14,122 Hallo, auf Wiedersehen. 913 00:37:14,122 --> 00:37:16,580 ALLISON BUCHHOLTZ-AU: Ich sah, sie im Konzert die zweite Woche. 914 00:37:16,580 --> 00:37:17,705 TOMAS REIMERS: The Beatles? 915 00:37:17,705 --> 00:37:20,242 ALLISON BUCHHOLTZ-AU: Für reelle Zahlen. 916 00:37:20,242 --> 00:37:21,200 Sie sind nicht so toll. 917 00:37:21,200 --> 00:37:24,084 918 00:37:24,084 --> 00:37:24,750 Ich mag es nicht. 919 00:37:24,750 --> 00:37:26,060 >> TOMAS REIMERS: Wir haben "HALLO" und "Auf Wiedersehen." 920 00:37:26,060 --> 00:37:29,102 Und wieder ist CSS einfach nur geil, weil sie erkennt unsere Farben. 921 00:37:29,102 --> 00:37:30,810 Brauchen Sie nicht, auch Sorgen, dass es sie gibt. 922 00:37:30,810 --> 00:37:33,194 Sie tun. 923 00:37:33,194 --> 00:37:35,130 >> ALLISON BUCHHOLTZ-AU: Es gibt sie. 924 00:37:35,130 --> 00:37:39,560 >> TOMAS REIMERS: Also ich denke, CSS hat 255 Worte über Farbe reden. 925 00:37:39,560 --> 00:37:42,986 Wenn Sie eine Farbe außerhalb denken die 255, wie, ich werden beeindruckt sein. 926 00:37:42,986 --> 00:37:44,110 ALLISON BUCHHOLTZ-AU: Ja. 927 00:37:44,110 --> 00:37:45,560 Ich glaube, Sie Jungs haben genau das Richtige nach kommen. 928 00:37:45,560 --> 00:37:47,727 >> TOMAS REIMERS: So, hier, Sie werden sehen, wir haben zwei Boxen 929 00:37:47,727 --> 00:37:49,143 rechts oben auf jeder anderen, nicht wahr? 930 00:37:49,143 --> 00:37:50,200 Hallo und auf Wiedersehen. 931 00:37:50,200 --> 00:37:51,460 >> ALLISON BUCHHOLTZ-AU: Es gibt keinen Raum dazwischen. 932 00:37:51,460 --> 00:37:53,390 Sie sind nur smooshed Rechts auf der jeweils anderen Seite. 933 00:37:53,390 --> 00:37:55,973 >> TOMAS REIMERS: Das erste, was Ich denke, wir sollten darüber reden 934 00:37:55,973 --> 00:38:02,960 ist wir sagen-- auch ja. 935 00:38:02,960 --> 00:38:08,020 So CSS stellt sie als Art-Boxen. 936 00:38:08,020 --> 00:38:10,100 Und wie Boxen, haben sie Gehalt. 937 00:38:10,100 --> 00:38:14,540 Und der Inhalt ist im Moment Art die HALLO oder GOODBYE und das ist es. 938 00:38:14,540 --> 00:38:15,040 OK? 939 00:38:15,040 --> 00:38:19,790 >> Damit wird eines der ersten Dinge, die Sie tun können, ist man padding hinzuzufügen. 940 00:38:19,790 --> 00:38:25,610 Padding sagt, wie viel Platz es sollte auf jeder Seite zu verlassen. 941 00:38:25,610 --> 00:38:29,200 Also lassen Sie uns sagen, ich möchte sagen, 10 Pixel auf jeder Seite. 942 00:38:29,200 --> 00:38:31,234 Und ich will, dass in einem zweiten sezieren. 943 00:38:31,234 --> 00:38:33,150 ALLISON BUCHHOLTZ-AU: All diese Dinge hier 944 00:38:33,150 --> 00:38:36,980 sein werden, meistens in Pixel für den Rest des Seminars. 945 00:38:36,980 --> 00:38:40,980 Du wirst sehen, dass es Einige Raum um sich herum, nicht wahr? 946 00:38:40,980 --> 00:38:46,360 Also, was Sie hier nicht sehen, ist es diese unsichtbare Art Polsterung 947 00:38:46,360 --> 00:38:49,600 auf jeder Seite, die so dergleichen Ihre Box von content-- OK, haben Sie 948 00:38:49,600 --> 00:38:51,680 >> ALLISON BUCHHOLTZ-AU: Möchten Sie nur ziehen Sie den inspizieren Element? 949 00:38:51,680 --> 00:38:53,659 >> TOMAS REIMERS: Ja, das ist eine gute Idee. 950 00:38:53,659 --> 00:38:56,700 ALLISON BUCHHOLTZ-AU: Auch finde ich dass die zu inspizieren Element ist ein guter Weg 951 00:38:56,700 --> 00:39:01,280 , um herauszufinden, wenn etwas los falsch, etwas Unvorhergesehenes passiert, 952 00:39:01,280 --> 00:39:04,570 Prüfen Sie die Tags und sehen, was es ist, überschrieben hilfreich. 953 00:39:04,570 --> 00:39:05,940 >> TOMAS REIMERS: Also ich bin mir nicht sicher wenn euch können diese Farbe zu sehen. 954 00:39:05,940 --> 00:39:06,470 Kannst du das? 955 00:39:06,470 --> 00:39:10,120 Sie finden diese Polsterung sehen von der Art der Kante. 956 00:39:10,120 --> 00:39:13,410 Und dann die eigentliche sehen Sie Inhalt in blau, nicht wahr? 957 00:39:13,410 --> 00:39:16,820 Also das ist der sehr Grundlagen der Box-Modell. 958 00:39:16,820 --> 00:39:17,674 Sie haben Gehalt. 959 00:39:17,674 --> 00:39:18,590 Dann haben Sie Polsterung. 960 00:39:18,590 --> 00:39:20,440 >> ZIELGRUPPE: Warum gehst du nicht einfach Verwenden Sie das Feld innerhalb the-- 961 00:39:20,440 --> 00:39:21,606 >> ALLISON BUCHHOLTZ-AU: Richtig. 962 00:39:21,606 --> 00:39:24,745 Weil es nur die Auswahl das Element jetzt. 963 00:39:24,745 --> 00:39:26,050 >> TOMAS REIMERS: Yup. 964 00:39:26,050 --> 00:39:27,060 Andere Dinge. 965 00:39:27,060 --> 00:39:29,780 Also lassen Sie uns darüber reden padding-Befehl für eine Sekunde. 966 00:39:29,780 --> 00:39:36,380 So in CSS, Messungen müssen Sie ein Gerät haben. 967 00:39:36,380 --> 00:39:39,740 Also zuerst müssen Sie die Menge. 968 00:39:39,740 --> 00:39:41,460 Also in diesem Fall, wir haben die 10. 969 00:39:41,460 --> 00:39:44,780 Und dann wird die nächste Wir haben gesagt, ist Pixel, Pixel. 970 00:39:44,780 --> 00:39:49,160 Andere, die Sie haben könnten sind Dinge wie Zentimeter, Zoll. 971 00:39:49,160 --> 00:39:51,367 Sie können Dinge tun wollen, was ist 10 Zoll? 972 00:39:51,367 --> 00:39:52,700 Und es wird lächerlich zu sein. 973 00:39:52,700 --> 00:39:52,990 >> ALLISON BUCHHOLTZ-AU: Oh, Mann. 974 00:39:52,990 --> 00:39:53,460 >> ZIELGRUPPE: Whoa. 975 00:39:53,460 --> 00:39:54,460 >> TOMAS und Allison: Ja. 976 00:39:54,460 --> 00:39:57,840 TOMAS REIMERS: Also das ist alles, Polsterung. 977 00:39:57,840 --> 00:39:59,255 Ich werde wieder in Pixel gehen. 978 00:39:59,255 --> 00:40:01,754 >> ALLISON BUCHHOLTZ-AU: Pixel sind in der Regel, wie, der Standard. 979 00:40:01,754 --> 00:40:04,589 Wenn Sie an einer Vielzahl von Websites aus, sie arbeiten meist in Pixel. 980 00:40:04,589 --> 00:40:07,755 TOMAS REIMERS: Also wirst du sehen, entweder pixels-- die anderen, die Sie sehen 981 00:40:07,755 --> 00:40:13,952 ist em, das ist einer em ist gleich der Höhe der Schriftart 982 00:40:13,952 --> 00:40:15,160 die Sie derzeit verwenden. 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: Es ist ein guter Weg, zu sagen, wie, ich will so viel Platz wie meine Schrift 986 00:40:20,740 --> 00:40:21,514 ist unter. 987 00:40:21,514 --> 00:40:23,180 ALLISON BUCHHOLTZ-AU: Haben Sie nicht wissen, dass. 988 00:40:23,180 --> 00:40:25,747 Sie lernen jeden Tag etwas Neues. 989 00:40:25,747 --> 00:40:27,955 TOMAS REIMERS: Es gibt Viele Messungen in CS. 990 00:40:27,955 --> 00:40:29,260 Ich schlage vor, Sie sie nachschlagen. 991 00:40:29,260 --> 00:40:32,122 Für alle Ihre Fälle, ich glaube, Pixeln ausreichend. 992 00:40:32,122 --> 00:40:33,830 Und sie sind auch das, was Sie gehen zu sehen 993 00:40:33,830 --> 00:40:36,520 In der Mehrzahl der Beispiele online erfolgen. 994 00:40:36,520 --> 00:40:38,320 Also werden wir es auf Pixel zu verlassen. 995 00:40:38,320 --> 00:40:42,420 >> Sie können auch, ich solle so sagen-- Polsterung setzt alle der Polster. 996 00:40:42,420 --> 00:40:49,789 Sie können auch etwas tun "Padding-top", um nur Satz-- 997 00:40:49,789 --> 00:40:52,080 ALLISON BUCHHOLTZ-AU: Vielleicht wir werden unser "HALLO" zurück. 998 00:40:52,080 --> 00:40:55,480 TOMAS REIMERS: --to Sie einfach die Polsterung an der Oberseite und sonst nichts. 999 00:40:55,480 --> 00:40:59,560 So sind die vier Befehle padding-top, padding-bottom, padding-left, 1000 00:40:59,560 --> 00:41:00,310 und padding-right. 1001 00:41:00,310 --> 00:41:02,470 >> ALLISON BUCHHOLTZ-AU: Genau wie Sie für ein Feld erwartet. 1002 00:41:02,470 --> 00:41:03,530 >> TOMAS REIMERS: Ja. 1003 00:41:03,530 --> 00:41:05,240 Nichts gibt es zu verrückt. 1004 00:41:05,240 --> 00:41:08,230 Ist das sinnvoll? 1005 00:41:08,230 --> 00:41:11,990 Das ist also Polsterung. 1006 00:41:11,990 --> 00:41:14,110 Ich werde ganz eingestellt, die Polster wieder auf 10. 1007 00:41:14,110 --> 00:41:17,010 Und dann werde ich auf dem Weg zu Grenze. 1008 00:41:17,010 --> 00:41:21,130 >> Was Grenze ist Grenze ist eine seltsame Befehl. 1009 00:41:21,130 --> 00:41:24,450 Es dauert eine Art drei Dinge auf einmal. 1010 00:41:24,450 --> 00:41:28,930 So ist der erste ist, wie groß du will, dass es als eine Messung. 1011 00:41:28,930 --> 00:41:30,662 Auch hier bin ich nur mit Pixel. 1012 00:41:30,662 --> 00:41:32,620 Und das letzte, was ich sollten die Messungen hinzufügen 1013 00:41:32,620 --> 00:41:35,270 ist die eine Sache, die benötigt keine Einheit ist 0. 1014 00:41:35,270 --> 00:41:37,390 Es ist eigentlich nicht korrekt bis 0 geben eine Einheit, 1015 00:41:37,390 --> 00:41:41,940 da 0 0 in Zoll, Pixel, Zentimeter, was auch immer. 1016 00:41:41,940 --> 00:41:43,960 Das alles bedeutet nur 0, oder? 1017 00:41:43,960 --> 00:41:46,710 Also zuerst Sie ihm die Messung. 1018 00:41:46,710 --> 00:41:48,650 >> Dann sind Sie geben ihm den Stil. 1019 00:41:48,650 --> 00:41:49,869 Also werde ich sagen, "solid". 1020 00:41:49,869 --> 00:41:51,410 Und wir werden über das, was das bedeutet, zu sprechen. 1021 00:41:51,410 --> 00:41:54,290 Und dann schließlich eine Farbe geben Sie es. 1022 00:41:54,290 --> 00:41:56,850 Also werde ich sagen, "schwarz". 1023 00:41:56,850 --> 00:41:59,637 Und das sind alles Dinge, die wir haben jetzt gesehen, mit Ausnahme von Stil, 1024 00:41:59,637 --> 00:42:00,720 aber wir werden darüber reden. 1025 00:42:00,720 --> 00:42:04,120 So euch Messungen gesehen haben, und Sie Farben gesehen habe. 1026 00:42:04,120 --> 00:42:10,410 Und was passiert, ist, dass wir diese erhalten schöne schwarze Umrandung, nicht wahr? 1027 00:42:10,410 --> 00:42:11,620 Ihr Jungs sehen, wie wir das tun? 1028 00:42:11,620 --> 00:42:12,760 >> ZIELGRUPPE: Ja. 1029 00:42:12,760 --> 00:42:14,850 >> TOMAS REIMERS: Kühl. 1030 00:42:14,850 --> 00:42:17,370 Also, was ist das? 1031 00:42:17,370 --> 00:42:19,160 Also zunächst einmal, es ist ein Pixel. 1032 00:42:19,160 --> 00:42:20,880 Das ist selbstverständlich, oder? 1033 00:42:20,880 --> 00:42:23,254 Wie ist es um ein Pixel dick. 1034 00:42:23,254 --> 00:42:26,170 Oder es würde ein Pixel sein, aber ich bin vergrößert, so dass es ein bisschen mehr 1035 00:42:26,170 --> 00:42:26,490 als die. 1036 00:42:26,490 --> 00:42:27,967 >> ALLISON BUCHHOLTZ-AU: Und wir haben lächerlich Auflösung TV. 1037 00:42:27,967 --> 00:42:29,460 >> TOMAS REIMERS: Ja. 1038 00:42:29,460 --> 00:42:33,640 Sie können es größer zu machen, kleiner, was auch immer. 1039 00:42:33,640 --> 00:42:35,630 Also hier ist eine Zwei-Pixel-Grenze. 1040 00:42:35,630 --> 00:42:38,810 Du wirst sehen, es ist doppelt so dick. 1041 00:42:38,810 --> 00:42:40,172 Das nächste, was Sie haben, ist Farbe. 1042 00:42:40,172 --> 00:42:41,130 Das ist nicht interessant. 1043 00:42:41,130 --> 00:42:42,710 Ich werde nicht zu reden darüber, wirklich. 1044 00:42:42,710 --> 00:42:45,110 >> ALLISON BUCHHOLTZ-AU: Aber der Stil vielleicht nur ein wenig interessanter. 1045 00:42:45,110 --> 00:42:45,980 >> TOMAS REIMERS: Ja. 1046 00:42:45,980 --> 00:42:48,560 So Stil gibt es nur wenige diejenigen die ich sehe, häufig verwendet. 1047 00:42:48,560 --> 00:42:55,690 Zuerst eine solide, die nächste gepunkteten, und der letzte, der gestrichelten. 1048 00:42:55,690 --> 00:42:59,290 Und hier ist punktiert. 1049 00:42:59,290 --> 00:43:02,980 Sie werden sehen, dass sie eine Reihe von Punkten, nicht wahr? 1050 00:43:02,980 --> 00:43:09,030 Eine gute Möglichkeit, Art erhalten eine schöne Grenz gehen, sind Striche auch ziemlich populär. 1051 00:43:09,030 --> 00:43:11,580 1052 00:43:11,580 --> 00:43:13,600 >> ALLISON BUCHHOLTZ-AU: Und dann natürlich, ich bin 1053 00:43:13,600 --> 00:43:16,660 sicher, es gibt viele andere Stile, die Sie bekommen können. 1054 00:43:16,660 --> 00:43:20,000 Und wir haben eine große Menge von Links am Ende für euch 1055 00:43:20,000 --> 00:43:23,470 zu Art durchgehen und siehe weitere coole CSS. 1056 00:43:23,470 --> 00:43:25,954 >> TOMAS REIMERS: Und dann das letzte, was, wir sind 1057 00:43:25,954 --> 00:43:27,870 werde über das sprechen Box-Modelle, sehr kurz. 1058 00:43:27,870 --> 00:43:30,070 Oh, und dann überschreitende, genau wie Polsterung, 1059 00:43:30,070 --> 00:43:33,270 Sie haben auch Dinge wie border-left, border-right, border-top, 1060 00:43:33,270 --> 00:43:37,590 border-bottom, die Sie zulassen zu einer bestimmten Grenze zu kommen. 1061 00:43:37,590 --> 00:43:40,650 So, hier ist nur die Grenze nach links definiert. 1062 00:43:40,650 --> 00:43:43,060 Ist das sinnvoll? 1063 00:43:43,060 --> 00:43:46,170 >> ALLISON BUCHHOLTZ-AU: Es ist ein kühler So wie die Dinge zu betonen, oder fügen 1064 00:43:46,170 --> 00:43:47,545 Linien zwischen den verschiedenen Elementen. 1065 00:43:47,545 --> 00:43:48,670 TOMAS REIMERS: Auf jeden Fall. 1066 00:43:48,670 --> 00:43:50,940 Also das ist unsere Grenze. 1067 00:43:50,940 --> 00:43:52,790 Und die letzte Marge. 1068 00:43:52,790 --> 00:43:55,892 Marge wie padding außer es ist nicht within-- 1069 00:43:55,892 --> 00:43:57,975 ALLISON BUCHHOLTZ-AU: Es ist nicht um Ihrem Element 1070 00:43:57,975 --> 00:44:00,840 sondern tatsächlich um den gesamten Box, die wir seit einiger Zeit erleben. 1071 00:44:00,840 --> 00:44:02,770 >> TOMAS REIMERS: Ja. 1072 00:44:02,770 --> 00:44:04,090 Allison sagte, dass es perfekt. 1073 00:44:04,090 --> 00:44:07,550 Es ist nicht, wie, in Ihrem Element, ist es um das ganze Feld. 1074 00:44:07,550 --> 00:44:10,900 Das bedeutet, dass Dinge wie Hintergrund nicht, sie anzuwenden. 1075 00:44:10,900 --> 00:44:13,550 Und im Grunde sagt, wie, ich will nichts 1076 00:44:13,550 --> 00:44:15,230 in diesem viel Platz für mich. 1077 00:44:15,230 --> 00:44:17,470 So wie hier haben wir eine Marge von 10 Pixel. 1078 00:44:17,470 --> 00:44:23,100 Also nichts innerhalb von 10 Pixel sollte neben mir sein. 1079 00:44:23,100 --> 00:44:26,210 Das ist irgendwie seine Raum aber irgendwie nicht. 1080 00:44:26,210 --> 00:44:29,215 Also das ist der sehr Grundlagen der Box-Modell. 1081 00:44:29,215 --> 00:44:30,090 Ist das sinnvoll? 1082 00:44:30,090 --> 00:44:33,830 1083 00:44:33,830 --> 00:44:34,550 Cool, cool. 1084 00:44:34,550 --> 00:44:35,800 ALLISON BUCHHOLTZ-AU: Awesome. 1085 00:44:35,800 --> 00:44:37,890 So, jetzt denke ich, wir nur haben unsere coolen Ressourcen 1086 00:44:37,890 --> 00:44:41,220 dass wir euch nehmen durch sehr schnell. 1087 00:44:41,220 --> 00:44:44,815 Und wir werden auch actually--, wir Internet noch? 1088 00:44:44,815 --> 00:44:47,860 >> TOMAS REIMERS: Lassen Sie uns sehen, ob ich up-- öffnen 1089 00:44:47,860 --> 00:44:50,040 lassen Sie mich nur, ob ich können Internet schnell 1090 00:44:50,040 --> 00:44:53,317 während Allison spricht über alles Allison will, darüber zu sprechen. 1091 00:44:53,317 --> 00:44:55,150 ALLISON BUCHHOLTZ-AU: So basically-- ich nicht 1092 00:44:55,150 --> 00:44:57,930 wissen, was anderes kann ich an dieser Stelle sagen. 1093 00:44:57,930 --> 00:45:01,340 Aber dies sind nur einige wirklich gute Ressourcen. 1094 00:45:01,340 --> 00:45:04,629 Das sind diejenigen, die Tomas und ich verwendet habe 1095 00:45:04,629 --> 00:45:06,420 und dass wir tatsächlich verwendet werden, um dafür prep. 1096 00:45:06,420 --> 00:45:09,940 W3Schools ist eine, die Sie Jungs sollten nie gesehen haben. 1097 00:45:09,940 --> 00:45:12,440 Wir empfehlen es für ein Menge Dinge mit CSS. 1098 00:45:12,440 --> 00:45:15,060 Ich weiß, ich empfehle es meinem Abschnitt die ganze Zeit. 1099 00:45:15,060 --> 00:45:21,050 >> Einer der großen Vorteile ist, dass es können Sie die Art von Chaos mit CSS 1100 00:45:21,050 --> 00:45:23,830 und die Änderungen augenblicklich in diesem, 1101 00:45:23,830 --> 00:45:25,920 wie doppelt-Fenster, dass es. 1102 00:45:25,920 --> 00:45:29,980 So müssen Sie nicht zu kümmern Errichtung einer eigenen Web-Seite, 1103 00:45:29,980 --> 00:45:33,090 oder die Einrichtung in Ihrem vhost lokalen Gerät und lokalen Host, 1104 00:45:33,090 --> 00:45:34,980 und vor allem, dass Sachen Arbeits. 1105 00:45:34,980 --> 00:45:36,830 Es befindet sich direkt in der Seite eingebettet. 1106 00:45:36,830 --> 00:45:39,042 >> Und diese kleinen hat Lektionen, die Sie 1107 00:45:39,042 --> 00:45:40,750 durchlaufen, um zu lernen mehr über Selektoren, 1108 00:45:40,750 --> 00:45:44,610 oder zu manipulieren lernen Ihre Schriftart oder einen Hintergrund oder ein Bild. 1109 00:45:44,610 --> 00:45:46,990 Und Sie haben diese sofortige Ergebnisse, die Sie 1110 00:45:46,990 --> 00:45:49,310 nicht zu einem zu tun weitere Vorbereitungsarbeit für. 1111 00:45:49,310 --> 00:45:51,060 So liebe ich W3Schools. 1112 00:45:51,060 --> 00:45:51,960 Es ist fabelhaft. 1113 00:45:51,960 --> 00:45:52,670 Funktioniert es? 1114 00:45:52,670 --> 00:45:52,950 >> TOMAS REIMERS: Ja. 1115 00:45:52,950 --> 00:45:53,720 Nein, es ist nicht. 1116 00:45:53,720 --> 00:45:55,636 Wollen Sie mich, um zu versuchen wollen und starten Sie meinem Computer? 1117 00:45:55,636 --> 00:45:56,410 Oder wollen wir zu-- 1118 00:45:56,410 --> 00:46:01,490 >> ALLISON BUCHHOLTZ-AU: Ich meine, gut, wird dies auch online sein. 1119 00:46:01,490 --> 00:46:02,740 Alle Folien werden online. 1120 00:46:02,740 --> 00:46:05,470 Also habe ich nur wärmstens empfehlen diese tun. 1121 00:46:05,470 --> 00:46:07,880 >> Das ist großartig, wie gerade wie ein Spickzettel. 1122 00:46:07,880 --> 00:46:10,690 Es ist nur die ganze Grund Befehle, die Sie haben. 1123 00:46:10,690 --> 00:46:13,070 Es ist toll, wenn Sie zuerst sind Starten Sie Ihre Website. 1124 00:46:13,070 --> 00:46:15,080 Denn vielleicht auch nicht wollen in alle bekommen 1125 00:46:15,080 --> 00:46:17,355 die wirkliche Nitty Gritty Design-heavy stuff. 1126 00:46:17,355 --> 00:46:20,230 Sie brauchen nur sie in einer Weise zu formatieren diese Art von Sinn und Willen 1127 00:46:20,230 --> 00:46:21,490 für den Augenblick zu tun. 1128 00:46:21,490 --> 00:46:23,580 Und wenn Sie wirklich wollen sich in sie, ich weiß, 1129 00:46:23,580 --> 00:46:27,240 das ist, wie, eine der Tomas Lieblings Referenzen. 1130 00:46:27,240 --> 00:46:30,130 Wir wurden zu benutzen prep, und es ist fabelhaft. 1131 00:46:30,130 --> 00:46:33,030 Es ist der Entwickler von Mozilla. 1132 00:46:33,030 --> 00:46:36,490 >> TOMAS REIMERS: So Mozilla sind die Menschen, die Firefox zu machen. 1133 00:46:36,490 --> 00:46:40,290 Und es ist nur ihre eigenen Entwickler Referenz, die ich denke, ist genial. 1134 00:46:40,290 --> 00:46:44,870 Und es hat eine wunderbare Liste der Ressourcen. 1135 00:46:44,870 --> 00:46:45,530 Also haben wir have-- 1136 00:46:45,530 --> 00:46:48,060 >> ALLISON BUCHHOLTZ-AU: Und dann letzte Note 1137 00:46:48,060 --> 00:46:50,120 wenn Sie versuchen, Design Ihrer Website, 1138 00:46:50,120 --> 00:46:53,550 inspirieren von Dingen dass Sie denken, ziemlich. 1139 00:46:53,550 --> 00:46:56,340 Prüfen Sie das Element, Inspizieren des Quellcodes 1140 00:46:56,340 --> 00:46:59,370 kann super hilfsbereit sein um zu versuchen, um herauszufinden, 1141 00:46:59,370 --> 00:47:02,080 Wie Stil Ihrer eigenen Website. 1142 00:47:02,080 --> 00:47:04,540 >> Oft fühle ich mich wie das beste Weg neben Experimenten, 1143 00:47:04,540 --> 00:47:06,290 ist nur zu sehen Dinge, die schön sind. 1144 00:47:06,290 --> 00:47:09,810 Ich finde es ist wirklich schwer, gerade Art Design Dinge auf eigene Faust, 1145 00:47:09,810 --> 00:47:11,090 besonders am Anfang. 1146 00:47:11,090 --> 00:47:14,740 Also bitte auf Websites suchen können Sie einen Blick auf. 1147 00:47:14,740 --> 00:47:16,880 Finde heraus, was macht sie attraktiv für Sie. 1148 00:47:16,880 --> 00:47:19,170 Und dann fühlen sich frei, versuchen, zu replizieren, dass. 1149 00:47:19,170 --> 00:47:20,410 >> TOMAS REIMERS: Richtig. 1150 00:47:20,410 --> 00:47:23,120 Auch wie Websites so können Sie sehen, 1151 00:47:23,120 --> 00:47:25,460 es ist definitiv ein div an der Spitze. 1152 00:47:25,460 --> 00:47:29,920 Und dann haben Sie eine andere div innerhalb haben hier, die CSS Awesomeness ist. 1153 00:47:29,920 --> 00:47:32,480 Und dann haben Sie eine Reihe von Links haben hier. 1154 00:47:32,480 --> 00:47:34,770 Wenn Sie wirklich nur prüfen Elemente können Sie von zu sortieren 1155 00:47:34,770 --> 00:47:38,520 starten, um zu sehen, was zu tun Websites aussehen, und wie kann ich 1156 00:47:38,520 --> 00:47:40,493 neu, dass, wenn ich wollte. 1157 00:47:40,493 --> 00:47:41,890 Ist das sinnvoll? 1158 00:47:41,890 --> 00:47:43,670 So haben wir nur drei Minuten. 1159 00:47:43,670 --> 00:47:46,380 So Sie Fragen? 1160 00:47:46,380 --> 00:47:47,650 Einer von ihnen? 1161 00:47:47,650 --> 00:47:48,350 Ja. 1162 00:47:48,350 --> 00:47:50,780 >> ZIELGRUPPE: Für die Farbe Rechteck, wie würden Sie 1163 00:47:50,780 --> 00:47:53,499 have--, wenn Sie nicht wollen, dass es geht über die ganze Seite, könnte 1164 00:47:53,499 --> 00:47:56,400 Sie haben es in nur gehen halbe Seite oder nur den Text? 1165 00:47:56,400 --> 00:47:59,660 >> TOMAS REIMERS: Ja, absolut. 1166 00:47:59,660 --> 00:48:02,780 Lassen Sie mich also tatsächlich sehen. 1167 00:48:02,780 --> 00:48:04,670 Ich habe zwei Ideen. 1168 00:48:04,670 --> 00:48:07,265 Also zunächst einmal, Sie kann auch Prozente zu verwenden. 1169 00:48:07,265 --> 00:48:08,140 >> ZIELGRUPPE: Wirklich? 1170 00:48:08,140 --> 00:48:11,260 >> ALLISON BUCHHOLTZ-AU: So etwas nachschlagen ist die relative Positionierung. 1171 00:48:11,260 --> 00:48:13,385 Es ist etwas, dass wir haben keine Zeit zu kommen, 1172 00:48:13,385 --> 00:48:16,392 aber es ist etwas, was ich auf jeden Fall empfehlen euch heraus überprüfen. 1173 00:48:16,392 --> 00:48:17,580 >> TOMAS REIMERS: Also Prozent. 1174 00:48:17,580 --> 00:48:21,524 Und sehen, wie wir es geschafft Nur 50% der Breite? 1175 00:48:21,524 --> 00:48:24,190 ALLISON BUCHHOLTZ-AU: Wenn Sie wirklich wissen, die Anzahl der Pixel, 1176 00:48:24,190 --> 00:48:25,780 Sie genauere so sein kann. 1177 00:48:25,780 --> 00:48:27,200 Sie können rund um Geige mit ihm. 1178 00:48:27,200 --> 00:48:27,700 Aber 50%. 1179 00:48:27,700 --> 00:48:31,970 Wenn wir unsere Browser die Größe waren, sie würde es kleiner. 1180 00:48:31,970 --> 00:48:35,250 >> TOMAS REIMERS: Nun, es ist grundsätzlich 50% jetzt, denke ich. 1181 00:48:35,250 --> 00:48:38,820 Es ist 50%, und die Marge hat, dass hinzugefügt. 1182 00:48:38,820 --> 00:48:40,100 CSS hat viele Macken. 1183 00:48:40,100 --> 00:48:43,195 So jetzt ist 50% der Seitenbreite. 1184 00:48:43,195 --> 00:48:46,860 Aber denken Sie daran, dass Sie 10 sind Pixel aus von jeder Seite genommen. 1185 00:48:46,860 --> 00:48:49,700 Also, wenn Sie sich zu bewegen, dass gegen waren der linke Rand des Browsers, 1186 00:48:49,700 --> 00:48:51,550 dann wäre es, 50% suchen. 1187 00:48:51,550 --> 00:48:53,884 Wieder, wie ich schon sagte, kann CSS sein viel Vermutung-and-Check. 1188 00:48:53,884 --> 00:48:56,049 Wie, denken Sie, ist etwas, Sie auf eine Art und Weise verhalten, 1189 00:48:56,049 --> 00:48:57,805 aber es verhält sich eine ganz andere Art und Weise. 1190 00:48:57,805 --> 00:48:59,420 >> ALLISON BUCHHOLTZ-AU: Und Sie bekommen klüger, 1191 00:48:59,420 --> 00:49:02,020 und man gerade mal eine bessere Intuition dafür, wie Sie bewegen sich entlang. 1192 00:49:02,020 --> 00:49:02,730 >> TOMAS REIMERS: Und es wird immer schlimmer. 1193 00:49:02,730 --> 00:49:03,496 So ist es wirklich nur ein Rennen. 1194 00:49:03,496 --> 00:49:05,454 >> ALLISON BUCHHOLTZ-AU: Das ist Super ermutigend. 1195 00:49:05,454 --> 00:49:07,070 Wir wollen, dass CSS mögen. 1196 00:49:07,070 --> 00:49:08,810 >> TOMAS REIMERS: CSS ist genial. 1197 00:49:08,810 --> 00:49:10,354 Beachten Sie, dass. 1198 00:49:10,354 --> 00:49:11,020 Weitere Fragen? 1199 00:49:11,020 --> 00:49:14,297 >> ALLISON BUCHHOLTZ-AU: Die eine Sache. 1200 00:49:14,297 --> 00:49:14,880 Noch etwas? 1201 00:49:14,880 --> 00:49:15,140 Kühle. 1202 00:49:15,140 --> 00:49:15,690 >> TOMAS REIMERS: Awesome. 1203 00:49:15,690 --> 00:49:18,523 >> ALLISON BUCHHOLTZ-AU: Nun, wenn Sie Jungs irgendwelche Fragen haben später, 1204 00:49:18,523 --> 00:49:20,919 wir sind immer wie gewohnt zur Verfügung. 1205 00:49:20,919 --> 00:49:22,960 Sie werden wahrscheinlich einige sehen von uns für Abschlussarbeiten 1206 00:49:22,960 --> 00:49:24,280 und auf jeden Fall an der Hackathon. 1207 00:49:24,280 --> 00:49:25,200 >> TOMAS REIMERS: Auf jeden Fall. 1208 00:49:25,200 --> 00:49:25,720 Und auf der Messe. 1209 00:49:25,720 --> 00:49:26,560 >> ALLISON BUCHHOLTZ-AU: Und auf der Messe. 1210 00:49:26,560 --> 00:49:26,840 Oh. 1211 00:49:26,840 --> 00:49:28,130 >> TOMAS REIMERS: Freuen Sie sich auf Sehen Sie alle Ihre awesome-- 1212 00:49:28,130 --> 00:49:29,420 >> ALLISON BUCHHOLTZ-AU: Wir werden sehen, alle Ihre ehrfürchtige Websites 1213 00:49:29,420 --> 00:49:30,572 das wird schön sein. 1214 00:49:30,572 --> 00:49:32,780 TOMAS REIMERS: Sie können jederzeit zu sehen, wie, die Webseiten 1215 00:49:32,780 --> 00:49:36,234 die hatte, wie, gute CSS und dann wie diejenigen, die nicht versuchen, CSS zu tun. 1216 00:49:36,234 --> 00:49:39,150 ALLISON BUCHHOLTZ-AU: Auch ein anderer Sache, eine Sache zu schauen 1217 00:49:39,150 --> 00:49:40,445 Bootstrapping ist. 1218 00:49:40,445 --> 00:49:41,805 So Bootstrap ist groß. 1219 00:49:41,805 --> 00:49:42,240 >> TOMAS REIMERS: Google, dass, wenn Sie-- 1220 00:49:42,240 --> 00:49:43,573 >> ALLISON BUCHHOLTZ-AU: Google es. 1221 00:49:43,573 --> 00:49:44,340 Es ist fabelhaft. 1222 00:49:44,340 --> 00:49:45,620 Du wirst es lieben. 1223 00:49:45,620 --> 00:49:48,000 Und jetzt, da Sie eine grundlegendes Verständnis von CSS, 1224 00:49:48,000 --> 00:49:50,340 es wird viel mehr Sinn machen. 1225 00:49:50,340 --> 00:49:50,890 Ehrfürchtig. 1226 00:49:50,890 --> 00:49:51,480 Danke, Leute. 1227 00:49:51,480 --> 00:49:53,330 >> TOMAS REIMERS: Vielen, vielen Dank. 1228 00:49:53,330 --> 00:49:54,219