HTML und CSS Programmieren für Anfänger:innen: Baue dein Portfolio auf!

1. Einführung: Um Websites zu erstellen, sind HTML und CSS die wesentlichen Fähigkeiten, die Sie lernen müssen. Sie werden auch viel Übung brauchen, um diese Fähigkeiten zu bekommen , und das ist das Ziel dieses Kurses. In diesem Kurs bauen wir ein Portfolio-Projekt auf, um Ihnen die Möglichkeit zu geben , Ihre neuen HTML- und CSS-Fähigkeiten in eine gute Praxis umzusetzen. Sie erhalten auch die Chance, Ihre Fähigkeiten durch den Aufbau einer Website zu präsentieren und haben auch ein großartiges Portfolio, um alle zukünftigen Projekte zu ergänzen. Also, wer bin ich? Nun, mein Name ist Chris und ich bin seit 20 Jahren Webentwickler und lehre diese Fähigkeiten auch anderen seit vielen Jahren. Am Ende dieser Klasse werden Sie ein großes Verständnis davon haben, wie Websites aufgebaut werden und auch die Rolle, die sowohl HTML als auch CSS zu spielen hat. Sie lernen nicht nur die grundlegenden Fähigkeiten für einen Anfänger, wir werden auch noch weiter gehen, indem wir mehr Zwischenthemen wie Responsive Design, Layout mit Grid und Flexbox, Animationen und Transformationen, ein Parallax-Effekt mit CSS und vieles mehr. Sie brauchen keine Vorkenntnisse in HTML oder CSS zu haben, um loszulegen und in der Tat, wenn Sie völlig neu sind, wird eine Lernbereitschaft Sie einen langen Weg bringen. Wir decken die Dinge von Grund auf ab und erklären alles, was Sie wissen müssen. Wenn Sie jedoch Erfahrung beim Erstellen von Websites mit HTML und CSS haben, werden Sie hoffentlich auch einige neue Tricks lernen. Am Ende dieses Kurses haben Sie die Fähigkeiten, die Sie benötigen, um großartig aussehende responsive Websites zu erstellen und auch ein Live-Portfolio online für den Rest der Welt zu sehen. Vielen Dank, dass Sie sich für diese Klasse interessieren und beginnen wir. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen, dem nur zu folgen um eine weitere Vorlesung abzubrechen. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den von Ihnen geschriebenen Code zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen können . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht ablenken, und du kannst sogar einen Schritt zurücktreten , wenn du den Kurs beendet hast und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, der Registerkarte Projekt und wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 3. Was sind HTML und CSS: Bevor wir in unser Projekt springen, wenn Sie neu in HTML und CSS sind, werden wir einen Blick darauf werfen, was diese sind im Detail. Wir werden nicht zu tief gehen, da wir in diesem Kurs viel HTML und CSS schreiben werden , aber ein kleiner Hintergrund wird Ihnen helfen zu verstehen, was wir tun werden. Beginnend mit HTML, die für Hypertext-Markup-Sprache steht, und ist die Standardmethode, um Webseiten zu schreiben. Wir schreiben HTML mit Elementen und dies sind in der Regel nur ein Paar von Tags, die den Inhalt innerhalb wie nur hier beschreiben, dies ist das p-Element, das für das Hinzufügen eines Absatzes von Text zu unserer Webseite ist. Zuerst gibt es ein öffnendes Tag und dann haben wir ein schließendes Tag, das durch den Schrägstrich gekennzeichnet ist, und dann fügen wir unseren Text innen hinzu. Die meisten HTML-Elemente haben ein öffnendes und schließendes Tag, es gibt jedoch einige Ausnahmen, z. B. wenn Bilder verwendet werden, die nur das einzelne Tag haben. Dies liegt daran, dass Bildtanks keinen Inhalt haben, also nur Text. Stattdessen zeigen wir auf eine Bilddatei und wir werden dies während des Kurses behandeln. Wie gehen wir von dieser auf eine vollständige Webseite? Nun, werfen wir einen Blick auf ein typisches Beispiel. Es liegt daran, dass wir ein HTML-Dokument erstellen, dass wir auch die HTML-Elemente verwenden, um unsere gesamte Webseite zu umgeben, dies hat auch das HTML-öffnende Tag und auch das schließende Tag das den gesamten Inhalt umgeben wird sehen wir auf der Webseite. Um zu beginnen, haben wir die HTML-Tags und dann innen verschachtelt hier haben wir den gesamten Inhalt für unsere Seite und alle Inhalte, die wir im nächsten Video sehen werden , die wir im Browser angezeigt werden, geht innerhalb des Körperelements. Im Inneren verschachtelt haben wir den Körper, der ein Wrapper für alle Bilder und den gesamten Text, Links und Dinge wie das auf der Seite sein wird. In diesem Körper haben wir dann alle Elemente, die Sie hier sehen, wir können einen Header haben, also ist dies auf der nächsten Ebene in, und dann innerhalb dieses Headers können wir auch weitere Verschachtelungen hinzufügen. Oft möchten wir vielleicht ein Logo oder ein Seitenbild am oberen Rand der Kopfzeile hinzufügen, auch einige Links für die Navigation, oder wir könnten unsere Navigation direkt unten haben, wie wir hier sehen. Innerhalb des Hauptabschnitts haben wir einige weitere Verschachtelungen auch auf der gleichen Ebene wie der Header. Wir haben auch den Hauptabschnitt, und im Inneren können wir hier auch weitere Elemente hinzufügen. Vielleicht möchten wir ein Bild hinzufügen, vielleicht möchten wir etwas Text hinzufügen, oder wir könnten dies auch weiter in mehrere Abschnitte aufteilen. Nehmen wir zum Beispiel an, wir hatten hier einen neuen Abschnitt. Dieser Abschnitt könnte auch einige weitere verschachtelte Elemente enthalten, die wieder zwischen dem öffnenden und dem schließenden Element liegen. Wir könnten hier etwas Text hinzufügen, würde dann auch die p Elemente enthalten und so ist eine Webseite im Allgemeinen strukturiert. So erhalten wir unsere Inhalte auf die Seite, aber wie fügen wir Styling und Layout hinzu? Wir tun dies mit CSS, CSS ist eine Möglichkeit, das Aussehen, das Gefühl und das Layout unserer Webseiten zu ändern , es tut dies durch Hinzufügen von Farben, Größe, Abstand und Positionierung, um ein paar zu nennen, und wir können es sogar für Animationen und Übergänge. Um dies zu tun, müssen wir die HTML-Elemente, die wir stylen möchten, zielen und sie sind mehrere Möglichkeiten, die wir tun können. Betrachtet man dieses p-Element von früher auf der linken Seite, ist wahrscheinlich der einfachste Weg, dies zu tun, durch den Elementnamen. Beide auf der rechten Seite ist, wie wir unser CSS schreiben, wir zielen das Element nach seinem Namen wie p und schreiben unsere Stilregeln innerhalb dieser geschweiften Klammern wie die Schriftfarbe und Größe. Dies würde den Stil auf alle p-Elemente auf einer Seite anwenden. Wenn wir jedoch nur das geborene einzelnes Element anvisieren wollten, könnten wir dem öffnenden Tag eine eindeutige ID hinzufügen, wie folgt. Dieser ID-Name von text-red liegt völlig an uns, und alle zusätzlichen Informationen, die wir in diesem Tag hinzufügen, wird als Attribut bekannt. Wir verknüpfen diese ID mit unserem CSS durch seinen Namen mit dem Hash-Präfix, wie wir auf der rechten Seite sehen. Da eine ID ein eindeutiger Name sein soll, der nur ein einzelnes Element abzielt, haben wir auch das Klassenattribut. Diese Klasse kann mehreren Elementen hinzugefügt werden, was dazu führt, dass unsere Stile wiederverwendbar sind. Wie die ID, werden wir es mit dem CSS durch seinen Namen verknüpfen, aber dieses Mal fügen wir einen Punkt als Präfix hinzu. Dies sind Beispiele für das, was wir CSS-Selektoren nennen, und wir werden einige fortgeschrittene Selektoren während dieses Kurses behandeln. Dies sind nur einige Grundlagen, um uns mit HTML und CSS in Gang zu bringen, aber ich glaube immer, dass der beste Weg zu lernen ist, tatsächlich Dinge zu bauen, und das werden wir im nächsten Video beginnen, in dem wir unsere Portfolio-Projekte einrichten. 4. Portfolio-Projekt einrichten: Nehmen wir nun dieses Wissen und wir können es auf unser Portfolio-Projekt anwenden. Um mit einem Webprojekt zu beginnen, müssen wir nur einen regulären Ordner erstellen, in dem alle Dateien und Ordner gespeichert werden, die wir benötigen. Ich werde mein Projekt auf dem Desktop hinzufügen oder es kann überall hin gehen, was Sie bevorzugen. Ich werde mit der rechten Maustaste klicken und einen neuen Ordner erstellen, den ich „Portfolio“ nennen werde. Dieser Name liegt ganz an Ihnen und fühlen Sie sich frei, dies zu ändern. Als nächstes benötigen wir einen Texteditor, um unseren Code zu schreiben. Ich werde Visual Studio-Code für diesen Kurs verwenden, den Sie von hier herunterladen können, wenn Sie müssen. VS-Code steht zum kostenlosen Download auf Mac, Windows und Linux zur Verfügung, oder Sie können jede andere verwenden, die Sie bevorzugen, wie Atom, Klammern oder Sublime Text. Ich habe bereits Visual Studio-Code installiert, also habe ich dies auf dem Desktop geöffnet. Um unser Projekt zu öffnen, ziehen Sie nur über den Projektordner und dann brauchen wir eine neue HTML-Datei, um mit der Arbeit zu beginnen. Wir können auf die neue Datei in den Optionen gehen oder Befehl oder Control N verwenden und dies wird eine neue Datei erstellen, die ich als index.html speichern werde. Dies wird automatisch innerhalb unserer Projekte gespeichert und alle HTML-Dateien müssen diese Erweiterung haben. Diese Indexdatei ist in der Regel die Hauptdatei, der gesamte Einstiegspunkt in unser Projekt wird oft als Homepage in einer einfachen HTML-Site verwendet. Lassen Sie uns an die Arbeit gehen, indem wir unsere anfängliche HTML-Struktur erstellen, beginnend oben mit dem Doctype. Ein Doctype ist der Typ des Dokuments, das wir erstellen, und dies wird dem Browser mitteilen, dass es sich um eine HTML-Datei handelt. Als nächstes müssen wir alle unsere Inhalte auf dieser Seite in den HTML-Elementen umgeben, in den HTML-Elementen umgeben, und dies hat ein öffnendes und schließendes Tag. Wir können auch die Sprache der Seite als Attribut festlegen, indem Sie „lang“ eingeben und ich werde meins als en für Englisch festlegen. Wenn Sie eine andere Sprache verwenden, können Sie schnell einen [unhörbaren] Sprachcode finden, indem Sie in Ihrer Suchmaschine nach HTML-Sprachcodes suchen. Innerhalb der HTML-Tags enthält dies sowohl den Kopf als auch den Körper, der innen verschachtelt ist. Beginnen wir mit dem Kopfbereich und dies wird Informationen über unsere Website und auch Links zu anderen Dateien enthalten . Keiner der Inhalte, die wir im Kopfbereich hinzufügen, wird im Browser angezeigt. Ich werde hier innen beginnen, indem ich zwei Meta-Tags hinzufüge. Meta-Tags sind einfach Daten über unsere Website und werden nicht im Browser angezeigt. Die erste, wir werden die Zeichensatzattribute hinzufügen und dies auf den Wert „UTF-8“ setzen. Dadurch werden die Charaktere festgelegt, die wir in unserem Projekt verwenden werden. HTML5-Standard ist UTF-8, die fast alle Zeichen und Symbole in der Welt abdeckt. Die zweite, wir werden den Namen so einstellen, dass er gleich „Ansichtsfenster“ ist. Dies ist das Viewport Meta-Tag, das verwendet wird, um die Seite für verschiedene Bildschirmgrößen einzurichten. Wir tun dies, indem wir den Inhalt einstellen und so ist es gleich der Breite, um gleich der Gerätebreite zu sein, und dies wird unsere Webseite so einstellen , dass die Breite des Geräts , die auf gesehen wurde, mit sagen wir, mobile, ein -Desktop oder ein Tablet. Danach fügen Sie ein Komma hinzu, und ich werde die anfängliche Skalierung auf eins setzen. Dies ist wirklich wichtig für Responsive Design. Dadurch wird die anfängliche Zoomstufe festgelegt, alle unsere Skalierung, wenn die Seite zum ersten Mal geladen wird. Dies ist wirklich wichtig, so dass alle Website auf allen Bildschirmgrößen gut aussieht. Wenn wir dies nicht hinzufügen, kann ein mobiles Gerät versuchen, unsere Desktop-Größe Seite zu nehmen und es einfach zu verkleinern, um zu versuchen, alle Inhalte auf unseren kleinen Bildschirm zu passen alle Inhalte auf , was dazu führt, dass Dinge wie unser Text wirklich klein aussehen. Wir wollen kein Zoomen oder Skalieren haben, da wir uns um das Aussehen unseres Projekts mit CSS kümmern wollen . Eine Menge davon mag verwirrend aussehen, um zu beginnen, aber das wird etwas, das Sie bei allen Projekten wiederverwenden werden, so dass Sie viel Übung bekommen. Der letzte Teil besteht darin, den Seitentitel hinzuzufügen und dies ist der Titel der Seite, die im Browser-Tab angezeigt wird. Ich werde das als Chris Dixons Portfolio festlegen. Wir können dies an Ihr Projekt anpassen. Schließlich, Sie [unhörbar] auf den Kopf Abschnitt, können Sie auch einen Körper hinzufügen. Dies ist das zweite Element, das in unserem HTML verschachtelt ist. So richten wir eine grundlegende HTML-Struktur ein. Dieser Körperbereich enthält alle Inhalte, die wir im Browser anzeigen möchten , wie Bilder, Links und auch Text. So werden Sie die meiste Zeit für den Rest dieses Projekts verbringen. 5. Skizziere deine Ideen und sammle deine Projektbilder: Bevor Sie mit diesem Projekt weitergehen, gibt es zwei Ansätze, die Sie ergreifen können. Sie können mit mir folgen und genau das gleiche Projekt erstellen. Wenn Sie nur HTML und CSS lernen möchten, und das ist völlig in Ordnung. Oder wenn Sie sich ein bisschen kreativer fühlen oder ein echtes Portfolio aufbauen möchten, das Sie nutzen werden, ist jetzt an der Zeit, alles zu sammeln, was Sie für Ihre Projekte benötigen. Dies wird das Portfolio sein, das ich erstellen werde. Es hat einen großen Header-Abschnitt mit einer Einführung über uns selbst. Wenn wir die Seite neu laden, haben wir auch einige verblassende Animationen. Wir haben ein paar vertikale Texte. Dann sehen wir beim Scrollen einige Flip-Animationen, darunter ein Parallax-Bild im Hintergrund. Weiter unten haben wir einen aktuellen Arbeitsabschnitt, zwei Zeilen mit einigen Inhalten enthält, die Informationen über ein vorheriges Projekt enthalten, das Sie präsentieren möchten. Diese haben auch einige gleitende Animationen. Wir werden auch lernen, wie Sie diese mit Flexbox und einigen anderen Techniken auslegen. Unten unten haben wir einen Kontakt zum Abschnitt, und die Website ist auch voll ansprechbar. Wenn wir den Browser nach unten verkleinern, sieht es auch auf verschiedenen Bildschirmgrößen gut aus. Außerdem passt der Inhalt das Layout an die neue Bildschirmgröße an und ändert es. Wenn wir zum oberen Abschnitt gehen, haben wir einige Links. Gehen wir zu unserer Projektseite. Wir haben den gleichen Header für die Spitze. Dann haben wir einige aktuelle Projekte, die die CSS-Rasterlayouts verwenden. Wieder, wenn wir dies verkleinern, wird dies auch reagieren und geändert, um die Bildschirmgröße anzupassen. Wenn du mir folgen willst, ist das völlig in Ordnung. Wenn Sie nur Ihren Namen und die Bilder ändern möchten, verwenden Sie dies einfach als Lernerfahrung. Wenn Sie eine Anpassung planen, wäre es eine gute Idee, eine Skizze oder ein Mock zu erstellen, wie Sie es aussehen möchten. Sie müssen auch alle Bilder zusammenfassen, die Sie auch verwenden möchten. Ich habe das Hintergrundbild für diesen Kurs zur Verfügung gestellt, bei dem es sich um das Parallax-Hintergrundbild von der Homepage aber Sie müssen einige Bilder bereitstellen, die Sie im Portfolio verwenden können. Wenn Sie nicht viele Projekte zu verwenden haben, können Sie einige Beispielbilder finden, die Sie einschließen oder auch die Anzahl der Projekte reduzieren möchten, die Sie präsentieren möchten. Nehmen Sie sich ein paar Minuten Zeit, um alle Bilder und Ideen zu sammeln , die Sie für Ihr Projekt benötigen. Es kann auch eine gute Idee sein, die Größe aller Portfolio-Bilder zu ändern, die Sie verwenden werden. Dadurch wird das Rasterlayout später im Kurs wesentlich einfacher. Sobald Sie fertig sind, gehen wir zum nächsten Video über, wo wir beginnen, indem wir den Header-Abschnitt erstellen. 6. Der Titelbereich und semantische Elemente: Vor HTML Version 5, eine typische Sache, die Webentwickler tun, um unsere Inhalte auf einer Seite zu Layout, wäre es, viele verschiedene div Abschnitte zu erstellen, um unsere Bereiche oder unsere Inhalte zu umgeben. Zum Beispiel werden wir ein div für unseren Header, unseren Hauptbereich, unsere Fußzeile und vielleicht auch eine Sidebar erstellen. Um zwischen jedem dieser Divs oder Abschnitte zu unterscheiden, würden wir im Allgemeinen eine ID hinzufügen, wie wir hier sehen, wie die Kopfzeile oder die Fußzeile, so dass wir wussten, dass jeder dieser Abschnitte anders war. Nun, aber seit HTML Version 5, haben wir viel mehr semantische oder beschreibende Elemente, die wir verwenden können. Viele davon sind ziemlich selbsterklärend. Wir haben eine wie die Kopfzeile, die Fußzeile, eine Navigation. Wir haben auch einen Hauptbereich für das Hauptstück für unsere Inhalte auf der Seite. Zusammenhang mit diesem Hauptabschnitt haben wir die beiseite, die typischerweise für Dinge wie eine Sidebar verwendet wird. Wir können dann eigenständige Abschnitte von Inhalten hinzufügen, oder wir können auch Dinge wie den Artikel haben , der eine in sich geschlossene Information ist, wie ein Nachrichtenartikel. Wir werden viele dieser semantischen Elemente während dieses Kurses verwenden, beginnend im nächsten Video, wo wir einen Blick auf die Kopfzeile und das Navigationsgerät werfen. Dies ist die endgültige Version des Projekts, das wir bauen werden. Ich werde im Körperabschnitt arbeiten, indem ich diesen Header erstelle. Dies wird uns die Chance geben, auch einige semantische Elemente zu betrachten , die wir uns gerade angesehen haben. Wir können den Header als Wrapper für den Abschnitt verwenden, entlang betrachten wir auch das nav Element. Lassen Sie uns dies im Körperteil unseres Projekts tun. Denken Sie daran, dass der gesamte Inhalt, den wir im Browser anzeigen , zwischen diesen Tags hineingehen wird. Wir können mit dem Header beginnen , der den gesamten grauen Abschnitt umschließt, den wir gerade gesehen haben. Beginnend mit den nav Links oben oben. Unsere Navigationslinks werden eine Absicherung in meiner Liste sein, genauer gesagt eine ungeordnete Liste, die wir mit dem ul Element erstellen können. Eine ungeordnete Liste gibt einfach einige Listenelemente aus, standardmäßig mit den Aufzählungspunkten auf der linken Seite. Wir haben auch eine geordnete Liste, die wir mit dem ol Element verwenden können. Dadurch wird eine nummerierte Liste erstellt. Hier drinnen fügen wir jeden unserer Links mit dem li-Tag hinzu, der kurz für Listenelement ist. Wir müssen ein Haus und auch den Link des Projekts hinzufügen . Wenn wir das speichern, können wir das jetzt im Browser öffnen. Sie können sogar in Ihr Projektportfolio gehen und auf die index.html doppelklicken, die dies im Browser öffnet. Stattdessen können wir in Visual Studio Code über auf die Registerkarte gehen. Wir können mit der rechten Maustaste klicken, den Pfad kopieren und dann in den Browser einfügen. Wir haben jetzt unsere beiden Links oben. Wenn wir auf diese klicken, verlinken sie nicht auf andere Seiten. Um dies zu tun, müssen wir diese in eine Verbindung mit dem a-Element transformieren. Lassen Sie uns vorübergehend den Text entfernen, der sich innerhalb der a-Elemente befindet, und fügen Sie ihn dann zwischen den Verknüpfungen ein. Jetzt müssen wir dem Browser mitteilen, wo wir verlinken möchten. Wir tun dies, indem wir das href-Attribut hinzufügen. Dies ist ein ganzer Link, und wir sind derzeit auf der Homepage. Wir möchten auf die index.html verlinken. Lassen Sie uns das Gleiche für alle Projekte tun. Fügen Sie diesen Text wieder ein, und dann wird der href auf die Seite unseres Projekts gehen. Wir haben unsere Projektdatei noch nicht erstellt, aber wir können diese für später hinzufügen. Speichern Sie diese Datei, und dann, über in den Browser und laden Sie sie neu. Wir sehen nun, dass diese in Links umgewandelt werden. Wenn wir auf die Projekte klicken, werden wir in die project.html übernommen, die wir natürlich noch nicht erstellt haben. Klicken Sie auf die „Startseite“, und wir bleiben auf der Indexseite. Als nächstes müssen wir den Text in unsere Kopfzeile einfügen. Zuerst haben wir die Überschrift „Hi, ich bin Chris“, einen einfachen Text unten und dann unseren vertikalen Text unten. Wir können dies innerhalb des Kopfzeilenabschnitts hinzufügen, aber direkt nach dem nav Element. Der Text von „Hallo, ich bin Chris“, Ich werde in einer Ebene eins Überschrift hinzufügen. HTML stellt uns Überschriften zur Verfügung, die wir von Level 1 bis Level 6 verwenden können. Level 1 wird die größte und auch die wichtigste sein. Die Größe und Bedeutung sinkt nach unten, wenn die Zahl höher wird. Fügen Sie den Text für Ihr Projekt hinzu, und dann unten haben wir den regulären Text. Wir fügen regulären Text in das p-Element, das für Absatz steht. Ich werde meinen Text in den Tilde-Symbolen umgeben, die Sie auf der Tastatur finden können, und den Text von „Ich bin ein Webentwickler und Kursersteller“. Der letzte Teil, den wir hinzufügen müssen, ist der Text von „Ich mache Dinge“, und das wird unser vertikaler Text sein. Der vertikale Text wird jedoch nicht mit HTML erstellt. Der HTML-Code ist einfach da, um den Inhalt zu unserer Seite hinzuzufügen. Wir werden dies mit einer Überschrift der Stufe 3 hinzufügen. Dies erscheint im Browser im Moment genauso wie ein normaler horizontaler Text, und wir werden dies später mit dem CSS ändern. Kurz nach unserem Absatz auf hier, der nächsten Zeile, die Ebene 3 Überschrift mit dem Text „Ich mache Dinge“. Speichern Sie diese Datei und über auf unserer Registerkarte „Projekt“, laden Sie sie neu. Der Inhalt befindet sich jetzt auf dem Bildschirm. Da wir derzeit nur den HTML-Inhalt hinzugefügt haben, unser Projekt noch nicht so gut aus wie die endgültige Version. Wir werden dies im nächsten Video ändern, indem wir ein Stylesheet hinzufügen. 7. CSS first look und Verlinkung unseres Stylesheets: Früher, als wir unser Projekt einrichten, sagten wir, dass der Head Abschnitt Informationen über unsere Websites enthält und auch Links zu unseren Dateien. Aber wir werden nicht auf ein Stylesheet verlinken, das dazu beitragen wird, unser Styling und unsere Layouts für unsere Projekte zu verbessern. Zuerst brauchen wir ein Stylesheet, damit wir es nicht in unseren Projekten auflösen können. Wir können die Seitenleiste öffnen und eine neue Datei im Stammverzeichnis unserer Projekte erstellen. Ich werde dies die Stile mit der gepunkteten CSS-Erweiterung nennen, die wir für alle regulären CSS-Dateien benötigen. Da dies kein großes Projekt ist, werde ich alle Stile für diesen Kurs in einer einzigen Datei behalten. Bei größeren Projekten können Sie beliebig viele CSS-Dateien verwenden und sie sogar in Ordnern organisieren. Als nächstes brauchen wir dies innerhalb unserer HTML-Datei im Kopfbereich. Wechseln Sie zum Index. Dann werde ich das direkt über dem Titel verlinken. Denken Sie daran, früher gesagt, dass der Kopfbereich verwendet wird, um Informationen über unsere Websites und auch Links zu unseren Dateien hinzuzufügen . Wir können diesen Link erstellen, standardmäßig haben wir diese Beziehung mit Stylesheets, was genau das ist, was wir wollen. Dann das gleiche „href“ Attribut, das wir für unsere Links direkt unten haben. Im Inneren müssen wir den Dateipfad zu der Datei fragen, zu der Sie verlinken möchten. Da diese Datei neben unserer Indexseite ist, müssen wir lediglich den Namen unserer Datei hinzufügen. Wenn wir unser CSS in Ordnern organisieren, müssten wir auch den „Ordnernamen“ hinzufügen. Nur einen CSS-Ordner, und dann „Schrägstrich“ in den Namen unserer Datei weiterleiten. Um zu testen, dass diese Datei richtig funktioniert, mache ich oft etwas Offensichtliches, das im Browser angezeigt wird. Wenn Sie zu gehen, „Körper“, und legt die Hintergrundfarbe auf die Farbe rot. Speichern wir das und laden Sie den Browser neu, und das ist jetzt eindeutig verknüpft, so dass wir diese Datei entfernen können. Jetzt werde ich am Anfang dieser Datei einige globale Stile hinzufügen , die für alle Websites gelten. Ich würde auch in einigen Standardstilen zurücksetzen, die der Browser automatisch hinzufügt. Auch zu beginnen, ich werde Styling der Websites Mobile zuerst, dann später, können wir unser Styling für große Bildschirme anpassen. Beginnen wir damit, es auf ein kleines Bildschirmgerät zu verkleinern. Ich werde das neben Visual Studio Code platzieren. Da wir nur eine CSS-Datei verwenden, halten Sie diese besser organisiert. Ich werde einen Kommentar hinzufügen. Ein Kommentar ist einige Texte, die wir hinzufügen möchten, die nicht im Browser angezeigt werden. Wir können dies normalerweise für unsere Notizen für uns selbst und unsere Entwickler verwenden, wo der Kommentar in CSS mit dem Vorwärtsschrägstrich und dann ein,“ Stern“, und dann schließen wir es ab, wenn der Stern und Schrägstrich dazwischen wir jeden Text hinzufügen können , die Sie hinzufügen möchten. Ich werde diesen Abschnitt als globale Stile hinzufügen. Das erste, was ich tun werde, ist, den Körper anzusprechen, indem ich die Schriftfamilie einstelle. Wenn wir einen Blick auf die automatische Vervollständigung werfen, können wir einige der verfügbaren Schriftarten sehen, die wir hinzufügen können, und ich werde für „Georgia“ gehen, die nach unten gehen „Times New Roman“ und „Times New serif“. Dies sind websichere Schriften, die wir in Ihren Projekten verwenden können, was bedeutet, dass sie sicher in allen Browsern verwendet werden können. Wir können auch verschiedene Schriftarten von anderen Anbietern, wie Google Fonts, das Phänomen, mit einer dieser Website-Schriftarten zu bleiben. Oft, wenn wir die Schriftfamilie deklarieren, wie wir hier sehen, gibt es mehrere Schriftarten. Wir haben gerade vier hier, und dies ist für den Fall, dass die erste nicht verfügbar ist. Georgia ist nicht verfügbar. Es wird nach der Times New Roman Schriftart suchen und auf die Zeit zurückgreifen. Dann würde der letzte Standard auf eine generische Serif. In der nächsten Zeile werden wir die Basis für die Größe auf zehn Pixel setzen. Wir werden sehen, warum sehr bald. Das nächste, was wir tun werden, ist, den Rand auf Null zu setzen, und dies wird jeden Browser-Standard zurücksetzen. Wir können die Breite auf 100 vw einstellen, was 100 Prozent der Breite des Ansichtsfensters entspricht. Dies liegt daran, dass wir Styling Mobile zuerst und wir wollen, dass der Inhalt die volle Breite des mobilen Geräts umfasst, und auch wieder, da wir auf die mobilen Geräte ausgerichtet sind, wir auch den Inhalt zentrieren. Wir können dies später nicht überschreiben, wenn wir für größere Browser entwickeln, und wir werden dies mit midi-queries tun. „ Speichern“ Sie dies und gehen Sie zum „Browser“. „ Neu laden“. Sehen Sie, dass der Text in der Mitte ausgerichtet ist und die Schriftgröße ist jetzt 10 Pixel. Nächste Woche werden wir diese Kugeln aus unserer eigenen Bestellliste entfernen. Lassen Sie uns das Ziel der ungeordneten Listenelemente. Wir können diese entfernen, indem Sie die „List-Stil“, gleich, „Non“. „ Aktualisieren“, der Browser. Wir können auch aus unserer ungeordneten Liste sehen, dass dies nicht vollständig zentriert ist. Dies liegt an einigen der Browser-Standardeinstellungen, die auf unsere ungeordnete Liste angewendet werden. Wir werden jeden Rand entfernen, der den Abstand um die Außenseite der Elemente und auch jede Polsterung ist, wir können dies auch zurücksetzen, und Polsterung ist jeder Abstand, der innerhalb der Elemente hinzugefügt wird. Margin ist draußen, und die Polsterung ist innen. Ich möchte diese sehr bald näher betrachten. Unsere Links haben auch die Unterstreichung. Dies liegt daran, dass diese mit den A-Elementen umgeben sind. Wir können die Unterstreichung entfernen, indem Sie die Textdekoration auf „none“ setzen. Unsere Links haben auch eine andere Farbe. Wir können dies überschreiben, indem Sie den Farbwert erben. Dies bedeutet, dass die Links die Farbe vom übergeordneten Listenelement erben, anstatt sie standardmäßig in Farbe, „speichern“ und „aktualisieren“ benötigen. größte Teil dieses Abschnitts ist nur Browserüberschreibungen und einige grundlegende Standardwerte. Wir werden jetzt zu einigen bestimmten Header-Wert übergehen. Wir können auch einen Kommentar oder zwei erstellen. Genau wie zuvor können wir unsere Kommentare erstellen, und dies wird für den Header-Abschnitt sein. Unser Header ist in den Header-Elementen umgeben, und genau wie wir in der endgültigen Version hier sehen, werden wir dies auf eine hellgraue Farbe setzen. Wir tun dies, indem wir die Hintergrundeigenschaft einstellen. Ich werde dies auf jede Farbe setzen, die wir wählen, die ich für die Farbe des hellen Schiefergrau gehen werde. Wenn Sie mehr über verschiedene Farben erfahren möchten, die wir verwenden können, können Sie eine Google-Suche für HTML-Farbauswahl durchführen. Sie können den Standardnamen verwenden, der in der Suche angezeigt wird, oder einen der unten aufgeführten Links auswählen. Wenn Sie einen Hex-Wert verwenden, genau wie dieser, müssen wir auch den Hash kopieren und dann können wir dies als unsere Hintergrundfarbe ersetzen. Ich werde meine als die graue Farbe behalten. Laden Sie dann den Browser neu. Ich werde sehen, dass dies jetzt wirksam wird. Im Moment werden alle unsere Inhalte gegen den oberen und unteren Rand der Kopfzeile gedrückt . Denken Sie daran, dass wir immer gesagt haben, dass wir etwas Platz in, innerhalb unserer Elemente hinzufügen können , indem wir Padding hinzufügen. Das ist offensichtlich jetzt und ich werde dies auf den Wert von 1rem setzen. 1rem ist einmal so groß wie unsere Basisschriftart, die wir früher in der Körpergröße eingerichtet haben. So wäre 1rem gleich 10 Pixel, 2rem wäre 20 Pixel, und so weiter. Grund, warum wir dies auf abgerundete 10 Pixel setzen , ist, dass wir den Wert leicht in rem herausfinden können. Also, wenn wir das sagen, sollten wir 10 Pixel Polsterung um die Außenseite haben. Als nächstes werden wir die Höhe des Elements einstellen, genau wie wir in der endgültigen Version mit der vollen Höhe des Browsers gesehen haben. Wir können dies tun, indem Sie den Wert von 100vh einstellen , der 100 Prozent der View-Port-Höhe ist. Als nächstes gehen wir mit dem Styling der Navigationslinks fort. Diese werden mit einer ungeordneten Liste erstellt. Lassen Sie uns die Schriftgröße auf 1.2rem einstellen, was dem Äquivalent von 12 Pixeln in der ungeordneten Listeentspricht was dem Äquivalent von 12 Pixeln in der ungeordneten Liste So werden wir die Schriftgröße auf alle ungeordneten Listen auf unserer Seite anwenden. Wenn Sie möchten, dass es spezifischer ist, und wenden Sie dies nur auf die ungeordnete Liste an. Innerhalb unseres Now-Abschnitts könnten wir spezifischer sein und das Navigationsgerät vorne hinzufügen, genau so, was bedeutet, dass wir jetzt frei sind verschiedene Styling in verschiedene ungeordnete Listen hinzuzufügen. Als nächstes werden wir den Anzeigetyp auf Flex einstellen. Wir werden in Kürze tiefer in die CSS Flexbox schauen. Aber vorerst ermöglicht es uns, Inhalte in eine Richtung zu legen. Horizontal, Standardwerte oder vertikal. Speichern Sie diese und laden Sie sie neu. Wir sehen nun, dass die Links in horizontaler Richtung angeordnet sind. Um diese Links zurück in die Mitte der Seite zu schieben, können wir auch eine Flexbox-Eigenschaft verwenden, die Inhalt und den Wert von Mitte zu rechtfertigen. Diese Links benötigen auch etwas Platz dazwischen. Wir können dies tun, indem wir das Listenelement ausrichten. Auch hier werden wir spezifischer sein und zielen nur auf die Listenelemente in diesem Navigationsabschnitt ab. Wir können dies tun, indem wir etwas Marge hinzufügen. Wenn Sie den sicherlich Rand setzen, wenn wir nur einen Wert wie 1rem eingeben, gilt dies für alle Seiten unseres Listenelements. So gilt 1rem Rand für die obere, rechte, untere und linke. Wir können auch eine Kurzschrift verwenden, die den Rand nach oben und unten und auch links und rechts nur anzuwenden ist. Also, um zu beginnen, können wir dies auf Null oben und unten setzen. Dann ist der zweite Wert links und rechts, neu laden, und jetzt habe ich etwas Abstand dazwischen. Nach unten auf unsere Stufe 1 Richtung. Lassen Sie uns auch etwas Schriftgröße hinzufügen. Auch hier werden wir spezifischer sein und nur auf die Stufe eins abzielen. Innerhalb des Kopfzeilenabschnitts. Ich werde die Schriftgröße auf 5rem setzen. Nachladen, und jetzt ist es viel größer. nach unten bewegen, haben wir auch das p Element unten. Also das ist Header p. Die Schriftgröße, ich werde dies gleich 1.6rem setzen, was das Äquivalent von 16 Pixeln ist. Einige Polsterung, die auf der Innenseite der Elemente angewendet wird. Also 1rem oben und unten fügen Sie etwas Abstand zwischen dem Rest des Textes hinzu, und wir brauchen keine Polsterung auf der linken und rechten Seite, da unser Text zentriert ist. Werfen wir einen Blick auf das. Okay, gut. Wenn wir einen Blick auf die endgültige Version werfen, haben wir auch diese Zeile, die Dinge aus. Wir können dies mit einem hr-Elemente hinzufügen, die eine horizontale Regel im HTML ist, oder wir können einen Rahmen am unteren Rand dieses Textes hinzufügen. Lassen Sie uns dies mit CSS tun. Der Rand unten, die im Einklang mit einem Pixel sein wird, eine durchgezogene Linie und die Farbe des hellgrauen Semikolon am Ende und aktualisieren Sie den Browser. Die letzten Teile des Header-Stylings ist das Ziel der, Ich mache die Dinge ganz unten besteuert. Bisher haben wir die Elemente mit dem Namen wie Header und p ausgerichtet, die wir uns zuvor angesehen haben. Wir können auch einen Klassennamen zu verwenden. Ich werde einen Klassennamen hinzufügen, um dieses Element zu drehen. Da wir dies über unsere Seite in der index.html wiederverwenden werden. Lassen Sie uns nach unserer Rubrik der dritten Stufe suchen. Wir können eine Klasse von Rotation hinzufügen. Dies liegt daran, dass sich der Text auf den größten Bildschirmen dreht. Gehen wir also zurück zu unserem Stil, in dem ich eine Klasse mit dem Punkt anvisiere, der Name von rotiert. Anstatt einfach die Margin-Eigenschaft zu verwenden, die wir uns vorher angesehen haben, können wir auch spezifischer sein und eine einzelne Seite, wie z. B. Ich werde einen Wert von 2rem, eine Schriftgröße von 3rem und die Deckkraft hinzufügen eine Schriftgröße von 3rem , die der freie Wert von 0,4 ist. Dies bedeutet, dass unser Text 40 Prozent transparent ist, was bedeutet, dass ein Teil der grauen Hintergrundfarbe durchkommt. So wird dieser Text auf den kleinsten Bildschirmen aussehen. Dann fügen wir später auf dem großen Bildschirm die Rotation hinzu. Dies ist unser erster Blick auf das Styling einer Webseite mit CSS und auch einen mobilen First-Ansatz. Wie Sie sehen können, haben wir hier einige CSS-Regeln behandelt und es gibt auch noch viel mehr, was wir anwenden können. Viele davon werden wir entdecken, während wir den Rest des Kurses durchlaufen. 8. Kurzer Abstecher: CSS mit den devtools überprüfen: Bevor wir noch weiter in dieses Projekt gehen, möchte ich mit Ihnen einen kurzen Tipp teilen, der Ihnen während der Entwicklung wirklich helfen kann und das ist, die Entwickler-Tools zu verwenden, die in allen gängigen Browsern integriert sind. Die Developer Tools können uns unter anderem nicht erlauben, HTML und CSS nicht nur unserer eigenen Projekte, sondern auch jeder anderen Website zu überprüfen . Wir können auf die Entwickler-Tools innerhalb des Browsers zugreifen. Im Allgemeinen würden wir mit der rechten Maustaste in oder bei gedrückter Ctrl-Taste klicken und dann das Element für einige Browser inspizieren oder inspizieren. Im Inneren haben wir viele Informationen über die Chrome-Websites. Willst du das erweitern. Wir haben vor allem den Inspektor der nahen oberen Ecke. Wenn wir darauf klicken, können wir dann mit dem Mauszeiger über Teile unserer Websites bewegen. Genau wie den Teil, den wir betrachten wollen. Lassen Sie uns weit mit Level 1 Titel gehen, klicken Sie darauf. Wir können die HTML-Struktur auf der Seite sehen, die Sie steuern. Sie können diese Informationen auch unten auf der Unterseite des Browsers sehen, aber ich werde meine einfach auf die rechte Seite mit den Optionen hier verschieben. Hier können wir sehen, dass die Überschrift der Ebene eins hervorgehoben wird. Sie können genau sehen, welches mögliche HTML diesen Abschnitt steuert. Dann auf der rechten Seite haben wir dieses Styling. Wir sehen, dass der Header H1 eine Schriftgröße von fünf Rems hat. Wir können auch hier klicken, um den gleichen Stil in zu entfernen. Wir können Dinge herumspielen, indem wir neuen Stil hinzufügen. Lasst uns den Equaller ändern. Dies wird sofort im Browser wirksam. Im Folgenden sehen wir auch einen Standardstil, in dem der Browser angewendet wurde. Wir sehen auch unten unten unten nicht einige Stile von auch aus dem Körperabschnitt geerbt , der der Container ist, wie die Schriftfamilie und die Textausrichtung. Es gibt viele erweiterte Registerkarten, die Sie oben sehen können , aber wir werden dies während dieser Klasse nicht abdecken. den Entwickler-Tools können wir nicht nur HTML und CSS unserer eigenen Website, sondern auch von anderen Seiten einsehen. Zum Beispiel, wenn Sie auf die Mozilla-Website gehen, können wir das gleiche hier tun. Klicken Sie auf den Inspektor und wählen Sie dann beliebige Elemente aus. Es gibt viel mehr HTML, wie wir hier sehen können, aber dies ist im p-Element für den Text umgeben. Wir können auch alle Styling sehen, die angewendet wurde, wie die Schriftgröße, auf die wir klicken können, einen Rand, die Schriftfamilie, jede Zeilenhöhe und vieles mehr. Keine dieser Änderungen wird dauerhaft angewendet. Alles, was wir tun müssen, ist zu aktualisieren und alles wird wieder auf den Standard zurückgesetzt. Dies ist nur ein kurzer Tipp, um Ihnen die Entwickler-Tools zu zeigen , wenn Sie sie noch nicht verwendet haben. Sie können während der Entwicklung wirklich nützlich sein. Die Entwickler-Tools haben auch viel mehr erweiterte Funktionen. Aber wir werden das während dieses Unterrichts nicht abdecken. Als nächstes werden wir wieder auf die Programmierung unseres Portfolios zurückkommen indem wir ein Hintergrundbild und auch einen Parallax-Effekt hinzufügen. 9. Hintergrundbilder und Parallaxen-Effekt: Das ist in einem Parallax-Stil Effekt auf unsere Webseite kann wirklich machen es herausragend. Möglicherweise haben Sie diesen Effekt beim Scrollen auf Webseiten oder Anwendungen gesehen. Es handelt sich im Grunde um den Hintergrund , der in unserem Fall ein Bild ist, das mit einer anderen Geschwindigkeit scrollt als der Rest des Inhalts, der darauf sitzt. Es gibt viele Optionen da draußen, um einen ähnlichen Effekt zu erzielen und viele nutzen JavaScript. Aber für dieses Projekt werde ich eine einfache CSS-Version erstellen. Um den Parallax-Effekt genauer zu verstehen, wir einen Blick auf ein kurzes Beispiel. Auf der linken Seite haben wir hier ein typisches Webseitenlayout mit einem Header. Wir haben einige Bilder und auch einige Inhalte, die vom unteren Rand des Bildschirms gehen können. Wenn dies geschieht, muss der Benutzer nach oben scrollen, damit alle Inhalte angezeigt werden. Im Allgemeinen scrollt der gesamte Inhalt mit der gleichen Rate nach oben. Allerdings, diejenigen, die einen Parallax-Effekt anwenden, die ganze Idee ist, dass das Hintergrundbild wird einer langsameren Rate als der Rest des Inhalts oder überhaupt nicht scrollen. Um dies mit CSS zu erreichen, wenn wir uns das Bild auf der rechten Seite ansehen, werden wir ein vollständiges Hintergrundbild einstellen, um die gesamte Größe des Browsers abzudecken. Dieses Bild wird sich auch an einer festen Position befinden, so dass wir nicht bewegen, wenn der Rest des Inhalts nach oben scrollt. Wir können auch einige Lücken in unseren Inhalten hinterlassen. Wenn wir zum Beispiel die beiden Bilder entfernen, bleibt dies ein Leerzeichen, um das Hintergrundbild zu enthüllen. Wie wir scrollen mit dem gesamten Inhalt nach oben. Nehmen wir eine Vorschau der fertigen Version, um zu sehen, wie dieser Effekt aussehen wird.Wenn wir nach unten scrollen, können Sie sehen, dass sich das Hintergrundbild in einer festen Position befindet und es sich nicht tatsächlich bewegt. Der Rest des Inhalts scrollt über das Hintergrundbild nach oben und unten. Es ist dieser Abschnitt, den wir jetzt erstellen werden, vorausgesetzt mit diesem Kurs ist das gleiche Hintergrundbild das ich verwendet habe, oder Sie können Ihre eigenen verwenden, wenn Sie es bevorzugen. Ich habe meins hier auf dem Desktop gespeichert. Ich werde das in unser Portfolio aufnehmen. Ich werde das in einem Image-Ordner speichern. Lassen Sie uns einen neuen Ordner erstellen. Dadurch werden auch die Portfolio-Bilder gespeichert, die wir später hinzufügen werden. Ziehen Sie den Mauszeiger über das Hintergrundbild. Wenn wir nun die Seitenleiste öffnen, sehen wir nun den Bilderordner und das Hintergrundbild. Wir werden damit beginnen, einen Abschnitt Wrapper zu erstellen , der für alle Links sein wird, die Sie hier sehen. Zurück zu unserer Indexseite, können wir diese jetzt erstellen. Unmittelbar unterhalb des Kopfzeilenabschnitts, aber immer noch innerhalb des Hauptkörpers, werden wir einen neuen Abschnitt erstellen. Das wird die Klasse der Parallaxe haben. Dies ermöglicht es uns, diesen Abschnitt im CSS anzusprechen. Genau wie wir es mit dem Header getan haben, werden wir eine ungeordnete Liste für jeden unserer Listenelemente erstellen. Der erste wird für die freiberufliche Web-Entwicklung sein. Wie immer können Sie Links erstellen, die zu Ihrem Portfolio passen. Die nächste werde ich als Premium-Trainingskurse hinzufügen. Der dritte wird für kostenlose Schulungen, YouTube-Videos sein. Dann schließlich die letzte, wie sie Film tragen wird sagen trinken Kaffee. Speichern Sie dies, und über in den Browser. Scrollen Sie nach unten unter unserer Kopfzeile und wir sehen unsere Listenelemente unten unten. Dies ist nur HTML-Inhalte, die wir brauchen. Die meiste Arbeit für diesen Abschnitt ist in unseren Stylesheets vorbei. Lassen Sie uns einen neuen Kommentar erstellen. Dies wird für den Parallaxen-Abschnitt sein. Nutzen Sie die Parallax-Klasse, die wir zuvor hinzugefügt haben. Im Inneren können wir unser Hintergrundbild einstellen, wir werden dies in CSS mit der Hintergrundbild-Eigenschaft tun. Dann haben wir hier die Möglichkeit, die URL zu setzen. Die URL ist der Dateipfad zu unserem Bild. Innerhalb der Zitate haben wir einen Bilderordner und dann Schrägstrich den Hintergrundpunkt JPEG. Wir wollen auch, dass dies die volle Höhe ist. Legen Sie die Höhe auf 100 Prozent der Höhe des Ansichtsfensters fest. Speichern Sie dies und über im Browser. Der Hintergrund ist nun erschienen. Aber wir wollen das genau dort positionieren, wo wir es haben wollen. Beginnen wir mit der Zentrierung des Hintergrundbildes mit der Eigenschaft der Hintergrundposition. Wir werden das in der Mitte hinzufügen. Wir haben auch andere Optionen, wie die linke, obere und untere. Lassen Sie uns neu laden und sehen, welche Wirkung dies hat. Jetzt sehen wir, dass das Bild im Browser zentriert wurde. Das nächste, was wir tun werden, ist, die Hintergrundfarbe auf einen Wert von cover zu setzen. Für diese Eigenschaft haben wir mehrere Optionen, wie wirdie Größe des Bildes auf 50 Prozent, drei REMs, 100 Pixel oder einen beliebigen Wert, den wir mögen, einstellenkönnen die Größe des Bildes auf 50 Prozent, drei REMs, 100 Pixel oder einen beliebigen Wert, den wir mögen, einstellen . Hier werden wir den Wert festlegen, der abgedeckt werden soll, wodurch das Bild so groß wie möglich skaliert wird, ohne das Bild zu dehnen. Wenn wir das jetzt speichern und den Browser neu laden, sehen wir, dass sich das Bild auch mit dem Rest des Inhalts bewegt und wir haben derzeit keinen Parallaxen-Effekt. Um den gewünschten Effekt zu erzielen, ist der Hauptteil, das Hintergrundbild zu fixieren. Wir tun dies mit der Eigenschaft namens Hintergrundanhang und dem Wert der festen. Über zum Browser scrollen Sie nach oben und unten und wir sehen, dass das Hintergrundbild in der gleichen Position bleibt und der Rest des Inhalts bewegt sich über die Spitze. Dies funktioniert jetzt, weil das Hintergrundbild im Browser oder im Ansichtsfenster fixiert ist und der Rest des Inhalts wie gewohnt frei scrollen kann. Um die Dinge zu beenden, müssen wir auch die Listenelemente ein wenig größer machen und auch etwas Platz hinzufügen. Beginnen wir mit dem Targeting auf den Parallax-Abschnitt und die verschachtelte, ungeordnete Liste. Die Schriftgröße wird 1,8 Rems sein, was das Äquivalent von 18 Pixeln und Teil in, von einem Rem sein wird. Speichern Sie das. Gut, unser Text ist jetzt ein wenig größer und wir müssen auch etwas Abstand zwischen jedem unserer Listenelemente hinzufügen. Wir können dies tun, indem wir nur oben und unten einen Rand hinzufügen. Lassen Sie uns das Parallax-Listenelement anvisieren. Die Margin-Eigenschaft. Wieder werden wir die Kurzschrift verwenden, damit wir 2 Rems oben und unten hinzufügen können, und dann eine Null auf der linken und rechten Seite. Da diese Listenelemente bereits zensiert sind, neu geladen und unsere Abstände wurden nun angewendet. So können wir unserem Projekt einen einfachen Parallax-Effekt mit nur CSS hinzufügen. Wie Sie sehen können, kann es wirklich einen großen Unterschied machen und einen Abschnitt unserer Website wirklich hervorheben. Weit in diesem Kurs haben wir auch sowohl Marge als auch Padding verwendet , um Platz darin auf unsere Elemente anzuwenden. Wenn du immer noch nicht zu 100 Prozent sicher bist, was jeder von ihnen tut, werden wir uns diese im nächsten Video genauer ansehen. 10. Kurzer Abstecher: Rand, Füllung und das Box-Modell: Wir haben bisher sowohl Marge als auch Padding in unserem Projekt verwendet , um Platz darin auf unsere Elemente anzuwenden. Wenn Sie immer noch nicht mit dem zufrieden sind, was jeder von ihnen genau macht, werden wir jetzt einen genaueren Blick in diesem Video werfen und auch das CSS-Box-Modell entdecken. Wenn wir gerade angefangen haben, eine Webseite und einen Text innerhalb mit dem P-Element zu div oder Abschnitte zu div, würden wir mit etwas enden, das so aussah. Das ist offensichtlich kein toller Blick auf. Eines der ersten Dinge, die wir tun können, ist, einige Abstände hinzuzufügen. Wir möchten vielleicht einige Abstände innerhalb der Abschnitte wie diese, also ist es nicht so nah an den Rändern und sieht ein wenig lesbarer aus. Denken Sie daran, wir haben früher gesagt, die Polsterung fügen Abstand innerhalb eines Elements hinzu. Dies ist, was wir hier durch den grünen Abschnitt hervorgehoben sehen. Dies ist der Effekt der Auffüllregel in CSS. Es wird standardmäßig das Hinzufügen der Polsterung um alle vier Seiten. Wir haben auch Zugriff auf die Polsterung oben, rechts, unten und links, auch. Wenn wir nur den Abstand auf bestimmten Seiten wollten, nun, was wäre, wenn wir auch einen Abstand zwischen den Abschnitten wollten? Wie wir gerade angeschaut haben, gilt das Auffüllen nur für das Innere des Elements. Stattdessen wenden wir Marge an. Rand hinzufügen Raum in es an der Außenseite eines Elements, wie wir mit dem orangefarbenen Abschnitt sehen. Genau wie beim Padding gilt die Randregel alle vier Seiten, es sei denn, wir sagen es anders. In diesem Beispiel müsste der erste Abschnitt ein Rand unten angewendet werden, oder wir könnten auch Rand oben auf das zweite Element hinzufügen, was dasselbe tun wird. Das Hinzufügen von Abständen wie diesem wirkt sich jedoch auf die Gesamtgröße des Elements aus. Dies wird das CSS-Box-Modell genannt. Wenn wir die Größe eines Elements in der CSS, wie 300 Pixel, zum Beispiel. Dies ist in der Regel die Größe, die wir im Browser anzeigen wollten. Nehmen wir an, wir haben 10 Pixel Polsterung um die Elemente hinzugefügt. Wie wir wissen, wird dem Inneren des Elements nichts hinzugefügt. Dies wird zur Gesamtgröße beitragen, was dazu führt, dass die Breite auf 320 Pixel erhöht wird. Wie in einem Rahmen in CSS wird auch die gleiche Wirkung haben. Wenn wir einen Ein-Pixel-Rahmen ringsum wie diesen hinzufügen, wird dies ein zusätzliches Pixel auf jeder Seite hinzufügen die Gesamtbreite auf 322 Pixel zu erhöhen, was bedeutet, dass wir vorsichtig sein müssen, wenn Sie Elemente dimensionieren, um dies zu ermöglichen. Da jedoch die Marge an der Außenseite eines Elements hinzugefügt wird, wird dies nicht in der Gesamtgröße berücksichtigt. Wenn wir für die Polsterung und Grenze, die die Elementgröße erhöhen, berücksichtigen wollen, haben wir zwei Ansätze. Wir könnten entweder die Anfangsbreite unserer Inhalte reduzieren. Hier könnten wir die zusätzlichen 22 Pixel entfernen und die Breite auf zunächst 270 Pixel setzen , um dies zu berücksichtigen, oder stattdessen könnten wir den Browser dazu bringen, es für uns zu berechnen. Das bedeutet, was auch immer wir unsere Polster- und Rahmengrößen einstellen, der Browser zeigt unsere Elemente immer mit 300 Pixeln an. Wir können dies tun, indem Sie die CSS-Box-Größenregel so einstellen, dass sie gleich der Grenze Box ist. Dies ist etwas, das wir unserem CSS hinzufügen können, wenn wir Probleme haben, die Größe eines Elements festzulegen. 11. Block-, Inline- und Verschachtelungsinhalte: Wir werden nun einen Blick darauf werfen, wie wir das Konzept tiefer in unser Projekt verschachteln und auch Bilder einbeziehen können . Wir werden dies tun, indem wir einen aktuellen Arbeitsabschnitt erstellen , der zwei unserer Projekte präsentieren wird. Dies wird uns auch erlauben, mit einigen komplexeren Layouts herumzuspielen und in ungleichmäßige Größe Elemente aufzunehmen. Zum Beispiel wird unser erstes Projekt in der ersten Reihe sein. Wir haben ein großes Bild und dann einen Text über das Projekt auf der gegenüberliegenden Seite. Wir werden dies dann für das zweite Projekt in der Zeile direkt darunter umkehren, wo sich das Bild auf der gegenüberliegenden Seite des ersten Projekts befindet. Diese werden auch innerhalb ihres eigenen div sein, das ein Abschnitt an diesen Wänden sein wird, der verschachtelt wird, genau wie wir es zuvor gesehen haben. Diese CSS Flexbox wird es uns ermöglichen, dieses Layout zu erstellen, und auch ein anderes Layout für den kleineren Bildschirm zu erstellen. Lassen Sie uns mit dem Hinzufügen des HTML für den Abschnitt zu arbeiten. Über die fertige Version, so wird das im wirklichen Leben aussehen. Wir werden unsere zwei Reihen haben, und wir werden abwechselnd das Projekt in jeder Zeile. Mit der Flexbox reagiert dies auch voll auf, sodass sich die Layouts auf kleineren und größeren Bildschirmgeräten ändern. In diesem Video werden wir fortfahren und das HTML-Markup für den Abschnitt hinzufügen , der den Inhalt enthält, mit dem Sie im nächsten Video arbeiten können. Wo wir die Flexbox hinzufügen, um dies genau so auszulegen, wie wir wollen. Der erste Schritt besteht darin, einen Wrapper für diesen Abschnitt zusammen mit einem aktuellen Arbeitstitel oben zu erstellen . Lassen Sie uns dies innerhalb des Körperabschnitts tun , der unterhalb der Parallaxe liegt, die wir gerade erstellt haben. Unser Abschnitt Wrapper, Öffnen und Schließen Tag, und dann innerhalb können wir eine Ebene 3 Überschrift erstellen. Es ist x wird Neueste Arbeit sein, und wir können auch ein Klassenattribut innerhalb des öffnenden Tags hinzufügen , so dass wir dies mit dem CSS anvisieren können. Kurz nach unserer Level-3-Überschrift werde ich ein neues Element hinzufügen, das eine horizontale Regel ist. Dies wird eine Zeile über unsere Seite hinzufügen, die Sie gerade hier sehen. Einen ähnlichen Effekt haben wir in der CSS früher in diesem Kurs verwendet, wo wir einen Rahmen verwendet haben, um eine Linie zu erstellen. Aber dieses Mal werden wir die horizontale Regel verwenden, um unsere Zeile in unserem HTML zu erstellen, scrollen Sie einfach nach unten, aktualisieren Sie die Seite. Wir können gerade jetzt unseren Titel und unsere Zeile ganz unten sehen. Wir können dann beginnen, unsere divs innerhalb des Abschnitts zu verschachteln , um unsere zwei Zeilen von Inhalten zu erstellen. Um dies direkt unter unserer horizontalen Regel zu tun, werden wir zwei neue divs mit der Klasse der jüngsten Arbeit erstellen. Ich werde das dann direkt in unsere zweite Zeile kopieren und einfügen, aber wie erstellt das Erstellen eines neuen div eine neue Zeile? Der Grund dafür ist, dass die meisten Elemente im Allgemeinen entweder als Blockebene oder inline kategorisiert sind und wenn div in die Elementkategorie auf Blockebene fällt. Ich werde dies betrachten, wenn wir auf die Mozilla-Website gehen, hier meine ich den Abschnitt Block-Level-Elemente. die Sie eine Suche durchführen können, wenn Sie diese Seite finden möchten. Es gibt viele Informationen und Beispiele auf dieser Seite, aber das Wichtigste ist hier in diesem Feld zu beachten. Es heißt: „Ein Block-Level-Element wird immer auf einer neuen Zeile beginnen und auch die volle verfügbare Breite aufnehmen.“ Das bedeutet, dass für jedes div, das wir hinzufügen, dies immer in einer neuen Zeile hinzugefügt wird. Wir können einige Beispiele für Elemente auf Blockebene sehen, wenn wir nach unten scrollen. Hier ist unser div-Tag, und es gibt viel mehr wie: die Kopfzeile, die Fußzeile und auch das nav. Wir gehen auch auf die Mozilla-Website und werfen einen Blick auf die Inline-Elemente Abschnitt. Wir können hier sehen, dass die Inline-Elemente nicht auf einer neuen Zeile beginnen, und es wird nur so viel Breite wie nötig nehmen. Dinge wie Bilder sind Inline-Elemente, deshalb können wir die Seite an Seite über die Seite platzieren. Wieder einmal, wenn Sie nach unten scrollen, haben wir unsere Liste der Inline-Elemente und wir können unser Bild nur hier sehen. Wir können auch CSS verwenden, um den Standardtyp zu ändern, indem Sie die Anzeigeregel verwenden, und wir werden uns dies im nächsten Video ansehen, wo wir die Flexbox hinzufügen werden. Jetzt, da wir unsere zwei Zeilen haben, die Sie in zwei Abschnitte aufteilen können, werden wir dies tun, indem wir zwei weitere divs innerhalb jedes einzelnen verschachteln. Dies ist so können wir das Bild auf der einen Seite hinzufügen, und auf der anderen Seite können wir die Informationen über unser Projekt hinzufügen. Unser erstes div können wir auch eine Klasse hinzufügen, so dass wir dies im CSS verwenden können. Dies wird aktuelle Arbeitsinfos sein. Wir können das duplizieren, und das ist für das aktuelle Arbeitsbild. Wenn das verwirrend aussieht, mach dir keine Sorgen, dies ist nur die erste Zeile, und im Inneren haben wir einen Wrapper für das Bild und dann für die Informationen. Wir werden genau das gleiche für unsere zweite Zeile direkt unten tun, ich werde dies kopieren und dies hier hinzufügen, so dass wir zwei passende Abschnitte haben. Dies sind nur Container im Moment dort, also ist noch kein Inhalt im Browser zu zeigen. Sie sollten die Bilder, die Sie verwenden möchten, bereits zusammengefasst haben. Wenn Sie noch nicht getan haben, wird es jetzt ein guter Zeitpunkt sein , um einige Bilder Ihrer jüngsten Arbeit zu sammeln. Wenn Sie keine aktuellen Arbeitsbilder haben, können Sie ein beliebiges Beispiel-Platzhalterbild herunterladen, das Sie verwenden möchten. Ich habe meine Bilder bereits fertig, also werde ich diese zu den Projekten hinzufügen. Wir haben bereits ein Images Ordner-Setup hier. Ich werde alle restlichen Bilder außer dem Hintergrund, den Sie bereits haben,greifen Bilder außer dem Hintergrund, den Sie bereits haben, und diese dann in meinen Image-Ordner ziehen. Schließen Sie das, jetzt können wir fortfahren und alle Inhalte hinzufügen, die wir für unsere beiden Abschnitte benötigen. Wir haben unser Bild, und dann werden wir etwas Text auf der gegenüberliegenden Seite hinzufügen. Beginnen wir in unserer ersten Zeile und innerhalb des letzten Arbeitsinformationsabschnitts innerhalb hier eine Ebene 4 Überschrift, die für den Projekttitel sein wird. Meiner wird Pizza Planet sein. Direkt unter den p-Elementen, die der Text sein wird und ich werde nur einige Beispieltext von Vue hinzufügen. js-Anwendung für einen und dann Punkt Punkt Punkt Punkt. Natürlich können Sie hier einige detailliertere Beschreibungen hinzufügen, eine horizontale Regel, um den Titel und die Beschreibung von den übrigen Funktionen zu trennen. Diese Funktionen werde ich innerhalb einer anderen Liste hinzufügen. Zunächst einmal der Titel, die andere Liste und dann unser Listenelement im Inneren und dies wird für jedes der Merkmale unserer Projekte sein. Vue. js, die die View-Bibliothek, die Neueste firestore Datenbank, Authentifizierung,Routing, Vuex State Management und dann Echtzeit-Updates sein wird die Neueste firestore Datenbank, Authentifizierung, Routing, Vuex State Management . Danach werden wir das mit einer anderen horizontalen Regel trennen. Dann werden wir einen Link mit einem Element hinzufügen, das ein Link zu einem Live-Projekt sein wird, wenn Sie eines haben. Zeigen Sie Text der Besuch-Site an, dann können Sie den Link oder die URL für das Lebensprojekt hinzufügen, wenn Sie einen haben. Dies sind alle unsere Informationen, wenn wir speichern und aktualisieren, gehen Sie nach unten haben wir alle unsere Texte an Ort und Stelle. Das nächste, was zu tun ist, ist das Bild hinzuzufügen, das sich in diesem Wrapper befindet. Wir tun dies mit dem Bildelement, das IMG ist. Wir fügen die Quelle, die der Dateipfad zu unserem Bild ist, wir haben einen Image-Ordner. Das sind Bilder und dann Schrägstrich, und das Bild, das ich verwenden möchte, wird Pizza-Planet sein. png. Die Alt-Texte von Pizza Planet Bild, dies ist die Alternative für Dinge wie Bildschirmlesegeräte, wenn das Bild nicht verfügbar ist. Über zum Browser und lassen Sie uns dieses Bild auf dem Bildschirm sehen. Gut. Das nächste, was zu tun ist, ist, diesen Prozess für das zweite Projekt zu wiederholen. Wir wollen eine ziemlich genau das gleiche wie oben machen, werden wir die gleiche Struktur erstellen, aber für das zweite Projekt. Beginnen wir mit unserer Level-4-Überschrift auf dem Projekttitel, der React Trello ist. Wieder, innerhalb des Recent-work-info-Abschnitts haben wir dann eine Beschreibung innerhalb der p Elemente. Wir werden sagen, React js Anwendung im Einklang mit den hr-Elementen, dem Feature-Text, und dann unsere andere Liste für alle unsere Funktionen in einem Listenelement Elemente eingeschlossen. Wir werden sagen, die React js View-Bibliothek. Dies hat auch die Neueste firestore Datenbank, Authentication, Routing. Dies nutzt auch die Context-API und auch Echtzeit-Updates. Genau wie oben unter unserer anderen Liste werden wir wieder eine horizontale Regel hinzufügen und dann einen Link zu unserer Live-Website, wenn wir eine haben, und wir Text von Visit Website. Wenn Sie keine Live-Version zur Anzeige haben, können Sie dies auch deaktivieren, oder Sie können später darauf zurückkommen und den Link hinzufügen. uns nur das Bild übrig lässt, das wir im unteren div hinzufügen können, und wieder werden wir zu den Bildelementen hinzufügen. Die Quelle ist der Ordner Bilder, und dann wird das Bild, das ich ausgewählt habe, react-trello sein. Der alt-Text von react-trello Bild, speichern und dann den Browser neu laden. Wir sehen jetzt unsere zweiten Projekte. Wir haben jetzt den Inhalt für unsere aktuelle Arbeit Abschnitt, und im nächsten Video werden wir einige CSS Styling anwenden, um nicht nur das Aussehen und Gefühl zu verbessern , sondern auch, um es auf verschiedenen Bildschirmgrößen besser aussehen zu lassen. Um dabei zu helfen, nutzen wir die CSS-Flexbox, die Ihnen hilft, einen Inhalt in eine Richtung zu legen. 12. Erste Einblicke in die CSS Flexbox: Sowohl das CSS-Raster als auch die Flexbox sind relativ neue Möglichkeiten, unsere Inhalte mit CSS zu gestalten. In diesem Video werden wir beide Techniken abdecken. Beginnend mit der Flexbox, die verwendet wird, um unsere Inhalte in eine Richtung zu gestalten, entweder horizontal oder vertikal zu steuern. Um mit der CSS Flexbox zu beginnen, das erste, was wir tun müssen, ist das erste, was wir tun müssen,einen Wrapper für alle unsere Inhalte zu erstellen. Oben im CSS setzen wir dann diesen Wrapper so, dass er den Anzeigetyp von Flex hat. Dies ermöglicht es uns dann, die Flex-Richtung für unseren Inhalt entweder eine Zeile zu sein, die sich über die Seite von links nach rechts befindet, oder in einer Spalte, die von oben nach unten ist. Unsere Inhalte sind also vertikal gestapelt. Dies ist ideal für reaktionsfreudiges Design und wir können auch die umgekehrten Optionen festlegen. Wir können die Zeile rückwärts setzen, die wir unseren Inhalt von rechts nach links setzen und auch Spalte umgekehrt, was das Gegenteil sein wird, so dass unser Inhalt von unten nach oben ist. Wir können dies in Kombination mit Medienabfragen verwenden, um verschiedene Layouts für verschiedene Bildschirmgrößen zu erstellen , und auch die Flexbox hat viel mehr zu bieten und wir werden einige dieser Flex-Eigenschaften während dieses Kurses entdecken. Lassen Sie uns zu unserer index.html Seite gehen. In den Inhalten, die wir im letzten Video erstellt haben, haben wir zwei Abschnitte mit der Klasse der jüngsten Arbeit erstellt. Dies ist das Wrapper div für jedes unserer Projekte und der Wrapper für jede Zeile. Wenn ich diese aktuelle Wortklasse im CSS verwenden möchte, beginnend mit dem Spaltenlayout für unsere kleine Bildschirmansicht. Das bedeutet, dass jedes unserer Projekte übereinander gestapelt wird und sich auf die Breite des vollen Mobilgeräts ausdehnt. Lassen Sie uns zu unseren Stylesheets gehen und unseren neuen Abschnitt mit den Kommentaren erstellen. Dies ist der jüngste Abschnitt der Arbeiten. Denken Sie daran, dass wir eine Klasse mit dem Punkt und dem Namen der jüngsten Arbeit anvisieren. Um die Flexbox zu verwenden, müssen Sie zunächst den Anzeigetyp so einstellen, dass er gleich flex ist. Denken Sie daran, im letzten Video, haben wir gesagt, dass viele Elemente in Inline-und Blockebene kategorisiert werden können. Nun, wir können den Anzeigetyp eines Elements mit seiner Anzeigeeigenschaft ändern. Hier ändern wir den Anzeigetyp unseres Wrappers, um die Flexbox zu nutzen. Dies ermöglicht es uns, viele weitere Flex-Eigenschaften wie die Flexrichtung zu nutzen . Wir werden auf den mobilen Größe Geräte beginnen , indem Sie die Flex-Richtung auf Spalte zu sein. Wenn wir dies verkleinern, bedeutet dies, dass der Inhalt übereinander gestapelt wird anstatt die Standardzeile, die sich auf der Seite befindet. Wir haben auch die umgekehrten Optionen, also können wir dies auf Spaltenrückseite einstellen, speichern und neu laden, speichern und neu laden, und jetzt werden die Bilder auf dem Text erscheinen , anstatt wie es mit nur Spalte war, wo wir haben den Text und dann die Bilder. Wir können auch die Flex-Richtung auf Zeile setzen. Dies bedeutet, dass der Inhalt über die Seite geht, genau wie wir hier sehen. Das bedeutet, dass der Inhalt horizontal über die Seite verläuft unser Text und das Bild nebeneinander bleibt. Nun, obwohl auf diesen kleinen Bildschirmen, werden wir dies als Spalte belassen und dann auch die Schriftgröße einstellen. Vergiss das Semikolon am Ende nicht. Die Schriftgröße wird gleich 1,3 rems sein und das ist ein Rand von einem rem oben und unten, um uns einige Abstände zu geben , und wir brauchen keinen Abstand auf der linken und rechten Seite. Lassen Sie uns das neu laden und wenn wir nun zwischen unseren beiden Projekten scrollen, sehen wir jetzt unsere Marge dazwischen und auch die Schriftgröße wirksam. Als nächstes werde ich einige allgemeinere Größen und Abstände zu unserem Abschnitt hinzufügen, so dass wir die Klasse für jeden Titel haben , der aktuelle Arbeitstitel ist. Wir können die Schriftgröße ein wenig größer und wollen 1.6 rems verwenden. Als Nächstes können wir an unserem Text für unser Projekt arbeiten. Dieser Text ist alles in einem div mit der Klasse der letzten Arbeitsinformationen umgeben. Gehen wir voran und Ziel ist jetzt. Für den Wrapper alles, was ich tun werde, ist, einige Abstände auf der Innenseite der Elemente eines Rems hinzuzufügen und dann gehen wir zur Level-4-Überschrift über. Wenn wir zum Markup in der HTML-Datei gehen und zu den letzten Arbeitsinfos gehen, werden wir jetzt an der Überschrift Level 4 arbeiten, die der Projekttitel ist. Wir haben ein paar verschiedene Möglichkeiten, wie wir das angehen können. Wir könnten direkt die Rubrik Level 4 anvisieren. Wir könnten eine Klasse zu dieser Überschrift hinzufügen und dann das Element auf diese Weise greifen , oder wir können spezifischer sein, wie wir uns früher in unserem CSS angesehen haben, wo wir die letzten Arbeitsinformationen auswählen können, dann h4. Also lasst uns das machen. Wir können die letzten Arbeitsinfos und dann jede Ebene 4 Überschrift, die in diesem Abschnitt verschachtelt ist. Alles, was wir hier tun müssen, ist, die Schriftgröße auf 1,4 Rems oder eine beliebige Schriftgröße zu setzen , die Sie bevorzugen. Als nächstes haben wir unsere Funktionen, die wir hier sehen können und wir werden etwas Raum dazwischen hinzufügen. Wir haben hier auch ein Symbol, das wir entfernen müssen. Lass uns runtergehen. Entfernen Sie das auch. Jetzt können wir spezifischer sein, wenn wir nur diese Listenelemente in diesem Abschnitt ausrichten, anstatt einen unserer Navigationslinks zu beeinflussen, können wir eine neue Klasse über im Index hinzufügen. Für unsere ungeordnete Liste können wir die Klasse der Features hinzufügen und wir werden dasselbe auch für unser erstes Projekt tun. Also innerhalb der ungeordneten Liste, die Klasse der Features, und dann können wir spezifischer innerhalb unserer Stylesheets sein, indem wir die Features, das Größer-als-Symbol, und dann unsere Listenelemente. Dies funktioniert auf eine etwas andere Weise als die Art, wie wir dies in der Vergangenheit verwendet haben. Die Art und Weise, wie wir es genau so auswählen, bedeutet, dass alle Level 4 Überschriften innerhalb dieses Abschnitts betroffen sind. Wenn Sie es auf die zweite Weise mit dem Größer-als-Symbol tun, bedeutet dies, dass sich dies nur auf die Listenelemente auswirkt , die ein direktes Kind unserer Funktionen sind. Dies bedeutet, dass diese Listenelemente direkt im Inneren verschachtelt werden müssen. Wir haben unsere ungeordnete Liste und diese sind auf der nächsten Ebene in, so dass diese alle betroffen sein werden. Wenn wir hier eine zweite Ebene der Verschachtelung haben, sagen wir eine zweite ungeordnete Liste und dann ein Listenelement, dieser wird nicht betroffen sein. Lassen Sie uns dies in und sehen Sie dies in Aktion, indem Sie den Rand setzen , um etwas Platz zwischen unseren Listenelementen zu schaffen. Ein Rem oben und unten und dann Null links und rechts. Wir kennen den Browser. Wir haben unsere Abstände nur hier und auch außerhalb dieser Projekte. Lassen Sie uns die Farbe der Links festlegen. Reload und jetzt können wir sehen, dass das Testelement, das wir hinzugefügt haben, da dies kein direktes Kind unserer Funktionen ist, dies wird nicht von unserem CSS beeinflusst. Lassen Sie diesen Test einfach entfernen, speichern Sie ihn und laden Sie ihn neu. Wir können auch die Farbe entfernen und die Dinge sehen jetzt ein bisschen besser aus mit unserem Abstand. Das nächste, was wir brauchen, um zu kümmern, sind die Bilder, die für das Gerät zu groß sind. Wieder einmal, über in unseren Stylesheets, können wir die Elemente mit ihrem Namen, der IMG, ansprechen. Da dies auch ein allgemeiner Stil ist, den Sie auf alle Projekte anwenden möchten, werde ich dies oben in den Stylesheets in den globalen Stilen hinzufügen. Dies ist nur eine persönliche Präferenz und dies kann überall in den Stylesheets gehen. Alles, was wir tun werden, ist, die maximale Breite auf 100 Prozent zu setzen. Das bedeutet, dass das Bild immer maximal 100 Prozent des Containers ausmacht. Lassen Sie uns neu laden und sehen dies in Aktion. Auch in diesem allgemeinen Stilabschnitt werde ich ein wenig Stil für unsere horizontale Regel hinzufügen. Lassen Sie uns die hr-Elemente hinzufügen. Die Breite beträgt 100 Prozent, sodass sie die volle Breite des Inhalts überspannt. Ich werde auch die Kapazität auf 0,5 einstellen, was 50 Prozent transparent ist. Die Farbe kann auch hellgrau sein und mal sehen, wie das aussieht. Verlassen Sie uns jetzt mit einer leichteren Linie zwischen unseren Inhalten. Dies ist unser erster Blick auf die Verwendung der CSS Flexbox und obwohl wir sie bisher nur verwendet haben, um ein mobiles erstes Spaltenlayout zu erstellen, während wir den Rest des Kurses durchlaufen, werden wir viel mehr davon entdecken, was die CSS Flexbox zu Angebot. 13. Kontaktbereich und endgültiges CSS für mobile Endgeräte: In diesem Video werden wir den letzten Abschnitt unserer Homepage hinzufügen, der ein Kontaktbereich sein wird. Zusammen mit der Fertigstellung des mobilen ersten Styling. Wenn wir auf die endgültige Version gehen, die ich hier geöffnet habe, und dann scrollen Sie nach unten bis zum Ende unserer Index-Seite. Dies wird der Kontaktabschnitt sein, den ich jetzt erstellen werde. Der HTML-Code ist ziemlich einfach. Alles, was Sie haben, sind einige Textblöcke und sie können mit unserem CSS gestylt werden. Beginnen wir mit dem Hinzufügen des Hedging-Balkenmarkups, das im Grunde unser neuer Abschnitt ist, und dann einige Textblöcke. Lassen Sie uns zu der index.html unten ganz unten gehen, aber immer noch innerhalb des Körperabschnitts. Wir werden noch einmal unseren neuen Abschnitt erstellen. Dies wird eine eindeutige ID des Kontakts haben. Das werden wir sehr bald im CSS nutzen. Dann werden wir ein verschachteltes div mit der Klasse der Kontaktinformationen haben. Dieser Abschnitt wird der Wrapper sein. Wenn wir uns die endgültige Version ansehen, wird dies der Wrapper für den gesamten horizontalen Text sein, den wir gerade hier haben. Dann erstellen wir eine Überschrift der Ebene 3 mit der Klasse der Rotation, die wir zuvor im Projekt verwendet haben. Innerhalb unserer Kontaktinformationen können wir das erste Element hinzufügen, das ein p-Element mit der Klasse der Kontaktüberschrift sein wird. Wir werden das CSS sehr bald verwenden, um dies viel größer zu machen, der Text von sei kein Fremder. Lassen Sie uns das speichern und überprüfen Sie, dass dies im Browser in Ordnung ist. Nachladen. Wir können nur sehen, wie Text unten ganz unten. Eine Sache, die wir tun werden, ist, das Wort Fremde in eine separate Zeile zu setzen, genau wie wir in der endgültigen Version sehen. Wir können dies tun, indem wir ein Bremsschild hinzufügen. Ein Break-Tag ist einfach br. Dies wird unseren Text in die nächste Zeile schieben. Danach wird ein zweites p-Element mit dem Text der Notwendigkeit ein Entwickler. Dann lass uns reden. Dann bot ein Stück Text hier drinnen, die unsere E-Mail-Adresse sein wird. Dies kümmert sich nun um den gesamten horizontalen Text in unserem Wrapper. Direkt unter diesem Wrapper werden wir den gedrehten Text haben, der eine Überschrift der Ebene 3 ist. Wir werden die Klasse der Rotation verwenden, die wir früher im Kurs für unsere Überschrift verwendet haben, was der Text von Ich mache Dinge. Hier drinnen, alles, was wir haben, ist der Text des Kontakts, speichern Sie diesen. Über zum Browser sehen wir, dass unser horizontaler Text ziemlich klein ist. Aber wir haben einige Stile, die für unsere Level-3-Überschrift wirksam werden, da wir die Rotationsklasse verwendet haben. Lassen Sie uns das jetzt in unserem Stylesheet beheben, beginnend mit unserer Abschnitt-ID des Kontakts. Denken Sie daran, wenn es eine ID verwendet, wir markieren dies im CSS mit einem harten. Um zu beginnen, jetzt, lassen Sie uns einen Abschnitt der Kontakt zu uns erstellen. Wir zielen auf eine ID, indem wir die harte. Dies wird auch den Anzeigetyp von Flex zu verwenden. Wir können die Flex-Box-Eigenschaften, wie die Flex-Richtung, verwenden. Da wir zuerst mobil gestartet haben, wird dies auch in der Flex-Richtung der Spalte sein. Wir überschreiben dies später, wenn mehr Bildschirmplatz verfügbar ist. Lassen Sie uns etwas Polsterung innerhalb unseres Abschnitts von 1rem hinzufügen. Ebenso wie bei der Kopfzeile können wir auch die Höhe unseres Abschnitts auf 100 Prozent der sichtbaren Höhe einstellen. Wir können eine Hintergrundfarbe einstellen, und dies kann eine beliebige Farbe Ihrer Wahl sein. Ich werde den Hex-Wert von B1E2D7 verwenden. Visual Studio Code hat auch eine Farbauswahl integriert. Wenn wir den Mauszeiger darüber bewegen, können wir dann verschiedene Farben auf dem Bildschirm hier auswählen. Oder nutzen Sie die Farbauswahl, die wir uns früher im Kurs angesehen haben. Dies wird also die Hintergrundfarbe einstellen. Wir können auch die Farbe unseres Textes auf weiß einstellen. Mal sehen, wie das aussieht. Laden Sie den Browser neu. Wir haben alle Kontaktabschnitt in voller Höhe, unseren Hintergrund und unseren weißen Text. Lassen Sie uns jetzt mit dem Text ganz oben arbeiten, beginnend mit der Kontaktüberschrift von nicht ein Fremder sein. Dies sind die Klasse der Kontaktüberschrift. Lassen Sie uns das greifen und nutzen Sie dies im CSS. Dies ist eine Klasse, also verwenden wir den Punkt. Wir werden den Rand auf Null setzen und dann die Schriftgröße viel größer machen. Ich werde für fünf Rems gehen. Nachladen. Als nächstes werden wir unsere p-Elemente innerhalb des p-Abschnitts anvisieren. Der Abschnitt hat die Klasse der Kontaktinformationen. Wir können dann die p Elemente auswählen. Das ist die Schriftgröße, b 1.4 rems. Um dann etwas Abstand zwischen diesen hinzuzufügen, können wir einen Rand am unteren Rand jedes Elements hinzufügen. Da wir viel vertikalen Platz zum Spielen haben, werde ich dies auf drei Rems setzen. Speichern Sie diese und laden Sie den Browser neu. Das lässt uns jetzt mit einem kleinen Problem. Dies liegt daran, dass wir alle p Elemente in diesen Kontaktinformationen gezielt haben. Diese Überschrift ist auch ein p-Element. Wir haben ein paar verschiedene Möglichkeiten, wie wir das angehen können. Wir könnten diese ersten p-Elemente ändern, um ein anderes Element wie eine Überschrift zu sein. Alternativ können wir eine neue Klasse wie Kontakttext hinzufügen. Lassen Sie uns dies auch unserer E-Mail hinzufügen. [ unhörbar], um zu sparen. Ändern Sie dies in einen Kontakttext. Speichern und neu laden. Jetzt ist unser Projekt so, wie es beabsichtigt ist. Das letzte, was zu tun ist, ist dieser Kontaktbereich ganz unten. Wir werden diese Elemente nur anzeigen, wenn wir mehr Platz auf dem Bildschirm zur Verfügung haben. Für jetzt in der mobilen ersten Ansicht, werden wir diese auswählen. Dies ist der neue Kontaktabschnitt, die Klasse der Drehung. Dann müssen wir nur den Anzeigetyp auf „none“ setzen. Dadurch wird dies von unserer Seite entfernt. Wir können dies später für die größere Bildschirmansicht wiederherstellen, indem wir den Anzeigetyp so zurücksetzen, dass es sich um einen Block handelt. Wir werden später im Kurs entdecken, wie das geht. Dies ist das Styling, das jetzt für die kleine Bildschirmansicht abgeschlossen ist. Zunächst natürlich, fühlen Sie sich frei, alle Änderungen Suiten Ihr Aussehen und Thema zu machen. Im nächsten Video werden wir einen Blick auf CSS-Medienabfragen werfen, die es uns ermöglichen, verschiedene CSS-Regeln für Bildschirme unterschiedlicher Größe anzuwenden. 14. CSS Medien-Anfragen: Wir haben bereits darüber gesprochen, wie wir die CSS-Flexbox verwenden können , um verschiedene Arten von Layouts zu erstellen. Auf einem kleinen Bildschirm auf der rechten Seite, können wir in der Regel wollen, dass der Inhalt die volle verfügbare Breite ist und auf jeder von einer vertikalen durch sicherlich Flexrichtung gestapelt Spalte sein. Wenn wir mehr Platz auf dem Bildschirm zur Verfügung haben, wie oben auf der linken wollen wir auch oft diesen zusätzlichen Platz nutzen und unsere Inhalte nebeneinander hinzufügen. Wir wissen, dass die Flexbox dies tun kann, indem Sie die Richtung als Zeile festlegen, aber wie wenden wir dies auf verschiedene Bildschirmgrößen mit CSS an? Nun, der Weg, dies zu tun, besteht darin, eine CSS-Medienabfrage hinzuzufügen, die im Grunde eine Möglichkeit ist, einen Abschnitt unseres CSS zu erstellen , der nur für bestimmte Bildschirmgrößen, Orientierung oder Auflösung gilt , um nur einige zu nennen. Zurück zum Mozilla Developer Network, gut, im Abschnitt Verwenden von Medienabfrage, und hier können wir kleine Beispiele dafür finden, wie wir Medienabfragen verwenden können , um je nach Gerät unterschiedliche Stile anzuwenden. Zunächst einmal, wenn wir nach unten scrollen, haben wir einen Medientyp Abschnitt, und dies ist der erste Schritt, um eine Medienabfrage zu erstellen. Hier können wir diese CSS-Regeln festlegen, um je nach Gerät anzuwenden. Wir können dies auf Dinge wie einen Sprachsynthesizer, einen Bildschirm, den Druckvorschau-Modus anwenden, oder wir können alle auswählen, um auf alle verschiedenen Geräte anzuwenden. Weiter unten im nächsten Abschnitt haben wir Medienfunktionen, und diese Funktionen sind in der Regel spezifischer für das Gerät, wie die Breite, die Höhe und auch wenn das Gerät Querformat oder Hochformat ist. Eine der häufigsten Verwendungszwecke für Medienabfragen, und wofür wir sie in diesem Kurs verwenden werden ist, unseren Stil basierend auf der Breite des Bildschirms zu ändern, und wir können dies unten unten in diesem Abschnitt sehen. Wir können CSS-Regeln basierend auf der Breite des Ansichtsfensters festlegen. Lassen Sie uns zu unserer CSS-Datei gehen und wir können diese zu unseren Projekten hinzufügen. Der erste Schritt besteht darin, zu entscheiden, welchen Bildschirm wir das CSS ändern möchten, und von vorne im Browser mit der kleinen Bildschirmansicht. Wir möchten generell etwas ändern, wenn sich unsere Inhalte erstrecken. Wenn wir dies zum Beispiel breiter machen, kommen wir immer an einen Punkt, an dem der Inhalt wirklich gestreckt aussieht, und dann wollen wir unser Layout neu anordnen. Sobald wir eine Größe erreicht haben, in der wir unseren Inhalt ändern möchten, müssen wir auch erkennen, wie breit dies ist, damit wir dies zu einer Medienabfrage hinzufügen können. Die meisten Browser haben bestimmte Plug-Ins oder Erweiterungen, die verfügbar sind, zeigen die Breite des Bildschirms, oder eine andere Option ist es, mit der rechten Maustaste zu gehen und zu überprüfen, um die Entwickler-Tools zu öffnen, und innen hier, wie wir den Browser dehnen, können wir in der oberen rechten Ecke sehen, wird die Breite des Browsers angezeigt. Sobald wir ein wenig breiter werden, und ich werde irgendwo um 860 gehen, aber ich werde das Layout ändern, um sie Inhalte nebeneinander zu unterbringen. Oft können wir in unserer style.css mit @media Abfrage mit der at media Regel beginnen. Wie wir bereits auf den Mozilla-Websites gesehen haben, können wir den Bildschirm ausrichten, und wir können dies auch mit einigen der Medienfunktionen kombinieren, die wir uns angesehen haben, wie zum Beispiel die minimale Breite des Browsers, die ich auf 860 Pixel. Nun, was wir innerhalb dieser geschweiften Klammern tun müssen, ist, irgendwelche CSS-Regeln hinzuzufügen, genau wie wir es zuvor verwendet haben. Grundsätzlich gilt jeder Stil, in dem wir oben haben, immer für unser Projekt, aber die in diesen geschweiften Klammern gelten nur, wenn der Bildschirm 860 Pixel und höher erreicht. [ unhörbar] den Körperteil und wir können hier einen echten Insider erstellen. Lassen Sie uns den Hintergrund so einstellen, dass er die Farbe rot ist, stellen Sie dies ein und laden Sie es neu. Sie sehen die rote Hintergrundfarbe, und dann gehen wir unter 860 Pixel, und diese Regel wird nicht mehr angewendet. Wenn Sie alle Geräte unterschiedlicher Größe und nicht nur diese Bildschirme ansprechen möchten, können wir auch unsere Medienabfrage einfach so vereinfachen. Lassen Sie uns das testen. Laden Sie den Browser neu, und dies gilt weiterhin. Natürlich wollen wir diese rote Hintergrundfarbe nicht wie diese anstelle von jetzt Medienabfrage. Wir beginnen ganz oben in unseren Projekten mit unseren Navigationslinks. Wenn wir einen Blick auf die endgültige Version werfen, wird dies auf der rechten Seite vorbei sein. Lasst uns das jetzt machen. Anstatt auf den Körperabschnitt zu zielen, werden wir die Navigation und dann die ungeordnete Liste ausrichten, und wir können diese nach rechts verschieben, indem wir den Inhalt als Wert von flex-end begründen . Wenn wir einen Blick auf die nav ul Abschnitt durch die Suche nach diesem, diese n minus derzeit auf Zeile 43. Nun, hier können wir sehen, dass wir das globale Styling festgelegt haben. Wir haben den Anzeigetyp bereits auf flex gesetzt, so dass dies während unseres gesamten Projekts immer der Fall sein wird. Hier stellen wir den Begründungsinhalt so ein, dass er sich in einer Mitte für die kleinen Bildschirme befindet, aber jetzt innerhalb unserer größeren Medienabfrage unten überschreiben wir dies mit Flex-End. Nun, wenn wir dies speichern, laden Sie den Browser neu, dies wird auf der rechten Seite für die größere Ansicht vorbei sein. Wenn wir dann den Browser nach unten verkleinern, wird dies zurück in die Mitte gehen. Das nächste, was wir tun müssen, ist, den Text von Ich mache Dinge zu drehen, so dass wir dies auch der Medienabfrage hinzufügen können. Dies hat die Klasse der Rotationen. Zuallererst werde ich etwas Marge hinzufügen. Wir haben uns angesehen, wie man den Rand auf allen vier Seiten hinzufügt. Wir haben auch untersucht, wie wir Rand und Polsterung oben und unten und auch links und rechts anwenden können . Wenn wir die vier Einzelwerte steuern wollen, können wir diese auch separat einstellen. Im Inneren können wir vier verschiedene Werte festlegen, und dies wird der Wert von oben, rechts, unten und links in einer bestimmten Reihenfolge sein. Zunächst zwei Rems auf der Oberseite, Null rechts, unten und links. Als Nächstes werden wir den Schreibmodus einstellen , der wichtig sein wird, um unseren Text horizontal oder vertikal auszulegen. Das wird ein wertvoller vertikaler LR sein. Dadurch wird unser Text vertikal von links nach rechts gesetzt. Der Text ist nun senkrecht wie erwartet, aber wenn wir uns die endgültige Version ansehen, sehen wir, dass die Zeichen auch aufrecht sind. Wir können dies in unserem Projekt tun, indem wir auch die Textausrichtung und den Wert von aufrecht festlegen . Wir können diese Eigenschaft verwenden, wenn unser Schreibmodus auf vertikal eingestellt ist, und dann schließlich können wir auch die Schriftgröße viel größer zu sein, so dass der Wert von fünf rem, speichern Sie dies unverändert im Browser. Wenn LCL Vertical Text in den Parallax-Abschnitt übergegangen ist, werden wir etwas anderes innerhalb unserer Medienabfrage hinzufügen, um dies zu beheben. Wir werden den Header-Abschnitt anvisieren und wir werden die Höhe auf 100 Prozent einstellen , speichern und neu laden. Dies behebt jetzt unser Problem. Ich werde jetzt nichts mit unserem Parallax-Abschnitt tun, wenn wir nach unten scrollen, das sieht auch auf dem größeren Bildschirm ziemlich gut aus. Wee kann zum letzten Arbeitsbereich hinuntergehen. Da wir nun mehr Platz auf dem Bildschirm zur Verfügung haben, werden wir den Text neben dem Bild in jeder Zeile platzieren. Wir können dies tun, indem wir den Container, die aktuelle Arbeit ist. Setzen Sie dann die Flexrichtung auf die Zeile, laden Sie neu und platzieren Sie den Inhalt innerhalb unserer Zeilen nebeneinander. Das nächste, was wir tun müssen, ist, die Größe für unseren Textbereich und auch unser Bild festzulegen. Wir können dies tun, indem Sie die Flex-Eigenschaft, um einen Wert zu sein. Wenn beispielsweise der Info-Bereich und das Bild einen Flex-Wert von eins hatten, würden diese einen gleichen Platz beanspruchen. Aber wir möchten, dass das Bild ein wenig größer ist, damit wir den Flex-Wert im Info-Bereich auf den Wert eins setzen können. Stellen Sie dann das Bild so ein, dass es einen Flex-Wert von zwei hat , der effektiv den doppelten Platz beansprucht. Lassen Sie uns dies jetzt tun, beginnend mit den aktuellen Arbeitsinfos. Denken Sie daran, dass dies für den Text ist, den wir den Flex-Wert auf eins setzen und fügen auch einige Polsterung in der Innenseite eines RAM. Das Bild hat die Klasse des letzten Arbeitsbildes. Auch wenn wir sicherstellen, dass dies immer noch innerhalb unseres Abschnitts der Medienabfrage liegt, würden wir den Flex-Wert auf zwei den doppelten verfügbaren Speicherplatz als Infobereich übernehmen. Ich werde auch einen Rahmen um dieses Bild hinzufügen. Ich werde damit beginnen, die Farbe auf hellgrau zu setzen. Die Dicke der Grenze zu einem RAM und auch eine durchgezogene Linie sein. Laden Sie den Browser neu, so dass das Bild den doppelten verfügbaren Speicherplatz als unsere Info einnimmt. Kurz bevor wir diesen Abschnitt einschließen, werde ich auch das Bild so ausrichten, dass das aktuelle Arbeitsbild und dann das Bildelement innen verschachtelt sind. Nur um sicherzustellen, dass die Breite des Bildes und auch die Höhe die vollen 100 Prozent des Behälters dehnt. Nur für den Fall, dass unsere Bilder nicht korrekt dimensioniert sind, wie wir bereits entdeckt haben, gehen wir zu unserem endgültigen Projekt und werfen einen Blick darauf, wie unser Bild und unsere Inhalte abwechselnd sind. Eine der Möglichkeiten, wie wir dies tun können, ist, die Reihenfolge unseres HTML zu ändern . Wenn wir also zu unserer Indexseite gehen, könnten wir um die Reihenfolge unseres Bildes und unseres Textes wechseln. Dies ist ein Ansatz, den wir annehmen können und das wird für die größere Bildschirmansicht gut funktionieren. Wenn wir jedoch zur kleineren Bildschirmansicht gehen, indem wir den Browser dehnen, wirkt sich dies auch auf die Reihenfolge für den kleinen Bildschirm aus. Hier haben wir die Info, das Bild, die Info und dann das Bild, das wäre nicht der Fall, wenn wir die Quellreihenfolge des HTML wechseln würden. Stattdessen können wir eine Flex-Box-Eigenschaft namens Reihenfolge verwenden, die es uns ermöglicht, die Reihenfolge zu ändern, in der Elemente auf der Seite erscheinen, wobei eine niedrigere oder eine negative Zahl zuerst in der HTML-Datei erscheint. Ich werde eine Klasse zum ersten aktuellen Arbeitsinformationsabschnitt hinzufügen. Gehen wir zu unserem ersten Projekt und wählen Sie die aktuelle Arbeit Info. Wir werden eine zweite Klasse neuer Rechte hinzufügen. Jetzt kann ich diese Klasse in unserem Stylesheet verwenden, um die Quellreihenfolge neu anzuordnen. Lasst uns das ins Visier nehmen. Um nach rechts zu bewegen, können wir die Reihenfolge auf einen Wert von eins setzen. Der Standardwert ist 0, also kurz bevor wir diese Datei speichern, wir einen Blick auf das, was wir derzeit haben. Im Moment haben wir, wenn wir zu unseren Projekten gehen, haben wir die Info auf der linken Seite und das Bild auf der rechten Seite. Speichern Sie diese Datei, laden Sie sie neu, und jetzt wurde unser Info-Bereich nach rechts von unserem Projekt verschoben. Der Grund dafür ist, dass unser Standardwert, unsere Standardreihenfolge, der Wert 0 ist. Der Bildabschnitt hat immer noch den Wert 0, so dass dieser zuerst angezeigt wird. Dann setzen wir den Info-Bereich auf den Wert eins. Dies ist eine höhere Zahl, diese wird zuletzt in der Reihenfolge angezeigt. Dies ist auch immer noch innerhalb der Medienabfrage, so dass diese Reihenfolge nur auf den größeren Bildschirmen wirksam wird. Lassen Sie uns nun das Styling für diese Medienabfrage beenden , indem Sie zum Kontaktabschnitt gehen. Derzeit ist alles in der Mitte ausgerichtet und wir müssen auch noch unsere gedrehten Texte wieder einführen. Auf der Indexseite gehen wir zum Kontaktabschnitt. Zunächst einmal haben wir die Klasse der Kontaktüberschrift. Ich werde das für diesen Abschnitt noch größer machen. Wir können dann den gesamten Container auswählen, die Flex-Richtung in die Zeile ändern und dann auch etwas Platz hinzufügen. Beginnen wir mit der Überschrift auf die Klasse der Kontaktüberschrift. Ich werde den Rand auf einen Wert von 0 zurücksetzen, die Schriftgröße so einstellen, dass sie noch größer von einem RAM ist, neu geladen wird. Als nächstes werden wir den gedrehten Text wieder einführen. Lassen Sie uns dies tun, indem Sie den Anzeigetyp von früher überschreiben. Lassen Sie uns den Kontaktabschnitt auswählen, die Klasse der Rotationen. Alles, was wir hier tun müssen, ist, den Anzeigetyp zu blockieren. Dies wird diese Stile außer Kraft setzen, die wir zuvor festgelegt haben. Wenn wir nach oben scrollen, setzen wir diese Aktion auf den Anzeigetyp von keiner auf der kleinen Bildschirmansicht, jetzt sagten wir, dass dies blockiert sein könnte. Dies wird nun auf den größeren Bildschirmen angezeigt. Wir wollen auch, dass dieser Abschnitt auf der rechten Seite vorbei ist und wie wir dies tun können, ist, indem wir die Flex-Box setzen. Wir können den vollständigen Kontaktabschnitt so einstellen, dass die Flexrichtung der Zeile hat, was bedeutet, dass unser vertikaler Text neben dem Abschnitt hier sein wird. Wählen Sie den Kontakt aus, der den vollständigen Wrapper für unseren Abschnitt darstellt. Legen Sie den Anzeigetyp als Flex fest. bedeutet, dass wir die Flex-Richtung als Zeile festlegen können, den Browser neu laden und diese nebeneinander auf der Seite platzieren können. Wir können etwas Abstand dazwischen hinzufügen, indem Sie Inhalte auswählen und rechtfertigen. Die Eigenschaft des Raums, zwischen dem der verfügbare Raum zwischen unseren beiden Abschnitten verteilt wird . Ich werde auch die Textausrichtung die linke sein, eher nahe Mitte, was es derzeit ist. Dadurch wird der gesamte Text auf dem größeren Bildschirm nach links vom Browser verschoben. Wir behalten den zentrierten Text weiterhin in der kleinen Bildschirmansicht. 15. Benutzerdefinierte CSS-Animationen: Wir werden nun einen Blick darauf werfen, wie wir CSS-Animationen zu unserem Projekt hinzufügen können. Eine Animation ist eine Möglichkeit, CSS-Stile über einen bestimmten Zeitraum zu ändern. Zum Beispiel, über zwei Sekunden, wollen wir vielleicht ein Element in verblassen oder wir könnten von einer Hintergrundfarbe zu einer anderen ändern mit einer festgelegten Dauer. Wir können dies auch verwenden, um jedes andere CSS-Styling anzuwenden, das wir wollen. Ich werde einen Blick darauf werfen, wie wir diese jetzt einbeziehen können. Animationen können Ihr Projekt wirklich lebendig machen. Ich werde sie jetzt im Header-Abschnitt verwenden. Zuerst, indem ich im Text verblasst, hi, bin ich Chris. Dann nach einer kurzen Verzögerung, werden wir auch in den Text knapp unter zwei verblassen, so dass der Benutzer eine reibungslose Willkommensnachricht. In diesem speziellen Video werden wir das Hinzufügen unserer eigenen benutzerdefinierten Animationen mit CSS behandeln. Dann im nächsten werden wir uns ansehen, wie man eine Animationsbibliothek verwendet , um beim Scrollen viele nette Effekte hinzuzufügen. Um unsere eigenen benutzerdefinierten Animationen einzurichten, müssen wir festlegen, welches CSS wir ändern möchten, indem wir die Schlüsselbilder-Regel verwenden. Die Schlüsselrahmenregel wird in der CSS-Datei eingerichtet, ähnlich wie die Medienabfragen, die wir zuvor nachgeschlagen haben. Wir können ein Beispiel auf der rechten Seite sehen, es verwendet das @ Symbol kurz vor dem Namen unserer Wahl gefolgt. Dann innerhalb unserer geschweiften Klammern fügen wir jeden CSS-Stilnamen hinzu, den wir in bestimmten Phasen der Animation anwenden möchten. Am einfachsten müssen wir zu und von, das ist der Start- und Endzustand der Animation. Hier ändern wir die Hintergrundfarbe. Dann auf der linken Seite wählen wir ein Element, um dies anzuwenden, Link in unserem benutzerdefinierten Schlüsselrahmen Namen von change-bg zu einer Eigenschaft namens Animation Name. Wenn wir mehr Kontrolle über die Animationsstufen wollen, können wir auch verschiedene CSS mit unterschiedlichen Prozentsätzen der Animation anwenden. Wir können jedes CSS anwenden, das wir wollen, nicht nur die Hintergrundfarbe, die in jeder Phase gelten kann. In unserem HTML werden wir eine benutzerdefinierte Klasse hinzufügen, damit wir dies tun können. Über unsere Indexseite bis zum Headerbereich. Wir werden diese beiden Textzeilen innerhalb unserer Kopfzeile bewirken. Lassen Sie uns unsere Klasse zu diesen beiden Elementen hier hinzufügen. Der Klassenname wird in benutzerdefinierten verblassen. Ich werde es auch auf unsere Texte direkt unten anwenden. Oben in unseren Stylesheets können wir unsere Schlüsselbilder fragen und das wird ganz unten nach unserer Medienabfrage sein. Wir verwenden das @ Symbol, lassen Sie unsere Schlüsselbilder, indem Sie diesem einen Namen von Fade in geben. Dann halten Sie dies einfach, indem Sie unsere von und unsere zu Regeln innerhalb von hier hinzufügen. Zunächst einmal werden wir die Deckkraft so einstellen, dass sie auf Null beginnt. Dies ist vollständig transparent, was bedeutet, dass wir es nicht auf der Seite sehen können. Wir können dann die zu -Regel festlegen, wo wir die Deckkraft auf eins setzen werden. Das bedeutet, dass dies jetzt vollständig undurchsichtig und überhaupt nicht transparent ist. Jetzt haben wir unsere Schlüsselbilder eingerichtet. Wir können dies zu unserer Fade in benutzerdefinierten Klasse direkt über diesen Schlüsselrahmen hinzufügen. Fade in benutzerdefinierte, die wir nur innerhalb unseres HTML sagen. Wir richten dann unsere Animation ein, indem wir den Namen von Fade in übergeben. Dann können wir die Dauer der Animation einstellen. Wir wollen, dass dies über eine Sekunde gilt. Im Laufe einer Sekunde gehen wir vom Opazitätswert von Null auf den Wert von eins. Wir können dies sehen, indem wir speichern und zum Browser übergehen, die Seite neu laden. Das ist in Ordnung und funktioniert wie erwartet, aber wir können die Dinge noch weiter verbessern, indem wir einen entspannenden Effekt hinzufügen. Wir können die Erleichterung verwenden, um den Anfang oder das Ende zu verlangsamen, so dass es glatter und schrittweiser erscheinen und eine einfache Animation in oder aus. Wir können dies im CSS direkt nach unserem Animationsnamen hinzufügen. Wir können Leichtigkeit auswählen, den Browser neu laden und jetzt haben wir einen allmählicheren, reibungslosen Übergang, wenn unsere Animation beginnt. Denken Sie daran, dass es nicht nur die Deckkraft ist, die wir hinzufügen können , wir können alle anderen CSS-Regeln hinzufügen, die Sie anwenden möchten. Als nächstes werde ich den Animationen eine Verzögerung hinzufügen, damit die zweite Zeile des Textes nach dieser ersten eingeblendet wird. Beginnen wir mit dem Hinzufügen einiger benutzerdefinierter Klassen zu diesen beiden Elementen. Für die Überschrift der Ebene 1 können wir dem Klassennamen der Verzögerung eins hinzufügen. Dann der Text unter dem Klassennamen von Verzögerung zwei über in der styles.css. Wir können nun diese beiden Cluster anvisieren und die Animationsverzögerung festlegen. Fangen wir mit der Verzögerung an. Wir können die Animationsverzögerung auf einen beliebigen Wert setzen, den wir wollen. Ich möchte damit beginnen, dies auf 0,5 Sekunden zu setzen. Die Verzögerung zwei wird nur ein wenig länger sein , indem die Animationsverzögerung auf 1,5 Sekunden eingestellt wird. Speichern wir dies und über im Browser, aktualisieren. Wir sehen jetzt, dass die Animationen funktionieren und es gibt eine Verzögerung, aber das funktioniert nicht wie erwartet. Die zweite Zeile ist immer vorhanden, wenn die Seite geladen wird, aber wir möchten, dass diese Zeile nur angezeigt wird, wenn die erste Animation abgeschlossen ist. Dies geschieht aufgrund der Art und Weise, wie wir unsere Schlüsselbilder einrichten. Wenn wir zu unseren Stylesheets zurückkehren, sobald unsere Seite zum ersten Mal geladen wird, da die Animationen verzögert werden, wird die Deckkraft nicht sofort auf Null gesetzt. Um dies zu beheben, müssen wir dies auch in unserer Animationsklasse von Fade in benutzerdefinierte setzen. Wir setzen dies auf einen Anfangswert von Null. Dies wird wirksam, wenn die Seite zum ersten Mal geladen wird. Versuchen wir es jetzt, laden Sie den Browser neu. Dinge sehen auch nicht so aus, wie wir es erwartet haben. Wir sehen, dass die Animation eine Verzögerung hat , aber sie verschwinden auch nach dem Ende der Animation. Dies liegt daran, dass nach dem Ende unserer Animation standardmäßig keine dieser Stile aus den Schlüsselbildern erhalten bleiben. Das bedeutet, dass wir am Ende unserer Animation die Deckkraft von Null haben, anstatt die Lautstärke einer, die wir hier erwarten. Die Änderungen können wir den Animationsfilm-Modus nutzen und dies auf einen Wert von vorwärts setzen. Innerhalb unserer benutzerdefinierten Animationsklasse können wir den Animationsfilm-Modus und den Wert von vorwärts einstellen. Laden Sie den Browser neu und dies funktioniert jetzt wie erwartet. Wenn Sie den Animationsfilm-Modus auf „Vorwärts“ setzen , bleiben diese Stile vom Ende unserer Keyframes erhalten. In unserem Fall ist die Deckkraft, die auf eins gesetzt ist. Es gibt auch einen Rückwärtsgang, der das CSS vom ersten Schlüsselbild aus anwendet. Auch beide zwei, die das Styling von Anfang an und auch das Ende anwenden werden. Schließlich können wir auch den von Abschnitt der Deckkraft entfernen, um Null zu sein. Dies liegt daran, dass wir dieses Setup bereits zu Beginn unserer Animation haben. Lassen Sie uns einfach überprüfen, dass dies in Ordnung ist, laden Sie den Browser neu und alles funktioniert immer noch wie erwartet. Animationen können eine große Rolle darin spielen, wie unsere Website aussieht, sich anfühlt und wie sie auch hervorsticht. Animationen sind auch ein wirklich großes Thema, also wenn Sie interessiert sind, würde ich Sie ermutigen, einen tieferen Einblick in das Thema zu nehmen. Als nächstes werden wir bei den gleichen Themen bleiben und eine Animationsbibliothek einschließen, die uns einen schönen Blick auf Scroll-Effekte geben wird. 16. Animation-Bibliotheken: Hallo. Ich möchte Sie ermutigen, weiter über die Erstellung Ihrer eigenen benutzerdefinierten Animationen zu lernen. Eine weitere großartige Option ist eine vorgefertigte Bibliothek. Insbesondere wird der, den ich Ihnen zeigen werde, Animate on Scroll genannt. Diese Bibliothek wird es uns ermöglichen, Animationen zu unseren Elementen hinzuzufügen , während der Benutzer auf unserer Seite scrollt. Wir können verschiedene Animationen für verschiedene Teile für unsere Inhalte festlegen. Zum Beispiel können wir einen Flip-Effekt auf unseren Top-Inhalt setzen, der wie das Umdrehen von Autos ist. Wir haben auch viele andere Effekte, wie zum Beispiel den Inhalt vergrößern, wir können den Inhalt einblenden oder von der Seite aus schieben , entweder von der rechten oder der linken Seite. Wir haben auch weitere Steuerungsmöglichkeiten, wie die Einstellung der Verzögerung, die Zeitdauer und wir können auch diese Effekte kombinieren. Werfen wir einen Blick darauf, wie wir das auf unser Projekt anwenden können. Um diese Bibliothek einzuschließen, werde ich nach animieren auf Scroll suchen. Jetzt müssen wir zum GitHub-Link übergehen. Dies ist die, die wir brauchen, nur hier oben, also klicken Sie darauf. Wenn wir dann die Seite nach unten scrollen, können wir viele verschiedene Beispiele sehen, die in der Bibliothek enthalten sind. Wir haben einige Folie in Wirkung, wir haben verblassen und wenn wir [unhörbar] gehen, können wir mehr Flip-Animationen sehen, wo Sie nach unten, links und rechts drehen können. Wir haben dann einige Zoom-Effekte, bei denen wir aus verschiedenen Blickwinkeln heranzoomen und wir können auch die Dauer und das Timing einstellen, machen einige wirklich schön aussehende Effekte auf unserer Seite. Um mit dieser Bibliothek zu beginnen, müssen wir nur den CDN-Link unten einfügen. Wenn Sie Dinge wie ein Knotenprojekt verwenden, kann dies auch mit Paketmanagern wie Garn, Bower oder NPM einbezogen werden . Da wir ein normales HTML-Projekt verwenden, haben wir unten die CSS- und JavaScript-Links, die wir mit den erforderlichen Dateien verknüpfen. Beginnen wir mit den Stylesheets. Ich werde diesen Link kopieren und dann können wir dies in den Kopfbereich unserer Indexseite einfügen. In der Liste direkt über dem Link für unsere benutzerdefinierten Stylesheets. Stellen Sie sicher, dass unsere benutzerdefinierten Stile der letzte in der Reihenfolge ist. Als nächstes können wir den Link zum JavaScript greifen und dies kann auch in unserer Index-Seite gehen. Kopieren Sie diesen Link. Ich schaue mir das unten im Körperteil direkt nach unseren Kontakten an. Das letzte, was wir tun müssen, ist das initialisierte Skript aufzurufen. Also lasst uns das kopieren. Die Seite ist direkt unten. Dadurch wird die Bibliothek initialisiert, die in unserem Projekt verwendet werden soll. Das ist alles, was wir jetzt für das Setup tun müssen, können wir beginnen, die Effekte zu verwenden, indem wir einfach einige Attribute zu unseren Elementen hinzufügen. All diese Attributnamen sind diejenigen, die wir auf der Website sehen, die wir gerade angesehen haben. Wenn wir nach oben scrollen, sehen wir die Attribute wie verblassen und das ist genau das, was wir in unserem Projekt tun. Beginnen wir ganz oben auf unserer Homepage. Wir haben bereits einige benutzerdefinierte Animationen im Header-Abschnitt, die im letzten Video hinzugefügt wurden. Also werde ich zum Parallaxen-Abschnitt überspringen, wo wir hier einige Effekte zu diesen Elementen hinzufügen können. Dadurch werde die Verwendung der Flip-Animation zu diesen Listenelementen zu machen, so dass wir einen Flip in Wirkung haben, wenn wir die Seite nach unten scrollen. Gehen wir zu unserem Index und suchen Sie den Parallaxen-Abschnitt. Hier können wir für jeden unserer Listenelemente beginnen, diese Attribute hinzuzufügen. Der erste ist Daten-aos. Dies wird auf den Namen der Animation verlinken, die wir verwenden möchten. Ich werde Flip Up benutzen. Wie wir gerade auf der Homepage gesehen haben, können wir auch die Verzögerung und auch die Dauer einstellen, die die Zeitskala für die Animation ist. Beginnen wir also mit der Verzögerung, die Daten-aos-Verzögerung ist. Wir legen dies in Millisekunden fest, wie lange es dauert, bis die Animation beginnt. Sobald die Seite geladen wurde, für die allererste, werde ich die Verzögerung nicht einschließen, was erhöht wird, ist für alle übrigen Links. Als nächstes wird die Datendauer, also Daten aos Dauer, und wieder, dies ist in Millisekunden, mit einem Wert von 1000 Strahl eine Sekunde. Ich werde dies auf 800 Millisekunden setzen. Dies ist, wie lange die Animation dauern wird, kopieren Sie diese und fügen Sie sie in die restlichen Listenelemente ein. Wir werden auch die Drehung der Animation für alle restlichen Elemente verwenden, aber die Verzögerung für jedes Element erhöhen. Also 100, 200, 300 und dann 400. Die Dauer kann die gleiche dauern und Sie können auch um diesen Wert spielen und sehen, welche am besten für Ihre Website funktioniert. Speichern Sie dies und lassen Sie uns den Browser aktualisieren. Blättern Sie nach unten. Wir haben jetzt einen schönen Flip in Wirkung, wenn wir die Seite nach unten scrollen. Gehen wir nun zu unserem letzten Arbeitsbereich, wo wir einige gleitende Animationen hinzufügen werden. Wir werden mit den beiden Projekttiteln der Pizza-Planeten beginnen und auch Trello reagieren. Diese Titel werden von der Seite beginnen und dann in die Ansicht scrollen, während wir über diesen Abschnitt bewegen. Diese wurden innerhalb unserer Level-4-Überschriften hinzugefügt. Also lassen Sie uns die erste finden, die Pizza-Planet ist, der Name der Daten aos, und dies wird die Animation namens Folie links sein. Wir können auch eine Dauer hinzufügen, genau wie wir oben verwendet haben, und setzen Sie dieses Feld 1.000, das ist eine Sekunde. Ich werde das packen und verschieben Sie dies auf den zweiten Titel , der reagiert trello fügt dies ein und da es auf der gegenüberliegenden Seite ist, werden wir nach rechts gleiten, die gleiche Dauer wie zuvor beibehalten, speichern Sie diese und lassen Sie uns dies im Browser testen. Laden Sie neu, scrollen Sie nach unten, wie unser Titel schieben Sie es in und das gleiche für den zweiten. Denken Sie daran, dies ist Ihr Projekt und Sie können alle Animationen und Timings verwenden , die am besten zu Ihnen passen. Aber als nächstes werde ich in den Informationen direkt unten verblassen. Der Abschnitt ist gerade hier. Ich werde die hier verblassen. Um dies zu tun, werde ich den gesamten Text in ein div einwickeln, das als Wrapper fungieren wird und dann die Animation zu diesem Wrapper hinzufügen wird. So können wir alles von unserem Besuch Website Link bis knapp unter unserem Titel greifen, so schneiden Sie dies aus, verlassen Sie einen Ort, unsere Ebene für Überschrift. Wir können dann ein div hinzufügen, das ein Wrapper sein wird, fügen Sie all diesen Inhalt ein und dann können wir unsere Animation zu diesem Wrapper hinzufügen, den Namen der Daten aos. Dies wird verblassen und die Dauer von einer Sekunde sein. Lassen Sie uns auch diese beiden Attribute greifen und wir können mit dem Projekt-Bild arbeiten , also direkt unten. Wir haben auch dieses aktuelle Arbeitsbild. Gleich nach unserer Klasse, fügen Sie dies ein, ich werde auch die gleiche Fade in Animation halten oder die Dauer auf 1500 erhöhen. Laden Sie den Browser neu. Wir haben dies versehentlich dem zweiten hinzugefügt, anstatt dem ersten, aber das ist völlig in Ordnung, da wir dies für beide Projekte duplizieren werden. Machen wir das Gleiche jetzt für das erste Projekt. Wir können einen Ort ausschneiden, alle Texte von besuchten Seiten, bis zu knapp unter unserem Titel, fügen Sie ein div als Wrapper, fügen Sie den Inhalt wieder hinein, dann können wir unsere Animation hinzufügen, das war verblassen, die Dauer von 1000. Kopieren Sie diese Attribute und dann können wir diese auch zu dem Bild direkt unten hinzufügen. Das div, das dies umgibt, füge dies ein und halte dies mit dem anderen Bild konsistent, wird dies auf 1500 erhöhen, es ist eine Übereinstimmung. Testen wir das jetzt. Führen Sie einen Bildlauf nach oben durch, und aktualisieren Sie den Vorgang bis zum Projektabschnitt. Sie sehen die Folie für den Titel und auch das Bild auf dem Text wird jetzt eingeblendet. Schließlich unten unten haben wir auch den Kontaktabschnitt, in dem wir auch einige Animationen hinzufügen können. Ich werde die Hauptüberschrift von nach oben schieben, kein Fremder sein und dann schieben Sie in den beiden Textzeilen unten von rechts vom Bildschirm. Im HTML können wir zum Kontaktabschnitt gehen und mit der Überschrift beginnen. Der Name dieses Mal wird nach oben gleiten, die Dauer, ich werde meinen auf 1500 setzen. Mal sehen, wie das aussieht. Laden Sie den Browser neu, dann gleitet dieser jetzt nach oben. Wir müssen nur mit unseren zwei Textzeilen unten arbeiten und diese von oben auf der rechten Seite einbringen. Wir werden auch eine Verzögerung zu diesen beiden Animationen hinzufügen, da der Kopf in die Chance, an die Spitze zu kommen, wenn alle diese bewegen. Beginnen wir mit dem Text direkt darunter. Fügen Sie dies ein und der Animationsname wird nach links verschoben. Dieser braucht auch eine Verzögerung. Dies ist Daten aos Verzögerung und 1000 Millisekunden, die Dauer werden wir auch erhöhen dies auf 150 zu sein, und dann greifen Sie diese und wir können dies für die letzte Zeile auch hinzufügen. Fügen Sie dies als Attribut ein. Wir können die Verzögerung auf 200 Millisekunden erhöhen, wobei die gleiche Dauer und Animationsnamen beibehalten werden. Gehen Sie zum Browser und laden Sie neu, so dass wir mit einigen schönen Animationseffekten. Es gibt jedoch eine Sache, um die ich kümmern muss, bevor ich dieses Video einpacke. Eines der Dinge, die Sie seit dem Hinzufügen in dieser Animation bemerken werden, ist, dass wir jetzt nach rechts von der Seite scrollen können, wenn sie zum ersten Mal geladen wird. Dies liegt daran, dass unsere Animationen, die hineingleiten, am Seitenrand beginnen und dann in unsere Ansicht gleiten. Da der Inhalt von der Seite gestartet wurde, der Browser jetzt Dinge, dass die Seite viel breiter ist, als es sein soll. Alles, was wir tun müssen, um dies zu beheben, ist, dem Browser mitzuteilen , dass er alle Inhalte, die die Seite überlaufen, verbergen soll. Wir können dies tun, indem wir einen Überlauf auf der x-Achse hinzufügen und wir werden dies im Körperbereich unserer Stylesheets tun. Scrollen wir nach oben zu unseren globalen Stilen. Wir können erklären, wie wir mit jedem Überlauf auf der x-Achse umgehen wollen, die von links nach rechts von der Seite ist. Ändern Sie diesen Wert in den Wert ausgeblendet. Lasst uns das retten. Nun, wenn wir zurück zum Browser gehen und zurück zum Hauptinhaltsbereich scrollen, drücken Sie reload und jetzt hindert diese Überlaufeigenschaft uns davon ab, von der Seite zu scrollen. Wir werden auch weitere dieser Animationen hinzufügen, während wir den Kurs durchlaufen. Aber fühlen Sie sich frei, jede dieser Animationen mit verschiedenen zu tauschen, um Ihren Stil anzupassen. Dies ist jetzt unsere Homepage komplett, und in den kommenden Videos werden wir beginnen, uns auf unsere Portfolio-Seite zu konzentrieren, um all unsere Fähigkeiten zu zeigen. 17. Kurzer Abstecher: Browser-Kompatibilität: CSS entwickelt sich immer weiter zusammen mit dem Hinzufügen einiger neuer Funktionen. Diese neuen Funktionen sind oft großartig und wir können sie so schnell wie möglich nutzen. Wir müssen jedoch vorsichtig sein, da es oft Zeit dauert, bis diese Funktionen in allen Browsern vollständig unterstützt werden, und selbst wenn die Browser-Unterstützung aufholt und die neue Browser-Version veröffentlicht wird, müssen wir uns immer noch bewusst sein, dass nicht wird jeder sofort die neueste Version verwenden. Die Hilfe unter anderem, die eine wirklich nützliche Website als caniuse.com ist, ermöglicht es uns, eine CSS-Funktion zu überprüfen und auch zu sehen, wie weit es in den gängigen Browsern einschließlich aller früheren Versionen unterstützt wird. Wenn Sie zum Beispiel die Flexbox in unseren Projekten verwenden möchten, könnten wir dies eingeben und dann wollen wir das Flexbox-Modul, das wir hier sehen können. Über die Spitze haben wir eine Liste aller gängigen Browser und auch die Unterstützung für jede der Versionen. Zum Beispiel, Chrome Version 80 ist grün und wir können durch das Pop-up sehen, dass dies vollständig unterstützt wird und wir können auch die globale Nutzung für diesen Browser sehen. Zum Beispiel ist diese aktuelle [unhörbare] derzeit 10 Prozent und dies ist wirklich wichtig, um festzustellen, welche Browserunterstützung Sie für Ihr Projekt bereitstellen möchten. Wenn wir einen Blick auf die verschiedenen Farbtöne werfen, hat Internet Explorer Version 11 nur teilweise Unterstützung, aber derzeit hat dies nur etwa ein Prozent globale Nutzung. Daher müssen wir entscheiden, ob dies ein Problem für Ihre Zielgruppe sein wird. Im Allgemeinen ist etwas mit all diesen grünen Abschnitten wie diesem ziemlich sicher in einem Projekt zu verwenden, da es weit verbreitet unterstützt wird. Werfen wir einen Blick auf etwas anderes wie die Deckkraft, die wir kürzlich in unseren Projekten verwendet haben , und die Opazitätsregel, die Sie hier sehen, ist ziemlich vollständig grün, daher ist dies sicher in allen Browsern zu verwenden. Auch Animationen werden gut unterstützt. [ unhörbar] etwas darin, auf das man achten muss. Lassen Sie uns die Animationen eingeben und sehen, was auftaucht. Wenn wir die Animation eingeben, sehen wir etwas namens AnimationAPI, und sehen, dass diese Funktion experimentell ist. Dies liegt daran, dass dies nicht genau die Animation ist, die wir in unserem Projekt verwendet haben. Der Grund dafür liegt darin, dass Animation eine CSS-Abkürzung für mehrere Dinge ist. Wenn wir zu unserem Projekt gehen und einen Blick auf die Animation werfen , die wir früher in unserem Fade-in verwendet haben, ist die Animationseigenschaft eine Abkürzung für Dinge wie den Animationsnamen, wir hier haben, und auch die Animations-Timing- -Funktion. Wir könnten diese separat hinzufügen. Also könnten wir den Namen der Animation hinzufügen und die Geschwindigkeit einblenden und dann die Animationszeitfunktion festlegen , und dann könnten wir dies so einstellen, dass es einfach ist, wie wir oben verwendet haben, und dann alle Kurzschrift entfernen. Dies hätte genau den gleichen Effekt, aber dies ist nur eine Möglichkeit verschiedene verwandte Eigenschaften in einer Zeile zu gruppieren. In der Tat ist unsere Animation auch eine Abkürzung für die Animationsdauer, so dass wir diese sogar entfernen können, wir können diese Codezeile entfernen, und dann können wir diese innerhalb unserer Kurzschrift platzieren und das wird genau gleich funktionieren. Nehmen wir dies einfach, indem wir zum Projekt und in den Header-Abschnitt gehen, neu laden und alles funktioniert immer noch wie erwartet. Dies ist etwas zu beachten, wenn Sie nach CSS-Eigenschaften suchen, dass manchmal eine Eigenschaft eine Abkürzung für mehrere CSS-Regeln sein kann. Wenn Sie wissen möchten, ob etwas eine Abkürzung ist oder nicht, können Sie auf die Mozilla-Website gehen und dann eine Suche nach dieser bestimmten Eigenschaft. Suchen wir zum Beispiel nach dem Rahmen. Wir können in den CSS-Abschnitt gehen und wir sehen sofort, dass der Rahmen eine Kurzschrift-Eigenschaft ist, die die Rahmenbreite, den Randstil und auch die Farbe in einer Zeile festlegt . Im Allgemeinen geht es beim Umgang mit neueren CSS-Eigenschaften darum, mehr Funktionen auszugleichen, die Sie möchten, das RTA-Projekt, zusammen mit der Catering für Ihre Zielbenutzer. Es gibt auch Tools, die auch bei der Browserunterstützung helfen können, und dies verwendet Hersteller-Präfixe und Polyfills. Wir werden diese in diesem Kurs nicht behandeln, aber wir können uns diese Themen genauer ansehen , wenn Sie daran interessiert sind, mehr zu lernen. 18. Unsere Projektseite einrichten: Wir werden nun unsere Projektseite erstellen, die ein Schaufenster für unsere bisherigen Arbeiten sein wird. Dies wird uns auch eine Chance geben, eine neue CSS-Technik zu lernen, die das Gitter genannt wird. Im Gegensatz zu der Flexbox, die unsere Layouts in eine Richtung steuert, ermöglicht uns das CSS-Raster, unseren Inhalt sowohl in horizontaler als auch in vertikaler Richtung zu steuern . Zur endgültigen Version gehe ich von unserer Homepage weiter. Wenn Sie auf den nav Link für die Projekte klicken, enthält dies den gleichen Header Abschnitt, den wir für die Homepage verwendet haben, und dann können wir nach unten scrollen und die letzten Projekte werden animiert, während Sie nach unten scrollen. Wir können auch den Mauszeiger über jede dieser beiden bewegen, und der Titel wird für jedes Projekt angezeigt. Sie können auf dieser vollständigen Desktop-Ansicht sehen, jetzt verwenden wir das CSS-Rasterlayout. Wir werden alles darüber in den kommenden Videos erfahren, und das ist auch voll reaktionsfähig. Wenn wir den Browser nach unten verkleinern, werden wir verschiedene Layout-Änderungen sehen wie das Tablet-Gerät, das dann unsere Projekte in zwei Spalten umstellt. Wenn wir dies noch weiter verkleinern, wird dies zur vollen Breite des Browsers. Um damit zu beginnen, gehen wir über unser Projekt und erstellen eine neue Datei in unserem Portfolio-Verzeichnis. Erstellen Sie eine neue Datei, und dies wird die Projekte genannt werden. Wieder wird dies die HTML-Erweiterung haben. Stellt sicher, dass sich dieser neben dem Index und den Stylesheets im Stammverzeichnis des Portfolios befindet. Ich werde den gleichen Header-Abschnitt verwenden, damit wir unser Leben leichter machen können , indem wir zur index.html gehen, und wir können den gesamten Inhalt kopieren und dann das ändern. Dies hat bereits den Link zu unserer projects.HTML, die wir früh beim Erstellen des Header-Abschnitts hinzugefügt haben. Lassen Sie uns Befehl oder Steuerung A, um alle auszuwählen, Kopieren Sie den Inhalt über, und fügen Sie ihn dann in die projects.HTML. Ausgehend von unten müssen wir auch die Animation in der Scroll-Bibliothek behalten, aber wir werden den gesamten Rest des Inhalts bis zum Header-Abschnitt entfernen. Dazu gehört auch unser jüngster Arbeitsabschnitt, der Parallaxen-Abschnitt. Lassen Sie uns dies entfernen, so dass wir nur mit dem Header-Abschnitt und dann unser Skript am unteren Rand verlassen. Dies hat auch unseren gleichen Link zu dem Stylesheet, das wir erstellt haben, was bedeutet, dass unsere Styles auch weiterhin gelten. Das nächste, was wir tun müssen, ist, den Titel zu ändern. Dies wird Chris Dixons Projekte sein, und das gibt uns jetzt einen guten Ausgangspunkt, der immer noch den gleichen Header und alle Links enthält , die wir brauchen, um unser eigenes CSS zusammen mit der Animationsbibliothek. Lassen Sie uns diese Datei speichern und die Checkliste funktioniert in unseren Projekten in Ordnung, lassen Sie uns den Browser von der Homepage neu laden, wir können auf die Projekte klicken, und es ist jetzt Links zu unserer projects.HTML, und wir können den Header -Bereich vorhanden ist. Für diese Seite werde ich jetzt einrichten. Als nächstes werden wir unsere Projekte mit einem mobilen ersten Ansatz hinzufügen. Denken Sie daran, dass Sie von Anfang an auch einige Bilder herunterladen müssen, oder einige echte Bilder von einigen früheren Projekten, die Sie erstellt haben. Wenn Sie keine haben, die völlig in Ordnung ist, können Sie ein beliebiges Platzhalterbild verwenden , das Sie möchten, aber stellen Sie sicher, dass diese im nächsten Video verwendet werden können. 19. Einbinden unserer Projektseite in HTML: Innerhalb des Image-Ordners in unserem Projekt haben wir all diese Bilder, die wir jetzt in unserer projects.html verwenden werden. Wir haben auch über die grundlegende Struktur und die Kopfzeile im letzten Video zusammen mit dem Animationsskript unten unten abgedeckt . Ich werde jetzt mit unserem Projektabschnitt beginnen, indem ich einen neuen Abschnitt Rapper erstelle , der auch eine Ebene Sie Überschrift mit dem Text der jüngsten Projekte haben wird. Dies wird auch verschiedene Klassen erhalten, während wir gehen und wir werden diese in der CSS sehr bald nutzen. Die Rubrik der Ebene drei wird die Klasse der Projekte Titel haben. Dann werde ich danach ein div hinzufügen, das ein Rapper für alle unsere Projekte sein wird, also fügen wir eine Klasse von Projekten hinzu. Dann wird jedes einzelne div hier für ein einzelnes Projekt sein. Jedes dieser Projekte wird eine ID haben. Ich werde den ersten aufrufen, arbeiten eins, und diese ID wird später im CSS verwendet. Jeder von ihnen wird auch einen konsistenten Klassennamen von grid-item haben. Dann verschachtelt im Inneren, wenn wir einen Blick auf die endgültige Version werfen, werden wir ein Bild und auch den Projekttitel haben , der später angezeigt wird, wenn wir den Mauszeiger über jedes Bild bewegen. Wir müssen diese beiden Elemente hinzufügen, beginnend mit unserem Bild. Alle unsere Bilder in diesem Bilderordner. Der erste, den ich benutzen werde, wird der Musik-Player sein, auch der alte Text. Danach können wir einen Link mit den a-Elementen hinzufügen und dies wird der Text für unsere Projekte sein. Das ist der Musik-Player. Es kann einen Link zu einer separaten Seite hinzufügen, um weitere Details zu diesem einzelnen Projekt bereitzustellen, wenn Sie möchten. Ich werde meine leer lassen, da wir dies während dieses Kurses nicht abdecken werden, aber fühlen Sie sich frei, dies als Herausforderung zu tun. Ein Klassenname von verstecktem Text. Da der Text zunächst ausgeblendet wird, bis der Benutzer mit dem Mauszeiger über, so können wir voran gehen und jede einzelne dieser einzeln eingeben, wenn Sie möchten. Aber da ich ziemlich viel zu durchstehen habe, werde ich das kopieren und einfügen und dann die Details ändern. Denken Sie daran, dass Sie auch nicht so viele Projekte wie ich einschließen müssen, und Sie können auch weitere hinzufügen, wenn Sie es vorziehen. Arbeiten Sie zwei, die gleiche Klasse, die Bildposition, dieses Mal wird für react trello sein, der alte Text zwei, und auch der Titel. Der dritte, den wir einfügen werden. erneut sicher, dass sich dies innerhalb des Projekt-Rappers befindet, fügen Sie dies in ein und suchen Sie die ID. Das Bild für mein drittes wird für den Foto-Editor und auch den verlinkten Text zwei sein. Der vierte wird für die Produktivitäts-App und auch den alten Text zwei sein. So werden unsere Projekte strukturiert. Ich habe insgesamt neun, also gehe ich voran und füge diese jetzt hinzu. Pausieren Sie das Video und kommen Sie zurück, sobald Sie alle Ihre Projekte hinzugefügt haben. Alle meine neun Projekte sind jetzt an Ort und Stelle, und hoffentlich, haben Sie Ihre zwei fertig. Nun, gehen wir zum Browser und überprüfen Sie dies in der projects.html. Unmittelbar unterhalb der Kopfzeile haben wir unsere aktuellen Projekte Titel. Dann haben wir für jedes unserer Projekte unser Image und auch den Titel neben. Unsere Inhalte sind jetzt für unsere Portfolio-Seite vorhanden. Als nächstes werden wir einige CSS-Styling anwenden. Zunächst werden wir mit dem mobilen ersten Ansatz beginnen und die Vorteile der CSS Flexbox nutzen. Später im Kurs wenden wir dann eine Medienabfrage an, wenn mehr Bildschirmplatz zur Verfügung steht. Dann können wir das CSS-Raster nutzen, um unseren Inhalt in zwei Richtungen zu gestalten. 20. Projekt-Layout für mobile Endgeräte mit Flexbox: Wie versprochen, werden wir jetzt mit dem Styling fortfahren, beginnend mit der kleinen Bildschirmansicht, und dann können wir herumspielen, wenn wir mehr Platz auf dem Bildschirm haben wollen. Im letzten Video haben wir den HTML-Code für alle Projekte hinzugefügt. Wenn wir auf die HTML-Seite gehen, sehen wir, dass alle unsere einzelnen Projekte in diesem div mit der Klasse des Rasterelements eingewickelt sind , und dann sind alle diese Rasterelemente innerhalb dieses Projekts div verschachtelt. Dies werden die beiden Hauptklassen sein, die wir in unseren Stylesheets brauchen werden. Also gehen wir jetzt rüber. Also werde ich einen neuen Abschnitt direkt über unserer Medienabfrage erstellen und dann einen Kommentar für diese Projektseite erstellen. Das ist genug mit dem Titel, Projekttitel war, und alles, was ich hier tun werde, ist, die Schriftgröße auf 1,6 Rems zu setzen, was dem Äquivalent von 16 Pixeln entspricht. Unser Hauptwrapper war die Klasse der Projekte, und hier können wir den Anzeigetyp so einstellen, dass er die Flexbox nutzt. Die mobile erste Ansicht, an der wir gerade arbeiten ermöglicht es uns, die Flex-Richtung als Spalte festzulegen, was bedeutet, dass unsere Elemente vertikal gestapelt werden und diese dann später ändern, wenn wir mehr Platz auf dem Bildschirm zur Verfügung haben. Jedes unserer Projekte und diese Klasse von Rasterelement, und wir werden dies verwenden, um zunächst etwas Abstand zwischen jedem zu setzen, indem wir etwas Marge am unteren Rand jedes einzelnen und das Volumen eines Rem hinzufügen. Wenn wir nun einen Blick auf die endgültige Version werfen, sehen wir, dass dies den grauen Rand hat, der jeden umgibt. Um dies zu tun, fügen wir jedem unserer Abschnitte eine Hintergrundfarbe hinzu. Um diesen Hintergrund aus dem Bild sichtbar zu machen, werden wir einige Polsterungen um den Rand jedes einzelnen hinzufügen. Dies wird einige Abstände schaffen, so dass unser Hintergrund auf allen vier Seiten durchkommt. So können wir den Hintergrund so einstellen, dass der Wert von Lichtschiefergrau, neu geladen wird, und wir können dies nur hinter dem Projekttitel sehen. Um dies auf allen vier Seiten zu sehen, fügen wir den Füllwert eines Rem hinzu. Dies gibt uns die Wirkung einer Grenze. Derzeit sehen wir, dass unsere Grenze breiter auf der Unterseite ist, und das ist einfach, weil wir derzeit den Projekttitel haben. Wir werden diese Stellen über dem Bild sehr bald entfernen. Nach unserem Rasterelement gehen wir nun auf das Bild und setzen dies auf die volle Breite des Containers. Wir können dies tun, indem wir unser Rasterobjekt-Bild anvisieren und dann die Breite und die Höhe auf 100 Prozent festlegen. Dadurch wird sichergestellt, dass unser Bild vollständig zum Rasterelement passt. Speichern wir das jetzt und laden Sie die Projekte neu. Das sieht auf der kleinen Bildschirmansicht gut aus. Wenn wir jedoch den Browser dehnen, beginnen diese Bilder wirklich gestreckt zu werden. Um dies zu verbessern, werden wir dieses Layout zweimal mit zwei Medienabfragen ändern. Derzeit haben wir nur eine Medienabfrage eingerichtet. Ich werde diese beiden nutzen, die Flex-Richtung wechseln, um Reihe zu sein. Wir haben also zwei Projekte nebeneinander. Dann werden wir im kommenden Video noch breiter zu einer vollständigen Desktop-Ansicht gehen, und dann nutzen wir das CSS-Raster. Scrollen Sie nach unten, wir haben bereits unsere Medienabfrage an Ort und Stelle, und ich werde bis zum Ende davon gehen. Die schließende Klammer gerade hier ausgefüllt. Beginnen wir mit unseren Projekten. Denken Sie daran, dass dies der wichtigste Wrapper für alle unsere Projekte ist, und wir können die Flex-Richtung auf Zeile setzen. Als nächstes können wir den Rasterpunkt anvisieren , der unser einzelnes Projekt ist, und wir können die Flex-Basis auf einen Wert von 45 Prozent setzen. Die Flex-Basis wird die Standardgröße unserer Elemente sein, die unsere Projekte sind, und dies belässt auch 5 Prozent für jeden Abstand dazwischen. Wenn wir das speichern und neu laden, sehen wir, dass die Projekte nicht ganz wie erwartet aussehen, was plötzlich auf 45 Prozent Flex-Basis liegt. Wir hatten erwartet, dass zwei Bilder nebeneinander mit den 5 Prozent dazwischen für den Abstand haben. Dies liegt daran, dass unsere Artikel standardmäßig auf „Kein Umbruch“ gesetzt sind, so dass alle Elemente versuchen, in die gleiche Zeile zu passen. Wir können dies überschreiben, indem wir den Flex Wrap setzen, da jedes einzelne Element in seine eigene Zeile brechen wird , nachdem wir die Breite berücksichtigt haben. In unseren Projekten können wir, wenn Flex-Wrap, den Standardwert von „no wrap“ überschreiben, um einfach zu wickeln. Speichern Sie diese und laden Sie sie neu. Jetzt werden wir zwei Projekte nebeneinander sehen, jeweils 45 Prozent segmentiert sind. Der gesamte zusätzliche Platz befindet sich jedoch auf der rechten Seite. Aber es würde viel besser aussehen, wenn wir den Raum gleichmäßiger verteilen. Um dies zu ermöglichen, haben wir eine Flexbox-Eigenschaft namens Begründung Inhalt, und dies wird uns erlauben, zu bestimmen, wo wir wollen, dass dieser Abstand erscheinen. Wir werden festlegen, dass dies gleichmäßig verteilt wird, so dass der gesamte zusätzliche Raum um die Elemente gleichmäßig aufgeteilt wird. Nun hat sich der weiße Raum gleichmäßig zwischen unseren Projekten aufgeteilt. - Richtig. So haben wir jetzt das Styling für das kleine Bildschirmlayout mit der Flexbox, und unsere Website sieht jetzt gut aus auf einem kleinen mobilen Gerät oder einem kleinen Tablet. Allerdings wollen wir auch für größere Bildschirme und Desktop-Geräte gerecht werden, und wir werden dies im nächsten Video tun und auch unseren ersten Blick auf die Verwendung des CSS-Grids bekommen. 21. Erster Einblick in das CSS-Gitter: Wir wissen bereits, wie man die CSS Flexbox benutzt, das Layout eines Inhalts über eine Achse hinweg. Zum Beispiel haben wir in diesem oberen Abschnitt hier den Inhalt auf der Seite in einer Reihe angeordnet. darunter haben wir ein spaltenbasiertes Layout, in dem unser Inhalt von oben nach unten gestapelt ist . Dies ist eine große Verwendung für die Flexbox, aber dies hat auch eine Einschränkung, unser Inhalt innerhalb jedes Abschnitts kann nur in eine Richtung ausgelegt werden. Wenn wir jedoch einen Blick auf ein rasterbasiertes Layout auf der rechten Seite werfen, können wir das CSS-Raster verwenden, um das Layout über zwei Richtungen zu steuern . Das erste, was wir tun müssen , ist, die Breite und Höhe unserer Spalten und Zeilen festzulegen. Wir können dann festlegen, wie viel von einer Lücke wir zwischen jedem unserer Elemente wollen. Wir können dann auch festlegen, ob unsere Elemente alle gleich sind oder ob wir wollen, dass sie zusammengeführt werden, wie wir gerade hier sehen. Ein weiterer großer Teil des Rasters ist auch die Fähigkeit, unsere Inhalte in jedem Abschnitt zu platzieren, den wir wollen. Wir können dies entweder tun, oder wir können zulassen, dass unsere Inhalte natürlich fließen und den nächsten verfügbaren Platz im Raster einnehmen. Eines der Missverständnisse über das Raster und Flexbox zu Beginn ist, dass wir IV Gesetz wählen müssen. Vor allem ist dies nicht die Absicht. Das Raster ist nicht dazu gedacht, die Flexbox zu ersetzen , und sie können sich in denselben Projekten ergänzen. Lassen Sie uns nun in unserer endgültigen Medienabfrage hinzufügen, transformieren Sie unsere Projekte in ein Raster. Ich möchte meins um die 1.000 Pixel-Marke hinzufügen, aber Sie können natürlich damit spielen, um Ihre Projekte aller Arten von CSS zu entsprechen. Nach der letzten Medienabfrage werde ich eine neue Medienabfrage mit dem @media real hinzufügen. Selbstverständlich können wir verschiedene Bildschirmtypen, wie z.B. den Bildschirm oder die Druckansicht, ausrichten . Nun, genau wie zuvor, werde ich nur die minimale Breite verwenden, genau so, und setzen Sie dies auf 1000 Pixel. Beginnen wir mit unserem Projekt-Wrapper und der Art und Weise, wie wir das CSS-Raster einführen können. Genau wie wir es mit der Flexbox getan haben, ist es, den Anzeigetyp zu setzen. Wir stellen die Anzeige als Raster fest, und ich werde auch die Höhe des Schnitts auf 100 Prozent der Ansichtspunkthöhe einstellen . Das nächste, was wir tun müssen, ist zu deklarieren, wie viele Spalten und Zeilen wir in unserem Raster verwenden möchten. Wir legen die Spalten fest, indem wir die Eigenschaft Rastervorlage Spalten verwenden, und dann legen wir fest, wie breit wir wollen, dass jede Spalte sein. Zum Beispiel, wenn wir drei Spalten wollten, 200 Pixel wird es so tun. Also 200 Pixel, 200 Pixel, und dann 200 Pixel. Wenn wir nun speichern und neu laden, sehen wir jetzt unsere drei Spalten mit jeweils 200 Pixeln. Wir können diese auch anders machen, so dass die mittlere 500 sein könnte, und das wird sich nur auf unsere mittlere Säule auswirken. Wenn wir ein zusätzliches hinzufügen wollten, müssen wir nur einen zusätzlichen Wert hinzufügen, genau so, und dies spiegelt sich jetzt im Browser wider. Wir können auch verschiedene Werte wie Prozentsatz, Ems, Widder verwenden, oder wir können auch eine Rasterbrucheinheit verwenden, die einen Teil des verfügbaren Platzes einnimmt. Wenn wir drei gleiche Spalten wollten, könnten wir die FR-Einheiten verwenden, also eine fr, eine fr und eine fr und diese würden jetzt drei gleiche Leerzeichen einnehmen. Danach können wir auch unsere Rastervorlagenzeilen festlegen, und Sie können wahrscheinlich erraten, was dies tun wird. Dadurch wird der Abstand für jede unserer Zeilen in unseren Projekten festgelegt. Gehen wir zum Beispiel für 100 Pixel, 300 Pixel und dann 200 für den dritten. Nachladen. Wir müssen die Rastervorlagenzeilen für unser Projekt nicht festlegen, wenn wir diesen Satz überhaupt nicht haben. Entfernen Sie diese. Da wir alle drei Spalten gesetzt haben, nimmt der Inhalt die drei Spalten in einer Zeile ein, und dann wird der verbleibende Inhalt in die nächste Zeile verschoben. Danach können wir auch etwas Raum zwischen jedem dieser Projekte hinzufügen, und wir können dies tun, indem wir eine Rasterlücke hinzufügen. Die Gitterlücke ist einfach der Abstand zwischen jeder unserer Zeilen und Spalten. Ich möchte meins auf 20 Pixel setzen. Eines der guten Dinge über die Gitterlücke ist, dass es auch keinen Abstand auf der Außenseite hinzufügt. Sie gilt nur für jeden unserer Abschnitte. Eine Sache, die Sie bemerken werden, ist, dass unter jedem Projekt mehr Platz ist als dazwischen, obwohl wir eine gleiche Lücke von 20 Pixeln zwischen jedem gesetzt haben. Dies liegt daran, dass wir von früher an, als wir die erste mobile Ansicht erstellt haben, einen gewissen Rand am unteren Rand jedes dieser Elemente festgelegt haben. Wir möchten, dass dies nur für die mobile Ansicht wirksam wird. Daher können Sie in dieser Medienabfrage auch den Rand zurücksetzen, Sie sind wieder auf Null. Dies wurde in der Rasterelementklasse festgelegt, und alles, was wir tun müssen, ist, den unteren Rand auf Null zu setzen. Laden Sie den Browser neu, und dies wird weiterhin auf dem kleinen Bildschirm wirksam. Erweitern Sie den Browser auf die größte Größe, und die Rasterlücke ist jetzt gleich. Das Raster bietet uns auch eine Wiederholungsfunktion, die eine Abkürzung ist. Wenn wir mehrere Zeilen oder Spalten mit gleichem Abstand haben, können wir nur diese drei gleichen Spalten haben Anstatt dies dreimal auszuschreiben, können wir die Wiederholungsfunktion verwenden. Dann erklären wir in den Klammern, wie oft wir wollen, dass dies wiederholt wird. Zum Beispiel lassen Sie uns vier Mal gehen, und dann legt fest, wie breit wir die Spalte wollen, speichern und aktualisieren. Diese werden nun viermal wiederholt. Aber wir werden das als drei belassen wollen, genau wie wir es vorher benutzt haben. So funktioniert das Rastersystem auf einer Basisebene. Aber was, wenn wir nicht wollen, dass unser Raster so gleichmäßig ist? Es kann Fälle geben, in denen wir möchten, dass unsere Bilder oder unsere Abschnitte mehrere Teile unseres Rasters überlappen. Nun, dafür werden wir mit den Rasterflächen Eigentum zur Verfügung gestellt, und das ist, was wir im nächsten Video entdecken werden. 22. Gitterbereiche für fortgeschrittene Layouts: Derzeit sieht unser CSS-Raster ein bisschen so aus. Wir haben gleich große Spalten und Zeilen erstellt, und dies ist so konzipiert, dass Inhalte der gleichen Größe akzeptiert werden. Obwohl wir manchmal die Notwendigkeit haben, verschiedene Größe Bereiche zu erstellen , um es uns zu ermöglichen, verschiedene Größe Stücke von Inhalten zu verwenden. Beispielsweise können Sie einen breiteren Inhalt wünschen, über zwei Rasterbereiche erstrecken oder das gleiche vertikal für einen größeren Inhalt tun. Glücklicherweise können wir dies mit dem CSS-Raster tun, indem wir die Rasterbereiche verwenden, und das ist, was wir jetzt betrachten werden. In unserem Projektstart HTML haben wir jedem unserer Projekte eine eindeutige ID gegeben. Dies ist work1, work2, und dann erhöht für jeden unserer Artikel. Diese ID kann im CSS verwendet werden, um jeden dieser Abschnitte in einem beliebigen Teil unseres Rasters zu platzieren . Im Moment fließen unsere Rasterelemente einfach ganz natürlich über die Seite. Dann geht es weiter zur nächsten Reihe. Wir können diese IDs ab und zu verwenden, sie in verschiedenen Abschnitten zu platzieren. Wir können ihnen auch erlauben, mehrere Abschnitte zu nehmen, und das ist, was wir in diesem Video abdecken werden. In dieser CSS-Datei gehe ich jetzt zurück zu unserem Projektseitenabschnitt wo wir den Kommentar hinzugefügt haben. Scrollen wir nach oben. Dies ist der Abschnitt hier. Wir fügen das überall hinzu, aber ich werde dies nach dem Titel hinzufügen, und wir können unseren Abschnitt nach ID mit dem Hash und dem Namen von work1 auswählen. Das mag zunächst ein wenig verwirrend aussehen, aber ertragen Sie mir, da dies sehr bald klarer wird. Was wir hier tun werden, ist die Rasterfläche festzulegen, dann geben wir diesem Rasterbereich einen eindeutigen Namen. Gehen wir für die Arbeit1. Jetzt haben wir diesen Abschnitt in unserem CSS einem neuen Rasterbereich namens work1 zugewiesen. Dann werden wir dies für jeden unserer Abschnitte wiederholen. work2, dies können beliebige Namen sein, die Sie wählen, aber ich werde dies einfach und konsistent halten. Nummer vier, Nummer fünf, und denken Sie daran, meine geht bis zu neun Gegenstände. Sechs, sieben, Nummer acht und schließlich Nummer neun. Jetzt haben wir jedem unserer Elemente einen Rasterbereich zugewiesen. Wir können sie auf jede Art und Weise auslegen, die wir wollen. Gehen wir zurück zu unserer Medienabfrage, wo wir unser Raster früher eingerichtet haben, unten am Ende dieser Datei. Wir können dann die Rastervorlage Bereichseigenschaft verwenden. Ich möchte das in seiner eigenen Zeile hinzufügen, also ist es klarer. Hier drinnen werden wir erklären, wie wir wollen, dass unser neues Raster aussieht. Anstatt bestimmte Dinge unser Gewicht, unsere Rastervorlagenspalten und Zeilen, die wir uns vorher angesehen haben, wo der Inhalt natürlicher fließen wird, erklären wir hier genau, welches Stück Inhalt wollen wir in jedem unserer Rasterflächen hinzufügen. Wir legen dies visuell zwischen den Zitaten hin und her. Wenn wir zum Beispiel freie Spalten wollten, könnten wir den ersten Platz oben links setzen, nämlich diesen, um den Abschnitt mit dem Namen work1 zu sein. Als nächstes werde ich erklären, dass work4 das zweite Element in der ersten Zeile sein wird, dann wird der dritte die work7 sein. Dies sind die Elemente, die in der ersten Zeile angezeigt werden sollen. In der nächsten Zeile zwischen den Zitaten können wir dann genau das Gleiche tun. Ich werde sagen, es ist work2 work5, und dann auch work7. Beachten Sie hier, dass diese vier Unikate sind. Dann auf der rechten Seite haben wir zwei mit dem gleichen Namen. Dies bedeutet, dass die work7 zwei Teile beansprucht, was bedeutet, dass sie viel größer als die anderen Elemente sein wird. Zum Beispiel, in unserem Raster hier, wird dies ein Abschnitt gerade hier sein, und work7 wird beide Plätze einnehmen. Bis zu unserer nächsten Zeile werde ich work3, work6 und dann work8 einstellen . Dann füge ich für die folgende Zeile einen Abschnitt der Arbeit hinzu. Dies wird die volle Breite unseres Gitters umfassen, das drei Teile in derselben Reihe einnimmt. Da wir drei Abschnitte deklariert haben, müssen wir nur den gleichen Namen von work9 in jeden unserer Abschnitte hinzufügen. Hier, ohne das Raster im Browser zu sehen, erhalten wir eine visuelle Darstellung, wie unser Raster angelegt wird. Wir können sehen, dass alle diese Abschnitte individuell sind, außer diesem letzten Abschnitt hier und auch diesem vertikalen Abschnitt oben rechts. Lasst uns das jetzt retten. Laden Sie den Browser neu. In der oberen rechten Seite haben wir diesen Abschnitt, der die beiden vertikalen Spalten überspannt. Wir haben dann unsere einzelnen Stücke rundherum, dann unten, nahm der Abschnitt die ganze Reihe, die die Arbeit9 ist. Wir können diese Rasterflächen-Technik verwenden, um einige schön aussehende Layouts und auch einige komplexere Designs zu erstellen , abhängig von dem Inhalt, den wir in unserem Raster haben. Im nächsten Video werden wir unseren Portfoliobereich verbessern, indem wir einige nette CSS-Hover-Effekte hinzufügen. 23. CSS-Text-Overlay, Hover-Effekte und Animationen: Willkommen zurück. Unser Projekt nimmt jetzt Gestalt an und ist fast abgeschlossen. Ich werde jetzt die Dinge beenden, indem ich etwas mehr CSS-Styling und auch Effekte hinzufüge. Wenn wir Ebene nehmen, werden wir jedem unserer Projekte im Raster einen Hover-Effekt hinzufügen , der auch den Titel des Projekts enthüllt. Wir werden auch unsere Animationsbibliothek nutzen, um auf dieser Seite. Beginnen wir zuerst mit dem Entfernen des Projekttitels und dann werden wir dies später wieder einführen, wenn der Benutzer über unsere Projekte schwebt. Beginnen wir mit unseren Stylesheets von vorn. Wenn wir einen Blick für alle Projekte Abschnitt oder alle Projekte Seite, werden wir dies am Ende des Abschnitts hinzufügen. Stellen Sie sicher, dass dies außerhalb von Medienabfragen ist, da wir immer möchten, dass dies für alle Bildschirmgrößen gilt. Wir werden die Klasse des versteckten Textes verwenden. Wenn Sie sich im HTML erinnern, haben wir diese Klasse zu jedem unserer Rasterelemente hinzugefügt, so dass wir dies jetzt nutzen können. Die Höhe eines Textes, was wir tun werden, um zu beginnen, ist, den Anzeigetyp auf „none“ zu setzen. Dies wird dann von der Seite entfernt. Wenn wir auf Aktualisieren klicken, sehen wir nun, dass unser Titel entfernt wurde. Jetzt brauchen wir eine Möglichkeit, dies wieder einzuführen, wenn der Benutzer über unser Bild schwebt. Wir werden dies mit einer Kombination von Klassen tun. Denken Sie daran, dass jedes unserer Projekte in dieser Grid-Item-Klasse umgeben ist , so dass wir darauf zugreifen können, um zu beginnen. Dann durch eine Spalte getrennt, können wir verwenden, was eine Pseudo-Klasse genannt wird. Eine Pseudo-Klasse wird verwendet, wenn wir CSS für einen bestimmten Zustand anwenden möchten, z. B. wenn ein Element aktiv ist, wenn ein Link besucht wird, oder in unserem Fall, wenn wir den Mauszeiger über die Elemente bewegen möchten. Wenn wir den Mauszeiger über diese Elemente bewegen, wollen wir diese versteckten Texte direkt oben beeinflussen. Lassen Sie uns verstehen, dass gerade danach alle Stile auf diese versteckte Textklasse angewendet werden. Sobald wir den Mauszeiger über unser Gitterelement bewegen, haben wir diesen Anzeigetyp von nicht anpassen hier. Wir möchten den verteilten Anzeigetyp des Blocks zurücksetzen , der diesen dann in unserem HTML zurücksetzt. Auch der Text ausrichten, um in der Mitte unseres Abschnitts zu sein. Wir können auch mit der Schriftgröße herumspielen, lassen Sie uns für 4rem und auch die Schriftfarbe von Weiß gehen. Über zum Browser drücken Sie Refresh und jetzt, wenn wir den Mauszeiger über eines unserer Bilder bewegen, sehen wir diesen großen Text unten erscheinen. Jetzt verschwinden unsere Texte, wenn der schwebt. Aber das wird immer noch den Platz am unteren Rand des div belegt. Aber das wollen wir nicht ganz unten. Wir möchten, dass dies in der Mitte unseres Abschnitts platziert wird. Der Grund, warum wir dies unten in unserem div sehen, ist, weil das Element standardmäßig Platz in der Reihenfolge einnehmen wird, in der sie sich im HTML befinden. Es macht Sinn, dass wir unser Bild haben, gefolgt von unserem Text. Eine Möglichkeit, dies zu ändern, besteht darin, die CSS-Position des Textes so zu setzen, dass es absolut ist. Absolute, wir werden die Elemente aus dem Fluss oder der Seite entfernen, was bedeutet, dass es effektiv keinen Platz in Anspruch nimmt. Wir sind dann frei, das überall zu positionieren, wo wir wollen. Gehen wir zurück zu unserem Stylesheet und kurz nach unserer Farbe können wir die Position dieser Elemente so einstellen, dass sie absolut ist. Mal sehen, welche Wirkung dies im Browser hat. Wenn wir nun den Mauszeiger über unsere Bilder bewegen, führt dies nun den Text auf der Seite, aber es nimmt keinen Platz mehr ein. Wir können das sehen, weil wir keinen grauen Hintergrund hinter dem Text haben, was bedeutet, dass er nicht mehr innerhalb unseres div positioniert ist. Es ist offensichtlich nicht in einer guten Position. Wir können es jetzt mit diesen CSS-Eigenschaften von oben, rechts, unten und links verschieben . Wir können das dann verwenden, um es genau dort zu platzieren, wo wir wollen. Wir möchten, dass der Text über die Mitte des Bildes gelegt wird. Es macht Sinn, bis Sie diese 50 Prozent von oben und 50 Prozent von links setzen. Sagen wir dies und gehen Sie für die linke von 50 Prozent und auch das gleiche für die Spitze. Wir können diesen Hover auch als vorübergehende Maßnahme entfernen, nur damit wir sehen können, was beim Testen vor sich geht. Rüber zum Browser und lass uns sehen, wo wir jetzt sind. Wir sehen keinen der Titel über unsere Projekte. Wenn wir jedoch zum oberen Rand der Seite scrollen, sehen wir, dass alle Titel jetzt im Kopfzeilenbereich platziert werden. Warum ist das? Nun, das liegt daran, wenn wir das Textil nehmen, der Fluss des Dokuments mit absoluten und dann setzen Sie die oberen und linken Werte, wie wir gerade drehen. Diese oberen und linken Werte werden im Ansichtsfenster des Browsers festgelegt. Wir haben den Text effektiv so eingestellt, dass er 50 Prozent von der oberen Ecke des Browsers entfernt ist. Es gibt eine Möglichkeit, dies zu überschreiben, und dies besteht darin, eines der Elemente zu setzen, die eine Position von relativ haben. Jedes Projekt, das wir unten haben, ist in ein div eingewickelt. Dieses div hat die Klasse des Rasterelements. Wenn wir zu unserem Projekt gehen, ist dies das Wrapper div gerade hier. Wenn wir dies nun als relative Position festlegen, wird dieser Container nun unser Bezugspunkt für unseren Text und nicht für das Browser-Ansichtsfenster sein wird dieser Container nun unser Bezugspunkt für unseren Text und nicht für das Browser-Ansichtsfenster sein. Zurück zu unserem Stylesheet, können wir das jetzt anwenden. Es geht um Gitter Artikel, wir haben bereits diese Klasse gerade hier. Lassen Sie uns die Position so einstellen, dass sie relativ ist. Über zum Browser und aktualisieren. Ein OCD-Text wird auf jedes unserer Bilder angewendet, der Text wurde tatsächlich verschoben, zum Beispiel 50 Prozent von der linken Seite. Aber es berücksichtigt nicht die Breite und Höhe des Textes. Stattdessen wollen wir den Text, den wir über 50 Prozent in die Mitte unseres Textes verschoben haben. Wir können dies tun, indem wir das Textfeld um 50 Prozent seiner Breite und Höhe verschieben. Da wir eine prozentuale Einheit anstelle eines Pixels verwenden, wird dies auch immer noch den Text zentrieren, unabhängig von seiner Größe. Zurück zu unserem versteckten Text. Das Gitterelement versteckten Text und dann direkt nach unserer Positionierung, können wir dann unseren Text um die Hälfte der Breite und Höhe durch eine CSS-Transformation versetzen. Eine Transformation, die wir hinzufügen möchten, wird übersetzen. Dann innen hier können wir dies versetzen, indem wir einen X und Y Wert hinzufügen. Wir möchten einen Offset von negativen 50 Prozent hinzufügen, das ist die Hälfte des Gewichts oder des Textes. Dies befindet sich auf der X-Achse, die von links nach rechts ist. Wir können das auch für die Y-Achse tun, die nach unten geöffnet wird. Lassen Sie uns den Browser neu laden, und jetzt werden alle Steuern nach links und oben verschoben, 50 Prozent der Gesamtbreite und Höhe. Um unseren Text jetzt hervorzuheben, können wir einige Hover-Effekte hinzufügen. Zuallererst müssen wir unsere Hover-Pseudo-Klasse wieder einführen, die wir vorher entfernen. Der Text erscheint nun erst wieder, wenn Sie den Mauszeiger über unser Bild bewegen. Das nächste, was zu tun ist, ist auch unser Bild Ziel sie machen es dunkler, so dass die Tags abheben. Wie oben, könnten wir das Rasterelement anvisieren, wenn der Benutzer den Mauszeiger über. Aber dieses Mal nur unser CSS auf das Bild anwenden. Wir werden zunächst einen Filtereffekt in der Helligkeit unseres Bildes hinzufügen und diesen auf einen Wert von 0,4 setzen. Dies wird den Effekt haben, unser Bild auf nur 40 Prozent zu verdunkeln. Speichern Sie diese und laden Sie sie neu. Jetzt, wenn wir den Mauszeiger über, haben wir jetzt die Helligkeit jedes unserer Bilder reduziert. Wir können auch einen kleinen Pop-Effekt zwei hinzufügen, der das Bild nur ein wenig größer machen wird, wenn der Benutzer schwebt über. Wir werden wieder Gebrauch von dieser Transformationseigenschaft machen. Aber dieses Mal werden wir die Skala verändern. Die Skala wird verwendet, um die Elemente größer oder kleiner zu machen , und eine ist die normale Größe der Elemente. Ich werde dies etwas größer machen, um sicher einen Wert von 1,01 zu sein. Das letzte, was ich hinzufügen werde, ist die Deckkraft. Machen Sie dies mit 0,95 leicht transparent. Geben Sie dies ein Speichern und über an den Browser. Wenn wir nun den Mauszeiger über unsere Bilder bewegen, sehen wir eine kleine Zunahme der Größe und auch die Deckkraft wird reduziert auf. Das letzte Stück CSS, das ich hinzufügen werde, besteht darin, die Gesamtgröße der Seite zu beschränken. Dadurch wird verhindert, dass die Bilder auf wirklich großen Bildschirmen überdehnt werden. Wenn wir den Browser so breit wie möglich dehnen, haben wir oft eine maximale Breite, die wir auch die Website dehnen wollen. Dann können wir die Hintergrundfarbe auf der linken und rechten Seite anwenden, sobald der Browser die Größe erreicht, können wir dies tun, indem wir die maximale Breite ganz oben auf unserem Stylesheet im Körperbereich einstellen. Ich werde meinen auf einen Wert von 1.500 Pixeln setzen und dann auf das Projekt. Wir sehen nun, dass der Browser über die 1.500 Pixel gegangen ist, so dass der gesamte Inhalt auf der linken Seite und alle unsere Leerzeichen auf der rechten Seite verschoben . Im Allgemeinen wollen wir jedoch, dass der weiße Raum gleichmäßig zwischen der linken und der rechten Seite aufgeteilt wird . Wir können dies tun, indem wir die Ränder so einstellen, dass sie automatisch sind. Wir werden den Abstand gleichmäßig auf beiden Seiten aufteilen. Lassen Sie uns das alles wieder im Körperbereich tun. Wir haben bereits die Margin-Eigenschaft gerade hier eingerichtet. Wir können dies als oberer und unterer Wert hinzufügen. Auf der Ober- und Unterseite wird kein Spielraum angewendet. Aber wir können die linken und rechten Werte auf auto setzen. Speichern Sie das und jetzt sollten wir gleichen Abstand haben. Das letzte, was ich tun werde, um zu verhindern der weiße Raum vom Körper in die Hintergrundfarbe fließt, ist, einige Hintergrundfarben für den Körper zu setzen, was der Abschnitt ist, den wir zwischen hier und dem HTML sehen, die Hintergrundfarbe auf der linken und rechten Seite ist. Zuallererst kann der Körperabschnitt die weiße Hintergrundfarbe haben. Dann, wenn wir nach oben gehen, können wir dem HTML2 hinzufügen. Jetzt HTML Abschnitt wird den Leerraum auf der linken und rechten Seite abdecken. Nun, was ich hier tun werde, ist, die Hintergrundfarbe so einzustellen , dass sie einen etwas anderen Farbton hat. Ich möchte Eee benutzen. Dies wird unsere Seite stoppen, die wirklich auf großen Monitoren gestreckt werden kann. Der letzte Schliff für diese Seite besteht darin, allen Projekten einige Animationen hinzuzufügen. Verwenden Sie die Animationsbibliothek. Lassen Sie uns zu den Projekten oder HTML gehen und wir können die Attribute zu allen unseren Rasterelementen hinzufügen. Wir tun dies, indem wir den Animationsnamen mit Daten aos hinzufügen, eine Animation von Zoom-in-up. Um Zeit zu sparen, werde ich dies kopieren und dies zu allen anderen Projekten hinzufügen. Es kann natürlich eine andere Animation hinzufügen, wenn Sie es bevorzugen. Um sicherzustellen, dass dies bei jedem der Projekte ist, so wird dies vergrößert, wenn wir nach unten scrollen. Scrollen Sie unterhalb des Browsers zu unseren Projekten und diese werden nun vergrößern, sobald wir sie erreichen. Herzlichen Glückwunsch für das Ende des Kursprojekts. Zuerst natürlich, fühlen Sie sich frei, es zu erweitern und es zu Ihrem eigenen zu machen. Sobald Sie mit Ihrem Projekt zufrieden sind, werden Sie es gerne online bekommen und das ist es, was wir als nächstes einen Blick darauf werfen. 24. Hosting: Sobald Sie mit der Perfektionierung Ihres Portfolios fertig sind, werden Sie sicher darauf achten, es online für den Rest der Welt zu sehen. Leider gibt es eine wirklich schnelle und einfache Umfragen, um dies zu tun, genannt Netlify. Sie können zu netlify.com gehen, wo Sie sich registrieren und ein Konto erstellen müssen. Ich bin bereits mit diesen registriert, aber wenn Sie kein Konto haben, gehen Sie weiter und erstellen Sie jetzt ein. Sie können sich bei verschiedenen Anbietern anmelden, wie z. B. Ihre E-Mail-Adresse und Ihr Passwort oder einen Dienst wie GitHub. Möglicherweise müssen Sie die E-Mail auch verifizieren. Ich habe das bereits getan, und ich hatte Barcodes in Netlify und storniere alle Quickstarts, die möglicherweise erscheinen. Sobald Sie dies getan haben, werden Sie zu einer Seite weitergeleitet, die so aussieht, und alles, was wir tun müssen, ist über den Projektordner zu ziehen. Wenn Sie Ihr Projekt auf GitHub gespeichert haben, können Sie dies auch verwenden. Was Sie tun möchten, ist über die Portfolio-Projekte in diesen Upload-Bereich hier ziehen. Nach kurzer Zeit erhalten wir dann einen Testlink, den wir nutzen können , den wir gerade hier sehen können. Dadurch wird eine URL generiert, auf die Sie klicken oder kopieren und dann in den Browser einfügen können, um anzuzeigen. Dies wird uns dann die Chance geben, unsere Seiten zu testen und zu sehen, wie es auf einem Live-Webserver aussieht. Unserer scheint leider genau gleich zu sein. Wir können auch die Projektseite testen. Überprüfen Sie, dass es auch hier keine Fehler gibt, scrollen Sie nach unten und alles sieht auch auf dieser Seite gut aus. Wir können auch eine benutzerdefinierte Domain machen, die jeder Pfad vor dem netlify.com ist. Zurück zum Dashboard, klicken Sie auf die „Domain-Einstellungen“, dann auf die „Optionen“, können Sie auch den Website-Namen bearbeiten. Dieser wird zufällig generiert und Sie können dies ändern , um etwas unvergesslicheres zu sein, wenn Sie es vorziehen. Drücken Sie „Speichern“, und dann wird dies wirksam. Dies wird immer noch die netlify.com an den Enden haben. Allerdings, wenn Sie haben einen Domain-Namen, den Sie verwenden möchten, wenn fast Sie bereits besitzen oder einen, können Sie über Netlify kaufen. Es gibt auch eine kurze Anleitung, um dies zu tun, und Sie können auf diesen Link klicken, um mehr zu erfahren. Moment ist dies, wie schnell und einfach ist, mit Netlify zu beginnen, und Ihre Website auf einen Live-Webserver zu übertragen, so dass Sie mit einer vollständig Live-URL, die Sie jetzt mit dem Rest der Welt teilen können. 25. Letzte Gedanken: Ich hoffe, Sie haben diesen Kurs so sehr genossen, wie ich es genossen habe. Vielen Dank und hoffen, dass Sie einige neue wertvolle Fähigkeiten erworben haben, die Sie in Zukunft gut nutzen können. Ich kann es auch kaum erwarten zu sehen, was ihr erschaffen werdet. Fühlen Sie sich frei, Ihr Projekt auch zu teilen. 26. Folge mir auf Skillshare: Herzlichen Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen und auch folgen Sie mir für alle Updates und auch über alle neuen Klassen informiert werden, sobald sie verfügbar sind. Nochmals vielen Dank, viel Glück, und hoffentlich sehe ich dich in einer zukünftigen Klasse.