[Musikwiedergabe] ALLISON BUCHHOLTZ-AU: So wir sind im Grunde nur gehen Sie einen Überblick zu geben, von CSS, weil wir wissen, daß es nicht bedeckt war in allen Abschnitten. Und wir sicherstellen, dass Sie wollen Jungs haben dieses Tool zur Verfügung, weil sie die Fähigkeit, hat Ihre Webseiten sehen viel schöner. 

Und wenn Sie den Aufbau einer Website, dann wollen Sie wahrscheinlich ziemlich zu machen. Ich meine, Sie müssen nicht zu, aber ich würde es schlagen. [Lacht] Wenn Sie Benutzer sie benutzen wollen, können Sie will es ein wenig [unverständlich] zu machen. Also wir werden versuchen, Ihnen nur einige grundlegende Tools und das Verständnis, so dass, wenn Sie gehen und Sie sind Erforschung Dinge über CSS, es ist nicht vollständig Kauderwelsch, wie CSS manchmal sein. 

TOMAS REIMERS: Ja. Allison sagte, dass es ziemlich gut. Also ich denke, das erste, was wir sollten ist, was CSS zu beginnen? So CSS is awesome. CSS-- 

ALLISON BUCHHOLTZ-AU: Das ist, der Name unseres Seminars. 

TOMAS REIMERS: Ja. Es ist wirklich wichtig, dass Sie verstehen, dass bis dahin. Wenn Sie nur nehmen ein Sache, es ist, dass CSS wenn awesome. Zwei ist CSS steht für Cascading Style Sheets. So in seinem Kern, ist CSS ein Stylesheet, was bedeutet, es erlaubt Ihnen, eine Web-Seite formatieren. Und dann, was das bedeutet, es ist ein Weg, um Stil, um Ihre Webseiten hinzuzufügen. So nach Stil, dann meinen wir alles das ist nicht structural-- so Dinge wie Farben, Hintergrund Bilder, Grenzen, wie, Polsterung, Margen. Wir werden darüber reden, was all das bedeutet, in ein wenig. 

Also haben wir einfach weitergemacht und eröffnet diese beiden in gedit. Das ist also index.HTML. Und das ist main.css. So main.css nichts. ALLISON BUCHHOLTZ-AU: Keine Stil so weit. TOMAS REIMERS: Keine. Und wie Sie sehen werden, ist es eine wirklich hässliche Seite. ALLISON BUCHHOLTZ-AU: Es ist einfach nur. TOMAS REIMERS: Ja. Ja, es ist nicht hässlich, es ist nur minimalistisch. Und dann haben wir hier index.html. Und so für eine schnelle Rückblick auf HTML, Allison, Sie wollen, nur um die Seite zu sprechen? 

ALLISON BUCHHOLTZ-AU: Ja. So offensichtlich, haben wir unsere HTML Tag, die nur Namen HTML-Datei. Wir haben unsere Kopf hier, mit CSS Awesomeness, which--, wenn Sie zurückgehen. Wo ist das? 

TOMAS REIMERS: Oh. Ja, Sie sehen können. ALLISON BUCHHOLTZ-AU: Und beachten Sie die Kopf ist diese Registerkarte Kopf hier oben. Und dann: "Hallo, Welt!" ist der Text, die wir gerade haben Anzeigen auf dem Web Seite, die zurück ist--. Zurück. Das ist gerade in unserem Körper hier-- den Klartext. Auch eine Sache, bemerken, wenn Sie hier suchen, Tomas schaltet bis diese zwei aus unserer Folie. So lange, wie Sie alle haben drei von ihnen, du bist in Ordnung. Sie können in beliebiger Reihenfolge sie wollen. Das Wichtigste ist, genau das zu Sie haben jede dieser drei Dinge. 

TOMAS REIMERS: Kühl. Fügen Sie eine doc-Typ? ALLISON BUCHHOLTZ-AU: Ja. TOMAS REIMERS: Ja. Kühle. ALLISON BUCHHOLTZ-AU: Offenbar meine Mikrofone mögen mich nicht. TOMAS REIMERS: Oh, geben Sie uns eine Sekunde nur während Allison schaltet sich ihr Mikrofon. Also ja. So haben wir unsere Hauptseite. Es ist eine Art ungeschminkt. Wir haben nicht viel. Wir haben im Grunde nur Text. Wir haben das Stylesheet. Wir haben den Titel. Also einfach mit bloßen Knochen Komponenten machen eine Website. 

Also von dort aus, lassen Sie uns darüber reden, was CSS ist und, wie es aussieht und das alles. Also für dass-- ALLISON BUCHHOLTZ-AU: Zurück zu den Folien. TOMAS REIMERS: Zurück zu den Folien. Und Allison übernehmen kann. 

ALLISON BUCHHOLTZ-AU: Woo. OK. Also in Ihrem CSS-Datei, Sie gehen zu müssen sind viele dieser Dinge genannt Selektoren. Das wird nur sein, die Grundlage Ihrer CSS-Datei. Es ist nur los zu sein viele, viele von diesen. So Wähler. Dies ist nur der allgemeinen Anatomie. Wir werden durchgehen Beispiele, denn wenn euch nie sah meine Abschnitt, ich fühle mich wie die Dinge in der Zusammenfassung nicht wirklich sinnvoll. Es hilft immer, um die Beispiele zu sehen. 

So haben wir einige Wahl. Das wird einige Bezeichner für sein was wir wollen den Stil zu gelten. Und dann können wir welche haben eine Reihe von Regeln und Werten. So Selektoren, die Sie sehen, könnte so etwas wie Körper, oder Absatz mit P, oder Kopfzeile, oder was auch immer, was auch immer Sie möchten, dass Ihre HTML-Tags sein. 

Also in diesem Fall, wir haben Körper. Und wir haben eine Regel, das entspricht zu, was Ihr Stil gilt. Also in diesem Fall, wir haben Hintergrundfarbe und Schriftstärke. Also das wird sich ändern der Hintergrund etwas innerhalb eines Body-Tag der HTML-Datei. Und es wird zu geben es dieses Licht Blau-Wert. 

Also es geht um das zu machen Hintergrund hellblau. Und dann nichts im Körper werde ein Schriftschnitt fett haben. So ist es nur geht, um bold alle unsere Texte. Und das ist nur ein Wahl. Aber Sie haben konnten sehr viele von ihnen. Und wir werden zeigen, später, ein wenig mehr darüber, wie dass Werke und mehr Beispiele gibt. Alles, was Sie hinzufügen möchten? 

TOMAS REIMERS: Nein Allison bekam sie. Wir sind gerade dabei, zu zerschneiden ein Beispiel hier auf unserem Beispiel-Site. Lassen Sie uns also tatsächlich nehmen dies. Es ist perfekt. Also ich werde einfach kopieren und einfügen dass direkt in unsere main.css Datei. Und ich werde es zu speichern. Und dann werden wir es laufen. So Randnotiz, einer der frustrierenden Dinge wird, wenn Sie nicht speichern Sie eine Datei, und dann sie, wie, laden Sie die Seite, und wie, warum nicht die Änderung passiert? Es geschieht. Also hier haben wir gesehen, dass wir unsere Website ein hellblauen Hintergrund und einige Fettschrift. 

Ich sollte auch erwähnen, wenn Sie Jungs Fragen über alles haben wir tun, wenden Sie sich frei, uns zu stoppen und fragen Sie uns. Wir sind total bereit Fragen zu Feld. 

ALLISON BUCHHOLTZ-AU: Offensichtlich mit CSS, baut alles auf sich selbst. Also, wenn eine Sache nicht Sinn jetzt, wir wollen nicht, dass Sie später festfahren. 

TOMAS REIMERS: Also lassen Sie uns Art sezieren diese. Also Sie starten möchten mit dem Wahl hier? 

ALLISON BUCHHOLTZ-AU: Ja. Wie ich bereits sagte, Körper ist nur unser Wahl hier. Also, wenn wir wieder über unsere index-- ah. 

TOMAS REIMERS: Was ich gerade geschlossen. Gib mir eine Sekunde. So Datei, Öffnen, index.html. ALLISON BUCHHOLTZ-AU: Kühl. Also, wenn Sie hier bemerken wir haben diese Body-Tags, nicht wahr? So ist die Wahl entspricht nur die Variablen, die wir hier reden. So Körper hier richtig. Also, was wir sagen ist everything-- können wir wiederkommen? Ich wünschte, ich könnte einfach wie den Bildschirm berühren. Es wäre so viel kühler. 

Also alles in die Body-Tags, die wir sahen, war nur, wie der Text, und der Körper im Allgemeinen bezieht sich, wie der Hintergrund. Wenn Sie schon immer einmal ändern Sie den Hintergrund, das wird in einem Body-Tag sein. Nur hat diese Regeln auf sie angewendet. 

Also, wenn wir hier um zu gehen index.html und-- tatsächlich, können wir etwas haben außerhalb des Körpers? Wenn wir, wie, eine Fußzeile oder etwas, wäre es nicht darauf an. Aber alles, was innerhalb diese Body-Tags wird die von diesem Körper betroffen sein Selektor, die wir gemacht haben. Also, wenn Sie mit der Eingabe waren etwas anderes sind-- 

TOMAS REIMERS: Lassen Sie uns fahren, dass zu Hause. Also, wenn wir hatten eine div-- also ist das nur ein weiterer Tag Sie haben können. Ich werde es zu schließen. Oder wir machen dies zu einem Absatz. So p steht für Absatz. Und in diesem Absatz. Und dann sage ich: "Das ist Text." Kühle. Und dann habe ich diese Regel anwenden ein Absatz an Stelle des Körpers. Sie werden sehen, wie sie sich nur auf das neu gebildete Absatz, rechts, nicht das Ganze. Ist das sinnvoll? 

ALLISON BUCHHOLTZ-AU: Das ist also alles Körper, aber jetzt unsere Wahl gerade entspricht dem Absatz. Also haben wir einfach nur fett und blau Für diese bestimmte Nummer, denn dies ist die einzige Sache, dass innerhalb des p-Tag umschlossen. 

TOMAS REIMERS: Macht das Sinn sort , wie die Dinge zu kapseln anderem? ALLISON BUCHHOLTZ-AU: Auch, zu sagen, wie, eine der besten Möglichkeiten, um wirklich bequem mit CSS ist genau das zu tun, Dinge wie diese, einfach ausprobieren. Es ist sehr einfach, etwas zu geben aus, schlagen Aktualisieren, und sehen, was passiert. Und wie bei den meisten CS, Experimente können oft führen zu einer viel besser intuitives Verständnis. Noch mehr als uns nur, wie, mit dir zu reden. 

TOMAS REIMERS: Absolut 100% stimmen in diesem Punkt. Also, wenn wir wieder in dieses zu gehen, lassen Sie uns beginnen Sezieren genau das, was die beiden tun. Wir haben also zwei Regeln zu diesem Thema. So die erste ist die Hintergrundfarbe. Und Sie sehen, dass wir es festgelegt haben gleich einem Wert, hellblau. 

So in CSS, ist CSS Art der sehr locker, wie dürfen Sie Farbe zu definieren. So kann man sie beim Namen zu definieren. Sie können auch so etwas wie "red". Und dann, wenn wir wieder in diese, Sie werden sehen, dass der Hintergrund ist rot. Sie können auch really-- Ich glaube, Sie kann ziemlich kreativ mit diesen zu bekommen, nicht wahr? 

ALLISON BUCHHOLTZ-AU: I denke, man kann hex verwenden. Nicht wahr? 

TOMAS REIMERS: Ja. So können Sie hex verwenden. Aber ich denke, Name-weise. Gibt es nicht? ALLISON BUCHHOLTZ-AU: Sie können ziemlich viele tun. Ziemlich genau wie die meisten Farben, die Sie kann wie name--, ich glaube, Lachs gehört. 

TOMAS REIMERS: Wir werden versuchen, Lachs. ALLISON BUCHHOLTZ-AU: I denken Chartreuse ist drin. TOMAS REIMERS: Ja. Siehst du? So können Sie ziemlich kreativ. 

ALLISON BUCHHOLTZ-AU: Sie könnte ganz schön kreativ. Wie, wenn Sie von der denken kann, Farbbezeichnung, ist es wahrscheinlich drin. Wenn Sie wirklich wollen Fein Einzelheiten können Sie hex gehen. 

TOMAS REIMERS: Ja. So hexadezimal. Wenn euch erinnere mich an diese zurück von Ihrem alten PSET, Bildwiederherstellung, euch zu tun hatte mit diesen Hex-Werte. Und irgendwie zu rekapitulieren, was das ist, hex besitzt drei darin gespeicherten Werten. Es ist also in Gruppen von zwei Schritten. Die ersten beiden vertreten die Rot-Wert. Die zweite stellt die Grün-Wert. Und die letzte ist blau? 

So FF passiert vertreten eine hexadezimale 255. So haben Sie 255 rot, 255 grün, und 0 für blau. Und Werte liegen zwischen 0 und 255. 

ZIELGRUPPE: Richtig. So im Wesentlichen, wir suchen könnten das Internet für jeden Farb wir wollen, und Identifizierung der tatsächlich bekannt Farbspektrum-Combo, und dann könnten wir sie in setzen? ALLISON BUCHHOLTZ-AU: Genau. So haben Sie so ziemlich die komplette Kontrolle über die Farben, die Sie wollen in CSS. Werden wir, darüber zu sprechen Hintergrundbilder später? Oder wollen wir das tun? 

TOMAS REIMERS: Ja. Absolut. Also zuerst, nur um zu zeigen, dass Rot und Grün ist gelb. Und wenn Sie etwas brauchen, Hilfe bei der Suche dieser, Sie kann Google etwas wie "Farbauswahl". ALLISON BUCHHOLTZ-AU: Oh, es ist so gut. Ich liebe die Farbauswahl. 

TOMAS REIMERS: colorpicker.com ist ein gutes Beispiel. Und hier, sehen Sie, dass Sie Voll Photoshop-ähnlichen Farbwähler. 

ALLISON BUCHHOLTZ-AU: Mm-hm. Auch Sie sind die coolen Dinge können Farbschemata erzeugen so dass Sie nicht haben, wie, grellen Farbkontrasten. TOMAS REIMERS: Und dann hier ist der Hex-Wert hier oben. So finden Sie immer Online Grunde Orte, um den Hex-Wert ausgegeben werden soll. Es ist nicht von dieser nur zu sortieren, wie wir sehen die Farben der Welt in Zahlen. Es ist mehr, dass wir online gehen und finden Sie, welche Farbe wir wollen, und dann die Nummer. Da ist es nur eine einfach Weg, um Dinge in CS verweisen. 

ALLISON BUCHHOLTZ-AU: Und dann gibt es also-- Ich vergesse den genauen Namen des Ortes. Aber es ist auf jeden Fall, ich denken, etwas von Adobe dass generiert Farbschemata für Sie, das ist wirklich cool, weil man definitely-- es manchmal schwer, herauszufinden, oh, wenn ich diese Farbe zu verwenden, was man ein weiteres nützliches sein an anderer Stelle auf meiner Website zu bedienen, wie, machen es schön und Zusammenhalt. 

TOMAS REIMERS: Allison sprechen einen von Adobe Kuler genannt, denke ich. Es ist K-U-L-E-R. ALLISON BUCHHOLTZ-AU: Ich denke schon. Ich bin mir ziemlich sicher, das ist das eine. 

TOMAS REIMERS: Meine Lieblings hat immer Color Scheme Designer. 

ALLISON BUCHHOLTZ-AU: Ooh. 

TOMAS REIMERS: Was ist now-- 

ALLISON BUCHHOLTZ-AU: Ah, das ist schön. 

TOMAS REIMERS: Und Sie kann grundsätzlich sagen, wie, Ich möchte drei Farben nebeneinander. Und dann machen wir etwas Schönes. Und dann können Sie ein Beispiel zu bekommen was das aussehen könnte. Und dann, wenn Sie den Mauszeiger über einem der sie, es gibt Ihnen den Hex-Wert. 

So wie ein guter Anfang Gedanken über Farbschemata oder welche Farben in einer Website könnten gut zusammen. Denn das überraschend sein kann, nicht so leicht zu erlernen, wie Sie denken. Und dann die andere coole Sache Ich war schon immer von dieser Seite gefunden ist, wenn Sie Beispiele zu schlagen, werde es zu zeigen, was ein Beispiel Website könnte wie mit diesem Farbschema zu suchen. Wie auch immer. 

Zurück zur aktuellen CSS. ALLISON BUCHHOLTZ-AU: Aber natürlich, wir wissen diese Hinweise nützlich sein könnten. TOMAS REIMERS: Nein, sie auf jeden Fall hilfreich sein. So der zweiten Regel, Allison? 

ALLISON BUCHHOLTZ-AU: Ja. Die zweite Regel ist einfach entsprechend unserer Schrift. So Schriftstärke ist nur irgendwie von-- so das Gewicht würde , wenn Sie wollen einfach nur, wie, normal oder, wie, dünner Schriftarten oder in diesem Fall, wie, fett. Ich vergesse. Was ist das, wenn man wollte es-- ist da eine dünnere als nur, wie, normal? TOMAS REIMERS: Ich weiß nicht wirklich wissen, ob es eine dünnere. ALLISON BUCHHOLTZ-AU: ich vergesse. So haben wir in der Regel Schriftstärke benutzen Sie einfach für Fettschrift. Wenn Sie wirklich in zu erhalten es, wir werden es Ihnen zeigen. W3Schools hat all die verschiedenen Dinge, die Sie für die Schriften zu tun. Aber im Grunde, wenn man sich nur wünschen etwas über Schriftart zu ändern, ist es immer sein wird, wie, font-etwas. Also es wird wie, font-family sein, wenn Sie versuchen, den tatsächlichen Typ verändern. Es wird font-style, wenn Sie sein will es wie Schreibschrift zu machen, oder kursiv, oder was. Oder sogar Schriftfarbe, wenn wir wollten das ändern. 

TOMAS REIMERS: Yup. So können Sie das ändern. Und irgendwie, nur um Zusammenfassung an, damit Sie können zu sehen, dass wir die Auswahltaste nach oben hier. Wir haben diese geschweiften Klammern. Und dann haben wir Regeln durch ein Semikolon getrennt. Ist das sinnvoll? Ja? Kühle. Also wenn das good-- 

ALLISON BUCHHOLTZ-AU: Zurück. TOMAS REIMERS: Lassen Sie uns speziell sprechen über welche Art von Selektoren wir haben. Denn gerade jetzt wir haben Art gerade gezeigt Tags. Aber ihr Jungs sehen konnte es plausibel. Angenommen, Sie haben zwei Absätze auf einer Seite und Sie wollen in der Lage sein Stil eine, aber nicht die andere, Sie wollen nicht nur, um sich selbst zu begrenzen auf verschiedene tatsächliche HTML verwenden zu müssen Tags, um sie verschiedenen Stilen zu geben. 

Also haben wir drei Grund haben Arten von Selektoren. ALLISON BUCHHOLTZ-AU: Ja. So haben wir Tag, was was ist wir haben etwa bereits jetzt sprechen. Also das ist eine Art, wie Sie Ihren Körper oder p. Und dann haben wir Klasse, das ist, wenn wir sie definieren, in unserem CSS-Datei, es wird immer zu Punkt sein, was auch immer Sie wollen den Namen Ihrer Klasse zu sein. Und dies kann mehrere Dinge gelten. 

Sagen Sie fünf Absätze haben und zwei der drei von ihnen müssen gleich gestaltet werden, Sie würde eine Klasse, sie anzuwenden. Und das ist nur die Art, wie wir es tun. Registrieren Sie ein Beispiel geben wo dies tatsächlich auftaucht. Aber wenn Sie etwas Tag hatte vielleicht p, nachdem sie, würden Sie schreiben, Klasse entspricht unabhängig von Klassen Sie, um es anwenden möchten. Also unabhängig von Klassen-Selektoren, die wir wollen auf diese spezifischen Absatz anzuwenden, wir konnten einfach so schreiben. Natürlich, ich glaube, ein Beispiel wird es viel konkreter. 

Das andere, das wir haben id ist, die wir bezeichnen mit einem Doppelkreuz oder Hashtag. TOMAS REIMERS: Octothorpe. ALLISON BUCHHOLTZ-AU: Octothorpe. Das funktioniert auch. Und das sollte man wirklich eindeutig sein. Sie sollten nur gelten eine Sache auf Ihrer Seite. Egal, ob das ist eine bestimmte Nummer, oder ein Element in einer Liste, oder was auch immer, dies sollte eindeutig sein. Und in der gleichen Weise, die wir gerade sagen, wie, class = "class1 class2" dies kann nur id, was wir haben. TOMAS REIMERS: Ja. Lassen Sie uns also auf jeden Fall sprechen um Beispiele. Und ich werde einfach zu tauchen gerade zurück in den Code. Lassen Sie uns also einen Blick auf unsere HTML. Und so haben wir im Augenblick haben einen Absatz. Dies ist Text. Ich werde einfach zu verändern es. "Das ist Text 1." Und dann werden wir zu gehen haben eine "Dies ist Text 2." 

ALLISON BUCHHOLTZ-AU: Zweite ein. TOMAS REIMERS: Yup. So haben wir jetzt "Dies ist Text 2", nicht wahr? Und wir werden sehen, dass, wenn wir neu zu laden die Seite, was wir zu finden ist wir werden find-- ALLISON BUCHHOLTZ-AU: Ooh. TOMAS REIMERS: Ja. Wir werden finden, ein "Das ist Text 1 "und" Dies ist Text 2. " 

ALLISON BUCHHOLTZ-AU: Und aus schönen gelbe Farbe. 

TOMAS REIMERS: Und Sie werden sehen, dass unsere Wähler im Augenblick, die auf der p gilt, oder Absätze, wirkt sie beide, weil beide treffen die vorausgesetzt, sie sind beide ein p-Tag. Das macht Sinn. Die Frage ist also, na ja, was wenn wir wollten nur noch eine? So genau wie Allison sagte, wir haben zwei weitere Möglichkeiten, das zu tun. Ich werde mit der ID zu starten. 

ALLISON BUCHHOLTZ-AU: Lassen Sie uns mit ID zu starten. 

TOMAS REIMERS: Und beide dies sind Eigenschaften. So Attribute vorhanden in HTML. Und was sie sind etwas, das Sie hinzufügen, innerhalb des Tags, das ist getrennt von der Tag-Namen. So können Sie mehrere Attribute haben. Ja? 

ALLISON BUCHHOLTZ-AU: Ich wollte gerade von PSET 7 sagen, von Ihrem Beispiel wenn einer von euch versuchen, ausrichten Dinge in die Mitte, Sie könnte verwendet haben "Text align = center." Und Sie können es wahrscheinlich bemerkt, sollte zentriert Ihren Text oder Ihr Navigationsleiste. Also das ist eben auch ein Attribut dass Sie vielleicht vertraut sind. TOMAS REIMERS: Es gibt eine Menge der Attribute, die Sie sehen. Ja. Wie gut Verweis auf PSET 7. Wir haben id. Sie können auch Klasse, Dinge wie diese. Ein einzelner Tag kann viele Attribute haben. Also mit id, lass uns so tun, als wir möchte eine ID von-- Ich weiß nicht, zu haben. Wir nennen es spezielle, weil diese, wir sind werde fett zu machen, und zu unterstreichen, und was auch immer. ALLISON BUCHHOLTZ-AU: Es ist gonna be Super Special. TOMAS REIMERS: So einer, haben wir spezielle ID. So ist die Art und Weise zu wählen, und dann ist in main.css, anstatt eine p-Tag, Sie #special tun, okay? Und das wählt der Sache mit id Besonderes. Macht das Sinn für jedermann? ZIELGRUPPE: Ja. TOMAS REIMERS: Kühl. So, jetzt, wenn wir zurückgehen, wir see-- hoppla. Ja. Wir werden sehen, dass es nur wählt der mit id Besonderes. Ja? Find ich gut. Ja. 

ZIELGRUPPE: Kann etwas haben ein Attribut sowohl der Klasse und einer ID? 

TOMAS REIMERS: Ja. ZIELGRUPPE: OK. Und was passiert, wenn man dann geben es einige Regeln in CSS, die im Widerspruch? TOMAS REIMERS: Auf jeden Fall. Wir werden auf jeden Fall , darüber zu sprechen. Also genau das, was man erwarten würde an, können Sie auch Klassen. Also lassen Sie uns so tun, als ich drei Absätze und ich wollte der erste Stil zwei, aber nicht die dritte. Nun, Ihre Idee auch sein mag, na ja, ich konnte nur geben der zweite eine ID. Aber man kann nicht, weil eine ID, genau wie Allison sagte, muss eindeutig sein. 

Also anstatt eine ID, was Sie verwenden können, ist, dass man eine Klasse zu verwenden. Und ein class--, was es ermöglicht Sie tun müssen, ist im Grunde sagen, Dazu gehört als Teil einer Gruppe. In diesem Fall wird unsere Gruppe wird als Special. Und was wir dann zu tun ist wir werden sagen-- anstatt Pfund, wir werden Punkt zu verwenden. OK? Und beachten Sie, dass das Pfund und Punkt nur in der CSS-Datei vorhanden ist, nicht innerhalb der HTML. ALLISON BUCHHOLTZ-AU: Ja. Wichtige Unterscheidung. 

TOMAS REIMERS: Ich habe hatte so viel Kampf, weil ich den Hash in der HTML und dann einfach das Gefühl für eine lange Zeit dumm. Sehen Sie, wie beide wählt die, die mit dieser Klasse? Kühle. 

Jetzt können Dinge mehrere Klassen haben. Sagen wir, ich wollte das zuerst zwei haben einen Hintergrund der gelben und das zweite zwei haben eine Schriftfarbe blau. OK. Ich weiß wirklich nicht, warum ich würde das tun wollen, aber ich kann. 

ALLISON BUCHHOLTZ-AU: Könnte nicht empfohlen es für Ihre Website. Aber für unsere Zwecke, werde es tun. 

TOMAS REIMERS: Es ist nicht eine gute Farbschema. ALLISON BUCHHOLTZ-AU: Nun, gelb und blau sind meine High-School-Farben. Ich weiß nicht, wenn. TOMAS REIMERS: Allison Hoch Schule hatte eine tolle Farbgebung. [Gelächter] Also, was wir können dies Nennen wir this-- so haben wir Sonder und wir haben recht. Ich schlage vor, hierfür verwenden Sie viel mehr aussagekräftige Namen. ALLISON BUCHHOLTZ-AU: Ja, das würde ich nennen dies, wie, gelb oder blau. 

TOMAS REIMERS: Wir sind nicht wirklich einen echten Website, weshalb wir nicht tun. Aber wenn Sie wirklich hatte eine echte Website erklären Sie sich haben könnte, wie, Artikel-Header, Inhalt des Artikels, erste Wort, Dinge wie die, die es erlauben Sie viel mehr aussagekräftig sein. Diese sind wirklich genau wie Variablen. Sie sollten in einer Weise, wo benannt Sie können, like-- ja, als solche. Perfect. 

So Hintergrundfarbe. Und dann werden wir so die sagen-- Weg, um Farbe zu ändern ist nur "Farbe". Und wir werden sie blau zu machen. Das ist cool. So, jetzt haben wir die ersten beiden haben spezielle. Nächste ist zu gehen haben "class = hübsch." ALLISON BUCHHOLTZ-AU: Und dann werden Sie wollen "hübsch", um der Mitte hinzuzufügen. TOMAS REIMERS: Yup. Und dann zu dem mittleren, hinzufügen "hübsch", was passiert, ist, dass Sie nur einen Raum zu haben. Also das Klassenattribut ist eine durch Leerzeichen getrennte Liste aller Klassen dass an diesem Tag gelten. OK? Es ist nicht wie dieses gehört eine Art Sonderklasse genannt "Sonder, Raum, hübsch." Es gehört zu zwei classes-- Sonder und hübsch. Ja? Kühle. 

Und dann, wenn wir uns was passiert, wir sind gehen, um zu sehen, dass erste hat gelben Hintergrund, schwarzem Text. Zweitens one-- 

ALLISON BUCHHOLTZ-AU: --has fett gelber Hintergrund mit blauem Text. Und unsere letzte gerade hat der blauer Text, wir zugeordnet. 

TOMAS REIMERS: Cool? Wie Selektoren arbeiten? Ehrfürchtig. 

ALLISON BUCHHOLTZ-AU: Wollen wir sprechen über den Konflikt nun also? 

TOMAS REIMERS: Also ja. Absolut. Was passiert also, wenn Sie einen Konflikt haben, nicht wahr? Nehmen wir an, die erste stellt etwas like-- ALLISON BUCHHOLTZ-AU: Vielleicht dieses wird die Hintergrund? TOMAS REIMERS: Ja. So werden wir machen "hübsch" ändern Sie den Hintergrund, um Lachs. ALLISON BUCHHOLTZ-AU: Sie sind nur mit alle großen Farben heute Tomas. TOMAS REIMERS: Ja. Da fand ich heraus, ich kann benutzen Lachs als reale Farbe. Also werden wir nur gehen, um das zu tun. Ich denke auch, Sunset ist eine echte Farbe. ZIELGRUPPE: Sonnenuntergang ist eine echte Farbe? ALLISON BUCHHOLTZ-AU: Versuchen wir es. TOMAS REIMERS: Nach dieser Demo nur weil, falls es vermasselt, Ich will nicht werden, das Debuggen. So wissen wir, Lachs ist eine echte Farbe. Also irgendwelche Vermutungen auf Was wird passieren? 

ALLISON BUCHHOLTZ-AU: Irgendeine Idee? 

ZIELGRUPPE: [unverständlich]. 

TOMAS REIMERS: Ja. Also, Sie haben es genau richtig. Grundsätzlich kommt es das letzte Regel, die es gegeben wurde. 

ALLISON BUCHHOLTZ-AU: Das ist also wo Kaskadierung in Kraft tritt. 

TOMAS REIMERS: Also denken Sie daran, wie wir hatte die Cascading Style Sheets? So nach, dass wir irgendwie bedeuten dass wir eine Reihe von Regeln wobei auf der jeweils anderen anzuwenden und sie können aber auch einander überschreiben. 

ALLISON BUCHHOLTZ-AU: So was auch immer die am Boden überschreibt, was an der Spitze ist. Sie können Regeln, die komplett sind negieren etwas voraus. Das ist auch, warum Sie sein wollen Vorsicht beim Styling sind, so dass Sie nicht die Erstellung von Regeln sind, dass Sie gerade komplett überschreiben. 

TOMAS REIMERS: Oder vielleicht wollen, um Regeln zu überschreiben. 

ALLISON BUCHHOLTZ-AU: Oder vielleicht tun. Ja. 

TOMAS REIMERS: Pretend Sie eine Klasse, die die meisten Dinge gilt, aber sagen wir Ihnen, die geändert werden soll Hintergrundfarbe auf Rot und der Schriftart Gewicht zu fett für die meisten Dinge, aber für ein, Sie wollen nur die Hintergrundfarbe sein rotes aber alle anderen wollen Eigenschaften, können Sie etwas tun wie "font-weight = normal" was würde dann rückgängig zu machen, dass die mutige Veränderung. Ja? Auch hier ist der beste Weg, ich denke, Allison sagte, es ist nur die Praxis. 

ALLISON BUCHHOLTZ-AU: Experimentieren. 

TOMAS REIMERS: Üben, üben, Praxis und Experiment. Ich kenne eine Menge Leute, die denken, CSS ist nur eine Menge guess-and-Check am Ende des Tages, wo, wenn Sie something-- wie tun wollen, Sie haben eine ungefähre Vorstellung davon, aber Sie wahrscheinlich immer noch brauchen um es auszuprobieren, um sicherzustellen, Sie wissen, wie es aussieht. 

ZIELGRUPPE: Wenn Sie bewerben Klassen mehr als eine auf den gleichen Absatz oder Abschnitt, nicht wahr Egal, was Sie können, um geben Sie diese in Anführungszeichen? 

TOMAS REIMERS: Nein, überhaupt nicht. 

ALLISON BUCHHOLTZ-AU: Was zählt ist, die Reihenfolge in Ihrem CSS-Stylesheet. ZIELGRUPPE: Könnten Sie die Frage wiederholen? TOMAS REIMERS: Oh. ALLISON BUCHHOLTZ-AU: Innerhalb Klasse, wenn du gibst Klassen etwas in der HTML, tut es eine Rolle, in welcher Reihenfolge sie sind? Es muss nicht die Reihenfolge egal. Was zählt, ist die Reihenfolge der Klassen-Selektoren in CSS, in Ihrem Stylesheet. 

TOMAS REIMERS: Sound good? 

ALLISON BUCHHOLTZ-AU: Lovely. 

TOMAS REIMERS: Und dann wir werden auch weiterhin zu-- ALLISON BUCHHOLTZ-AU: Was müssen wir als nächstes? Ich vergesse. Oh, wir haben nur Beispiele. Aber wir haben Art getan, die. Wir haben Beispiele im laufenden Betrieb erfolgen. 

TOMAS REIMERS: Wir lernen verbinden die Selektoren bald. 

ALLISON BUCHHOLTZ-AU: Oh, wir erhalten, Selektoren kombinieren. TOMAS REIMERS: So einige Beispiele ist, wir haben # Dog-- Pfund oder hashtag, oder Rautenzeichen, oder was auch immer Sie anrufen dass-- scharfe möchten. 

ALLISON BUCHHOLTZ-AU: Sharp Hund. 

TOMAS REIMERS: Dann haben Sie .pets. Etwas hat eine ID von Hund, es gibt nur einen Hund auf der Seite. Etwas muss die ID Katze, es gibt nur eine Katze. Es kann viele Tiere auf der Seite sein. Das ist, warum wir gaben, dass Klassen. Sie haben ein Beispiel p. Und dann so eine der letzte Beispiel, das ist etwas, was wir noch nicht gesprochen haben, ist das, was passiert, wenn man sie zu kombinieren. So p.pets. 

Also für die, gehen wir zurück zu den Code und einzuführen another-- ja. Also wieder hier. 

ALLISON BUCHHOLTZ-AU: I das Gefühl, das ist really-- wie gerade auf der Suche anhand von Beispielen ist wirklich der Weg, dies zu erlernen. Also das ist, was wir tun. 

TOMAS REIMERS: Also lassen Sie uns so tun, als wir wollen nur Text 2, rechts wählen? So können wir auf jeden Fall nicht tun, dass mit einer ID. Nun, wir könnten das mit einem zu tun id, aber es spielt keine Kennung. Ich könnte man hinzufügen, aber wir behaupten, dass ich nicht wollte, der seine oder hat es schon etwas anderes. Ich kann das nicht mit dem. Der Tag ist auf jeden Fall nicht eindeutig, oder? Und weder ist die Klasse. Aber man kann diese Dinge zu kombinieren. Nehmen wir an, dass wir etwas tun wollte, die nur für Dinge, die die Klasse und Sonder was haben die Klasse ziemlich. 

Also, was Sie tun können, ist in main.css, Sie können sagen, lassen Sie uns zuerst löschen diese. Sie können diese kombinieren. So können Sie .Special tun können. Kein Platz. Nur .special.pretty. Was das bedeutet, ist etwas, was sowohl spezielle und hübsch. Ist das sinnvoll? Und wenn wir hier gehen, was Sie gehen zu sehen ist diese Regel gilt nur für die zweite, die beide von denen hat. Und Sie können, dass für eine Menge Dinge zu tun. Sie können sagen-- lassen behaupten, ich wollte nur die Dinge, die die Klasse ziemlich tun haben und die auch ein Absatz-Tag. So p.pretty. Nehmen wir an, dass ich etwas ziemlich auf dem Tag Körper. OK? Das kann ich laufen und ich kann sehen, dass es nur werde, die Dinge, die sind anzuwenden Absätze mit der Klasse ziemlich. Und Sie können diese zu kombinieren, im Grunde, so viele, wie Sie wollen. So setzt man sie zusammen. Ist das sinnvoll? ALLISON BUCHHOLTZ-AU: So diese Art von nützlicher wenn, Tomas bereits sagte, vielleicht Sie haben eine sehr komplizierte Website, und schon haben Sie eine Menge diese Regeln geschrieben, und Sie müssen nur kombinieren zwei aus der Zeit vor. Wie anstatt ein ganzes neue Wahl und es veränderte sie, einfach kombinieren kann sie, wo es Überschneidungen. 

TOMAS REIMERS: Oder Sie möglicherweise manchmal out-- es ist eine Klasse, die macht Farbe Schriftart wie blau, und es gibt eine andere Klasse, die macht den Hintergrund blau. Und das einfach nicht funktionieren. So können Sie einen Sonderfall zu schreiben, wo, like-- aber wenn es beides hat, was Sie zu tun ist, Sie zu gehen machen dieses eine dieser Blauton und dieser diese anderen Blauton. Richtig? 

ALLISON BUCHHOLTZ-AU: Gut für diejenigen Arten von Ausnahmen. TOMAS REIMERS: Also, um denken über Probleme das könnte entstehen, wenn Sie sie zu kombinieren. Kühle. Also zurück zu unserer Präsentation. ALLISON BUCHHOLTZ-AU: Wir sind fast da. TOMAS REIMERS: Und es hat aufgehört verbindet. ALLISON BUCHHOLTZ-AU: Oh, nein. ALLISON BUCHHOLTZ-AU: CS an das Büro, geht Internet herunter. Oh, die Ironie. 

TOMAS REIMERS: Also zum Glück können wir präsentieren ohne das Internet, denke ich, denn wir haben alle Folien hier. Also lassen Sie uns über das zu sprechen Beziehung von Tags. ALLISON BUCHHOLTZ-AU: Richtig. Also nur irgendwie geht off, was Tomas sagte, das ist nur eine andere Art, es zu tun. Also haben wir etwas Mutter Wähler mit einem Kind-Selektor. Also in diesem Beispiel hier haben wir einige Körper mit einer Klasse Navigationsleiste, Klasse Taste. Ah. 

TOMAS REIMERS: Oh, sorry. 

ALLISON BUCHHOLTZ-AU: Und im Grunde, was das bedeutet wird alle Kinder auszuwählen, wie Alle diese Arten von Selektoren innerhalb dieses Elternwahl. Und das sind die einzigen, es jemals zu bewerben. Ich weiß nicht, ob Sie einen besseren Weg von-- TOMAS REIMERS: Also ich schätze die Art und Weise zu denken, dabei ist, denken Sie daran, wie vor wir irgendwie zusammen sie mögen. Und das bedeutet, dass ein Element das passt alles zusammen. Was dies sagt, ist, ich wollen Sie alles zu entsprechen innerhalb some-- Ich möchte Sie einen Selektor zu finden. Und dann in das möchte ich Sie, neue Dinge zu entsprechen. Richtig? So in CSS, es ist alles über Art in der Lage, diese Elemente entsprechen. Und Sie können versuchen, passen Artikel innerhalb andere Gegenstände. 

Also lassen Sie uns ein Beispiel tatsächlich tun, und wir denken, dass Sie zu klären. Also lassen Sie uns so tun, als wir spezielle, Sonder hübsch, was auch immer. Und dann haben wir einen Link, OK? Also denken Sie daran, eine ist ein Link. Es wird nicht überall hingehen. Und wir werden, um ihm die Klasse Link, denke ich. Lass es uns die class-- mir eine Idee geben. ALLISON BUCHHOLTZ-AU: Kühl. TOMAS REIMERS: COO- uns gelassen gehen sie die Klasse ziemlich. Warum nicht? 

ALLISON BUCHHOLTZ-AU: OK. TOMAS REIMERS: So jetzt schöne Dinge werden den Hintergrund stellen Blau, Hintergrundfarbe der Lachs. Das macht Sinn. Und wenn wir this-- tun 

ALLISON BUCHHOLTZ-AU: Haben Sie Text hinzufügen möchten so der Hyperlink tatsächlich auftaucht? TOMAS REIMERS: Das wäre ein guter Ruf ist. ALLISON BUCHHOLTZ-AU: Weil rechts jetzt sind wir nur gonna bekommen nichts. TOMAS REIMERS: Also das ist ein Link. "Dies ist ein Link." Ach ja, und das wird zum anderen Glied. Geben wir es die Klasse "cool". Sie haben Recht. Kühle. So jetzt werden wir diese zu greifen. Wir werden einen zu werfen. Wir haben einen in der speziellen Tag, und wir haben auch gehen, um eine in der hübschen Tag haben. Und gerade jetzt, was wir zu gehen zu tun ist, wir werden machen cool-- Was wollen wir es zu tun? ALLISON BUCHHOLTZ-AU: Können wir es größer? TOMAS REIMERS: Lassen Sie geben ihm eine Grenze. ALLISON BUCHHOLTZ-AU: Wir könnten angrenzen. TOMAS REIMERS: Ja. So werden wir etwas tun wie, Grenz ist-- und wir sind werde das alles in einem zweiten zu erklären. Zur Zeit-- 

ALLISON BUCHHOLTZ-AU: Um die Box-Modell. TOMAS REIMERS: Aber jetzt sind wir nur geht es einen Rahmen zu geben. Was das bedeutet ist, bist du gehen, um diese sichtbar. Und du wirst sehen, dass sie diese, wie, hässliche schwarze Ränder, die ist cool. 

ALLISON BUCHHOLTZ-AU: Unsere Website ist so hübsch. 

TOMAS REIMERS: Ja. Unsere Webseite ist ehrfürchtig. So sind diese beiden Links und sie erscheinen. Nun wollen wir so tun, als ich nur wollte, dies zu tun wenn es nicht innerhalb von etwas die hatte einen Hintergrund der Lachs. Also denken Sie daran, dass diese eine hat einen Hintergrund der Lachs, denn es ist der Klasse ziemlich. 

Aber wir sagen, dass nur kühlt wollen , die in der Klasse spezielle, nicht in der Klasse sind hübsch, sollte diese Grenze. Nun, was Sie tun können, ist, dass Sie kann sagen, .Special, Raum, .cool. Und, was das tut, wenn man bedenkt, darüber, ist es im Grunde sagen, OK, mir alles zu finden dass passt besonders. Dann innerhalb dieser Tags finden mir alles, was ist cool. ALLISON BUCHHOLTZ-AU: So ein anderer Weg das könnte gut, darüber nachzudenken sein, bringt es zurück zu C, ebenso wie die Idee der Rahmen. Also, wenn Sie einige haben Auswahl, wie die, die dass wir für die vorher gearbeitet, Ihre gesamte Web-Seite, alle Ihre HTML- ist in Ihrer Reichweite, nicht wahr? Aber wenn wir diese Eltern-Kind-Beziehungen, es ist, als ob Sie Gung, wo bist Sie zu einem bestimmten Ort suchen, als ob, wie, die wir im Rahmen der Suche eine spezifische Funktion anstelle unseres gesamten Datei. ZIELGRUPPE: So mit dem im Verstand, würde sie haben zählte wenn wir changed-- ALLISON BUCHHOLTZ-AU: Die Bestellung? ZIELGRUPPE: --die Klasse in CSS um .cool, Raum, .Special? ALLISON BUCHHOLTZ-AU: Ja, denn dann ist das würde sagen, Umfang es zu alles, coole hat, und dann, zu welchem ​​has-- suchen Ich meine, wie in diesem Fall, Ich glaube nicht, es wäre es geändert haben. 

TOMAS REIMERS: Wenn wir das, was gesagt? Entschuldigung. 

ALLISON BUCHHOLTZ-AU: Wenn wir Rahmen Sie es abkühlen und dann Ihre Sachen aus speziellen, Es wäre dasselbe tatsächlich sein. 

TOMAS REIMERS: Also wäre es nicht. 

ALLISON BUCHHOLTZ-AU: Er würde das nicht? Oh, na ja. Ich mich irre. 

TOMAS REIMERS: Also der Grund, es ist different-- gemeinsamen mistake-- ist, dass jetzt nur der Link ist cool, nicht wahr? Ich denke, meine Frage an euch ist, , was auf dieser Seite wird von .cool abgestimmt? Es gibt zwei Tags hier, nicht wahr? Welches ist dieses und dieses. Beide entsprechen cool. Nichts anderes tut. Also, wenn Sie sagte, .cool, Raum, .Special, was du zu sagen, ist gerade, innerhalb dieser Tags, was ist das Besondere? ALLISON BUCHHOLTZ-AU: Hm. Das ist, was es-- rechts. Weil es wie nur hier. 

TOMAS REIMERS: So wählt er nichts. 

ALLISON BUCHHOLTZ-AU: Während bei spezielle, wir sind in diesen Tags hier. 

TOMAS REIMERS: Diese und jene. ZIELGRUPPE: OK. Also diese Tags aus dem Schrägstrich? 

TOMAS REIMERS: Ja. Ist das sinnvoll? Wie ist es im Grunde versuchen, Umfang einzugrenzen. ALLISON BUCHHOLTZ-AU: Ja. Ich denke, das ist wahrscheinlich die einfachste Weg, um darüber nachzudenken. 

TOMAS REIMERS: So fanden wir das, und Wir fanden diese beides ausgeglichen Besonderes. Und dann werden wir gefragt, innerhalb diese Jungs, was cool ist? Und in diesem einen, das hier ist cool. Innerhalb dieser, ist nichts cool. Das ist also der einzige Tag, das bleibt. 

ALLISON BUCHHOLTZ-AU: Während kühlen ist nur innerhalb dieser ein Tags gibt. TOMAS REIMERS: Genau. Und was ist das Besondere in denen? Nichts. Nun, was ich sagen will, ist wenn es keinen Raum, Sie fragen, was cool ist und special-- oder was ist hübsch und spezielle, nicht wahr? Wenn Sie sagen, .special.pretty, das ist die gleichen wie .pretty.special. 

Denn das, was das Entfernen der Platz gefragt wird, wenn Sie .Special sagen, Sie fragen, OK, welche sind speziell sind? Und von denen, die diejenigen sind auch hübsch, was dasselbe, grammatisch, wie die Frage, was ist schön, und dann von denen, was auch besonders? Richtig? Es ist der Unterschied von was ist in, was ist. ZIELGRUPPE: OK. TOMAS REIMERS: Ja. Ehrfürchtig. So mit dem im Verstand dann- 

ALLISON BUCHHOLTZ-AU: Ich denke, unsere letzte Sache ist (in der Phantasie britischen Akzent) das Box-Modell. 

TOMAS REIMERS: Die box-- [CHUCKLES] Ich liebe die Art Allison sagt,. Also die Box-Modell Sache. 

ALLISON BUCHHOLTZ-AU: Haben Sie einfach ein Feld, werde ich Ihre Box-Modell sein. TOMAS REIMERS: Also lassen Sie uns darüber reden. So jetzt haben wir eine Menge verbrachte der Zeit im Gespräch über Selektoren. Mittlerweile seid ihr wohl, wie, Meister der selectors-- Sie wissen, wie Sie den Inhalt genau wählen, dass Sie auf dem Bildschirm manipulieren wollen. 

So, jetzt die Frage ist, wie genau, können Sie sie zu manipulieren? Also ich denke, die einfachste Weg, um darüber nachzudenken ist, nun ja, was genau ist ein Element in CSS? Wir haben viel Zeit damit verbracht, reden, was ist ein Tag, oder, was das einfachste Darstellung eines Tag? 

Ein guter Weg, um darüber nachzudenken das heißt, was Form ist Lachs? Welche Form hat, wie die lachsfarbenen Hintergrund? 

ZIELGRUPPE: Es ist ein Rechteck. 

TOMAS REIMERS: Es ist ein Rechteck, nicht wahr? 

ALLISON BUCHHOLTZ-AU: War das nicht eine Fangfrage. [Gelächter] 

TOMAS REIMERS: Nicht versuchen, um Ihnen so spät Trick Jungs. So haben wir dieses Rechtecks. Und der Tag ist ein p, oder? Also das gibt uns gute Glauben, dass der Absatz wird als ein Rechteck dargestellt, dest in den Köpfen der Browser, die es ist. 

ALLISON BUCHHOLTZ-AU: Ich meine, Browser sind in der Regel rechteckig, so macht es Sinn. 

TOMAS REIMERS: Die Idee hier ist dass alle Tags in CSS sind als ein Rechteck dargestellt. Und jedes Rechteck hat vier Teile nach CSS, OK? Sie haben den eigentlichen Inhalt. Das ist, wo der Text liegt. 

ALLISON BUCHHOLTZ-AU: Vielleicht ist Ihr Bild. 

TOMAS REIMERS: Ja. Sie haben Polster, das ist, nur eine Art Leerraum. Dann haben Sie eine Grenze. Und dann muss man Marge, die ist Leerraum außerhalb davon. Also das macht keinen Sinn für jeden, also sind wir werde darüber für eine Sekunde sprechen. Also hier, was wir tun werden wird, wir werden einige divs zu erstellen, OK? Entschuldigen Sie mich, während I-- 

ALLISON BUCHHOLTZ-AU: Ich fühle mich wie sollten wir ein nettes Bild in. 

TOMAS REIMERS: Wir auf jeden Fall sein sollte. 

ALLISON BUCHHOLTZ-AU: Ich fühle mich wie jeder könnten von einem profitieren niedliches Bild, das ist alles. 

TOMAS REIMERS: Können wir alle profitieren von a-- 

ZIELGRUPPE: Ja, sicher. TOMAS REIMERS: OK, cool. Also sollten wir einen netten setzen Bild in irgendwo. ALLISON BUCHHOLTZ-AU: Ich fühle mich wie ein niedlichen Häschen könnte gerade jetzt sinnvoll sein. TOMAS REIMERS: Sicher. ALLISON BUCHHOLTZ-AU: Ende der Woche. Haben Sie etwas adorab-- 

TOMAS REIMERS: Wie Kampf ein Kätzchen? 

ALLISON BUCHHOLTZ-AU: Ein Kätzchen funktioniert auch. 

TOMAS REIMERS: Cool, weil es gibt einen Ort dafür. Es heißt PlaceKitten. ALLISON BUCHHOLTZ-AU: Das ist toll. TOMAS REIMERS: Ja. ALLISON BUCHHOLTZ-AU: Nur für, wie, Platzhalterbilder in Ihre Website. TOMAS REIMERS: Mm-hm. Es gibt auch PlacePuppy. Und es gibt PlaceBacon. 

ALLISON BUCHHOLTZ-AU: PlaceBacon? Wirklich? 

TOMAS REIMERS: Oh, wir nicht hier haben Internetzugang. 

ALLISON BUCHHOLTZ-AU: [seufzt] Tragische. TOMAS REIMERS: Andernfalls Ich würde Jungs zeigen, wie Sie Bilder in Ihrer Website. Wir werden versuchen, dies zu umgehen arbeiten, bevor wir gehen müssen. Aber für jetzt, gerade wir werde in Farben sprechen dann. Wir wollen Bilder kittens-- setzen 

ALLISON BUCHHOLTZ-AU: Wir taten. 

TOMAS REIMERS: --die Internets unten Im Moment sind hier. So haben wir zwei divs, und wir sind gehen sie zwei Ids zu geben. Wir werden es nennen "Ersten" und "zweiten". So id = "zuerst." Und wir werden sie zwei Farben zu geben. Wie können wir also etwas wählen mit der ID "erste"? ALLISON BUCHHOLTZ-AU: Dot oder Hash? ZIELGRUPPE: Sharp. TOMAS REIMERS: Sharp, perfekt. Sharp, hasch, was wir-- 

ALLISON BUCHHOLTZ-AU: Viele Dinge zu nennen. 

TOMAS REIMERS: OK. Wir werden auf Hashtag zu regeln, und das ist, was wir mit zu gehen. OK? 

ALLISON BUCHHOLTZ-AU: Hashtag. 

TOMAS REIMERS: So hashtag erste. 

ALLISON BUCHHOLTZ-AU: So Sie seminar-- tweet können hashtag CSS, hashtag cool. TOMAS REIMERS: Hashtag Awesomeness. ALLISON BUCHHOLTZ-AU: Hashtag Awesomeness, ja. TOMAS REIMERS: OK. So haben wir "erste" und "zweite". Also zuerst, wir gehen zu müssen, eine Hintergrundfarbe rot. ALLISON BUCHHOLTZ-AU: Äh, Doppelpunkt. TOMAS REIMERS: Yup. ALLISON BUCHHOLTZ-AU: Ich werde deine Punktprüfung sein. TOMAS REIMERS: Allison hat mich. Hintergrund-Farbe blue-- 

TOMAS REIMERS: Lila! 

TOMAS REIMERS: Lila. ALLISON BUCHHOLTZ-AU: Ja. Purples meine Lieblingsfarbe, und wir haben es noch nicht benutzt. 

TOMAS REIMERS: Violett. ALLISON BUCHHOLTZ-AU: Violett. Das funktioniert. 

TOMAS REIMERS: So sind wir werde zwei divs haben. Sie werden völlig leer zu sein. Wir sollten wahrscheinlich einen Text. So "erste" sein wird "HALLO". Und die "zweite" wird sagen-- 

ALLISON BUCHHOLTZ-AU: Auf Wiedersehen. 

ZIELGRUPPE: - "WORLD". Hallo, auf Wiedersehen. ALLISON BUCHHOLTZ-AU: Ich sah, sie im Konzert die zweite Woche. TOMAS REIMERS: The Beatles? ALLISON BUCHHOLTZ-AU: Für reelle Zahlen. Sie sind nicht so toll. Ich mag es nicht. 

TOMAS REIMERS: Wir haben "HALLO" und "Auf Wiedersehen." Und wieder ist CSS einfach nur geil, weil sie erkennt unsere Farben. Brauchen Sie nicht, auch Sorgen, dass es sie gibt. Sie tun. 

ALLISON BUCHHOLTZ-AU: Es gibt sie. 

TOMAS REIMERS: Also ich denke, CSS hat 255 Worte über Farbe reden. Wenn Sie eine Farbe außerhalb denken die 255, wie, ich werden beeindruckt sein. ALLISON BUCHHOLTZ-AU: Ja. Ich glaube, Sie Jungs haben genau das Richtige nach kommen. 

TOMAS REIMERS: So, hier, Sie werden sehen, wir haben zwei Boxen rechts oben auf jeder anderen, nicht wahr? Hallo und auf Wiedersehen. 

ALLISON BUCHHOLTZ-AU: Es gibt keinen Raum dazwischen. Sie sind nur smooshed Rechts auf der jeweils anderen Seite. 

TOMAS REIMERS: Das erste, was Ich denke, wir sollten darüber reden ist wir sagen-- auch ja. So CSS stellt sie als Art-Boxen. Und wie Boxen, haben sie Gehalt. Und der Inhalt ist im Moment Art die HALLO oder GOODBYE und das ist es. OK? 

Damit wird eines der ersten Dinge, die Sie tun können, ist man padding hinzuzufügen. Padding sagt, wie viel Platz es sollte auf jeder Seite zu verlassen. Also lassen Sie uns sagen, ich möchte sagen, 10 Pixel auf jeder Seite. Und ich will, dass in einem zweiten sezieren. ALLISON BUCHHOLTZ-AU: All diese Dinge hier sein werden, meistens in Pixel für den Rest des Seminars. Du wirst sehen, dass es Einige Raum um sich herum, nicht wahr? Also, was Sie hier nicht sehen, ist es diese unsichtbare Art Polsterung auf jeder Seite, die so dergleichen Ihre Box von content-- OK, haben Sie 

ALLISON BUCHHOLTZ-AU: Möchten Sie nur ziehen Sie den inspizieren Element? 

TOMAS REIMERS: Ja, das ist eine gute Idee. ALLISON BUCHHOLTZ-AU: Auch finde ich dass die zu inspizieren Element ist ein guter Weg , um herauszufinden, wenn etwas los falsch, etwas Unvorhergesehenes passiert, Prüfen Sie die Tags und sehen, was es ist, überschrieben hilfreich. 

TOMAS REIMERS: Also ich bin mir nicht sicher wenn euch können diese Farbe zu sehen. Kannst du das? Sie finden diese Polsterung sehen von der Art der Kante. Und dann die eigentliche sehen Sie Inhalt in blau, nicht wahr? Also das ist der sehr Grundlagen der Box-Modell. Sie haben Gehalt. Dann haben Sie Polsterung. 

ZIELGRUPPE: Warum gehst du nicht einfach Verwenden Sie das Feld innerhalb the-- 

ALLISON BUCHHOLTZ-AU: Richtig. Weil es nur die Auswahl das Element jetzt. 

TOMAS REIMERS: Yup. Andere Dinge. Also lassen Sie uns darüber reden padding-Befehl für eine Sekunde. So in CSS, Messungen müssen Sie ein Gerät haben. Also zuerst müssen Sie die Menge. Also in diesem Fall, wir haben die 10. Und dann wird die nächste Wir haben gesagt, ist Pixel, Pixel. Andere, die Sie haben könnten sind Dinge wie Zentimeter, Zoll. Sie können Dinge tun wollen, was ist 10 Zoll? Und es wird lächerlich zu sein. 

ALLISON BUCHHOLTZ-AU: Oh, Mann. 

ZIELGRUPPE: Whoa. 

TOMAS und Allison: Ja. TOMAS REIMERS: Also das ist alles, Polsterung. Ich werde wieder in Pixel gehen. 

ALLISON BUCHHOLTZ-AU: Pixel sind in der Regel, wie, der Standard. Wenn Sie an einer Vielzahl von Websites aus, sie arbeiten meist in Pixel. TOMAS REIMERS: Also wirst du sehen, entweder pixels-- die anderen, die Sie sehen ist em, das ist einer em ist gleich der Höhe der Schriftart die Sie derzeit verwenden. 

ALLISON BUCHHOLTZ-AU: Mm. TOMAS REIMERS: Es ist ein guter Weg, zu sagen, wie, ich will so viel Platz wie meine Schrift ist unter. ALLISON BUCHHOLTZ-AU: Haben Sie nicht wissen, dass. Sie lernen jeden Tag etwas Neues. TOMAS REIMERS: Es gibt Viele Messungen in CS. Ich schlage vor, Sie sie nachschlagen. Für alle Ihre Fälle, ich glaube, Pixeln ausreichend. Und sie sind auch das, was Sie gehen zu sehen In der Mehrzahl der Beispiele online erfolgen. Also werden wir es auf Pixel zu verlassen. 

Sie können auch, ich solle so sagen-- Polsterung setzt alle der Polster. Sie können auch etwas tun "Padding-top", um nur Satz-- ALLISON BUCHHOLTZ-AU: Vielleicht wir werden unser "HALLO" zurück. TOMAS REIMERS: --to Sie einfach die Polsterung an der Oberseite und sonst nichts. So sind die vier Befehle padding-top, padding-bottom, padding-left, und padding-right. 

ALLISON BUCHHOLTZ-AU: Genau wie Sie für ein Feld erwartet. 

TOMAS REIMERS: Ja. Nichts gibt es zu verrückt. Ist das sinnvoll? Das ist also Polsterung. Ich werde ganz eingestellt, die Polster wieder auf 10. Und dann werde ich auf dem Weg zu Grenze. 

Was Grenze ist Grenze ist eine seltsame Befehl. Es dauert eine Art drei Dinge auf einmal. So ist der erste ist, wie groß du will, dass es als eine Messung. Auch hier bin ich nur mit Pixel. Und das letzte, was ich sollten die Messungen hinzufügen ist die eine Sache, die benötigt keine Einheit ist 0. Es ist eigentlich nicht korrekt bis 0 geben eine Einheit, da 0 0 in Zoll, Pixel, Zentimeter, was auch immer. Das alles bedeutet nur 0, oder? Also zuerst Sie ihm die Messung. 

Dann sind Sie geben ihm den Stil. Also werde ich sagen, "solid". Und wir werden über das, was das bedeutet, zu sprechen. Und dann schließlich eine Farbe geben Sie es. Also werde ich sagen, "schwarz". Und das sind alles Dinge, die wir haben jetzt gesehen, mit Ausnahme von Stil, aber wir werden darüber reden. So euch Messungen gesehen haben, und Sie Farben gesehen habe. Und was passiert, ist, dass wir diese erhalten schöne schwarze Umrandung, nicht wahr? Ihr Jungs sehen, wie wir das tun? 

ZIELGRUPPE: Ja. 

TOMAS REIMERS: Kühl. Also, was ist das? Also zunächst einmal, es ist ein Pixel. Das ist selbstverständlich, oder? Wie ist es um ein Pixel dick. Oder es würde ein Pixel sein, aber ich bin vergrößert, so dass es ein bisschen mehr als die. 

ALLISON BUCHHOLTZ-AU: Und wir haben lächerlich Auflösung TV. 

TOMAS REIMERS: Ja. Sie können es größer zu machen, kleiner, was auch immer. Also hier ist eine Zwei-Pixel-Grenze. Du wirst sehen, es ist doppelt so dick. Das nächste, was Sie haben, ist Farbe. Das ist nicht interessant. Ich werde nicht zu reden darüber, wirklich. 

ALLISON BUCHHOLTZ-AU: Aber der Stil vielleicht nur ein wenig interessanter. 

TOMAS REIMERS: Ja. So Stil gibt es nur wenige diejenigen die ich sehe, häufig verwendet. Zuerst eine solide, die nächste gepunkteten, und der letzte, der gestrichelten. Und hier ist punktiert. Sie werden sehen, dass sie eine Reihe von Punkten, nicht wahr? Eine gute Möglichkeit, Art erhalten eine schöne Grenz gehen, sind Striche auch ziemlich populär. 

ALLISON BUCHHOLTZ-AU: Und dann natürlich, ich bin sicher, es gibt viele andere Stile, die Sie bekommen können. Und wir haben eine große Menge von Links am Ende für euch zu Art durchgehen und siehe weitere coole CSS. 

TOMAS REIMERS: Und dann das letzte, was, wir sind werde über das sprechen Box-Modelle, sehr kurz. Oh, und dann überschreitende, genau wie Polsterung, Sie haben auch Dinge wie border-left, border-right, border-top, border-bottom, die Sie zulassen zu einer bestimmten Grenze zu kommen. So, hier ist nur die Grenze nach links definiert. Ist das sinnvoll? 

ALLISON BUCHHOLTZ-AU: Es ist ein kühler So wie die Dinge zu betonen, oder fügen Linien zwischen den verschiedenen Elementen. TOMAS REIMERS: Auf jeden Fall. Also das ist unsere Grenze. Und die letzte Marge. Marge wie padding außer es ist nicht within-- ALLISON BUCHHOLTZ-AU: Es ist nicht um Ihrem Element sondern tatsächlich um den gesamten Box, die wir seit einiger Zeit erleben. 

TOMAS REIMERS: Ja. Allison sagte, dass es perfekt. Es ist nicht, wie, in Ihrem Element, ist es um das ganze Feld. Das bedeutet, dass Dinge wie Hintergrund nicht, sie anzuwenden. Und im Grunde sagt, wie, ich will nichts in diesem viel Platz für mich. So wie hier haben wir eine Marge von 10 Pixel. Also nichts innerhalb von 10 Pixel sollte neben mir sein. Das ist irgendwie seine Raum aber irgendwie nicht. Also das ist der sehr Grundlagen der Box-Modell. Ist das sinnvoll? Cool, cool. ALLISON BUCHHOLTZ-AU: Awesome. So, jetzt denke ich, wir nur haben unsere coolen Ressourcen dass wir euch nehmen durch sehr schnell. Und wir werden auch actually--, wir Internet noch? 

TOMAS REIMERS: Lassen Sie uns sehen, ob ich up-- öffnen lassen Sie mich nur, ob ich können Internet schnell während Allison spricht über alles Allison will, darüber zu sprechen. ALLISON BUCHHOLTZ-AU: So basically-- ich nicht wissen, was anderes kann ich an dieser Stelle sagen. Aber dies sind nur einige wirklich gute Ressourcen. Das sind diejenigen, die Tomas und ich verwendet habe und dass wir tatsächlich verwendet werden, um dafür prep. W3Schools ist eine, die Sie Jungs sollten nie gesehen haben. Wir empfehlen es für ein Menge Dinge mit CSS. Ich weiß, ich empfehle es meinem Abschnitt die ganze Zeit. 

Einer der großen Vorteile ist, dass es können Sie die Art von Chaos mit CSS und die Änderungen augenblicklich in diesem, wie doppelt-Fenster, dass es. So müssen Sie nicht zu kümmern Errichtung einer eigenen Web-Seite, oder die Einrichtung in Ihrem vhost lokalen Gerät und lokalen Host, und vor allem, dass Sachen Arbeits. Es befindet sich direkt in der Seite eingebettet. 

Und diese kleinen hat Lektionen, die Sie durchlaufen, um zu lernen mehr über Selektoren, oder zu manipulieren lernen Ihre Schriftart oder einen Hintergrund oder ein Bild. Und Sie haben diese sofortige Ergebnisse, die Sie nicht zu einem zu tun weitere Vorbereitungsarbeit für. So liebe ich W3Schools. Es ist fabelhaft. Funktioniert es? 

TOMAS REIMERS: Ja. Nein, es ist nicht. Wollen Sie mich, um zu versuchen wollen und starten Sie meinem Computer? Oder wollen wir zu-- 

ALLISON BUCHHOLTZ-AU: Ich meine, gut, wird dies auch online sein. Alle Folien werden online. Also habe ich nur wärmstens empfehlen diese tun. 

Das ist großartig, wie gerade wie ein Spickzettel. Es ist nur die ganze Grund Befehle, die Sie haben. Es ist toll, wenn Sie zuerst sind Starten Sie Ihre Website. Denn vielleicht auch nicht wollen in alle bekommen die wirkliche Nitty Gritty Design-heavy stuff. Sie brauchen nur sie in einer Weise zu formatieren diese Art von Sinn und Willen für den Augenblick zu tun. Und wenn Sie wirklich wollen sich in sie, ich weiß, das ist, wie, eine der Tomas Lieblings Referenzen. Wir wurden zu benutzen prep, und es ist fabelhaft. Es ist der Entwickler von Mozilla. 

TOMAS REIMERS: So Mozilla sind die Menschen, die Firefox zu machen. Und es ist nur ihre eigenen Entwickler Referenz, die ich denke, ist genial. Und es hat eine wunderbare Liste der Ressourcen. Also haben wir have-- 

ALLISON BUCHHOLTZ-AU: Und dann letzte Note wenn Sie versuchen, Design Ihrer Website, inspirieren von Dingen dass Sie denken, ziemlich. Prüfen Sie das Element, Inspizieren des Quellcodes kann super hilfsbereit sein um zu versuchen, um herauszufinden, Wie Stil Ihrer eigenen Website. 

Oft fühle ich mich wie das beste Weg neben Experimenten, ist nur zu sehen Dinge, die schön sind. Ich finde es ist wirklich schwer, gerade Art Design Dinge auf eigene Faust, besonders am Anfang. Also bitte auf Websites suchen können Sie einen Blick auf. Finde heraus, was macht sie attraktiv für Sie. Und dann fühlen sich frei, versuchen, zu replizieren, dass. 

TOMAS REIMERS: Richtig. Auch wie Websites so können Sie sehen, es ist definitiv ein div an der Spitze. Und dann haben Sie eine andere div innerhalb haben hier, die CSS Awesomeness ist. Und dann haben Sie eine Reihe von Links haben hier. Wenn Sie wirklich nur prüfen Elemente können Sie von zu sortieren starten, um zu sehen, was zu tun Websites aussehen, und wie kann ich neu, dass, wenn ich wollte. Ist das sinnvoll? So haben wir nur drei Minuten. So Sie Fragen? Einer von ihnen? Ja. 

ZIELGRUPPE: Für die Farbe Rechteck, wie würden Sie have--, wenn Sie nicht wollen, dass es geht über die ganze Seite, könnte Sie haben es in nur gehen halbe Seite oder nur den Text? 

TOMAS REIMERS: Ja, absolut. Lassen Sie mich also tatsächlich sehen. Ich habe zwei Ideen. Also zunächst einmal, Sie kann auch Prozente zu verwenden. 

ZIELGRUPPE: Wirklich? 

ALLISON BUCHHOLTZ-AU: So etwas nachschlagen ist die relative Positionierung. Es ist etwas, dass wir haben keine Zeit zu kommen, aber es ist etwas, was ich auf jeden Fall empfehlen euch heraus überprüfen. 

TOMAS REIMERS: Also Prozent. Und sehen, wie wir es geschafft Nur 50% der Breite? ALLISON BUCHHOLTZ-AU: Wenn Sie wirklich wissen, die Anzahl der Pixel, Sie genauere so sein kann. Sie können rund um Geige mit ihm. Aber 50%. Wenn wir unsere Browser die Größe waren, sie würde es kleiner. 

TOMAS REIMERS: Nun, es ist grundsätzlich 50% jetzt, denke ich. Es ist 50%, und die Marge hat, dass hinzugefügt. CSS hat viele Macken. So jetzt ist 50% der Seitenbreite. Aber denken Sie daran, dass Sie 10 sind Pixel aus von jeder Seite genommen. Also, wenn Sie sich zu bewegen, dass gegen waren der linke Rand des Browsers, dann wäre es, 50% suchen. Wieder, wie ich schon sagte, kann CSS sein viel Vermutung-and-Check. Wie, denken Sie, ist etwas, Sie auf eine Art und Weise verhalten, aber es verhält sich eine ganz andere Art und Weise. 

ALLISON BUCHHOLTZ-AU: Und Sie bekommen klüger, und man gerade mal eine bessere Intuition dafür, wie Sie bewegen sich entlang. 

TOMAS REIMERS: Und es wird immer schlimmer. So ist es wirklich nur ein Rennen. 

ALLISON BUCHHOLTZ-AU: Das ist Super ermutigend. Wir wollen, dass CSS mögen. 

TOMAS REIMERS: CSS ist genial. Beachten Sie, dass. Weitere Fragen? 

ALLISON BUCHHOLTZ-AU: Die eine Sache. Noch etwas? Kühle. 

TOMAS REIMERS: Awesome. 

ALLISON BUCHHOLTZ-AU: Nun, wenn Sie Jungs irgendwelche Fragen haben später, wir sind immer wie gewohnt zur Verfügung. Sie werden wahrscheinlich einige sehen von uns für Abschlussarbeiten und auf jeden Fall an der Hackathon. 

TOMAS REIMERS: Auf jeden Fall. Und auf der Messe. 

ALLISON BUCHHOLTZ-AU: Und auf der Messe. Oh. 

TOMAS REIMERS: Freuen Sie sich auf Sehen Sie alle Ihre awesome-- 

ALLISON BUCHHOLTZ-AU: Wir werden sehen, alle Ihre ehrfürchtige Websites das wird schön sein. TOMAS REIMERS: Sie können jederzeit zu sehen, wie, die Webseiten die hatte, wie, gute CSS und dann wie diejenigen, die nicht versuchen, CSS zu tun. ALLISON BUCHHOLTZ-AU: Auch ein anderer Sache, eine Sache zu schauen Bootstrapping ist. So Bootstrap ist groß. 

TOMAS REIMERS: Google, dass, wenn Sie-- 

ALLISON BUCHHOLTZ-AU: Google es. Es ist fabelhaft. Du wirst es lieben. Und jetzt, da Sie eine grundlegendes Verständnis von CSS, es wird viel mehr Sinn machen. Ehrfürchtig. Danke, Leute. 

TOMAS REIMERS: Vielen, vielen Dank.