Hallo, alle, willkommen zurück.
Eines der Dinge, die ich in diesem Kurs „Einführung in CSS“ wirklich betonen möchte, ist, dass
es diese Notwendigkeit gibt, zu stoppen und zu üben und zu überprüfen, was wir bisher gelernt haben.
Also werde ich sicherstellen, dass ich kleine Dinge einschließe, die ich
Code Together nennen werde.
Also, wenn Sie sich das gerade ansehen, und Sie Ihren Laptop nicht neben Ihnen haben oder
was auch immer Sie verwenden, um zu programmieren, ich hoffe wirklich, Sie werden aufhören, das holen und
zusammen mit mir programmieren, weil nur mit mir zuhören Ihnen nicht wirklich
die wahre Erfahrung, die Sie brauchen, um es einzugeben und Fehler machen, wie wir zusammen gehen.
Okay, also gehen wir weiter und beginnen.
Was ich in diesem Video machen werde, ist, dass ich zu einem Oldie zurückkehren werde, aber
ein Goodie, das wir in HTML 5 gemacht haben.
Und ich möchte, dass wir zusammen reingehen und es stylen.
In Ordnung, lassen Sie uns damit beginnen, unsere CSS-Datei zu erstellen.
Ich werde jetzt eine neue erstellen,
hier rauf gehen, um Datei, neue Datei, oder Sie können Befehl N tun.
Und das erste, was Sie tun möchten, ist, dass Sie dies als CSS-Datei speichern möchten,
so dass Ihr Editor weiß, um die Dinge so zu färben, wie Sie es wollen.
Immer wenn ich Seiten entwerfe,
behalte ich alle meine HTML-Dateien in einem Ordner und meine CSS-Dateien in einem anderen Ordner.
Und ich ermutige Sie wirklich, dasselbe zu tun.
Also, ich gehe weiter und gehe in meinen CSS-Ordner.
Und ich werde das nennen, nennen wir es together-1.css.
Es ist wirklich wichtig, dass Sie sich daran erinnern, diese Dateierweiterung zu setzen, oder
die Dinge werden nicht funktionieren.
Also hier ist meine alte, langweilige Seite.
Was Leute normalerweise tun, ist, dass sie von oben auf der Seite
formatieren und nach unten arbeiten.
Also, ich möchte, dass Sie Ihre eigenen Werte auswählen, aber lassen Sie uns gemeinsam vorgehen und
meinen Header stylen.
Ups, Falsches hier.
Und wir können ihm einen Hintergrund geben.
Ich werde es versuchen, B3B3B3.
Wir können ihm eine größere Schrift geben, wenn Sie wollen.
Ich sage die Schriftgröße.
Machen wir es 150%.
Nur ein bisschen etwas anderes.
Ich werde das speichern, und ich ermutige die Schüler immer, kleine Änderungen an
ihrem Code vorzunehmen und dann zu überprüfen und zu sehen, was passiert ist.
Mal sehen, ob wir hier etwas geändert haben.
Und jetzt werde ich es neu laden und sehen, was passiert ist, und
wenn Sie bemerken, ist nichts passiert.
Nun, das Problem ist, dass ich das Stylesheet nicht korrekt mit der HTML-Datei verknüpft habe.
Erinnerst du dich, wie ich dir gesagt habe, dass ich immer denke, Dinge in einen Ordner namens CSS setzen?
Das muss ich einschließen.
Alles klar, komm zurück.
Nachladen.
Oh, hey! Ich habe da etwas
vor sich.
In Ordnung?
Also, jetzt gehen wir weiter und fügen Sie einfach ein paar weitere Dinge hinzu.
Ich weiß, es sieht nicht genau wie mein Beispiel aus.
Aber eins der Dinge, die ich als Nächstes tun möchte, ist, dass ich vorwärts gehen und
meinen Kopf stylen möchte.
Lassen Sie uns der gesamten Kopfzeile eine Hintergrundfarbe geben.
In Ordnung.
Du kannst alles auswählen, was du willst.
Und ich werde den Hintergrund wählen: Ich denke, ich habe 66666, in Ordnung.
Und gehen wir weiter und ich möchte diesen Text wirklich ausrichten.
Also werde ich es text-align nennen: center.
Speichern, aktualisieren.
Oh, wir kommen dorthin!
Die Seite sieht ständig etwas anders aus.
Die eine Sache, die mich verwirrt, ist, dass es meinen Hintergrund nicht zu mögen scheint.
Also, wenn ich zurückgehe, werde ich erkennen, oh, ich habe das # Schild ganz vorne vergessen.
Und mach eins, zwei, drei, vier, fünf, sechs.
Speichern Sie es hier.
Aktualisieren.
Da gehen wir.
Jetzt sind diese Farben wirklich hässlich und wirklich schwer für Sie zu sehen.
Und das ist mir klar.
Also lasst uns weitermachen und mit Dingen spielen, um dies ein wenig leichter zu sehen.
Lass uns weitermachen und hineinlegen.
Lassen Sie uns das h1 so ändern, dass es eine andere Farbe hat und
gehen wir voran und ändern Sie die Navigation.
Damit wir haben, werde ich die Schriftart ändern, lasst uns die Schriftvariante ausprobieren.
Ich mag die Schriftvariante.
Es ermöglicht Ihnen, Dinge in Großbuchstaben, Kleinbuchstaben, verschiedene Dinge wie diese zu setzen.
Wir haben auch Schriftgröße.
Ich bin immer noch nicht zufrieden mit der Größe, also werde ich es machen 150%,
und die letzte, die ich tun werde, ist Schriftfamilie.
Wenn Sie sich erinnern, ist es bei der Schriftfamilie sehr üblich, ihm mehr als
einen Wert zu geben, da nicht jeder Browser jede Schriftfamilie unterstützt.
Also in meinem Fall werde ich versuchen, Arial,
Times New Roman, anzulegen.
Wenn Sie eine Schriftart haben, die aus mehreren Wörtern besteht,
müssen Sie sie in die Anführungszeichen setzen.
Und dann endlich nur Serif.
Nun, so programmiere ich.
Ich programmiere Fehler zu machen.
Ich kodiere mit Tippfehlern.
Um ehrlich zu sein, ich kodiere selten in einem Button-Down-Shirt, das so unbequem aussieht.
Der Weg zu codieren ist bequem mit einer Cola und einer Hershey Bar
, so dass Sie, wenn Sie fertig sind, diese feierlichen kleinen Bissen Schokolade haben.
Aber im Moment werde ich nur mein Bestes tun, um dich mitzuführen.
Ich habe eine Menge Dinge geändert.
Mal sehen, was passiert ist.
Du siehst, dass ich ein bisschen größer werde, wir fangen an, dorthin zu kommen.
Wir haben die Hintergrundfarben, wir haben die Dinge wie das.
Also lasst uns weitermachen und einfach ein paar Dinge zusammen stylen,
und dann werden wir weitermachen und ein bisschen mehr lernen.
Ich würde gerne sehen, wie du deine eigenen Sachen für h2 auswählst.
Also h2 Ich werde eine andere Farbe wählen,
versuchen wir die gleiche Farbe 666666 und einen anderen Hintergrund.
Ich werde 00B7EA verwenden.
Also, spielt es eine Rolle?
Spielt es eine Rolle, ob ich es als EA Großbuchstaben oder Kleinbuchstaben eingebe?
Es spielt überhaupt keine Rolle.
Das Wichtigste ist, dass du normalerweise konsistent bist, damit
du dich nicht vermasselst, während du hin und her gehst.
In Ordnung?
Wir werden uns wieder erfrischen.
In Ordnung.
Es fängt an, viel anders zu sehen.
Das ist nicht viel Stil.
Es ist nur eins, zwei, drei, vier, fünf.
Fünf Regeln und wir haben bereits ein viel anderes Aussehen.
Ich werde den Bildschirm kleiner machen, denn wenn ich
diese Schriftgröße 150% einfüge, macht es einen großen Unterschied.
In Ordnung.
Eine Art letzte coole Sache, die ich möchte, dass Sie versuchen zu tun ist, gehen Sie voran und
versuchen, die Zusammenfassung in den Details zu stylen.
Denn wenn ich nur die machen will, Ich wuchs in Ashtabula Ohio Teil,
wie können Sie das kursiv machen, aber nicht der Rest?
In Ordnung, also wenn Sie sich erinnern, wie der HTML-Code aussieht,
lassen Sie mich Ihnen ein kurzes Beispiel zeigen, ist, dass ich hier unten mein Detail-Tag
habe und wenn Sie es noch nicht gesehen haben, habe ich das Wort geöffnet, in dem
bedeutet standardmäßig zeigen, dass es offen ist, also muss niemand darauf klicken.
Ich habe meine Details.
Ich habe meine Zusammenfassung, wo die Meine Kindheit Teil kam, und
dann habe ich all diesen Teil.
Also, wenn Sie das kursiv machen wollen, und nur das, wie machen Sie es?
In Ordnung.
Was wir anfangen werden, ist, dass wir das Detail-Tag stylen werden.
Und ich werde hier ein bisschen nach oben scrollen, damit ihr
hoffentlich etwas besser sehen könnt.
Und was ich sagen werde, ist, dass ich alles kursiv machen möchte, und
die Art, wie du das tust, ist, dass du in Schriftart gehst: kursiv.
Hast du es?
Das wird nicht genau das sein, was wir wollten, denn ich habe
alles kursiv geschrieben.
Also, jetzt willst du zurückgehen und sagen, aber weißt du was?
Ich will die Zusammenfassung nicht.
Ich möchte die Zusammenfassung nicht kursiv formatiert.
Hoppla, geh zurück.
Zusammenfassung und ich kann Schriftart sagen.
Hoppla, Schriftart.
Nun, wie Sie es so machen, dass es nicht kursiv ist,
standardmäßig sind die meisten Dinge nicht, Sie können tatsächlich in das Wort normal setzen.
In Ordnung.
Das war's also.
Jetzt haben wir diesen Teil kursiv und diesen Teil fett.
Zum größten Teil sind wir fertig, aber ich werde eine kleine Sache hinzufügen,
weil es wirklich üblich ist, dass Leute ihre Kopfzeile und
ihre Fußzeile auf eine sehr ähnliche Weise stylen.
Also lasst uns gehen und Stil meiner Fußzeile hinzufügen.
Und was ich tun möchte, ist, dass ich ihm die gleiche Hintergrundfarbe geben möchte
, die mein Header hatte.
Also Hintergrund, eins, zwei, drei, vier, fünf, sechs, boom.
Und da gehst du.
Also, was wir jetzt getan haben, ist, dass wir aus einer sehr einfachen, einfachen HTML-Datei gegangen
sind und wir haben angefangen, nur ein wenig Farbe, ein wenig Schriftgröße,
ein wenig andere Dinge wie diese hinzuzufügen.
Lassen Sie mich Ihnen noch einmal zeigen, wie die Originaldatei aussah und
wir werden sie nebeneinander betrachten.
Ich werde mein Stylesheet auskommentieren.
Ich werde es öffnen und Sie können sehen, das sind zwei sehr unterschiedlich aussehende Seiten.
Aber sie sind genau das gleiche HTML.
Okay, toll, das sind die Dinge, die du für
die Hausaufgaben in diesem Abschnitt erledigen musst.
Üben Sie hier, kommen Sie zurück und beobachten Sie mich,
wenn es Ihnen hilft, ein bisschen über Buckel zu kommen.
Aber das Wichtigste ist, Code, Code, viel Glück.