CSS angewandt: Stil, Formatierung und Funktionalität hinzufügen

1. Einführung: Hey, alle. Willkommen bei CSS Untätigkeit. Heute werden wir uns CSS oder Cascading Stylesheets ansehen und wie sie auf Inhalte angewendet werden können. Sie können manchmal wie schwarze Magie erscheinen, aber wir werden uns die grundlegenden Regeln ansehen, die CSS zugrunde liegen und es Ihnen leicht machen, sie auf Ihre Inhalte anzuwenden. ob Sie Entwickler oder Designer sind, ob Sie es erlebt haben oder nicht, dies ist eine gute Klasse für Sie. Wir werden die Grundlagen schnell abdecken, um alle auf dem Laufenden zu bringen , und wir werden von dort vorwärts gehen. Ich werde alles bereitstellen, was Sie für die Klasse, In-Links, Ressourcen und Online-Arbeitsbereich benötigen , und wenn Sie Erfahrung haben, wird es Dateien geben, die Sie herunterladen und so arbeiten können, wie Sie es bevorzugen. Die ganze Arbeit, die wir heute machen, wird in CSS sein. Ich werde Ihnen ein HTML-Dokument zur Verfügung stellen, aber Sie müssen sich keine Gedanken darüber machen, es zu bearbeiten. Wir beginnen alle mit dem gleichen Inhalt und enden mit etwas ganz Ihrem. Im Mittelpunkt des Projekts werden wir alle auf dieselbe Webseite hinarbeiten. Es wird poliert und gestylt und ein großer Bezugspunkt zu vergleichen und Fragen von anderen Schülern in der Klasse zu stellen, um zu sehen, was Sie falsch gemacht haben könnten. Danach werde ich Ihnen noch ein paar Werkzeuge geben und dann machen Sie sich auf eigene Faust. Nutzen Sie Ihre Phantasie und sehen Sie, was Sie mit dieser Webseite tun können. Es ist erstaunlich zu sehen, was mit genau dem gleichen Inhalt, ein wenig CSS und Kreativität schaffen kann. Ich freue mich, zu sehen, was Sie am Ende der heutigen Klasse tun können. 2. Wie du das Projekt starten kannst: Wir werden CodesAndBox.io verwenden, um das heutige Projekt schnell und einfach zu überspringen. Wenn Sie genügend Entwicklungserfahrung haben, dann arbeiten Sie lieber in Ihrer eigenen lokalen Umgebung, zögern Sie nicht, die beiden bereitgestellten Dateien herunterzuladen und zu bearbeiten, wie Sie sich am wohlsten fühlen. Sobald die Klasse abgeschlossen ist, können Sie sie in CodeSandBox hochladen oder sie irgendwo anders platzieren, um Ihren Fortschritt zu teilen. Von hier aus gehe ich davon aus, dass du mit mir folgst. CodeSandBox können wir alle auf der gleichen Seite beginnen , indem wir den Link für das Starterprojekt zur Verfügung gestellt. Sobald Sie eine dieser Dateien bearbeiten, erhält Ihr Projekt eine brandneue URL und wird für Sie einzigartig. Wir werden diese Tatsache nutzen, um es Ihnen zu erleichtern, unser Projekt zu teilen, wann immer Sie Fragen haben oder wenn Sie bereit sind, Ihr eigenes Endergebnis zu zeigen. So sollte Ihr Projekt aussehen, sobald Sie unserem Starterlink gefolgt sind. Es gibt nur ein paar Dateien im Projekt, package.json, die wir für heute ganz ignorieren werden, mach dir keine Sorgen darüber, index.html, wo all unsere Inhalte leben, und styles.css, die im Stile-Ordner für den Fall Es ist versteckt. Jetzt werden wir uns den Inhalt der HTML-Datei in Kürze ansehen, aber zuerst möchte ich alle daran erinnern, wir nichts in index.html bearbeiten werden. Unsere ganze Arbeit ist heute in styles.css erledigt. Das bedeutet, dass unabhängig davon, wie unterschiedlich, komplex oder völlig einzigartig das endgültige Projekt jedes ist, sie basieren alle auf buchstäblich demselben Inhalt. sehen, wie vielfältig Ihre CSS-Präsentation eine Seite machen könnte , wird veranschaulicht, wie mächtig das, was wir heute lernen, ist. 3. Ein kurzer Blick auf unseren Inhalt: Obwohl wir nichts in dieser HTML-Datei ändern werden, werden wir uns sehr darauf beziehen. Das CSS verfügt über viele Werkzeuge für das Styling von Inhalten sowohl weit verbreitet als auch sehr präzise. Aber sie alle verlassen sich darauf, wie Ihr HTML-Inhalt tatsächlich geschrieben wird. Werfen wir einen kurzen Blick darauf, wie unsere Inhalte angelegt sind, jetzt, machen Sie sich keine Sorgen über das Auswendiglernen all diese Details, die wir gerade jetzt für ein großes Bild verstehen, ich werde spezifische Details später für Sie aktualisieren, sobald sie relevant werden. Sie können immer in Ihrem eigenen Tempo auf die HTML-Datei zurückverweisen. Der Inhalt selbst enthält auch Hinweise und Details, die wir möglicherweise nicht direkt in diesen Videos behandeln. Gehen Sie weiter und lesen Sie durch, während wir arbeiten zusammen, Es ist wichtig, sich daran zu erinnern, dass alles in HTML verschachtelt ist. Zum Beispiel öffnen wir hier das Header-Element und hier schließen wir es. Alles dazwischen wird innerhalb des Headers betrachtet, auch wenn es nichts Visuelles auf der Seite gibt, um Ihnen wirklich darüber zu erzählen, aber ohne den Code zu betrachten HTML Ihnen Hinweise zum Verschachteln von schieben verschachtelte Elemente von weiter und weiter, um es leicht zu beurteilen auf einen Blick zu machen, wie Sie hier sehen, bedenken Sie, dass Elemente können mehrere Ebenen tief verschachtelt werden. Direkt unter der Kopfzeile haben wir ein Navigationselement, das ein UL- oder Ungeordnetes Listenelement enthält, das eine Reihe von LI, Listenelementen enthält, jedes Listenelement hat sogar einen Link in ihnen, obwohl sie nicht geteilt sind in zwei separaten Zeilen und eingerückt. Um zu verhindern, dass unglaublich große HTML-Dateien sinnlos lang sind. Viele Male werden einfache Inhalte, wie ein Link innerhalb eines Listenelements, einer einzigen Zeile aufbewahrt, wie Sie hier sehen. 4. CSS Toolbox: Elemente, Kurse und IDs: Es gibt drei primäre Methoden zum Anwenden von CSS, die wir heute verwenden werden, Elemente, Klassen und IDs. Diese drei Methoden zum Schreiben von CSS-Anweisungen können zusammen verwendet werden, um unsere Stile mit Präzision und Logik anzuwenden, sobald wir verstehen, wie sie funktionieren. Aber machen Sie sich keine Sorgen über das Hinzufügen eines CSS, das ich in diesem Abschnitt tippe, wir werden es sowieso in einem Moment löschen. Ich werde dich wissen lassen, wenn wir anfangen, Code zu schreiben, den wir behalten wollen. Lassen Sie uns zuerst über Elemente sprechen. Ein Element ist die am weitesten verallgemeinerte Methode, CSS auf Inhalte anzuwenden. So gut wie jeder Inhalt auf einer HTML-Seite kann als stilbares Element betrachtet werden. Schauen wir uns den ersten Absatz auf der Seite unter dem R-Content-Header an. Der Text wird in ein p-Tag für Absatz umbrochen. Dieses p-Tag ist unser Element. Wenn wir CSS schreiben würden, um alle Absätze auf der Seite größer zu machen, könnten wir dieses allgemeine Element verwenden, um dies so zu tun. Als Nächstes haben wir Kurse. Was wäre, wenn wir nur einige unserer Absätze, aber nicht alle, einige Stile hinzufügen wollten? Klassen sind wiederverwendbare Namen, die wir Stück für Stück auf unseren Inhalt anwenden können. Sie lassen uns selektiver auswählen und auswählen als nur auf jedes Element auf der Seite ausgerichtet zu sein. Ich habe Klassen im gesamten HTML-Inhalt hinzugefügt, aber lassen Sie uns sie in Aktion sehen. Der erste Absatz in jedem Abschnitt hat eine Klasse von first para. Wir können das verwenden, um diese Absätze, und nur diese Absätze, selektiv rot zu drehen . Beachten Sie, für CSS verwenden wir einen Punkt vor dem Klassennamen, um unserer Datei mitzuteilen, dass es sich um eine Klasse handelt, die wir aufrufen. Wir haben unserem Element nichts extra hinzugefügt. Endlich haben wir Ausweise. Stellen Sie sich eine ID wie eine Klasse vor, die Sie nur einmal pro Seite verwenden können. Nun, eine Klasse ist nützlich, weil sie wiederverwendbar und flexibel ist und ID nur darum geht, einzigartig zu sein. Sie können sicher sein, dass alle Stile, die Sie auf eine ID anwenden, immer nur für genau diesen Inhalt gelten. Wir werden später auf Details eingehen, aber IDs sind unglaublich nützlich, wenn Sie sicherstellen müssen , dass ein bestimmter Inhalt einen einzigartigen Stil hat, selbst wenn andere Klassenstile in Konflikt stehen. Während Klassen einen Punkt erhalten, um sie auseinander zu setzen, verwenden IDs ein Hash-Symbol wie dieses. 5. Großes Bildaufteilung: Lassen Sie uns jetzt anfangen, unser Projekt zu stylen indem wir uns einige der weitesten Änderungen ansehen, die wir vornehmen können. Es sollte bereits ein Element in Ihrem Stylesheet das einzige CSS geben, das ich für Sie geschrieben habe, bevor die Klasse begann. Es wählt das Körperelement aus, das ein Element ist, das alles, was auf der Seite sichtbar ist, enthält , und setzt die Schriftart auf Arial, mit einem Fallback auf jede Sans Serif Schriftart wenn Arial aus irgendeinem Grund in Ihrem System fehlt. Wir beginnen mit dem Hinzufügen zu diesem Element. Für jetzt fügen Sie CSS neben mir hinzu, pausieren Sie das Video bei Bedarf als eine Möglichkeit Ihre neuen Codierungsfähigkeiten zu lernen und zu üben. Sobald wir einen bestimmten Punkt in der Klasse erreicht haben, werde ich Sie wissen lassen, dass die Zeit gekommen ist, Ihre eigene kreative Note hinzuzufügen und das Projekt komplett zu Ihnen zu machen. Bis dahin arbeiten wir alle auf das gleiche Ziel hin. Standardmäßig fügt unser Browser ein wenig Leerraum um unseren Inhalt hinzu, so dass er nicht direkt an den Rändern des Fensters reibt. Obwohl das hilfreich ist, möchten wir unsere eigenen Regeln schreiben, wie man diesen Inhalt anlegt, lassen Sie uns den Rand und das Auffüllen aus dem Körperelement wie folgt entfernen. Das wird nicht sofort gut aussehen, aber wir bauen etwas auf. Jetzt gibt es einige Inhalte, die auf der ganzen Seite verstreut waren, die ich ein wenig Aufmerksamkeit verdient hatte, wir können den Klassennamen Hervorhebung verwenden , den ich bereits zu diesen Bits hinzugefügt habe. Es gibt viele Möglichkeiten, Ihren Inhalt zu betonen, aber im Moment, lassen Sie uns es fett machen, machen wir es kursiv, und machen es unterstrichen, da, das sollte schwerer zu verpassen sein. Wir haben auch einige Inhalte, die auf den tatsächlichen Code als Beispiele verweisen, um Ihnen zu helfen, zu lernen. Das CSS ist hier etwas komplizierter und wir brechen es in den kommenden Lektionen gründlicher auf. Denn jetzt folgen Sie und notieren Sie sich auf alles, was keinen Sinn macht sofort. Wir werden zwei Klassen hinzufügen, Code und Code Kommentar. Wir möchten, dass Code so aussieht, als wäre er direkt aus unserem Code-Editor, also werden wir ihn formen und färben, um hervorzuheben. Da gehen wir, das sieht ein wenig mehr wie unser Code-Editor aus, um es auseinander zu bringen. Jetzt sind Codekommentare kein funktioneller Code, sondern kleine Tipps oder Hinweise für mich darüber, was außerhalb der Beispiele in Ihrem Code geschehen sollte. Um sicherzustellen, dass wir nicht verwirrt werden, lassen Sie uns diese grün drehen und sie optisch leicht trennen. 6. Anpassen: Als nächstes lassen Sie uns unseren Header ein wenig mehr wie ein tatsächlicher Header aussehen. In der letzten Lektion haben wir einige Layouts und Farben auf die Elemente in unserem Inhalt mit einer Code- und Code-Kommentarklasse angewendet . Lassen Sie uns auch einige Farb- und Layout-Details in unsere Kopfzeile bringen. Konzentrieren wir uns zunächst auf den Titel der Seite, das H1-Element. HTML verwendet eine Reihe von Header-Elementen: H1, H2, H3 usw. So kann der Inhalt viele Ebenen von Bedeutung für ihre Header enthalten. Normalerweise sehen Sie ein einzelnes H1 auf einer Seite, obwohl es keine zwingende Einschränkung dafür gibt. H2 kann verwendet werden, um einen bestimmten Abschnitt des Inhalts zu notieren. Jeder der größeren Abschnitte auf unserer Seite, wie unser Inhalt, ist in H2. Wenn es sich um weitere Abschnitte innerhalb dieses Themas handelt, können Sie H3s usw. verwenden. Wie das body-Tag haben Browser normalerweise Standardabstände zu diesen Headern hinzugefügt , auf die sie zurückgreifen, wenn Sie keine spezifischen Regeln auf Ihr CSS schreiben. In diesem Fall werden wir unseren H1-Elementen genau sagen , wie viel Marge wir es haben wollen. Wir wollen zentriert sein, und wir wollen eine bestimmte Farbe haben. Jetzt möchten wir, dass der kleinere Untertitel übereinstimmt. Es befindet sich nicht innerhalb des H1, sondern vielmehr sein eigenes Absatzelement. Lassen Sie uns dieses Element wie zuvor anvisieren und wählt einige Stile aus. Wir wollen ein wenig größer, so dass es offensichtlich Teil des Titels ist visuell. Die Einheit, die ich hier verwende, ist eine relative Größe für Typografie-Elemente. Ich werde Ressourcen für zusätzliche Tiefe bereitstellen, um dies zu erforschen, aber im Moment, betrachten Sie nur 1,2 em bedeutet 120 Prozent der Größe, die Text normalerweise sein würde. Wir setzen hier auch den Rand und die Polsterung explizit ein, um den standardmäßigen Absatzabstand zu überschreiben. Lassen Sie uns einige cool aussehende blaue Farbe hinzufügen, und lassen Sie uns einen Rahmen hinzufügen, so dass wir die Oberseite vom unteren Rand des Titels trennen können. Jetzt sieht der Header ziemlich gut aus, aber ich denke, unser CSS hatte unten einige unbeabsichtigte Konsequenzen. 7. Den Fallout verstehen: Was ist passiert? Wir waren in der Lage, unsere Kopfzeile und Titel genau so zu gestalten, wie wir sie wollten, aber die Stile für den Untertitel haben sich durchgesetzt und wurden auf jeden Absatz auf der Seite angewendet. Das macht unsere Inhalte schwer zu lesen und verpasst völlig den Punkt, an erster Stelle einzigartige Header-Stile zu haben. Ob Sie es glauben oder nicht, dieser massive Grad an breit angewendetem Stil ist eines der größten Merkmale von CSS, kein Fehler. Deshalb werden sie Cascading Stylesheets genannt. Solange Sie die Regeln kennen, ist es viel einfacher, 1000 Absätze auf einer Seite mit dieser Kaskade zu formatieren, als jedes einzelne manuell auszuführen. Wie halten wir diese Kaskade ein? Es gibt ein paar Möglichkeiten, die wir über die Dauer dieses Kurses betrachten werden, aber die einfachste ist mit etwas, das Spezifität genannt wird. Anders als ein großer Zungenbrecher zu sein, um fünfmal schnell zu sagen, ist Spezifität eine der größten Methoden, CSS zu schreiben , um sich genau so zu verhalten, wie Sie es wollen. Erinnerst du dich, wie wir vor ein paar Minuten über das Verschachteln gesprochen haben? CSS ist sich sehr bewusst, wie Ihr Inhalt verschachtelt ist, und so können wir Spezifität verwenden, um nur die verschachtelten Elemente auszuwählen, die wir wollen. Sehen Sie, wie unsere h1- und Absatz-Tags innerhalb unseres Header-Tags verschachtelt sind? So spiegeln wir das in unserem CSS wider. Verwenden Sie ein Leerzeichen zwischen den Elementen, um ein beliebiges h1, das sich innerhalb eines Header-Elements befindet, und jeden Absatz, der sich innerhalb eines Header-Elements befindet, zu markieren. Wir haben nur ein Header-Element in unserem Inhalt. Dieses CSS zielt genau auf das ab, was wir schnell und effizient wollen. 8. Deep: Bevor wir weitermachen, lassen Sie uns ein wenig über Spezifität sprechen. Hände von der Tastatur wieder, keine Notwendigkeit, irgendwelche der CSS hinzuzufügen, die ich Ihnen hier zeige. Es wird nur Dummy-Code sein, um zu erklären, wovon ich rede. Wir holen das Schreiben von echtem CSS aus dem nächsten Abschnitt zurück. Wir haben zwei Beispiele für das Schreiben von Spezifität gesehen, beide unsere Stile auf einen beliebigen H1 oder einen Absatz innerhalb eines Header-Elements beschränken. Denken Sie daran, wenn wir 10 verschiedene Header auf dieser Seite hätten, würden sie alle diese neuen Regeln befolgen, aber welche anderen Tools sind innerhalb der Spezifität verfügbar? Erstens, mit welcher Verschachtelungsebene Sie beginnen, ist willkürlich. Während wir Header H1 hier haben, könnte es auch als HTML, Körper, Header, H1 geschrieben werden. Alles auf dieser Inhaltsseite befindet sich innerhalb der HTML- und body-Tags, aber wir müssen das nicht tun. Es ist größtenteils der gleiche Effekt für unser aktuelles CSS. Es ist jedoch wichtig zu wissen, dass je spezifischer Ihr CSS ist, desto mehr Wert darauf gelegt wird. Zum Beispiel kann ich die Schriftgröße unseres H1 oben festlegen und sie dann hier unten mit spezifischeren CSS vollständig überschreiben und jetzt, egal wie ich die weniger spezifische Regel geändert habe, spielt es keine Rolle. Es gibt nicht viele Situationen, in denen Spezifität wie diese Ihr Werkzeug zum Auflösen von Stilkonflikten sein sollte, aber es kann ein großartiger Ort sein, um nach unbeabsichtigten Fehlern zu suchen. Als nächstes schauen wir uns an, wie Klassen und IDs in dieses Bild passen. Ich habe sie in der Reihenfolge des Elements eingeführt, dann Klasse, dann ID, aus einem Grund. Wenn Sie eine Formatvorlage für ein Absatzelement schreiben, dann eine andere Formatvorlage für unsere Klasse für dieses Absatzelement, gewinnt die Klasse an Bedeutung. Außerdem gewinnt jeder Stil, der an eine ID angehängt ist, sowohl für Element als auch für Klasse. Sehen Sie hier, Sie können eine Kombination aus Elementen, Klassen und IDs verwenden , wenn Sie eine eindeutige Spezifitätsreihenfolge erstellen, wie wir hier oben sehen. Wir werden diese Würmer heute jedoch nicht öffnen, es gibt mehrere Methoden dafür, wie das Schreiben von gutem CSS aussieht, aber heute halten wir es einfach. Wenn Sie im Rahmen Ihrer Anpassungen mit komplizierter Spezifität herumspielen möchten, daran, dass einzelne Elemente weniger wichtig sind und Klassen, die weniger wichtig sind als IDs. Je spezifischer Ihr CSS so etwas zulässt, desto wichtiger wird es in Betracht gezogen. Das Hinzufügen von mehr Spezifität zu einem Stil, wenn etwas verwirrend oder widersprüchlich ist, ist die nukleare Option, sollte es nicht missbrauchen. Schließlich eine Notiz zu etwas, das wie Spezifität aussieht, aber nicht. Verwendung eines Kommas wie dieses, zielt nicht auf ein H3 innerhalb eines H2 innerhalb eines H1. Kommas machen dies zu einer Liste, die CSS mitteilt, dass alle geschriebenen Regeln für alles in dieser Liste gelten sollten. Es ist eine schnelle Hand Weg, anstatt H1, H2, H3 zu schreiben , es spart Ihnen Zeit und Platz und Sie können einheitlichen Code auf diese Weise anwenden. Jetzt kratzen wir kaum an der Oberfläche aller Nuancen in Spezifität. Stellen Sie also sicher, dass Sie Fragen stellen und sich die zusätzlichen Materialien ansehen, die mit dem Kurs geliefert werden , um dieses sehr wichtige Thema besser zu verstehen. 9. Arbeiten mit Listen und der Navigation: Bewaffnet mit einem neuen Verständnis der Spezifität, lassen Sie uns beim Styling unserer Seitennavigation vorantreiben. Listen sind sehr häufig und sehr leistungsfähige Art der Strukturierung der Navigation für Webseiten und Ressourcen. Davon abgesehen, kommen sie mit noch mehr Standardbrowserstilen als die meisten Elemente. Wir müssen dafür sorgen, dass wir das für unsere eigenen Zwecke rückgängig machen. Wie zuvor werden wir mit einem größeren enthaltenden Element beginnen und unseren Weg nach unten in verschachtelte Spezifität arbeiten. Wir sind dabei, im nächsten Abschnitt darüber zu sprechen, was dieser Anzeigeblockstil tatsächlich bedeutet, aber es hilft, die Bühne für unsere Listen jetzt zu schaffen. Hängen Sie sich für ein bisschen länger fest an diesem. Wir kommen dran, ich verspreche es. Wir möchten, dass diese Navigation breit ist, aber die Ränder des Browsers nicht so berührt, wie es jetzt ist. Wir setzen die Breite auf 98 Prozent und verwenden dann Ränder Unterstützung in der Mitte wie folgt. Insbesondere haben wir dem Browser gerade gesagt, dass unser Navigationselement Nullmarge an der Spitze, automatischen Rand auf beiden Seiten und 40 Pixel Rand am unteren Rand haben sollte automatischen Rand auf beiden Seiten . Schließlich müssen wir nur für den Fall explizit sagen, dass wir keine Polsterung wollen. Die grundlegenden Stile für die ungeordnete Liste selbst sind ziemlich einfach. Der letzte Stil, den wir gerade für dieses Element geschrieben haben, besagt, dass wir keine Aufzählungszeichen oder Kreise oder andere List-Symbole auf unsere Listenelemente anwenden möchten . Wir kümmern uns selbst um das Layout. Vielen Dank. Schließlich werden wir eine Reihe von Stilen zu den Links selbst in der Liste hinzufügen. Hier beginnt die Navigation von einer Liste zu einem korrekten Website-Layout zu wechseln. 10. Layouts und Bildquellen: Wenn wir uns aus dem Bereich von Klartext, Aufzählungspunkten und anderen typografischen Details bewegen , müssen wir uns einen anderen Aspekt von CSS, Inhaltslayout und Anzeigeformaten ansehen . Es gibt einige wichtige Arten von Anzeigewerten, die wir regelmäßig verwenden. Wenn wir auf unser bereits geschriebenes CSS zurückblicken, haben wir sogar die ersten beiden. In unserem Navigationsmenü setzen wir die Links auf den Anzeigewert Block genannt. Ohne andere explizite Stile, bedeutet das, dass diese Elemente jetzt natürlich auf den geschriebenen neuen Zeilen beginnen und so viel Breite wie möglich in dieser Zeile einnehmen. Wir werden das bald mit mehr Stilen einschränken, aber ein Element mit seinem Anzeigeblock ist für viele moderne Layouts sehr üblich. In der Code-Klasse verwenden wir, um den Wert Inline-Block genannt anzuzeigen. Diese Anzeige ist ähnlich wie Block und wie wir Ränder und Muster hinzufügen können , um es zusammen mit einer Hintergrundfarbe. Es unterscheidet sich jedoch dadurch, dass die Elemente nicht natürlich auf einer ganz neuen Linie mit maximaler Breite beginnen . Es eignet sich hervorragend für das Hinzufügen von Stilen und benutzerdefinierten Layouts durch Inhalte, ohne die Textzeile oder die komplexen Layout-Funktionen zu brechen, genau dort, wo wir es verwendet haben, als wir es für unsere Code-Snippets getan haben. Es gibt viele zusätzliche Anzeigewerte, die Sie manuell festlegen können, einschließlich Tabelle, Listenelement und mehr. Viele davon sind der Standardwert mit ihrem jeweiligen Element, so dass Sie sich keine Gedanken über die Verwendung des Handbuchs machen müssen. Es kann gut sein, mit ihnen vertraut zu sein, wenn auch nur für den Fall. In der nächsten Lektion werden wir uns zwei der neuesten Anzeigeoptionen ansehen und wie sie das Spiel kraftvoll verändern, wenn es um CSS-Layout geht. 11. Floats oder Flex (und Raster!): Um die leistungsstarken neuen Tools zu verstehen, die uns in CSS zur Verfügung stehen ist es wichtig zu wissen, was bisher verwendet wurde. In den dunklen Zeitaltern von CSS war absolut alles in Tabellen. Stellen Sie sich vor, Sie besuchen Ihre bevorzugte moderne Website und versuchen dann, sie in einer Excel abelle neu zu erstellen. Kein glücklicher Gedanke. Tja, Tabellen haben immer noch ihren Platz für tabellarische Daten, Informationen. Sie sollten nicht verwendet werden, um das Gesamtlayout einer Seite zu strukturieren. Um diese schreckliche Zeit hinter uns zu bringen, fingen wir an, etwas namens Schwimmer zu benutzen. Die beabsichtigte Verwendung für einen Float-Wert in CSS war ein einfaches Layout, wie ein großer Absatz um die Seite eines verwandten Bildes. Denken Sie wie ein Lehrbuch, zum Besseren oder Schlimmerem, sie sind in der Lage, viel mehr als das zu tun. Mal sehen, was passiert, wenn wir Float links zu unseren Navigationslinks hinzufügen. Für eine einzelne Zeile CSS ist das nicht schlecht. Sie sehen viel mehr wie Knöpfe aus und passen in eine Reihe. Das Hauptproblem bei Floats ist, dass, weil sie nicht für die Strukturplanung gedacht waren, es viele Fänge und Probleme gibt, die Sie jedes Mal abdecken müssen, wenn Sie sie verwenden. Sehen Sie, was passiert, wenn wir die Größe unseres Fensters nur ein wenig ändern. Anstatt zu überlegen, wie man mit all den kleinen Details für die Verwendung von Floats auf offizielle Weise umgehen kann, werden wir weitermachen und uns eines der neueren Werkzeuge ansehen, die uns derzeit zur Verfügung stehen. Wenn Sie weiterhin in CSS lernen, muss es vielleicht eines Tages daran arbeiten, den Code eines anderen zu pflegen. Das Erlernen der Ins und Outs von Schwimmern wird wichtig sein. Sie sind immer noch in großen Projekten im Internet weit verbreitet. Nehmen Sie sich Zeit, um sich mit den zusätzlichen Kursmaterialien vertraut zu machen, wird Ihnen gut dienen. Lassen Sie uns jetzt über Flexbox sprechen. Dieser Anzeigewert war einer der mächtigsten, die CSS seit einiger Zeit hinzugefügt wurden, und ist der erste Schritt in einer neuen Ära der Design- und Layoutmethoden. Hier ist, wie es funktioniert. Sie deklarieren Anzeigeflex für das übergeordnete Element der verschachtelten Elemente, die Sie auslegen möchten, wie folgt. Sieht aus wie unsere Schwimmer. Aber unsere Inhalte haben viel besser Abstand gehalten und sehen, was passiert, wenn wir jetzt das Fenster verkleinern? [ unhörbar]. Das ist viel besser. Noch wichtiger ist, dass flex uns Zugriff auf einige sehr wichtige Layout-Tools bietet. Für unsere Navigation werden wir die Ausrichtung des Elements festlegen, die von oben nach unten zentriert ist, und die Ausrichtung des Elements, die von links nach rechts zentriert wird. Wir nutzen den Raum dazwischen für unsere Rechtfertigung, was ein täuschend mächtiger Wert ist. Es nimmt die erste und letzte Verbindung und setzt sie ganz am Anfang und am Ende des Leerzeichens. Anschließend berechnet er den verbleibenden Leerraum und platziert ihn gleichmäßig zwischen allen verbleibenden Elementen dazwischen. Der Versuch, das über Floats neu zu erstellen, wäre kompliziert und wahrscheinlich ziemlich zerbrechlicher Code zu pflegen. Es gibt noch viel mehr Werte für Flexbox, die ich Sie ermutige , bald in den zusätzlichen Materialien der Kurse zu recherchieren. Wir werden ein paar fortgeschrittene Anwendungen direkt am Ende der Klasse abdecken. Aber ein grundlegendes Verständnis ist für einen modernen Designer und Entwickler von unschätzbarem Wert. 12. Die Macht von CSS: Wir haben heute viel gedeckt. Guter Job, bis jetzt da drin zu hängen. Mit dem, was wir gelernt haben, gibt es überraschend wenig Arbeit zu tun, um die überwiegende Mehrheit der Inhalte, die noch auf der Seite sind, zu verwirklichen. Wir werden Elemente in Klassen verwenden, um schnell weitreichende Stile auf unserer Seite anzuwenden. Wenn wir uns index.html ansehen, die meisten unserer Inhalte in Abschnitte und Artikel verpackt, also lasst uns damit beginnen, diese zu stylen. Die meisten CSS sollten ziemlich vertraut aussehen. Wir setzen einen Anzeigewert von Block, eine Breite von 90 Prozent, um sicherzustellen, dass sich unsere Abschnitte nicht vollständig auf der Seite befinden, und wir haben den Rand eingerichtet, einschließlich Auto auf beiden Seiten, so dass sie in der Mitte der Seite statt auf der linken oder rechten Seite. Alle Artikel sehen ziemlich gut aus, lassen Sie gehen voran und behandeln den Inhalt in ihnen. Was wäre, wenn wir diese ersten Absätze in jedem Artikel auseinandersetzen würden, damit es im Vergleich zum Rest unserer Inhalte wirklich einzigartig aussieht? Dort gehen wir, ein erster Abschnitt für jeden Inhaltsartikel. Jetzt können wir auch schnell die verschiedenen Header sortieren. Anstatt sie nur als Klartext zu lassen, lassen Sie uns ein wenig Spaß haben und sie wirklich stilisieren. Wir gehen für eine Ordner-Registerkarte Art Erscheinungsbild zu gehen, so dass es auf einen kurzen Blick offensichtlich ist , welche Titel mit welchen Inhaltsabschnitten verbunden sind. Da gehen wir, das sieht besser aus. Lassen Sie uns auch den h3-Unter-Headern ein wenig Aufmerksamkeit schenken. Wir haben noch eine letzte Sache, bei der wir aufhalten müssen. Das zweite Bit Text oben auf der Seite, wenn wir index.html überprüfen, ist es nicht wirklich Teil eines Absatz-Tags, seine unter Spanne. Kein Wunder, dass unsere Styles nicht angewendet wurden. Ich habe aber eine ID darauf gelegt, also lasst es uns mit dem ausrühren. Da gehen wir, das sieht besser aus. Obwohl ich sie nicht für diese Klasse verwende, stellen Sie sicher, dass jedem Inhaltsabschnitt eine eindeutige ID zugeordnet ist. Verwenden Sie dies als Spezifitätswerkzeug, während Sie an Ihren eigenen Anpassungen arbeiten, und Sie können jeden Abschnitt ganz anders aussehen lassen. 13. Pseudo-Classes: Wir nähern uns dem Ende. Es gibt noch ein leistungsfähiges Set von Werkzeugen. Ich möchte jedoch eine Aktion zeigen, Pseudo-Klassen. Es gibt genug Pseudokurse und erstaunliche Tricks, um zwei oder drei ganze Kurse zu füllen. Aber lassen Sie uns die Grundlagen abdecken. Eine Pseudo-Klasse wird verwendet, um den Zustand eines Elements zu definieren. Es gibt zwei Pseudoklassen, die wir heute betrachten werden, um diese Definition zu klären. Die erste ist Hover. Wir werden die Hover-Pseudo-Klasse verwenden, um unseren Navigationslinks mitzuteilen , ihre Stile zu ändern wenn sie erkennen, dass die Maus des Benutzers über sie schwebt. Das bedeutet, dass der Standardstatus der Links nicht mit der Maus verbunden ist. Wenn dann Änderungen an der Hover, möchten wir einige Änderungen an den Stilen vornehmen. Das CSS selbst ist ziemlich einfach. Alles, was wir tun, ist Austausch der Hintergrundfarbe, Reihenfolge und Schriftfarbe und wir am Ende mit einem ziemlich coolen Knopf, der direkt mit dem Benutzer interagiert. Die Pseudo-Klasse ist nur, Doppelpunkt und dann der Typ der Pseudo-Klasse, In diesem Fall schweben. Nun, die zweite Pseudoklasse ist etwas weniger spannend, aber es ist sehr wichtig für die Präsentation. Diese Pseudo-Klasse wird besucht genannt. Ein Webbrowser verfolgt, welche Links Sie zuvor besucht haben. Standardmäßig sind nicht besuchte Links leuchtend blau, während die besuchten Links violett sind. Um sicherzustellen, dass unsere blauen Buttons nicht plötzlich einen violetten Farbton haben, , um verwenden wir besucht, umsicherzustellen, dass der Text weiß bleibt. Da gehen wir. Wenn Sie nun eine Regel wie diese mit einer Pseudo-Klasse verstärken, bei der Links standardmäßig bereits weiß sind, gibt es einen noch schnelleren Weg, dies zu tun. Anstatt die Regel frisch zu schreiben, fügen Sie sie einfach mit einem Komma hinzu. So wie das hier. Achten Sie darauf, einen zusätzlichen Blick auf die Klassenressourcen zu werfen und zu sehen welche anderen Pseudo-Klassen Sie aufspüren können, um Ihr Projekt wirklich auf die nächste Stufe der Anpassung zu bringen. 14. Leckeres Flexbox: Um Ihnen zu helfen, an einige kreative Ergänzungen zu Ihrem Projekt denken, habe ich eine Demo zusammengestellt, einige lustige Anpassungen auf eigene Faust. Um die Dinge einfach zu halten, sollten Sie Ihr benutzerdefiniertes CSS am Ende der Datei styles.css hinzufügen, in der wir gearbeitet haben, sobald Sie bereit sind, mit dem Programmieren zu beginnen. Zu Ihrer Referenz habe ich jedoch alle meine neuen Stile zu custom.css hinzugefügt. Mach dir keine Sorgen über die Mechanik des Hinzufügens eines weiteren CSS-Blattes. weiß nur, dass alles, was ich in custom.css geschrieben habe, dazu gebracht wird, die Stile zu überfahren, die wir zusammen in styles.css aufgebaut haben. Das macht es Ihnen leicht zu überprüfen und zu sehen, was der Unterschied ist, der meine benutzerdefinierte Version tatsächlich transformiert hat. Werfen Sie einen guten Blick durch den Inhalt und sehen Sie, was ich geändert habe, das Layout der Kopfzeile, die animierten Navigationsregisterkarten und vieles mehr. Sehen Sie, ob Sie mindestens eine Änderung auswählen können und dann herausfinden, wie ich es in custom.css gemacht habe. Eine wichtige Sache, die ich Ihnen zeigen möchte, ist, wie ich den Inhalt auf der Seite komplett neu bestellt habe. Das erste, was wir in meiner benutzerdefinierten Version sehen, sind zusätzliche Ressourcen, die der allerletzte Inhalt in einem freigegebenen Projekt sind. Wie würde ich das tun, ohne den HTML-Code tatsächlich zu ändern? Mit der Kraft der Flexbox. Zuerst habe ich den ganzen Körper so eingestellt, dass er Flex anzeigt, wodurch ich stark kontrollieren kann, wie alle einzelnen Abschnitte angelegt sind. Auch wichtig zu beachten, dass ich eine Flex-Wrap-Eigenschaft mit Werteumbruch hinzugefügt habe. Standardmäßig möchte flexbox alles in einer Zeile behalten und diese Seite über eine riesige horizontale Bildlaufleiste verfügen. Flex Wrap hügelt nur unsere Inhalte, die wir in der Tat umwickeln wollten, und bleiben Sie auf der Seite. Dann habe ich eindeutige IDs für jeden Abschnitt verwendet, um ihm eine Hintergrundfarbe und einen Bestellwert zu geben. Alle Elemente, die in einem Flexbox verschachtelt sind, wie diese Abschnitte im Flexbox-Körper, können mit diesem Bestellwert neu organisiert werden. Wie Sie sehen können, habe ich den Inhalt in einer neuen Reihenfolge vollständig über CSS gemischt und abgestimmt. Ich ermutige dringend, sich mit Flexbox zu befassen, bevor Sie Ihre eigenen benutzerdefinierten Arbeiten beginnen. Wenn Sie wirklich einen Spritzer machen wollen, ist die zusätzliche Kredit-Hausaufgaben das Auschecken etwas namens CSS-Grid. Ignorieren Sie alle Artikel, die über Flex versus Grid streiten. Flex behandelt Inhalte, die in einer Zeile angezeigt werden. Obwohl sich diese Reihe so umwickeln kann, wie wir es hier tun. Grid öffnet die Tür zu komplexen Layouts mit mehreren Zeilen und Positionen, ist aber normalerweise übertrieben für einfache Inhalte, wie wir es tun. Lassen Sie sich nicht in die Falle des Denkens saugen, dass es entweder oder ist. Wenn zu verstehen, wie man jedes zusammen verwendet, ist die beste Route vorwärts. Die CSS-Grid-Klasse von Rachel Andrews hier auf Skill-Anteil ist ein großartiger Ort, um zu beginnen. 15. Deine Ablauf und Schlussfolgerung: Es gibt so viel mehr über alle Tools zu lernen, die CSS zu bieten hat, aber Sie sind jetzt mit einem grundlegenden Verständnis der Regeln ausgestattet. Es ist an der Zeit, durch die Kursmaterialien zu schauen, nach Referenzleitfäden, Designideen und mehr zu suchen, um Ihre eigenen kreativen Designs zu unterstützen. Wenn Sie wirklich gerne an CSS arbeiten und daran interessiert sind , in mehr reale Anwendungen und Ideen einzutauchen, gibt es viele Orte, an denen Sie beginnen können. Zwei wichtige Grundlagen, die ich vorschlagen kann, sind Barrierefreiheit und Responsive Design. der Barrierefreiheit geht es darum, sicherzustellen, dass keiner Ihrer lustigen und ansprechenden Designs versehentlich es den Benutzern erschwert, Ihre Inhalte tatsächlich zu genießen, während Responsive Design oder mobiles Responsive Design, wie Sie planen und implementieren Designs, um überall gut aussehen, von einem Telefon bis über einen riesigen Monitor oder Fernseher. Denken Sie daran, wenn Ihr Projekt jemals so an Knoten gebunden ist, dass es nicht wiederherstellbar erscheint, können Sie immer zu den bereitgestellten Links zurückkehren und eine neue Kopie des Projekts starten. Es gibt Links für sowohl als allerersten Startplatz ohne CSS, als auch für die Version, die wir alle zusammen geschrieben haben. Sie keine Angst, tief einzutauchen und zu lernen, indem Sie Dinge brechen. der Lage, Ihren Code in Aktion zu sehen und das Projekt zu teilen, bedeutet, dass Sie um Hilfe von mir oder einem der anderen Schüler bitten können. Sobald Sie mit dem Aussehen Ihres Projekts zufrieden sind, stellen Sie sicher, dass Sie es zeigen. Ich freue mich darauf, zu sehen, was jeder einzelne von euch mit den Lektionen machen kann, die wir heute behandelt haben.