Seiten-Layout für CSS-Einsteiger unter Designern, visuell Lernenden und allen anderen Interessenten

1. Grundlegende CSS Einführung: Hallo und herzlich willkommen bei Basis-Webdesign für Kreative. In dieser Klasse werden wir Cascading Stylesheets erkunden und wie sie Ihnen helfen, die Elemente auf Ihrer Webseite zu steuern. Dies ist eine Fähigkeit, die Sie haben müssen, wenn Sie eine statische Designdatei wie etwas von Sketch, Photoshop oder Illustratornehmen wie etwas von Sketch, Photoshop oder Illustrator und diese in eine funktionierende Webseite übersetzen möchten. Wir werden eine Website für ein gefälschtes Musikfestival erstellen, und es wird Spaß machen. Ich werde es ziemlich schnell für dich weitermachen. Ich habe viele Dias, Illustrationen und Code entlang Demos. Wir werden das tun, du wirst das tun, dich anschnallen. Lasst uns ins Rollen gehen. 2. Quick-Start: los geht's. Wir werden Ihre Website aus einem Ordner auf Ihrem Desktop entwickeln. Erstellen Sie also einen Ordner auf Ihrem Desktop. Sie können es nennen, was Sie möchten und dies wird alle Projektdateien enthalten , die wir in diesem Projekt verwenden. Sie werden einen Texteditor benötigen. Ich empfehle, dass wir Atom verwenden. Das ist, was ich in diesen Demos verwenden werde. Es ist kostenlos, es funktioniert für Mac und Windows, es ist Open Source. Wenn Sie zu Atom.io gehen, können Sie diese IDE herunterladen, die kurz für die interne Entwicklerumgebung ist, denke ich. Wie auch immer, gehen Sie diese IDE herunterladen. Es ist kostenlos, sein Texteditor wird großartig funktionieren. Als nächstes müssen wir sicherstellen, dass Sie im Chrome-Browser arbeiten, Google Chrome, Ich werde in diesem Browser arbeiten, und nur um sicherzustellen, dass wir keine Inkonsistenzen haben, die Fehler sind, die erscheinen, weil verschiedene Browser behandeln manchmal Code anders, was ein Thema für eine andere Zeit ist, aber heute, halten Sie es einfach konsistent. Lassen Sie uns alle in Google Chrome arbeiten. Also laden Sie Atom herunter, stellen Sie sicher, dass Sie Google Chrome haben und dann können Sie eine ZIP-Datei von meiner Website herunterladen müssen, es hat alle Starter-Dateien und die fertigen Projektdateien auch, wenn Sie jemals nach vorne schauen und sehen wollen , wie sich alles dreht aus oder beziehen sich auf sie oder irgendetwas anderes. Einen Link zum Download dieser Dateien finden Sie in der Kursbeschreibung direkt unten. Laden Sie also die ZIP-Datei von meiner Website herunter. Sobald Sie dies getan haben, kopieren Sie die Indexdatei aus den Startdateien, die Sie von meiner Website heruntergeladen haben , in Ihren Ordner auf Ihrem Desktop. Sie werden den Index dot html dort kopieren, dann gehen Sie zum Google Chrome-Browser und öffnen Sie den Index dot html. Es wird schrecklich aussehen, weil es nicht gestylt ist. Was wir tun werden, ist diesen grundlegenden HTML-Inhalt zu nehmen und CSS hinzuzufügen , um unsere Webseite so aussehen zu lassen wie unser Mockup. Wir sehen uns im nächsten Video. Laden Sie das Zeug herunter und wir fangen an. 3. Grundlegende CSS: Lasst uns loslegen. In diesem Video werde ich Ihnen drei verschiedene Orte zeigen, die Sie Stile setzen können. Ich werde Ihnen zeigen, warum wir ein Cascading Stylesheet für unsere Styles wählen werden, und dann zeige ich Ihnen im Code, wie es funktioniert, und dann werden Sie Ihr eigenes Stylesheet codieren , das wir für die Grundlage des restlichen -Projekt. Hier gehen wir zum Whiteboard. Ich möchte euch ein wenig über Spezifität und CSS erzählen. Es gibt verschiedene Orte, an denen Sie Stile setzen können und Ihr Browser wird sie auch anders behandeln. Sie können Stile inline schreiben, was bedeutet, so schnell. Dies ist eine HTML-Seite. Wenn Sie mit HTML nicht vertraut sind, können Sie meinen anderen Kurs über Basic HTML für Creatives nehmen. Ich gehe davon aus, dass Sie wissen, wie man HTML schreibt. Hier haben wir zwei div-Tags hier, und sie haben jeweils einen Stil, der inline direkt in das Tag geschrieben wird. Ich kann auch Stile lokal hier oben im Kopfbereich meiner HTML-Seite platzieren, und dann kann ich auch entfernte Stile in einem Cascading Stylesheet haben, und so werden wir unsere Website heute schreiben. Je nachdem, wie Sie sie verwenden, wird Ihr Browser den Stilen ein anderes Gewicht geben. Ein Inline-Stil wird der am stärksten gewichtete Stil sein. Zweitens wird ein lokaler Stil sein, und dann drittens wird etwas auf einem Stylesheet sein. Sie sehen, hier habe ich diese Stile ist Farbe rot. Diese divs werden roten Text in ihnen haben. Wenn ich hier oben die Farbe blau in einem lokalen Stil habe und die Farbe rot lösche, jetzt, da der Text in diesen divs blau sein wird. Sie sehen, wie die Spezifität, der Ort, an dem ich den Stil setze, beeinflussen wird, wie er im Browser rendert. Dies ist Teil der Kaskadierung, Teil von Cascading Stylesheets, und es gibt ein bisschen mehr, das ich Ihnen sagen werde wenn wir tatsächlich ein Stylesheet schreiben, als auch. Aber das ist CSS und Spezifität. Werfen wir einen Blick darauf, wie sich dies im Code im Browser abspielt. Ich habe eine ähnliche, hier ist unsere Starter-HTML-Datei. Ich bin auf index.html. Dies ist [unhörbar] hier drüben und das ist Chrome hier drüben, und ich möchte Ihnen diesen Inline-Stil zeigen, den ich geschrieben habe Stil-Farbe gleich rot. Die Vordergrundfarbe, die Textfarbe ist hier drüben rot. Wenn ich diesen Inline-Stil loswerde und die Seite speichere, dann gehe den Browser aktualisieren , den ich mit Befehl R verwende. Sie können auch auf dieses kleine Auffrischungssymbol klicken, aber wenn Sie Befehl R verwenden, wird es schnell aktualisiert und es ist ein schnelle einfache Sache. Ich werde Ihnen ein paar Tastenbefehle sagen, Verknüpfungen, die ich getan habe, die ich so benutze, wie wir durchgehen. Die andere, die ich verwenden werde, um zwischen verschiedenen Anwendungen hin und her zu gehen , ist Command Tab, also kann ich zwischen diesen Tab wechseln, wenn ich Shift gedrückt halte, geht es in die andere Richtung. Das ist eine schnelle, praktische Möglichkeit, zwischen Anwendungen zu wechseln. Zurück zu dem, wovon wir reden. Ich habe den Stil losgeworden, der hier inline war, dass die Farbe gleich rot ist, und hier habe ich Farbe gleich blau in einem lokalen Stil, bis zum Kopf des Dokuments, und als ich erfrischte, boom, alles wurde blau. Lassen Sie uns unser Cascading Stylesheet einrichten. Dies wird das entfernte Stylesheet sein, und wir nennen es remote, nur weil es hier nicht wirklich in diesem Codekörper ist. Wenn Sie mit der rechten Maustaste auf „Neuer Ordner“ klicken und es CSS nennen, und dann innerhalb davon eine neue Datei erstellen. Wir werden diese styles.css nennen. Es ist wichtig, that.css Erweiterung am Ende zu setzen, und jetzt schreiben wir wirklich schnell. Ich schreibe hier einen Stil in unserem Stylesheet. Ich werde den gleichen Text anvisieren, und mach mir keine Sorgen darüber, mit mir mitzutippen. Ich werde in eine Sekunde über die Anatomie eines Stils gehen. Was nur überprüfen Sie das wirklich schnell. Farbe grün, speichern Sie das. Nun, unsere Indexseite kennt das Stylesheet noch nicht, obwohl es sich im selben Verzeichnis befindet, müssen wir ihm spezifische Anweisungen geben und ihm mitteilen, dass sie die Stylesheets verwenden soll. Wir schreiben ein Link-Tag mit einem href und href ist genau wie eine Karte, wo diese Datei gefunden wird, also css/ styles.css, und dann lassen Sie uns dem Browser sagen, wofür diese Datei verwendet wird, rel entspricht Stylesheet. Dann hat das Link-Tag keinen näher, Sie sind daran gewöhnt, diese Syntax mit HTML-Elementen zu sehen, Sie brauchen es nicht mit einem Link-Tag. Jetzt gehe ich zurück und aktualisiere die Seite und der ganze Text ist grün. Werfen wir einen Blick auf etwas wirklich schnell. Siehst du, wo dieser Link platziert wird? Es ist nach diesem Inline-Stil. Wenn ich es hier nach oben schiebe und speichere, vergewissern Sie sich, dass wir einrücken. Es ist blau. Warum ist das so? Wir haben eine weitere Spezifität, die wir hier spielen. Der Browser lädt diese Datei zuerst und liest grün. Dann geht es hier runter und liest das und es ist wie, oh, nein, die Farbe soll blau sein, sie blau machen. Wenn ich das entferne, speichere es und aktualisiere, wird es grün angezeigt. Spezifität ist wichtig und dasselbe wird auch innerhalb Ihres Stylesheets spielen, also jedes Mal, wenn ich einen Duplikat-Stil habe, was auch immer Stil zuletzt geschrieben wurde, wird es bevorzugt werden. Siehst du da, es wird rot. Das ist ein wenig über CSS und Spezifität. Wirklich schnell, eine Schüler-Anatomie Lektion über einen Stil. Es gab ein paar verschiedene Komponenten hier zu einem Stil, mit dem Sie vertraut sein müssen. Sie haben den Selektor hier drüben, wir haben die Eigenschaft und dann den Wert, so dass Sie dieses Muster immer und immer wieder wiederholt sehen, wenn Sie Stile schreiben. Sie sind Schlüsselwertpaare. Dies ist ein Begriff, der einfach zu erklären, wann immer Sie eine Eigenschaft hier haben und dann einen Wert dafür dort drüben haben. Wie Schriftgröße, 18 Pixel, Farbe Rot, das ist die Anatomie eines Stils. Ihre Selektoren kommen in ein paar verschiedenen Sorten. Dieser ist ein Element, ein Absatz-Tag. Jedes Absatz-Tag wird die Farbe Rot und die Schriftgröße von 18 Pixeln haben. Sie haben eine Klasse, die mit einem Punkt beginnt, also könnten wir, wie im vorherigen Beispiel, Zeile haben wie im vorherigen Beispiel, , das war eine Klasse, und Sie haben IDs und ID wird von einem Hash vorangestellt, und wäre so etwas wie Ich weiß nicht, Homepage. Dann gibt es verschiedene Möglichkeiten, wie Sie Klassen und IDs und Elementselektoren verwenden, wenn Sie Ihre Stile erstellen, und wir werden in einem Moment darauf eingehen. Sie wissen über Spezifität. Sie haben das interne Funktionieren eines Stils gesehen. Du weißt, was Komponenten sind. Du weißt, wo es hingeht. Lassen Sie uns anfangen, einige Stile für diese Website zu schreiben. Ich werde im nächsten Video sehen. 4. Kenne deine Boxen: Willkommen zurück. Als Designer haben Sie wahrscheinlich Ihre Dateien in Photoshop, Sketch, einer statischen Design-Software wie diese vorbereitet . Jetzt müssen Sie es in eine Website verwandeln und die Kontrolle über all diese Elemente haben. Du musst wissen, wie man sie dazu bringt, sich zu verhalten. Es kann wirklich verwirrend sein. Es gibt so viele verschiedene HTML-Tags, und sie alle werden jedoch auf nur zwei Kategorien reduziert. Sie haben Inline-Elemente, und sie werden nebeneinander wie Text aufstellen. Sie haben Block-Level-Elemente. Sie werden sich übereinander stapeln. Jede Webseite ist eine Kombination aus diesen beiden Dingen. Sie existieren in der X-, Y-Achse. Lassen Sie mich Ihnen einige Folien zeigen, die ich nur für Sie vorbereitet habe, die dieses Konzept veranschaulichen. Ich werde Ihnen zeigen, wie Sie die grundlegenden Elemente in einer HTML-Seite mit Cascading Stylesheets manipulieren können. Hier sind wir. CSS Layout ist einfach wie XYZ. Damit meine ich die x-Achse, die y-Achse und die z-Achse. Die x-Achse ist horizontal und verläuft von links nach rechts. Die y-Achse ist vertikal und geht von oben nach unten, und die z-Achse, über die wir später sprechen werden, ist, wie Elemente in Ebenen übereinander stapeln. Was Sie an diesen drei orangefarbenen Balken sehen können, zeigt es, dass Inline-Elemente nebeneinander stapeln wollen, und sie werden weiterhin nebeneinander stapeln bis sie den Rand ihres Containers erreicht haben und wickeln müssen. Ich möchte Ihnen eine Website namens CodePen vorstellen. CodePen ist eine erstaunliche Ressource. Es ermöglicht Ihnen, Ideen wirklich schnell zu testen, ohne eine ganze Website einrichten zu müssen. Sie finden den Link zu diesem CodePen in der Ressourcen-PDF, die in den heruntergeladenen Dateien für diese Klasse enthalten ist. Werfen wir einen Blick auf einen CodePen, der diesen Punkt veranschaulicht. Hier haben wir einen unformatierten Körper von HTML. Nun, in CodePen, muss ich nicht das HTML-Tag, das head-Tag, das body-Tag schreiben . Sie kümmern sich um das für Sie. Dies macht es wirklich schnell und einfach, Code zu testen und ein sofortiges Ergebnis zu sehen. Lassen Sie uns etwas tun, wie einen Stil auf das body-Tag anwenden. Alles, was ich tue, ist, dass ich dieses CSS kommentiere. Wenn Sie in einem Stylesheet arbeiten, können Sie es bitten, Code nicht zu lesen, indem Sie hier diese Syntax verwenden, die ein Schrägstrich und dann ein Stern ist, und dann ein Sternschrägstrich, um den Kommentar zu schließen. Oft wird dies verwendet, um sich Notizen zu hinterlassen. Sie können so etwas sagen, dies beginnt die Stile für den oberen Teil der Seite. Auf diese Weise können Sie Notizen für sich selbst oder für alle Entwickler hinterlassen , die in Zukunft an diesem Projekt arbeiten werden. Wirklich schnelle Tastaturbefehl wird Ihnen einige Zeit sparen, während Sie entlang hier folgen. Sie können die Befehlshalt gedrückt halten und mit den Pfeilen nach rechts oder links eine ganze Textzeile auswählen, und dann können Sie den Schrägstrich unter dem Fragezeichen verwenden, um den Kommentar ein- und auszuschalten. Dies funktioniert in HTML2. Ich habe es hier benutzt, um es uns zu ermöglichen, Stile einzeln zu enthüllen , ohne sich die Zeit nehmen zu müssen, um sie zu schreiben. Lassen Sie mich einen auf das Körper-Tag anwenden. Sie können sehen, dass ich meinen Selektor hier habe. Es gibt keinen Punkt oder Hash davor. Dies wird nach einem HTML-Element suchen. Wir werden das body-Tag und angewandte Schriftgröße gleich 24 Pixel zu finden. Sobald ich das dekodiere, sehen Sie, dass dieser Text diesen Stil annimmt. Beobachten Sie hier, wie alles in Boxen geschrieben ist. Diese Einzugsebenen zeigen an, wo ein neues Feld beginnt. Hier ist eine übergeordnete Box, und es enthält diese vier untergeordneten Felder. Das sind alle Spannweiten. Spannweiten sind Inline-Elemente, also werden sie nebeneinander stapeln, und wir sehen, dass hier passiert. Bilder, hier ist ein Bild, auch ein Inline-Element, und es passt auch einfach mit allem anderen in Einklang. Lassen Sie uns nun über die y-Achsen-Blockelemente sprechen. Dies sind HTML-Tags wie divs, Absätze, Kopfzeilen, Fußzeilen, Abschnitte, all diese Dinge. Sie stapeln sich von Natur aus übereinander und dehnen sich so weit wie möglich aus, um ihren Elterncontainer zu passen. Werfen wir einen Blick darauf, wie Elemente auf Blockebene funktionieren. Wenn ich wollte, dass dieser ganze Text in Strophen stapelt, wie Sie es in einem Buch sehen würden, könnte ich zurückgehen und all diese Spannweiten in ein Blockebenenelement wie ein div ändern. Lassen Sie mich das wirklich schnell versuchen. Wir haben hier ein Div eingelegt. Sie sehen diese erste Strophe, sie gibt tatsächlich zurück und macht den Rest des Typs weiter darunter, so dass es erweitert wird, um den übergeordneten Container mit der Breite zu füllen, und es wird über dem Inhalt gestapelt, der darunter ist. Eine andere Sache, die Sie tun können, ist die Verwendung der display-Eigenschaft, um die Art und Weise zu steuern, wie diese aussehen. Lassen Sie mich dieses nächste bisschen CSS kommentieren. Es wird die Höhe von 32 Pixeln auf ein span -Tag anwenden. Eine Sache an Inline-Elementen ist, dass sie keine Höhen- oder Breiteneigenschaften akzeptieren können , da sie von Natur aus nur aufeinander ausgerichtet sind. Sie müssen keine Höhe und Breite haben. Wenn ich dies sage, dass es sich wie ein Element auf Blockebene verhält, übernehmen sie plötzlich alle Eigenschaften eines Elements auf Blockebene. Sie werden übereinander stapeln. Sie nehmen diese Höhe an, die Sie sehen können. Wenn ich das auskommentiere, sieh mal, wie sie so schrumpfen. Die Linienhöhe zwischen den Elementen wird verringert. Dies ist eine einfache Möglichkeit, den Unterschied zwischen einem Element auf Blockebene und einem Inline-Element zu veranschaulichen . Wenn Sie Layout machen, ist es viel wahrscheinlicher, dass Sie ein div oder ein anderes Element auf Blockebene verwenden. Zum Beispiel stapeln Sie Dinge mit Block-Level-Elementen und setzen die Dinge mit Inline-Elementen in Einklang. Dies zeigt Ihnen jedoch, wie Sie die display-Eigenschaft verwenden können, um ihr Verhalten zu steuern. Inline- und Blockelemente kombinieren, um uns die Layouts zu geben , mit denen wir auf Websites vertraut sind. Sie wissen ein wenig mehr darüber, wie Stile HTML-Elemente beeinflussen. Du sagst wahrscheinlich: „Mark, wann werden wir eigentlich Code schreiben?“ Nun, wir werden einige wirklich bald über das Projekt schreiben, aber ich möchte sicherstellen, dass Sie verstehen, wie diese Dinge funktionieren, bevor wir eintauchen. Ich will nicht, dass deine Stile, wenn du sie schreibst, sich wie magische Beschwörungen anfühlen , die du da rausschmeißst. Ich möchte, dass sie sich wie Befehle fühlen, auf die Sie zuversichtlich sind. Wir werden ein bisschen mehr Vortrag mit einigen Folien machen, und dann werden wir in ein wenig Code schreiben. Hängen Sie da rein. Wir sehen uns im nächsten Video. 5. Layout: Webseiten sind im Wesentlichen Boxen innerhalb von Boxen. Einige von ihnen gehen seitwärts, einige von ihnen stapeln sich übereinander, und sie wurden zu komplexen Layoutmustern kombiniert. Die komplexen Muster, die sie bilden, Ihre Webseiten im Wesentlichen, werden als Dokumentobjekte bezeichnet, und sie haben ein so genanntes Dokumentobjektmodell. Das ist im Wesentlichen die Beziehung von einer Box zu einer anderen. Wie viele Boxen befinden sich in der übergeordneten Box? Wenn Sie diese als hierarchischen Baum visualisieren könnten, beginnend mit dem übergeordneten Feld hier, untergeordnete Felder darunter, die sich in andere kleine untergeordnete Felder aufteilen. Das ist das Dokumentobjektmodell. Es ist sehr hilfreich, das zu sehen, während Sie eine Webseite entwickeln, so dass Sie eine visuelle Vorstellung davon bekommen können, wie diese Elemente miteinander interagieren. Lassen Sie mich Ihnen Ihren neuen besten Freund vorstellen, den Inspektor. Wenn Sie zu einer Webseite in Chrome gehen und mit der rechten Maustaste klicken, wird unten ein Menü angezeigt, das inspt hat, tippen Sie auf Inspect. Es öffnet sich ein kleines Panel, das alle Arten von Informationen über jedes einzelne Element auf Ihrer Seite enthält. Werfen wir einen Blick auf einige unserer Boxen und beginnen, ihnen einige der Stile zu geben , die uns helfen werden, zu erreichen. Schau, das in den Design-Comps hier dargelegt wurde, wir werden für diese verrückte Magenta Farbe hinter dem Header gehen und versuchen, es genau so aussehen zu lassen. Lassen Sie uns damit beginnen, diese Farbe auf unsere navbar anzuwenden. Wenn wir mit der rechten Maustaste hier oben klicken, können wir uns in unserem Inspektor umsehen und eine wirklich gute Vorstellung davon bekommen , welche Boxen das ausmachen. Wir haben eine Hauptbox dort, das ist die Navbar, Sie können Klassennavbar sehen. Wir werden das als Selektor verwenden, um diese Box zu zielen. Dann drin ist der Container 960. Letztendlich wird uns das helfen, eine schöne Kolumne zu machen. Dann im Inneren haben wir die Namen der Seiten für unsere Navigation. Dann haben wir Social-Media-Symbole, die Sie nicht sehen können, weil sie jetzt weiß auf weiß sind. Lasst uns das reparieren. Wir werden unseren ersten Stil für die Website hier schreiben, ich habe Stile CSS in meinen Starter-Dateien geöffnet. Ich werde weiter darauf aufbauen und wir werden die navbar-Klasse anvisieren, indem wir sagen.navbar. Wir geben ihm eine Hintergrundfarbe von E03ED7. Ich werde diese Dinge kopieren und mich wirklich schnell in diesen Code-Demos bewegen. Stoppen Sie das Video definitiv und nehmen Sie sich Zeit, um aufzuholen. Ich werde nur versuchen, sie schnell zu machen, damit wir nicht zu viel von Ihrer Zeit verschwenden, wie ich Dinge austippe. Seien Sie nicht entmutigt oder beleidigt, wenn ich durch diese fliege, drücken Sie einfach „Pause“. Wenn wir das speichern und zum Browser zurückkehren, stellen wir fest, dass wir hier eine verrückte Magenta Farbe haben. Wir können unsere Social-Media-Symbole sehen. Jetzt sehen Sie sich diese Grenze hier an. Dies wird uns zu einer Diskussion über das Box-Modell bringen. Dies ist eine Illustration des Box-Modells hier unten, das der Inspektor uns zur Verfügung stellt. Genau hier im Kern sehen wir die Abmessungen der Kernbox selbst, und dann sehen wir diese drei verschiedenen Eigenschaften der Box. Wir haben Polsterung, Rand und Rand, und Sie sehen hier diese harte Linie, die in der Nähe gezogen ist, dass das Unterscheidungsmerkmal ist. Obwohl es im wirklichen Leben keine tatsächliche Breite hat. Das ist innen und alles vorbei, was draußen ist. Alle Ränder, die Sie anwenden, werden als auf der Innenseite dieser Dimension berechnet. Die Polsterung, die Sie anwenden, gilt für die Innenseite dieser Dimension. Jede Marge, die Sie anwenden, gilt für die Außenseite. Wir können sehen, dass hier eine gewisse Marge angewendet wird, ganz herum. Was das heißt, ist ein User-Agent-Stil. Wenn Sie sich diesen grauen Bereich hier ansehen, ist er kursiv, Sie werden sehen, dass es eine Reihe von Elementen gibt die aufgerufen werden und als Anzeigeblock aufgerufen werden. Es gibt alle Arten von User-Agent-Formatvorlagen. Dies sind Stile, die mit dem Browser geformt werden. Dies sind die Standardwerte. Jetzt implementiert nicht jeder Browser diese gleichen. Einige Browser glauben, dass acht Pixel genau die richtige Menge an Polsterung um etwas oder Rand sind. Andere Browser könnten das Gefühl haben, es ist 10. Einige glauben, dass eine Schriftgröße besser ist als eine andere. Wenn Sie eine Website erstellen und Ihre Stile geschrieben haben und Sie sich auf Standardstile verlassen, um Ihnen zu helfen, müssen Sie alle diese verschiedenen Browser berücksichtigen oder einfach jeden von ihnen zurücksetzen. Vor langer Zeit begannen die Leute in Bezug auf das Web Reset Stylesheets zu schreiben. Grundsätzlich nehmen sie Dinge wie H1-Tags, Standard-Rand, Standard-Polsterung, Standard-Zeilenhöhe, all diese verschiedenen Dinge, und deklarieren sie ausdrücklich, so dass das User-Agent-Style Sheet sie nicht beeinflusst. In Ihren Extras Dateien hier oben, werden Sie sehen, ich habe eine reset.css. Das ist eine, die ich gerade aus dem Internet geschnappt habe. Eric Meyers hat einen sehr beliebten gemacht. Sie können, es gibt tatsächlich einen tollen Artikel über CSS-Tricks über die Geschichte des Reset Stylesheets, was eine großartige Lektüre ist, wenn Sie etwas neues Level lesen möchten. Fügen wir diesen Reset in den oberen Teil unseres Stylesheets ein und speichern Sie ihn. Wenn wir gehen und aktualisieren, ist dieser Rand weg, und jetzt fangen wir an, unsere Stile zu sehen. Während wir vorher nur die grauen Stile des User-Agents gesehen haben. Jetzt sagen wir Körper H1, H2, bla bla bla. Sie wurden alle auf Marge 0 gesetzt, Polsterung 0. Wir müssen hineingehen und wirklich angeben, was wir wollen, dass Marge und Polsterung auf diesen Elementen sein. Aber was wir getan haben, ist sichergestellt, dass jeder Browser sie konsistent anzeigt. Das nächste, was hier wird versuchen, einige dieser Inhalte zu verhalten. Wir haben all diesen Text tun, was er tun sollte, ist in Zeilentexten, nur seinen Container füllen. Alles wird ohne Rand auf die linke Seite zugeschlagen. Dinge, die nebeneinander liegen sollten, sind übereinander gestapelt. Lasst uns eine Kolumne auferlegen. Wenn wir in der Entwurfsdatei schauen, können wir diesen Entwurf sehen, eine Spalte, die den ganzen Weg hinunter geht und die Dinge schön und ordentlich hält. Wir werden unsere Webseite das gleiche Verhalten machen , indem wir einen Master-Spaltenstil schreiben. Was ich hier getan habe, ist der Container namens Container 960 gemacht. Sobald wir unsere Stile darauf anwenden, wird es jedem dieser Abschnitte helfen, sich zu zentrieren und 960 Pixel breit zu werden. Lassen Sie uns diese Stile jetzt hinzufügen. Ich mag es, mir einige Kommentare zu hinterlassen, nur um mir zu helfen, meine Stylesheets zu organisieren. Wir können Schrägstrich und Stern Schrägstrich verwenden, um unsere Kommentare zu beginnen und zu beenden. Ich werde sagen, beginnen Site-Stile. Wir haben unsere Navbar. Lasst uns einen für Container 960 machen. Dies ist die automatische Zentrierung der Marge und es ist eine der zuverlässigsten Techniken für die Zentrierung und Bild auf einer Webseite. Was es tut, ist, dass es einen Blick auf die Breite des Objekts nimmt und dann automatisch die Höhe der Marge auf jeder Seite berechnet, die benötigt wird, um dieses Objekt zu zentrieren. Deshalb funktioniert es so gut. Es gibt eine Sache, die Sie wissen müssen, und das ist, dass dies nur auf Blockebene Elemente funktioniert. Der Grund dafür ist, dass Inline-Elemente keine Breite oder Höhe auf sie angewendet haben können , weil ihre Aufgabe darin besteht, einfach weiterzugehen und weiterzuschalten und auszurichten, bis sie ihren Container umgedreht haben. Wir müssen ein Element auf Blockebene verwenden, und in diesem Fall verwenden wir ein div hier, div Klasse. Nachdem ich die Breite und den Rand automatisch darauf eingestellt habe, drücke ich auf meinem Stylesheet „Speichern“, gehe zurück zur Website hier und das wird alles in eine Spalte in der Mitte einrasten. Werfen Sie einen Blick auf das und es wird sich zentrieren. Egal wie groß oder klein ich dieses Fenster mache. Ich habe diese Klasse nach oben und unten durch diese Seite gesprenkelt, jedes Mal, wenn ich zu einem neuen Abschnitt gehe, also hier im Heldenbereich, da ist es. Hier im Line-Up-Abschnitt gibt es es. Dies ist eine großartige Strategie, um eine solide Spalte beizubehalten und die Macht eines Cascading Stylesheets zu unterstreichen. Sie können sehen, wie wir es an einem Ort schreiben und es kaskadiert über unsere gesamte Seite, wenn dieser Stil referenziert wird. Dies ist eine gute Möglichkeit, eine Menge Hebelwirkung aus nur ein wenig Code zu bekommen. Es erfordert nur ein wenig Vorabplanung. Wie Sie nähern sich dem Aufbau einer Website auf eigene Faust. Gehen Sie in diesen CSS-Stift hier, das ist CodePen. Gehen Sie zu diesem CodePen und spielen Sie herum. Ich habe einige engagierte Stile, die Sie entkommentieren und verwenden können, um zu sehen, wie Marge, Auto und Breite eine Reihe von Dingen auf der Seite kombinieren. Sie können mit Werten spielen und sehen, was passiert, wenn Sie einige dieser Werte ändern. Oder wenn Sie die Marge ändern oder was auch immer Sie tun wollen, verwirren Sie sich damit, brechen Sie sie und bekommen ein Gefühl dafür, wie es funktioniert. 6. Float Layout: Eines der ersten Tools, die Webentwickler und Designer erhielten, die ihnen geholfen haben, das Seitenlayout zu steuern, war der Float. Wenn Sie ein Float auf ein Element anwenden, wird es das Element ganz nach links oder ganz nach rechts nehmen. Floats nehmen jedoch das Element aus dem normalen Fluss des DOM. Sie sind etwas eigenartig. Während Inhalte um sie herum fließen, reichen sie nicht aus, um einen Container alleine offen zu halten. Wenn Sie ein Element schweben, verwandelt es es in ein Element auf Blockebene, das nach links oder rechts schweben kann. Floating muss ein- und ausgeschaltet werden und Sie müssen Ihre Schwimmer löschen, um das schwebende Verhalten zu stoppen. Es ist ein bisschen komisch. Sie würden denken, Sie könnten einfach etwas nach links oder rechts setzen und es würde funktionieren. Aber sie sind wirklich ein Hack, weil sie das allererste Werkzeug waren , das Designer Inhalte von links nach rechts verschieben mussten. Sie haben schnell herausgefunden, wie sie sie nutzen können, um komplexe Layouts zu erstellen, wie ein zweispaltiges Layout, das wir heute im Internet sehen und das wir seit Hunderten von Jahren im Druck gesehen haben. Sie müssen Ihre Schwimmer ausschalten, indem Sie sie löschen. Wenn Sie sie nicht löschen, wird das schwebende Verhalten dieses Verhaltens, das sie aus dem normalen Fluss des DOM entfernt, nicht zurückgesetzt. Was passieren kann, ist, dass ein Container hinter den schwebenden Elementen kollabiert. Wenn Sie eine seltsame Situation wie diese haben, in der Sie Inhalte haben , die hinter etwas angezeigt werden, das Sie geschoben wurde es wahrscheinlich nicht gelöscht. Eine der häufigsten Möglichkeiten, dies zu tun, besteht darin, ein Element auszuwählen , das in der natürlichen Reihenfolge des DOM angezeigt wird, das am Ende der Seite nach den Elementen, die verschoben wurden, und beide Floats löschen. Du kannst einfach beides klären. So klären Sie es. Dafür werde ich eine kleine Demo machen. Hängen Sie eine Sekunde an. Eine andere Möglichkeit, dies zu tun, besteht darin, den übergeordneten Container des Floats-Überlaufs ausgeblendet zu geben. Dadurch wird sichergestellt, dass kein Inhalt, der innerhalb eines Elements platziert wird , seine Grenzen überlaufen kann. Indem Sie ihn so einstellen, dass er ausgeblendet überläuft , machen Sie es auf eine Weise selbstbewusst und berechnet den Platz, den er benötigt, um diese schwebenden Objekte und den Rest des Inhalts in sich selbst anzuzeigen. Gehen wir zu einem CodePen und sehen, wie das alles funktioniert. Hier ist unser vertrauter alter CodePen. Lass uns die letzten paar Teile davon machen, und dann habe ich noch einen für dich. Los geht's. Wir haben alle Verse als Block angezeigt, und versuchen wir, das Haus auf der rechten Seite zu bekommen. Wir werden sagen, Float rechts für die Illustration und Sie können sehen, dass es auf der rechten Seite schwebt, während all das Zeug bleibt auf der linken Seite. So erhalten wir 2- und 3-Spalten-Layouts, um im Web zu arbeiten. Es gibt andere Möglichkeiten, aber dies ist einer der ältesten und am weitesten verbreiteten und ehrlich gesagt kniffligsten zu verstehen. Ich möchte sicherstellen, dass du das wirklich gut im Griff hast. Lassen Sie uns hier auf den zweiten CodePen gehen. Hier ist ein CodePen, mit dem Sie mit Float-basiertem Layout herumspielen und ein Gefühl dafür bekommen können. Ich habe jetzt alles auskommentiert. Wir haben unseren gewohnten Blob von unstilisierten Inhalten. Lassen Sie uns gehen und einige dieser Stile auskommentieren und sehen, was wir hier bekommen. Dies sind grundlegende Seitenstile, ich füge einige Auffüllung der Kopf- und Fußzeile und dem Körper hinzu. Siehst du diese Kommas hier? Jedes Mal, wenn Sie Stile haben, die an mehr als einem Ort verwendet werden, können Sie sie in eine kommagetrennte Liste einfügen. Zum Beispiel bezieht sich Header hier auf das Header-Element direkt hier, also HTML5-Element. Fußzeile ist unsere Fußzeile. Dot Körper wird sein, suchen Sie nach einigen der Klasse des Körpers. Dieser Abschnitt hat die Klasse des Körpers darauf. Es wird auch dort angewendet werden. Ich verwende 10 Pixel Polsterung überall und Sie können hier sehen, ich habe eine schöne Grenze, die ich um all diesen Inhalt erstellt habe. Ich habe gerade eine Codezeile geschrieben, also wenn ich später so bin, oh, ich wünschte, das wären 8 Pixel. Ich schreibe es an einem Ort und es wird auf all diese verschiedenen Elemente gleichzeitig angewendet . Das ist ein weiteres Beispiel für den kaskadierenden Teil kaskadierender Stylesheets. Es ist ein sehr leistungsfähiges Werkzeug. Hier haben wir eine weitere kommagetrennte Liste. Dies ist die Hintergrundfarbe für die Kopf- und Fußzeile. Sehen Sie, wie das für beide gilt. Sehen wir uns hier an. Holen Sie sich eine Hintergrundfarbe für das div. Sie können es von den anderen Teilen dieser Komposition unterscheiden. Machen Sie die Illustration passend, indem Sie sie mit 100 machen. Jetzt werde ich die Breiten für die Spalten hier festlegen, die gerade gestapelt sind. Die divs, die Block-Level-Elemente, sie wollen stapeln und weil sie nichts anderes haben, was ihnen sagt, anders zu tun tun sie ihr natürliches Verhalten, ihre Eltern zu füllen und übereinander zu stapeln. Lasst uns sie 45 Prozent breit machen und das noch einmal sehen. Komma getrennte Liste wird es auf beide Spalten angewendet. Die mit der linken Klasse und die mit der rechten Klasse zur gleichen Zeit. Wir werden einige Polsterung rechts auf die linke Spalte und einige Polsterung links in der rechten Spalte anwenden . Das wird uns eine schöne Gosse zwischen den beiden geben. Jetzt wenden wir die Schwimmer an. Ich schwimm links, schwimm rechts. Ich schwebe nach der linken Spalte, links, meine rechte Spalte rechts. Du siehst, ich habe hier eine nette kleine Gosse. Kurze Notiz hier, ich habe gerade das Video angehalten. Hast du gesehen, wie dieser Text und das Bild hier unten gestapelt wurden? Ich musste diese 44 und dann 45 wieder wirklich schnell machen und es einen kleinen Layout-Bug beheben. Wenn Sie das gleiche Problem haben, tun Sie das einfach und Sie werden sehen, dass sie nebeneinander stapeln. Nur eine kleine Panne. Wir sehen, dass dies die Fußzeile überlappt. Wir werden versuchen, die erste Technik, die klar sowohl auf die Fußzeile angewendet wird. Wir sehen, dass die Fußzeile nach unseren zwei schwebenden Elementen hier ist und indem Sie dem Browser sagen, hey, sobald Sie die Fußzeile erreicht haben, hören Sie auf, das Clearing-Verhalten zu tun, tut es. Diese können alle in Spalten stapeln, wie Sie sie möchten. Schauen wir uns die andere Technik an, die war, sehen wir nehmen sie weg, sie kollabieren. Überlauf verborgen auf das Körperelement anwenden, das hier das Abschnitt-Element ist, in dem alle diese anderen Elemente enthalten sind. Wir werden Überlauf verborgen, um das und Boom anwenden, es wird selbstbewusst, es berücksichtigt die Floats und die unfloated Elemente und zeigt sie alle. Es gibt eine dritte Möglichkeit, einen Float zu löschen, und dies wird die Clear Fix Floating Technik genannt. Es nutzt die Vorteile von Elementen genannt Pseudo-Elemente, die wir nicht wirklich im Laufe dieses Tutorials bekommen werden. Aber es ist eine wirklich gute Möglichkeit, Floats zu löschen und es wird viel in reaktionsfähigen Frameworks und solchen Dingen verwendet. Ich hoffe, eine zukünftige Lektion über Responsive Design zu machen, und es wird darin enthalten sein. Darauf bezieht sich der Mukoviszidose genau hier. Eigentlich ist das, da gehen wir, auf den Kommentar, dass, und das funktioniert. Wenn Sie möchten, können Sie das auf eigene Faust Google und überprüfen Sie es. Spielen Sie mit diesem Stift und werfen Sie einen Blick darauf, wie verschiedene Werte ändern dieses Layout und sein Verhalten und dann lassen Sie uns gehen, was wir über Floats jetzt wissen, auf die Kopfzeile unseres Projekts anwenden . Lassen Sie uns in unserem Stylesheet beginnen, die Klassen zu platzieren und die Stile an Ort und Stelle zu setzen, die unsere navbar so aussehen lassen, wie es sollte. Mit diesen sozialen Symbolen auf der rechten Seite und der Navigation über auf der linken Seite. Los geht's. Das erste, was ich tun werde, ist Überlauf hinzuzufügen, der dem Container 960-Element verborgen ist. Was dies tun wird, ist jedes Mal, wenn wir ein Float-basiertes Layout innerhalb dieses Containers machen, wird es automatisch gelöscht. Wir müssen nicht einmal an etwas denken, außer unseren Float links in unserem Float rechts zu schreiben. Wir machen das zuerst und lassen mich dann einen Blick darauf werfen, was unsere Containernamen hier sind. Wir haben Navbar hier, dass wir nach links gehen, also sagen wir, oh, wir haben Navbar dort. Entschuldigung, es ist nicht navbar, oder? Was ist das? Es ist, wir haben einen namens Hauptnav und einen namens Social. Das ist es, wonach ich suche. Wir werden sagen, Hauptnav wird links schweben und dann, als das einzige soziale, es wird rechts schweben. Siehst du, wie ich die ein bisschen einziehe? Ich drücke Tab jedes Mal, wenn ich diese geschweiften Klammern spalte und es hilft Ihnen, das Dokument zu scannen, wenn Sie suchen, besonders wenn es lang wird. Wenn Sie nach verschiedenen Klassen suchen, um zurückzugehen und zu bearbeiten und vor allem im HTML. Jedes Mal, wenn ich in eine neue Box gehe, ziehe ich Dinge ein, damit ich einen Blockcode wie diesen betrachten und sagen kann, oh, das ist eine Box und es hat eine andere Box, das ist es Geschwister und das ist es Eltern. Ich kann all diese Dinge erzählen, nur indem ich mir anschaue, wie weiter eingerückt. Eine andere Sache ist, siehst du die kleine blaue Linie hier? In Atom, wenn ich ein Element berühre, zeigt es mir, wo es sich um das entsprechende öffnende oder schließende Tag handelt. Dies sind einige andere hilfreiche Möglichkeiten, um eine visuelle Darstellung für die abstrakten Felder zu haben , die Sie im Code erstellen. Wir haben Hauptnav links geschoben und sozial schwebte rechts. Wir haben einen Überlauf ausgeblendet, also sollte es funktionieren. Presto. Da gehen wir. Das ist rechts, das ist links. Jetzt sieht das immer noch wie Müll aus, aber wir werden sehr bald hier über Styling Text sprechen. Eine Sache, die ich möchte, dass Sie tun, gehen Sie zu CodePen und drücken Sie einfach erstellen und drücken Sie Stift und versuchen Sie, sich selbst zu schreiben, ein sehr einfaches Float-basiertes Layout. Ich werde es wirklich schnell machen. Wenn du willst, kannst du zum Ende des Videos springen, wenn du willst, nein, ich habe es, aber wirklich schnell, lass es uns tun. Wir werden ein div mit der Klasse des Containers haben und dann werde ich dieses div schließen, und dann werde ich eine Spalte haben. dieser Spalte eines div wird das eine Klasse von links gegeben, schließen Sie dieses div und dann haben wir ein div mit einer Klasse von rechts, und dann werden wir Hallo hier und Welt hier drin. Siehst du, dass sie genau dort gestapelt sind. Lassen Sie uns versuchen, sie dazu zu bringen, links und rechts auszurichten. Für den Container, sagen wir, Breite ist 500 Pixel, Rand ist Auto und ich möchte Überlauf dort versteckt setzen. Lassen Sie uns eine Hintergrundfarbe machen, nur damit wir sehen können, wie die Boxen aussehen. Lass mich rot machen. Jetzt Punkt links wird schweben links und Punkt rechts, es ist Float rechts. Da sind sie. Jetzt sehen Sie, dass das Rot von unserem Haupt-Hintergrundcontainer weggegangen ist. Das liegt daran, dass es nicht klar ist. Machen wir einen Überlauf versteckt und es kommt zurück. Es gibt einen wirklich einfachen Zwei-Säulen-Float. Wir haben hier noch nicht mal Breiten gesetzt. Wir könnten, wenn wir wollen, aber ich wollte nur, dass du das schnell ausschreibst. Nur um sich ein paar Hände auf zwei Spalten Layout Übung zu geben, wirklich einfach, ohne dass ich einen der Code geschrieben habe. Herzlichen Glückwunsch, denn dies ist eine knifflige Layout-Konvention und wenn Sie dies meistern, können Sie Ihre eigenen Layouts einfach schreiben und debuggen, wenn sie schlecht gehen, was sehr wichtig ist. Herzlichen Glückwunsch Jungs. Gehen wir zum nächsten Video. Wir werden anfangen, dies wie eine echte Website aussehen zu lassen. 7. WebFonts: Ok. Das wird eine Menge Spaß machen und es wird eine hohe Wirkung und schnell sein. Wir werden einige Web-Fonts hinzufügen. Nun, in den alten Tagen, hatten Sie wirklich nur ein paar verschiedene Schriftarten zur Auswahl. Sie mussten sich darauf verlassen, dass die Schriftarten auf dem Computer eines Benutzers vorhanden waren. Nun, mit Web-Fonts und Google und all diesen anderen Diensten, die sie auf CDNs hosten, können Sie wirklich zuverlässige, schöne Schriftarten kostenlos oder [unhörbar] kostenpflichtige Dienste wie Typekit und so etwas bekommen. Aber Tonnen von Möglichkeiten, um tolle Schriftarten auf Ihrer Website zu bekommen. Wir werden auf eine kostenlose Ressource suchen, Googles Schriftbibliothek, und wir werden diese auf setzen und bekommen diese Website ein wenig geformt. Los geht's. Aus zu Google-Schriftarten. Das ist Google Fonts. Wir haben, nur wahrscheinlich Hunderte von Schriftarten zur Auswahl von hier. Ich will ein paar Dinge runterlaufen. Einige Begriffe, Serif, Sans Serif, Display, Handschrift, Monospace. Werfen wir einen Blick darauf, wie diese Schriftarten aussehen. Eine Serifen-Schrift, siehe diese kleinen Schwänze, kleine horizontale Stücke und all diese, [unhörbare] Zahlen, sehr ausgeprägte Serif. Dieses M, es hat die kleinen Füße, die von oben und unten kommen. Das ist es, was eine Serif ist. Serifen-Schriftart hat diese kleinen Füße drauf. Sans Serif. Sans bedeutet ohne. Sie werden feststellen, dass das alles ohne die kleinen Füße ist. Anzeigetyp ist in der Regel Typ mit viel Persönlichkeit. Es ist in der Regel ungeeignet für Körperkopien, wo man Tonnen und Tonnen davon lesen muss. Es kann schwierig sein zu lesen, aber es hat normalerweise eine Menge Persönlichkeit und es ist großartig für eine Schlagzeile oder so etwas. Offensichtlich Handschrift wird sein, ich fühle mich wie dies in der größeren Kategorie der Display-Typ ist. Persönlichkeit? Ja. Lesbarkeit? Nicht so sehr. Dann ist Monospace ein sehr, es sieht fast aus wie ein Computer-Terminal. Da sind all diese Dinger. Ich benutze Monospace und Handschrift, deaktiviert. Für dieses spezielle Projekt habe ich einen Anzeigetyp und einen Sans Serif-Typ ausgewählt. Der Display-Typ war Bungee und die Sans Serif war Open Sans. Suchen wir hier nach Bungee. Genau hier. Wenn Sie auf diese „PLUS BUTTON“ klicken, wird es zu einer Sammlung für Sie hier unten hinzugefügt. Lassen Sie uns hinzufügen. Lass uns auch Open Sans reinbringen und ich zeig es dir. Öffne Sans, füge das hinzu. Es ist erstaunlich, wie einfach Google dies macht. Alles, was Sie tun müssen, wird dies auf ihrem CDN gehostet werden. Ja, es gibt verschiedene Möglichkeiten, sie auf Ihrem eigenen Server zu hosten , und Sie müssen eine Schriftartface-Deklaration verwenden. Darauf werde ich in dieser Lektion nicht hineinkommen. Machen wir es einfach auf den einfachen Weg. Sie kopieren diese und fügen Sie sie in den Kopf Ihrer HTML-Datei ein. Der Grund dafür ist, dass Sie Ihre Schriftarten laden möchten, bevor Sie beginnen, Ihrem Stylesheet mitzuteilen, was mit ihnen zu tun ist. Wenn Ihr Stylesheet geladen wird, bevor die Schriftarten ausgeführt werden, besteht die Möglichkeit, dass Ihr Browser nicht erkennt, was vor sich geht. Sie würden im Grunde sagen: „Hey, benutze Bungee für all diese Schlagzeilen.“ Der Browser würde sagen: „Ich weiß nicht einmal, was Bungee ist. Ich habe nichts heruntergeladen, was dazu passt.“ Wir werden die Schriftarten zuerst hier laden. Sie sehen, dass Bungee und Open Sans geladen werden. Lassen Sie uns die Gewichte angeben, die wir verwenden möchten, da sie mit, hier werden Sie anpassen, viele verschiedene Gewichte geliefert. Sie können wählen, wie 300 und fett 700 für Open Sans und dann für Bungee, wir verwenden nur die normale 400, das ist die einzige Größe, die es hat. Gehen Sie zurück zum Einbetten, kopieren Sie das. Sie sehen, wie die Größen dort auch. Jetzt sind wir bereit, jeden Text zu stylen, den wir wollen. Wenn wir uns unsere Design-Datei hier ansehen, sehen wir, dass dieser Header Bungee-Texte hat, sein Button hat Bungee-Texte, das ist alles Bungee, Bungee überall. Fangen wir an, einige Stile für diese Dinge zu schreiben. Es sieht so aus, als hätten wir das H1-Tag, H2-Tag, das werden alle Bungee sein. Wir gehen zu unseren Styles hier und wir können H1 schreiben. Es gibt all diese verschiedenen Eigenschaften, die unter die Schriftartdeklaration gehören. Beginnen wir mit der Schriftfamilie. Wir werden es in Zitaten sagen, Bungee. Dann wird dies ein Font-Stack sein. Ein Schriftstapel ist eine Reihenfolge des Rückfalls. Wir sagen Sans Serif hier. Was das bedeutet, ist, wenn der Browser Bungee nicht finden kann, einfach anzeigen, was der Standard Sans Serif ist. Lassen Sie uns noch einen setzen und dann sagen wir, Helvetica. Wenn Sie Bungee nicht finden können, verwenden Sie Helvetica. Wenn Sie Helvetica nicht finden können, verwenden Sie eine alte Sans Serif. Wir könnten sagen, dass dies auch für die H2-Tags und H3 gilt. Speichern Sie das und werfen Sie einen Blick auf unsere Website hier, um zu sehen, was wir bekommen. Dort öffnet sich das falsche Stylesheet. Das machen wir falsch. Ich speichere diese Stylesheets am Ende jeder Lektion , damit Sie eine Aufzeichnung über alles haben, was für diese Lektion getan wurde. Ich fing mit dem für diese Lektion an und begann an, an der falschen Stelle zu schreiben. Los geht's, lass uns das machen. H1, H2, H3, wieder tun Sie es und da sehen Sie, wir haben Bungee für all unseren Text angezeigt. Wir werden den gegenteiligen Ansatz für das, was ich die Body Font nennen werde. Wir verwenden Open Sans, indem wir es an das body-Tag anhängen. Grundsätzlich heißt das, machen Sie alle Schriftarten Open Sans. Dann gehen wir zurück und ändern ganz spezifisch die, die wir Bungee wollen. Los geht's. Der Grund, warum dies in Anführungszeichen ist, ist es ein Leerzeichen hat. Wenn ich das nicht in Anführungszeichen setze, wird der Browser das als zwei separate Schriftarten interpretieren. Komma, jetzt gehen wir zurück und schauen uns mal an. Wir sollten eine ganze Reihe von Open Sans sehen, standardmäßig geht es zu Times New Roman. Das sollte alles zu einem schönen, dünnen Sans Serif wechseln. Da gehen wir. Wir haben jetzt nette SMS. Wir werden in der nächsten Lektion einen Blick auf Hintergründe werfen und dann zur absoluten Positionierung gelangen, damit wir das abschließen können. Im Ordner „Extras“ im Ordner „Lektion sieben“ habe ich dem Stylesheet alle typbezogenen Formatvorlagen hinzugefügt. Gehen Sie durch, und entfernen Sie die Kommentare für diese typbezogenen Stile einzeln, um zu sehen, wie sie sich auf Ihr Layout auswirken. Dann sehen wir uns in der nächsten Lektion. 8. Absolute Positionierung: Positionierung ist einer der am meisten missverstandenen Aspekte des CSS-Layouts, selbst erfahrene Entwickler verstehen es manchmal nicht ganz richtig. Es gibt vier verschiedene Positionierungen, und diese Quadrate veranschaulichen die Art und Weise, wie sie funktionieren. Statisch ist der Standardpositionierungstyp und es ist, was Sie erwarten würden , dass es ein Element ist, das einen Raum im DOM einnimmt. Der nächste ist relativ. relative Positionierung ist einzigartig, das Element selbst nimmt den gleichen Platz im DOM ein, den es hatte, bevor die Positionierung angewendet wurde, aber es wird irgendwo anders wie ein Hologramm erscheinen, ich werde dies mit der Code-Demo veranschaulichen für den Fall, dass das nicht wirklich so viel Sinn macht. Dann gibt es die beiden, die ich die Geister nenne, feste und absolute Positionierung. Ich bezeichne sie als Geister, denn obwohl man sie sehen kann, haben sie nicht wirklich die Fähigkeit, etwas aus dem Weg zu schieben. Ein bisschen wie ein Float, aber selbst mit weniger Präsenz im DOM werden tatsächlich vollständig aus dem DOM gezogen, wenn sie aufgerufen werden. Die fixierte Positionierung wird nach oben oder unten im View-Port gezogen, und es verweist nur auf den View-Port, der View-Port ist Ihr Fenster, Ihr Browser-Fenster. Jedes Mal, wenn Sie eine klebrige Kopfzeile gesehen haben, wenn Sie eine Website nach unten scrollen und die Kopfzeile oben bleibt, ist dies normalerweise eine feste Positionierung. Dann kommen wir endlich zur absoluten Positionierung, was der Typ ist, den Sie wahrscheinlich am meisten verwenden würden. Es wird aus dem normalen Fluss gezogen, und für seine Position, wie weit auf dem x, wie weit unten auf dem y, verweist es auf den nächsten übergeordneten Container, der die Positionierung angegeben hat. Ich werde hier eine Illustration machen, weil das schwer zu verstehen ist, oder zumindest war es für mich. Wenn ich dieses bläuliche Rechteck und das orangefarbene Rechteck habe und das orangefarbene Rechteck keine Positionierung angegeben hat, wird es zum übergeordneten Container oder zum orangefarbenen Container gehen , der nach einer Positionierungsreferenz sucht. Wenn dieser Container keine Positionierungsreferenz hat, wird er den ganzen Weg nach oben gehen, bis er den Rand des Browserfensters trifft. Was Sie tun müssen, ist auf dem übergeordneten Container des Objekts absolut positioniert zu werden, Sie müssen Position relativ setzen. Sie müssen absolut und relativ in Verbindung miteinander verwenden, es ist eine wirklich seltsame Art, es zu tun, aber so ist es einfach. Ich weiß nicht, warum es so kompliziert sein muss, aber ich weiß, wie ich es kontrollieren kann. Werfen wir einen Blick hier auf unseren Code. Gehen Sie in den absoluten Positionierungsunterrichtsordner und kopieren Sie einfach alles und fügen Sie es in Ihr CSS ein, und dann werden wir einige dieser kommentierten Codezeilen durchlaufen. Jetzt ist die erste, zu der du kommen wirst, diese Position relativ, lassen Sie sie jetzt in Ruhe. Gehen wir runter zu dieser Moozedoo-Linie hier. Wenn wir das auskommentieren, wird es die absolute Positionierung auf diesen kleinen Charakter hier anwenden, diesen Kerl. Da ist er, und sein Element wird anfangen, das DOM zu durchsuchen , bis es ein anderes Element findet, das Positionierung angewendet hat, ein Element, das sein übergeordnetes Element ist. Es gibt keine anderen Elemente mit dem angegebenen momentan, also wird es im Grunde den ganzen Weg bis zum Browserfenster gehen, also schau dir das an, da geht er. Er folgt diesen Richtungen, unten Null links drei, wenn sie abhaken, er geht, er hat keine Positionierung in Falte alle. Lassen Sie mich Ihnen zeigen, wie es mit Position relativ aussieht, und schalten Sie das aus. Mit Position relativ nimmt er immer noch einen Platz im DOM ein, aber wenn ich so etwas wie den Abstand von unten ändere, lass uns 100 Pixel verwenden, du wirst eine Bewegung sehen und du würdest denken, dass dies zulassen würde , um sich zu bewegen, da sie zentriert ist. Aber das tut es nicht, weil sein Element immer noch im DOM direkt hier existiert, aber es wird nur hier angezeigt. Aber etwas bizarres über die relative Positionierung, und ich habe keine wirklich gute Verwendung dafür gefunden, ehrlich gesagt, abgesehen davon, dass es als übergeordnete Container-Positionierungsklasse für die absolute Positionierung verwendet wird , mal sehen, wie diese zwei arbeiten zusammen. Hier ist er mit absoluter Positionierung angewendet, wenn wir gehen bis zu dem Element, das wir wollen, dass er referenzieren, die in diesem Fall ist der Held, und wir setzen Position relativ in ihrem Raum. Jetzt sucht er den ganzen Weg hoch, bis er das findet und dann von dort sagt er okay, ich gehe unten Null, links drei Prozent, so finden wir seine Position. Wir können jetzt hier rüber gehen und diesen Zeilentext im Held gegen Held auskommentieren. Da gehen wir hin, und er wird hingehen, wohin er auch gehen soll. Ich hoffe, dass das die absolute Positionierung ein wenig erklärt, ich werde Ihnen auch hier unten ein weiteres Beispiel zeigen. Lassen Sie uns mit fixierter Positionierung wirklich schnell herumspielen. Dies ist nicht Teil des Projekts, aber es könnte etwas Spaß für Sie sein, zu überprüfen. Wir werden unsere Navbar hier nehmen, lasst uns einen klebrigen Header daraus machen. Wir tun Position fixiert, erinnern Position fixiert funktioniert nur oben und unten im Browser-Fenster, und es kann nur das Browser-Fenster für die Positionierung referenzieren , so dass Sie es nicht mit relativer Positionierung verwenden. Du hast gesehen, dass es verschwunden ist, wir müssen ihm einen Z-Index geben, also hast du einen X-Index, der von links nach rechts ist, einen Y-Index, der von oben nach unten ist, ein Z-Index kommt bei Null heraus. Dies ist gerade auf die Nullposition gefallen, und wir müssen es an die Position eines oder höher verschieben , damit es über dem Rest des Inhalts liegen kann, und dann müssen wir diesem nur die Breite von 100 Prozent geben, damit es diese Sicherung füllen kann, Also jetzt haben wir einen klebrigen Header. Eine Sache, die Sie bemerken, ist, dass, da dies aus dem DOM gezogen wird, es dieses obere Bild überhaupt nicht nach unten schiebt, also wenn ich das ausschalten, zum Beispiel, werden Sie feststellen, dass es springt, und jetzt schiebt es dieses Heldenbild nach unten, so dass etwas zu beachten ist, wenn Sie es auslegen, müssen Sie für was auch immer diese Entfernungen zulassen, aber wie auch immer, das ist ein letztes Experiment dort, Sie können damit selbst spielen. Was wir tun werden, ist hier runter zu gehen und eine absolute Positionierung zu verwenden, um diese kleinen Bandkarten wie das Design aussehen zu lassen, so. Sie haben ein halbtransparentes Rechteck mit ein wenig Informationen darin. Wir beginnen mit der Kommentierung der Bandkarte, schauen wir uns das an, nichts passiert wirklich, nichts sollte wirklich, es legt nur die Höhe fest, macht es Position relativ, was uns dazu bringt, absolute Positionierung zu verwenden und legt eine Marge drauf. Lassen Sie uns die Titelleiste hier machen, aber kommentieren Sie die absolute Positionierung für jetzt. Sie sehen, dass es hier unten gerendert wird, es soll oben sein, wir werden absolute Positionierung verwenden, um es oben auf das Bild zu setzen. Lassen Sie uns ein paar dieser anderen Stile hier, Titelleiste, Bandname, Sie werden sehen, dass es einen Float gibt, denn wir haben einen Titel auf der linken Seite und eine Nacht auf der rechten Seite, also hier ist die Nacht, sehen Sie, dass es richtig schwebt, so dass sollte nach rechts gehen, und da geht es, jetzt lasst uns Position absolut auskommentieren und sehen, was passiert. Jetzt kann all dieser Inhalt aus dem DOM gezogen werden und seine Nachbarn hier innerhalb dieses div überlappen. Wirklich schnell, nur weil ich dieses nach Hause fahren möchte, hat dieser Containerblock hier relativ positioniert, und dann kann alles in ihm mit einer absoluten Position es für die Positionierung referenzieren, so dass Sie sehen, dass wir hat unten Null genau dort, und das klebt an der Unterseite rechts dort. Jetzt lasst uns wirklich schnell diesen Stil bekommen und sie nach rechts schweben lassen, das sollte alles ziemlich alt sein, inzwischen gehört. Ich werde diesen Dingen etwas Hintergrundfarbe hinzufügen, und wir werden den Header stylen, Schlüssel dort. Nun, hier ist etwas Interessantes in der Kopfzeile oder ein kleiner Trick, den ich verwendet habe, ich lege den ganzen Weg um diesen Header herum, und es ist innerhalb einer Box, die Padding hat. Aber ich wollte, dass sich das Lila bis zum Ende dehnt, also musste ich Negativmarge verwenden. Werfen Sie einen Blick auf diesen Trick, jederzeit, wenn Sie brauchen, können Sie einen negativen Rand verwenden, sehen Sie diese negative 20 Pixel? Lassen Sie uns das auf Null setzen, und Sie können das Standardverhalten sehen, sehen Sie, dass es diese hässliche Lücke hat. Indem ich negative Marge verwende, kann ich sie über die Marge verlängern. Das ist ein wenig konterintuitiv, aber es ist ein toller kleiner Hack. Wir haben diese Boxen, lassen Sie uns eine Breite und einen Schwimmer anwenden, damit wir diese Dinge so aufstellen können, wie sie sollten. Ein wenig Styling für den Preis, stylen Sie die Beschreibung, da gehen wir, es fängt an, gut aussehen, und dann endlich haben wir diesen ganzen Container-Stil. Diese sind alle gestylt, lasst uns hier wieder nach oben gehen und die Schwimmer machen , dann sollten wir unser Homepage-Layout fertig haben. Mond. Sie könnten so etwas reproduzieren, ich meine, definitiv herumgraben, damit spielen, wissen, wie es funktioniert, brechen, beheben, aber basierend auf dem, was Sie in diesen Lektionen gelernt haben, könnten Sie diese Art von -Layout. Vielleicht wird es nicht schnell, schmerzlos und einfach, aber Sie haben definitiv die Werkzeuge, um es zu tun, und wenn Sie es ein paar Mal tun, wird es Sinn machen. Nehmen wir nun, was wir hier haben und verwenden und recyceln Sie es, um schnell den Rest unserer Seiten einzurichten. 9. Wiederverwendung für Geschwindigkeit: Das Tolle an Code ist, dass Sie ihn, sobald Sie ihn geschrieben haben, wiederverwenden können. Wir haben ein paar Elemente auf dieser Seite, die die Kopfzeile, die Fußzeile, den Hintergrund hinter diesem mittleren Abschnitt wiederholen . Lassen Sie uns diese Dinge auf unsere nächsten beiden Seiten kopieren, um einen Sprung auf das Erstellen zu bekommen. Öffnen Sie Experience Dot HTML aus den Startdateien, es ist leer, aber was wir hier tun, ist die wiederverwendbaren Teile der Website zu greifen. Also greifen wir den Doc-Typ-HTML-Kopf, wir verwenden das gleiche Zeug dort, Körperklasse, zu Hause, wir werden zu Erfahrung ändern, aber alles von, lassen Sie uns einfach den Header für jetzt machen. Vom Doc-Typ bis zur Kopfzeile kopieren Sie das und fügen Sie es hier ein, und Sie wissen, was meine Augen die Fußzeile ergreifen werden, weil wir das benutzt haben. Also lassen Sie uns den engen HTML und den ganzen Weg bis zur Fußzeile bekommen, und wir können sagen, dass wir die richtige Menge an Code geschnappt haben , weil sehen, wie die Klammern alle übereinstimmen, also haben wir unsere Boxen genau richtig aufgereiht. Nun, lasst uns dies in Erfahrung ändern. Ich weiß nicht, ob Sie sich erinnern oder nicht, aber wir haben ein paar Stile in unserem Stylesheet dafürgeschrieben unserem Stylesheet dafür , einen anderen Helden für die Erlebnisseite bietet Erfahrungen und wir können das gleiche für die Lage tun. Mit dem gleichen Code, wir werden nur das Bild im Hintergrund austauschen. Werfen wir einen Blick auf das, was wir hier haben. Ich werde das neu laden, um zu erleben, wir haben unsere Kopfzeile, wir haben unsere Fußzeile. Lassen Sie uns dies ändern, so dass es anzeigt, dass wir uns auf der Erlebnisseite befinden. Hier habe ich diese aktive Klasse. Aktiv ist derjenige, der die Linie unter der Seite setzt, auf der wir sind, also wenn ich das in den Erlebnis-Link ändere, gehen Sie. Jetzt haben wir eine Möglichkeit zu sagen, auf welcher Seite wir sind. Welche anderen Sachen können wir uns ausleihen? Der ganze Heldenbereich ist der gleiche, also lasst uns das ausleihen, wir haben Held den ganzen Weg hin, wo schließt er sich? Genau da, und geh einfach und steck das rein. Sehen Sie sich alles noch an, damit wir wissen, dass wir auf der richtigen Ebene der Boxen sind. Also haben wir unseren anderen Hintergrund und wir können dieses Zeug einfach nach Bedarf für die Kopie austauschen , die wir brauchen. Also brauchen wir das Moozedoo-Logo nicht, wir brauchen dieses HR nicht mehr, wir brauchen keinen Ticket-Button mehr, und wir brauchen den kleinen Charakter nicht mehr. Alles, was wir brauchen, ist diese Schlagzeile. Für einen Blick auf unser Design comp, wir können die Schlagzeile davon greifen, da gehen wir. Also einfach so, wir haben eine ganze Seite Setup und dann müssen wir natürlich einige Inhalte in der Mitte hier machen, aber nehmen wir das an, da unsere andere Seite oder Standortseite die gleichen Arten von Seitenlayout bietet, können wir wirklich schnell bekommen, dass in der Schlange zu kaufen Kopieren all dies in unsere Standortseite. Alles, was wir tun müssen, ist, diese aktive Klasse in Position zu ändern und diese Körperklasse in Position zu ändern, und da gehen wir. So können wir Layouts wirklich schnell duplizieren, sobald wir etwas von dieser Kopie herausgefunden haben. Lassen Sie uns den mittleren Teil der Erfahrung machen, das letzte, was ich Ihnen zeigen wollte, ist, wie Sie Float geheime Galerie verwenden können. Gehen Sie zum Ordner „Extras für Lektion 10“, und ich habe den Inhalt für beide Seiten vorbereitet. Schauen wir uns die Erlebnisseite an. Schnappen Sie sich alles von Held, gut schnappen Sie sich einfach alles, weil es nur der Hauptinhalt ist, und wir werden das in unsere Erlebnisseite einfügen. Wir gehen über Held, wir sollten alles von dem Helden und der Mitte und alles bekommen. Es sieht so aus, als ob unser Einzug hier ein wenig auseinander gefallen ist, also können Sie Befehl, geschweifte Klammer links und Einzug 1 drücken, und Sie können Befehl geschweifte Klammer darin drücken, auf die andere Weise. Also werde ich das auch wieder einrücken, um alles aufzurichten. Dies mag lächerlich OCD erscheinen, aber ich sage Ihnen, es wird Ihnen bei Ihrer Codierung helfen, zu erkennen, wie viele Boxen in Ihnen sind. Also speichere ich das und werfe einen Blick in den Browser, aber die Erlebnisseite, und ich habe diese verschiedenen Funktionen hier. In unserem Layout sehen sie wie Kacheln aus oder sind sie wie ein Galerie-Stil-Layout, so dass wir diesen Effekt leicht erreichen können, indem wir Floats verwenden, und im Gegensatz zu unserem zweispaltigen Float, den wir vorher hatten, können wir sie alle auf Float links, und wenn sie die Hälfte der Breite haben, die ihr übergeordneter Container, werden sie nur alle stapeln. Aber ich zeige Ihnen einen wirklich ordentlichen CSS-Selektor, den Sie verwenden können, um dabei zu helfen. Gehen wir und greifen Sie die Stile aus diesem Ordner Lektion 10, wählen Sie sie alle aus, kopieren Sie, gehen Sie zu unserem Stylesheet, das genau hier ist. Fügen Sie sie ein, wenn wir den Pull-Text auskommentieren, das wird uns diesen Text hier geben. Es ist nicht viel los, nichts, was man nicht herausfinden konnte, nur einige normale Schriftarten. Lassen Sie uns die Funktion auskommentieren, das wird anfangen, etwas Styling zu diesem zu verleihen. Schauen wir uns an, was wir hinzugefügt haben, die Funktion, die wir eine Breite hinzugefügt haben, die diese erlaubt. 10. Danke!: Danke, dass du meinen Skillshare Kurs genommen hast. Ich hoffe, du hast eine Menge davon rausgeholt. Wenn Sie Vorschläge, Kommentare, Kritik haben, hinterlassen Sie mir bitte eine Nachricht und ich würde es lieben, wenn Sie mir eine positive Note hinterlassen könnten. Wenn Sie Ideen für zukünftige Themen haben, würde ich diese auch gerne hören. Viel Glück, und wir sehen uns da draußen auf Skillshare.