CCS für Fortgeschrittene Schöne Websites von Grund auf gestalten

1. CSS 201: Fortgeschrittenes CSS. Schöne Websites von Grund auf erstellen: Willkommen bei CSS bei 200 ein Zwischen-CSS. In diesem Kurs beschäftigen wir uns mit größeren und komplizierteren CSS. Das bedeutet, dass Sie bereits ein grundlegendes Verständnis von CSS haben sollten. In diesem Kurs werden wir unsere Gedanken etwas mehr ausdehnen und Dinge wie Umrisse gegen Grenzen betrachten. Offset-Elemente waren spezialisierte Positionierung, Blick auf erweiterte Selektoren, Erforschung von Pseudo-Selektoren, Pseudoelemente, Farbverläufe, Übergänge, Animationen. Hi, ich erzähle Caleb. Ich lehre mehr als 300 Tausend Studenten, wie man weltweit kodiert und mache seit weit über 20 Jahren Websites. Ich habe mit Leuten wie der Arctic Research Foundation, nasa und Mozilla zusammen mit zwei Top-Tier-Webentwicklungsfirmen auf der ganzen Welt zusammengearbeitet. Wieder einmal, mein Name ist Caleb erzählt und willkommen auf CSS 201. 2. Die display: Wenn Sie CSS eins zu eins genommen haben, sollten Sie bereits 3D-Anzeigetypen kennen , Inline, Block und Block. In diesem Video, lassen Sie uns voran und Demo den Unterschied zwischen allen drei von ihnen, weil dies wichtig ist, um für den Rest dieses Kurses zu wissen. Also habe ich meinen Redakteur hier geöffnet. Und ich ging zu File Open, und dann öffnete ich einen Ordner namens Weniger als Dateien. Und ich werde hier eine neue Datei namens index.html erstellen. Und hier drin, lassen Sie uns HTML Doppelpunkt fünf, Hit Tab, und es schafft ihre Seite für uns. Und nennen wir dieses Arbeitsdokument CSS 201. Nun gibt es hier drei verschiedene Anzeigetypen. Und was ich tun werde, ist, dass ich ein div und mic erstellen tatsächlich drei divs und Ihnen die Unterschiede zwischen ihnen zeigen werde . Also div, das ist die erste Kopie dieser Zeile. Dies ist die zweite Kopie dieser Zeile. Und alles, was ich hier mache und VS Code ist Kontrolle C, Kontrolle V. Und es scheint die ganze Zeile nach unten für mich zu kopieren. Und dann ist das das dritte. Jetzt gehe ich zu meinem Browser und gehe zu File Open. Und ich werde index.html öffnen. Und okay, wir sehen eine langweilige, langweilige, langweilige Seite. Aber was wir hier tun können, ist einfach so schnell zu demonstrieren. Und wieder, das ist super wichtig zu wissen. Also haben wir drei divs hier. Lassen Sie uns voran und erstellen Sie einen neuen Selektor. Gehen wir weiter und alles, was ich dort getan habe, war Rechtsklick, inspizieren und klickte auf eines dieser dibs. Es spielt keine Rolle, welche und klicken Sie auf diese kleine Schaltfläche hier, die neue Stilregel sagt. Ich werde das auch größer machen. Klicken Sie auf diese Schaltfläche. Es wird mir automatisch ein div geben. Und wir könnten den Anzeigetyp ändern. Jetzt können wir diese nicht ändern, weil diese standardmäßig mit ihren Brauen kommt, aber wir können es überschreiben und wir können sagen, Anzeigeblock ist das, was es derzeit ist. Lassen Sie uns dies jedoch eine Grenze geben, umranden Sie ein Pixel durchgehend rot. Und so sieht der Anzeigeblock aus. Und das ist in einem großen Kontrast zur Anzeige Inline, wo alle Elemente nebeneinander sind. Und dann können wir Inline-Block machen, der nicht wirklich so aussieht, als hätte es eine ganze Menge getan. Es bewegt es nach unten Gerechtigkeit und nur eine Berührung dort. Und was Inline-Block uns erlaubt, ist zehn Pixel aufzufüllen. Und wir könnten Rand fünf Pixel machen, wenn wir auf fünf Pixel wollten. Jetzt können wir einen Rand machen, wir können einen Rand hinzufügen, wir können auch eine Polsterung mit einem Blockelement hinzufügen. Und wir können diese ein- und ausschalten, wenn wir wollten. Nun, eine Sache zu beachten, ist in line sieht ein wenig anders aus als Inline-Block. So können wir Inline, Inline-Block machen und das einfach nach oben und unten bewegen. Ich schalte das nur mit meinen Pfeiltasten nach oben und unten um. Und so ist das inline, das ist Inline-Block. Und es ist wichtig, diese Unterschiede zu bemerken weil wir in diesem Kurs viel Inline-Block verwenden werden. Und das ist Block. Wir werden das auch benutzen. Dies sind also die drei Anzeigetypen, mit denen wir in diesem Kurs beginnen werden. Und es ist absolut wichtig, dass Sie diese kennen weil wir mit Dingen wie Flexbox, Flex Box und Grid arbeiten werden . Und das ist nicht einfach, unsere Köpfe zu wickeln, also müssen wir damit ziemlich vertraut sein und wir haben das in CSS eins zu eins behandelt. Wenn Sie in diesem Kurs sind, auf jeden Fall fühlen Sie sich frei, zurück auf die Anzeige weniger als NCSS one-to-one, wo wir dies ein wenig mehr in der Tiefe. 3. WICHTIG: Das Boxmodell: Okay, werfen wir einen Blick auf das Box-Modell. Dies ist etwas, das wir in CSS 101 nicht behandelt haben, was ich wirklich wollte, aber ich denke, es war etwas voranzukommen. Das Box-Modell ist also diese Idee, dass Sie eine Box haben und Sie Padding und Marge haben können, und es hängt von den Regeln Ihres Browsers ab, wie Sie die Breite dieses Elements berechnen. Also, wenn wir hier ein div erstellen und das wird div class box genannt, und das ist alles, was wir tun werden. Ich werde das retten. Komm auf diese Seite und ich öffne das bereits, bevor ich diese Lektion aufgenommen habe. Also, wenn ich zu inspizieren gehe, werde ich sehen, dass in meinem Körper ich Box habe und ich eine Klasse hier für Punktbox hinzufügen kann. Und lassen Sie uns etwas Styling hinzufügen. Also umranden ein Pixel, einfarbig rot. Lassen Sie uns dies eine Höhe von 300 Pixeln geben, eine Breite von 300 Pixeln. Und lassen Sie uns diesen Rahmen anstelle eines Pixels ändern. Lasst uns wie fünf Pixel machen. Und jetzt, wenn ich hier runterkomme, wenn ich den ganzen Weg runterscrolle, können wir sehen, dass es 300 mal 300 ist. Ok, cool. Nun, wenn ich wollte, könnte ich hier ein Padding hinzufügen, und ich könnte sagen, dass ich 30 Pixel auffüllen. Und du merkst, wie meine Box größer wird, wenn ich das ein- und ausschalte . Und das ist nicht unbedingt das, was ich will, denn wenn ich Padding 30 Pixel hinzufüge, beträgt diese Box nicht mehr 300 Pixel. Sie ist 370 Pixel breit. Es hat fünf Pixel auf beiden Seiten für 105 auf der linken Seite, fünf auf der Rate, 300 Pixel auf der Innenseite und dann 30 Pixel Polsterung auf der linken und der rechten Seite. Also, wenn wir das zusammenfassen, haben wir fünf, dreißig, dreihundertdreißig und weitere fünf. Und wenn wir nach unten scrollen, können wir alle diese Zahlen hier sehen. Rand von fünf Polsterung 30 innerhalb von 300. Manchmal wollen wir das, aber größtenteils wollen wir das nicht. Was wir wollen, ist zu sagen, das Ganze 300 Pixel breit oder 300 Pixel hoch zu machen. Und das schließt auch die Polsterung ein. Also standardmäßig enthält das Box-Modell, was wir hier betrachten, Box-Modell hier nicht mit Padding, beinhaltet keinen Rand. Also, was wir sagen können, ist Box-Dimensionierung und standardmäßig ist es Inhalt Box, aber wir wollen Grenze Box und Sie können sehen, dass es macht es hier größer oder kleiner. Und wir ändern das Standardverhalten eines Browsers. In der Regel wollen wir Border-Box. Was Border-Box tut, heißt es Fügen Sie diesen Rahmen an diesem Padding hinzu und stellen Sie sicher, dass all das zusammen eine Breite von 300 ist. Und jetzt, wenn ich darüber schwebe, können wir sehen, dass diese Box ein bisschen kleiner ist. Und wenn ich nach unten scrolle, ändert sich keine dieser Ziffern. Aber die Box selbst ist kleiner. Es sagt, das ganze Ding ist 300 Pixel. Das ist der Unterschied zwischen Border-Box und Content-Box. Nun möchte ich, dass du das tust, ist eine Chance zu geben. Erstellen Sie eine 300 x 300 Box auf Ihrer Seite. Es muss nicht gut aussehen. Fügen Sie etwas Padding hinzu, und ändern Sie dann die Box-Größe und bemerken Sie nur, was die Unterschiede und das ist wirklich, wirklich wichtig für uns durch diesen Kurs zu bewegen, weil wir viel Inhalt Box verwenden werden. 4. Umrisse: Okay, lassen Sie uns einen Blick auf die Umrisse werfen. Umriss ist die Grenze, die um alles geht. Es ist ehrlich gesagt die Grenze um eine Grenze. Sie können einen Umriss hinzufügen und ihm mitteilen, dass er einen Versatz aufweist. Wir verwenden den Umrissversatz, um etwas Abstand zwischen dem Element zu geben , und Ihr Umriss wird dies in nur einer Sekunde zeigen. Aber im Grunde ist Umriss wie mit zwei Grenzen. Und es ist wirklich schön für visuelle Verbesserungen. Jetzt sind die meiste Zeit, die es endet, eigentlich super wichtig für die Zugänglichkeit. Also, wenn Sie den Mauszeiger über ein Element bewegen oder wenn Sie mit dem Tab über, wie wenn Sie eine Tastatur verwenden und Tab immer und immer mehr auf Ihrer Seite drücken, wird eine Schaltfläche manchmal wie einen gelben Umriss um sie herum oder einen roten Umriss oder einen schwarzen Umriss haben . Und es ist nicht die Grenze, es ist nur dieser Umriss und es erzählt Bildschirmlesegeräte und Menschen mit sehbehinderten Behinderungen, Menschen, die nicht sehr gut sehen können, was tatsächlich ausgewählt ist. Es ist auch für jene Tastaturkrieger da draußen , die gerne eine Tastatur anstelle einer Maus verwenden. Es hilft ihnen sehr, und es gibt eine Menge von ihnen da draußen. Es ist also wirklich, wirklich wichtig. Also, was ich hier tun werde, ist, dass ich das als neue Datei namens Outline speichern werde. Und was ich hier will, ist, dass ich noch diese Kiste habe. Und was ich gerne tun würde, ist einen Umriss um ihn herum hinzuzufügen. Also, wenn ich hierher gehe und das nur von der letzten Lektion ablässt, verwende ich genau die gleiche Datei. Es ist okay, weil ich nur im Editor hier im Inspektor und unseren Entwickler-Tools bin. Ich kann eine Gliederung hinzufügen. Und lassen Sie uns das nur ein bisschen kleiner machen. Ich kann eine Gliederung hinzufügen. Und es ist wie eine Grenze. Also kann ich sagen, fünf Pixel, solide schwarz. Und Sie können sehen, dass es tatsächlich auf der Außenseite von allem ist. Wenn wir nun auf ihr Box-Modell schauen, taucht es hier nicht mal auf. Wir haben eine Innenseite, wir haben eine Polsterung, wir haben eine Grenze. Wir haben eine Marge auf der Außenseite, aber es zeigt uns nicht wirklich etwas über den Umriss. Und so ist das der Unterschied zwischen einer Grenze und einem Umriss von Grenzen tatsächlich berechnet. Ein Umriss ist es nicht. Und du kannst das sehen. Es macht unsere Box nicht wirklich in allen Altersgruppen bewegen, fügt buchstäblich einen Umriss um sie herum. Nun gibt es eine Möglichkeit, einen Offset hinzuzufügen. Wir können Kontur Bindestrich Offset sagen, und wir können diesem auch einen Pixelwert geben. Sagen wir also nicht für, geben wir uns einen Zehn-Pixel-Offset. Und wir werden hier einen gewissen Spielraum hinzufügen wollen. Also lasst uns Marge 30 Pixel machen. Und was dieser Offset tut, ist, dass er den Umriss einfach nach außen bewegt. Nun möchte ich, dass Sie für diese spezielle Lektion tun, ist, ein Element zu erstellen und ihm einen Rahmen zu geben, dann geben Sie ihm einen Umriss. Es spielt keine Rolle, wie Ihre Farbe ist. Sie können ihm einfach eine Art Umriss geben. Ich habe gerade etwas langweiliges gemacht, fünf Pixel schwarz, und dann einen Offset hinzufügen, um zu zeigen, dass dies nach außen verschoben werden kann. 5. Wie du Schatten hinzufügst: Tech Shadow ist wie ein Kastenschatten. Der einzige Unterschied ist wirklich hier, dass ein Kastenschatten wie ein Innenschatten haben kann , der als Einschub bezeichnet wird und Text nicht. Okay, was ich hier anfangen werde, ist, dass ich in internem CSS schreiben werde, nicht externes CSS, nicht Inline CS, sondern CSS, sondern internes CSS. Wenn Sie diese Projektdateien herunterladen, können Sie tatsächlich Zugriff auf all dieses CSS haben. Also habe ich hier eine Kiste, Kuckuck, Kuckuck. Und lassen Sie uns weitermachen und etwas Text hier hinzufügen. Und dieser Text wird Hallo Welt sagen. Und wenn ich das in meinem Browser lade, sagt es nur Hallo Welt. Wir können das deutlich größer machen. Wir können die Schriftgröße ändern, wenn wir etwas später wollten, was wir vielleicht auch tun werden, nur damit wir wirklich in CSS eintauchen können. Also lassen Sie uns diese Box von unserer Klasse auswählen. Und wir lernten von diesem Selektor und CSS 101. Und so all dies sagt ist, wählen Sie dieses Element durch diesen ClassName gibt uns eine Schriftgröße von vielleicht wie 40 Pixel. Lassen Sie uns speichern und aktualisieren. Da gehen wir. Das ist größer. Und jetzt können wir einen Textschatten hinzufügen. Also Text Schatten. Und das braucht ein x, ein y, einen Unschärfewert und die Farbe. Also lasst uns voran gehen und diesen x-Wert ändern. Wir wollen dies nach rechts verschieben, sagen wir zehn Pixel. Dann wird der y-Wert auch zehn Pixel sein. Das wird es nach unten bewegen. Eine Unschärfe, sagen wir, es wird überhaupt nicht verwischen. Es wird also eine exakte Kopie sein, genaue Gliederung unseres Textes. Und die Farbe hier wird nur etwas Unheimliches gelesen , dass wir wirklich sehen können, was los ist. Jetzt haben wir einen Text, einen Textschatten, der uns zehn Pixel nach unten bewegt und nach rechts zehn Pixel bewegt. Und wenn wir etwas eleganteres wollten, könnten wir so etwas wie zwei Pixel machen. Und übrigens, um dies auszuwählen, war alles, was ich getan habe, meine zehn Pixel oder es sind jetzt zwei Pixel, aber ich habe diese zehn Pixel ausgewählt. Und wenn Sie zu Auswahl gehen, fügen Sie das nächste Vorkommen für mich hinzu, Befehl D, und es wird für Sie anders sein, wahrscheinlich kann ich mir vorstellen. Sie können einfach an zwei Orten gleichzeitig eingeben, was wirklich, wirklich nützlich ist. Weil eine gute Abkürzung zu erinnern, überspringen und speichern, dass , aktualisieren, und das sieht ein wenig besser. Nun können wir auch einen Unschärfewert hinzufügen, dieser Unschärfewert momentan eine 0, was dasselbe ist, als es überhaupt nicht zu haben. Standardmäßig ist überhaupt keine Unschärfe. Lassen Sie uns voran und fügen Sie einen Unschärfewert von fünf Pixeln hinzu. Und all dies wird tun, ist für jedes Pixel, das da hinten ist, jedes rote Pixel verschwimmen fünf Pixel. Und so haben wir ein schönes wenig verschwommen. Sie sind tatsächlich sieht so aus, als würde das ein wenig von der Seite kommen. Nun, was wir tun können, ist, dass wir tatsächlich die Hintergrundfarbe des Körpers ändern können. So wird Ihr Körper Hintergrundfarbe wird schwarz sein. Es wird die gleiche Farbe wie unser Text haben. Und lasst uns weitermachen und das auffrischen. Und jetzt sieht es ein wenig gruselig aus. Jetzt nehme ich das um Halloween auf, also ist das wirklich, wirklich gut, das ist anwendbar, weil das irgendwie gruselig ist. Aber wir können diesen Text nicht mehr sehen, was wirklich schön ist. Wir könnten auch versuchen, statt dies zu tun, könnten wir eine Farbe RGBA machen. Und es spielt keine Rolle, welche Farbe wir ihre Farbe füllen. Füllen wir es mit Schwarz, aber lassen Sie uns es auch komplett durchsichtig mit einem 0 Alpha darin machen . Und jetzt haben wir nur den verschwommenen Text. Also, das ist Text Schatten würde, Ich möchte, dass Sie tun, ist ein Text auf Ihrer Seite zu schreiben. Und es könnte einfach Hallo Welt sagen. Fügen Sie dann einen technischen Schatten hinzu, fügen Sie Ihre X-Achse, Ihre Y-Achse oder Ihre Horizontale in Ihrer vertikalen Ausrichtung mit einer Unschärfe hinzu und fügen Sie dann eine Farbe hinzu. Sie müssen die RGBA nicht machen, wir haben darüber gelernt und CSS 101 als auch. Also, wenn Sie zurück zu CSS eins zu eins Ende gehen müssen, schnell gelernt, was RGB ist. Aber wirklich ist es nur ein Farbmodus sagt Rot, Grün, Blau, Alpha, Alpha ist Ihre Transparenz. Also sagten wir 000, das ist schwarz und macht es komplett durchsichtig. 6. Ein Element erfordern: In Ordnung, das ist also minimale Breite. Wir werden darüber sprechen, was das jetzt in CSS 101 ist, wir haben über maximale Breite gelernt, wir haben über regelmäßige Breite gelernt. Wenn Sie nicht wissen, über die maximale Breite, ehrlich, ist es genau das gleiche wie die minimale Breite. Es ist jedoch das Gegenteil. So ist es das gleiche, aber anders. Jetzt sagt die maximale Breite a, ein Element kann nur eine maximale Breite haben. Und es wird versuchen, von der kleinsten Größe zu dieser maximalen Breite zu gehen , bevor Sie Ihren Text in eine neue Zeile brechen, minimale Breite ist irgendwie gleich, aber umgekehrt. Also kann ich dieses Feld hier auswählen, und ich kann diesem einen Rahmen für Pixel einfarbig blau geben. Und lass uns hier reingehen und etwas Lorem ipsum in deinen Unterarm werfen. Und dann VS Code, ich habe einfach Tab gedrückt. Und das liegt daran, dass ich hier Django-Template ausgewählt habe. Dies sollte ein HTML sein. Lasst uns das rückgängig machen. Senken Sie sie. Registerkarte. Da gehen wir. Und wenn ich diese Seite lade, können wir all diesen Text sehen und das ist eigentlich ein schlechtes Beispiel. Ich werde nur alles löschen, außer dieser eine Zeile, so dass wir diese Breite hier drin haben. Lassen Sie uns das alles löschen. Speichern und aktualisieren. Okay, jetzt wird das eigentlich nichts tun, weil dies ein Blockelement ist. Und denken Sie daran, dass die erste Lektion sagte ich Block-Elemente Anzeige ist wirklich, wirklich wichtig. Gehen wir weiter und beschneiden. Wir wollen dazu bringen, dass wir nicht die gesamte Breite aufnehmen. So können wir sagen, Inline-Block anzeigen, und dies wird uns erlauben, das Width-Element damit zu verwenden. Allerdings wird es hier auch eine minimale Breite einnehmen, was wirklich schön ist. Also dieses Element hier ist 365 Pixel breit. Also wollen wir eine minimale Breite von etwas, das nur ein bisschen größer ist. Lassen Sie uns das eine min Breite geben. Und sagen wir, dass die Mindestbreite 450 Pixel betragen muss. Und was das tun wird, ist, das hier rauszubringen. Ich werde ziemlich gutes Spiel. Ja, es war eine ziemlich gute Vermutung. Also wird es es hier rüber bewegen. Und wenn ich mehr Text schreibe, wird es dann erweitern. Und wir können das tatsächlich sehen, indem wir hier reingehen. Und ich werde diese Zeile ein paar Mal kopieren. Und Sie können sehen, dass es den ganzen Weg über erweitert. So hat es diese minimale Breite. Und alles, was ich hier mache, ist rückgängig zu machen und zu wiederholen. Aber es hat diese minimale Breite, also spielt es keine Rolle, ob es zusätzlichen Platz gibt oder nicht, es wird diese minimale Breite in Anspruch nehmen. Und dann, wenn es mehr Inhalt hat, möglicherweise zu viel Inhalt. Was tun wird, ist dann verschieben Sie dies auf eine 100% Breite. Jetzt können wir, wir können das auch mit maximaler Breite heiraten. Wir können also sagen, dass die maximale Breite nur irgendwo hier draußen sein kann. Also lasst uns voran gehen und diese kombinieren. Wir können eine maximale Breite von sagen, sagen wir 500 Pixel. Aktualisieren. Sieht aus, als hätte sich nichts geändert. Aber was das tun wird, ist irgendwo über hier zu sagen, wahrscheinlich ist die maximale Breite. Also, bevor dieser blaue Rand diese Reifenbreite aufnahm, dieser hier nicht mehr gut, also werde ich hier doppelklicken und das ein paar Mal einfügen. Und wir können sehen, dass es nur dauert, bis jetzt hier. Und unsere Box-Elemente, wenn wir hier nach unten gehen, 450 Pixel breit, ist das, was es standardmäßig ist. Hier oben sind es 508 Pixel und das liegt daran, dass es vier Pixel auf beiden Seiten einnimmt. So 500 Pixel auf der Innenseite, 400 Pixel, vier Pixel auf beiden Seiten eher. Und wir können die Box-Größe ändern. Und lasst uns Border-Box machen. Und Sie können tatsächlich sehen, dass es diese kleine Acht-Pixel-Differenz-Border-Box macht. Und wenn wir hier zurück gehen, können wir sehen, dass das ganze Element 500 Pixel ist. So verwenden wir jetzt bereits die Anzeige-Sachen, die wir aus unserer Anzeigelektion gelernt haben. Wir lernen und verwenden auch die Kastengröße aus der Box-Größenbestimmung oder der Boxmodellstunde. Das ist also min-width. Die Idee hier ist nur, dass es eine minimale Breite sein wird. Und wenn Sie mehr Inhalte haben, kann es größer werden. 7. Einführung in CSS: Positionieren ist, wie wir Elemente um eine Seite bewegen. Es gibt ein paar Möglichkeiten, dies zu tun. Wir können absolute Positionen machen. Wir können eine relative Position, eine feste Position oder klebrige Position schreiben . Es gibt auch einen anderen namens statisch , der standardmäßig alles ist. Aber die Idee ist, dass, wenn Sie eine Pixel perfekte Website machen wollen, etwas, das wirklich zum Design passt, manchmal müssen Sie Elemente bewegen. Und in den nächsten Lektionen werden wir über relative Positionierung, absolute Positionierung, feste Positionierung und klebrige Positionierung sprechen . Und das ist, was wird Ihre Website starten und suchen wirklich wirken wie eine App, vor allem, wenn es um klebrige Positionierung geht. Aber es wird Ihnen auch helfen, Dinge zu bewegen, so dass wir neue dynamische Komponenten erstellen können, die übereinander liegen können. 8. Relative Positionierung: Relative Positionierung ist die Idee, ein Element zu nehmen und es von einem Ort zu verschieben, an dem es natürlich auf Ihrer Seite an einen anderen Ort sitzt. Einfach leicht aus, so nimmt es Ihre Position ein, wo Sie gerade sitzen oder stehen. Und es ist, als würde man einen Zoll nach links oder einen Zoll nach rechts bewegen. Also habe ich hier ein neues Dokument für die relative Positionierung. Und was wir tun wollen, ist eine Box zu erstellen und sie dann irgendwie ein wenig zu verschieben. Also lasst uns voran gehen und die Box-Klasse packen. Lassen Sie uns eine Breite geben. 300 Pixel, Höhe, 300 Pixel, Rand zehn Pixel, einfarbig schwarz. Und wenn ich das im Browser öffne, ist es nur eine normale Box. haben wir schon ein paar Mal in diesem Kurs gesehen. Also, was ich hier jetzt tun möchte, ist, dass ich Stellung sagen kann. Und da sind ein Haufen von ihnen hier. Aber lasst uns Position relativ gehen und es sieht so aus, als hätte sich nichts geändert. Und das ist eigentlich richtig, nichts hätte sich ändern sollen. Aber jetzt können wir oben, links, rechts oder unten verwenden. Selektoren sind keine Selektoren, sondern Eigenschaften. Also können wir sagen, bewegen Sie sich von oben, bewegen Sie sich nach unten. Lassen Sie uns das bei zehn Pixeln nach unten bewegen. Okay, das war also nicht sehr glatt, ist 30 Pixel nach unten. Und lassen Sie uns dies nach links oder von links verschieben, auch 30 Pixel. Und wenn wir diese ein- und ausschalten, können wir sehen, dass sich das tatsächlich bewegt. Es bewegt das gesamte Element für uns. Und so wieder, was relative Positionierung tut, ist es, okay, so dass Ihr Element standardmäßig auf Ihrer Seite sitzt. Aber lasst uns unsere Position zu relativ ändern. Also relativ zu dem, wo es normalerweise Zysten setzt, von oben, verschieben Sie es 30 Pixel von links nach unten, verschieben Sie es nach rechts, 30 Pixel. Sagen wir also anstelle von oben, können wir unten sagen. Und Sie können sehen, dass es tatsächlich aus meinem Ansichtsfenster verschoben hat. Darstellungsfenster ist dieser große weiße Abschnitt hier. Und wir können es auch ein- und ausschalten. Und statt links, können wir Recht sagen. Und das tut genau das Gegenteil. Und lassen Sie uns diese auch ein- und ausschalten. Und so ist das relative Positionieren. Nun, wo das kommt wirklich, wirklich praktisch ist, wenn man etwas einfach leicht von dort bewegen muss , wo es natürlich setzt. Vielleicht verwenden Sie bereits Ihr Padding, Sie verwenden bereits Ihren Rand. Sie verwenden negative Polsterung oder negative Marge. Und du musst das irgendwie etwas wegbewegen, nur um es perfekt zu machen. Hier kommt die relative Positionierung wirklich ins Spiel. Nun hat die relative Positionierung eine andere Art von Superkraft. Und das ist, wenn es um untergeordnete Elemente geht, die Position absolut verwenden, über die wir als nächstes sprechen werden. 9. Absolute Positionierung: Absolute Positionierung ermöglicht es uns, ein Element basierend auf seinem übergeordneten Element zu bewegen. Aber der Trick hier ist, dass das übergeordnete Element relativ positioniert werden muss. Also, von dieser letzten Lektion zu übernehmen, was ich hier habe, ist nur eine normale Box. Und wenn ich hier zurück zu meinem Redakteur gehe, gehen wir weiter und ändern seine Position in nicht absolut, sondern relativ. Und das ist diese Kiste hier drin. Und lassen Sie uns etwas Platz für die Arbeit schaffen. Und das macht wirklich nichts aus der letzten Lektion. Nun, wo das mächtig wird, wo absolute Positionierung ins Spiel kommt, sagen wir, ich habe eine zweite Box. Also lasst uns die zweite Strichbox machen. Und das ist eine Emmett-Abkürzung. Also, wenn Sie gerade an diesem Kurs teilnehmen, haben Sie nicht CSS 101 oder HTML eins zu eins oder HTML2 01 genommen , wo ich über em bei Abkürzungen spreche. Alles, was ich hier mache, ist ein wenig CSS zu schreiben und sobald Sie diese M es Abkürzung sehen, können Sie Tab drücken und es erstellt ein div für Sie standardmäßig mit einer Klasse von zweiten Box, genau wie beim Schreiben von CSS und dann drücken Sie einfach Tab. Und sagen wir, das muss in der Spitzenklasse sein. Also gehen wir zurück zu unserer Seite hier und aktualisieren. Und hier steht einfach oben rechts. Jetzt können wir etwas Styling hinzufügen, und sagen wir, es muss eine Box im oberen rechten Quadranten sein. Was wir tun können, ist jetzt wählen Sie diese Box und wir können sagen, zweite Box, Position, absolut. Lasst uns auch eine Grenze geben. Rand von drei Pixeln, einfarbig blau, nur damit wir wissen, wo wir arbeiten. Und was machen wir? Position absolut buchstäblich nichts ändert sich. Es hat hier nur eine Grenze hinzugefügt. Ich werde hier noch mehr hineinzoomen. Nun, was ich tun möchte, ist, dass sich dies in diesen oberen rechten Quadranten bewegt, als ob ich einen Graphen mit einer X- und Y-Achse erstellen würde und es eine negative X- und eine negative Y-Achse hat. Was ich tun kann, ist, weil diese Position absolut ist. Ich kann jetzt sagen, lasst uns das an die Spitze kleben. Und das wird „0“ sagen. Standardmäßig ist es schon da. Aber falls Sie Element waren, ist das nicht, was dies tun wird , ist es, dies an den Anfang der Seite zu verschieben. Und als Beispiel, lassen Sie uns unten machen. Also werden untere Nullen sagen, dass die absolute Position um dieses relative Element nach unten kleben wird. Und dann könnten wir sagen, richtig, 0. Und jetzt wird es nach rechts unten verschoben. Um nun als Backup zu wechseln, müssen wir nur diesen von unten nach oben ändern. Und so setzen wir die Position absolut oben ist 0, oder? 0. Und das alles wird tun, ist, das nach oben rechts zu verschieben. Nun, das ist es, was wir wollten, aber wir wollten wie diesen vollen Quadranten hier aufgreifen. Was wir also tun können, ist, dass wir eine Breite von 50% sagen können. Und lassen Sie uns eine Höhe von 50% versuchen. Und jetzt haben wir eine Box in diesem oberen rechten Quadranten. Und das ist es, was die absolute Position uns erlaubt zu tun. Es erlaubt uns, so etwas zu tun. Das ist ein hässliches Beispiel, aber wenn wir es wollten, könnten wir dem einen schwarzen Hintergrund geben. Und lasst uns diese Grenze loswerden. Und jetzt sieht es so aus, als hätten wir ein Stück davon geschnitzt. Nun, wenn wir noch schicker werden wollen, waren oft nicht mit Grenzen die ganze Zeit zu arbeiten. Lassen Sie uns also voran gehen und diesen schwarzen Rand auf unserem übergeordneten Element in die Box, das relative Element, loswerden . Lasst uns das loswerden. Und jetzt haben wir diese Kiste irgendwo verschoben, wo sie nicht auf natürliche Weise lebt. Also gibt es diese 300 mal 300 Box. Sie können es hier sehen. Und wir haben gesagt, dass 300 mal 300 Box nehmen 50% der Breite, 50% der Höhe für eine 150 mal 150, verschieben Sie es nach oben rechts. Jetzt werde ich das einfach schnell rückgängig machen und ich werde Ihnen zeigen, was passiert wenn ich Position relativ vom Elternelement nehme. Also arbeite ich hier an der Kiste. Und wenn ich die Position relativ loswerde, geht es direkt auf die gesamte Seite. Es nimmt 50% der Seitenbreite und es nimmt 50% der Seitenhöhe oder des Ansichtsfensters ein, eigentlich nicht die gesamte Seite, sondern nur den Ansichtsport hier, was je nach Seite sehr gut dasselbe sein könnte. Also ja, wenn Sie jemals möchten, dass ein Element absolut positioniert ist, müssen Sie sicherstellen, dass Ihr übergeordnetes Element Position relativ verwendet. Nein, es tut nichts zu schaden. Sie werden feststellen, dass, wenn ich das ein- und ausschalte, die Box auf der linken Seite hier nichts ändert. Es ändert nur das Verhalten seiner untergeordneten Elemente. Und das ist ein wirklich wichtiges Konzept, das in CSS zu verstehen ist. Denn wenn wir bis zum Ende dieses Kurses kommen, werden wir mit vielen untergeordneten Elementen arbeiten. 10. Festes Positionieren (wie Kopfzeilen): Werfen wir einen Blick auf die feste, feste Positionierung. Das ist schwer zu sagen, mit einem Mikrofon, einer festen Positionierung, festen Positionierungs-Sticks und Elementen an einem bestimmten Teil Ihres Ansichtsfensters. Und es ermöglicht Ihnen, die Seite nach unten zu gleiten, während die Seite nach unten bewegt wird. Es war eigentlich ein schreckliches Beispiel. Wissen Sie, wenn Sie auf einer Website sind und es eine Kopfzeile und Scott wie Navigation und ein Logo und so. Und während Sie die Seite nach unten gleiten, gleitet es mit Ihnen auf der Seite nach unten. Dies ist eine feste Positionierung. Jetzt setze ich meine Seite zurück, habe einen Stil und eine Box. Wählen wir dieses Feld aus und fügen Sie etwas Styling hinzu. Also diese Box, sagen wir, wird eine Grenze haben, ein Pixel solide rot. Und eine Hintergrundfarbe von, lassen Sie uns dies ein wenig eleganter aussehen. F5, E5.5. Und lasst uns nicht einen Pixel einfarbig rot umranden. Lasst uns die Grenze unten machen. Zwei Pixel, solide, CCC. Und Sie können sehen, wie diese Farben hier auftauchen. Es ist also ein cremefarbenes Ende, ein hellgrau. Und lasst uns das jetzt ändern. Okay, da ist kein Inhalt drin, aber lassen Sie uns etwas hinzufügen. Sagen Sie, das ist ein Header. Und okay, und das ist zoomen Sie das in die entgegengesetzte Richtung, die ich gehe. Und okay, das sieht also nicht toll aus. Lassen Sie uns das ein bisschen aufräumen. Lasst uns den Körperrand loswerden. Lasst uns das machen. Körper. Es gibt eine Polsterung, an die ich mich nie erinnern kann. Lasst uns Marge 0 machen. Lassen Sie uns dies einfach zurücksetzen und 0 auffüllen. Also diese Ecken dieses Headers berühren tatsächlich die Seiten, perfekt. Und in diesem Header gehen wir weiter und geben diesem eine Polsterung von 40 Pixeln. Nein, das ist viel zu widerlich für diese Demonstration. Siehe 20 Pixel. Okay, das sieht nicht so schlimm aus. können wir leben. Jetzt. Nehmen wir an, wir wollen die Seite nach unten scrollen, jetzt habe ich nicht genug Inhalte, um die Seite hier nach unten zu scrollen. Aber was ich tun kann, ist sagen, dass Körperbedürfnisse eine minimale Höhe oder eine feste Höhe von, sagen wir, 3 Tausend Pixel haben . Und all dies wird tun, ist, mich den ganzen Weg nach unten scrollen zu lassen, als hätte ich mehr Inhalt. Was wäre, wenn ich nach unten scrollen wollte und wir wollten, dass das bei mir bleibt? können wir tun. Und immer sagen, hier ist Position fixiert? Jetzt könnte dies ein wenig Jackie sein, je nach Browser, den Sie verwenden, abhängig von der Version des Browsers, den Sie verwenden. Und Sie können tatsächlich sehen, dass es ein bisschen Jackie ist, Dies ist wie ein Inline-Element und Inline-Block-Element und es hat nicht die gesamte Breite in Anspruch genommen. Nun, wir müssen tun, ist einen Wert, oben, rechts, unten oder links Wert gesetzt. Und was wir tun können, ist, dass wir sagen können, kleben Sie das oben auf der Seite, machen Sie es links von der Seite, wie es derzeit ist. Aber geben Sie diesem auch eine Breite von 100% der Seite. Und ich ziehe das einfach ein bisschen nach oben. Und da gehen wir. Jetzt scrolle ich die Seite nach unten und du kannst meine Seitenleiste hier drüben sehen , während ich sie klebrig bleibe. Nun ist dies ein sehr schlechtes Beispiel. Ein besseres Beispiel wäre, wenn ich hier einen Absatz habe und ich ein paar Lorem werfen würde. Und ich habe das einfach immer und immer und immer und immer und immer und immer und immer wieder kopiert . Und so werden wir in der Lage sein zu sehen, dass diese Seite tatsächlich scrollen kann. Also speichere ich diese Aktualisierung. Und oben auf meiner Seite habe ich mein Lorem ipsum, aber wenn ich nach unten scrolle, bleibt es jetzt bei mir. Dies ist eine feste Positionierung. Dies macht es irgendwie klebrig oben auf der Seite. Jetzt ist die klebrige Positionierung eine andere Art der Positionierung. Wir werden reden, wir werden das nächste anpacken. fixierte Positionierung ist jedoch wirklich, wirklich schön, weil sie über Ihrer gesamten Seite liegen wird. Also wissen Sie, wenn Sie auf einer Website sind und es hat, hat es das lästige kleine Ding unten rechts. Und es ist wie Nachrichten für Unterstützung oder was auch immer. Und es ist online. 50% aller Websites in diesen Tagen ist es irgendwie irritierend Um ehrlich zu sein, aber es klebt bei Ihnen egal wo Sie auf der Seite sind und Schichten oben auf allem. Das ist es, was die feste Position für Sie tut. Weißt du, was ich möchte, dass du das tust, ist eine Chance zu geben. Erstellen Sie einen festen Header, wie das, was ich habe. Werfen Sie einen Haufen Inhalt hier rein. Sie werden genug benötigen, damit Ihre Seite tatsächlich scrollen kann und dann Ihre Seite nach unten scrollen und sicherstellen, dass sie nur über alles hinunterschichten kann. 11. Klebrige Positionierung (wie moderne Kopfzeilen): klebrige Positionierung ist relativ neu für CSS. Es ermöglicht uns, einen Header zu haben, um sein übergeordnetes Element zu halten. In der letzten Lektion haben wir uns also die feste Positionierung angesehen, wo sie auf die gesamte Seite, das gesamte Ansichtsfenster, fixiert wurde . Und wir haben gerade einen Header erstellt, der mit uns den ganzen Weg die Seite hinunter scrollte. Und es sah so aus. Eigentlich sah genau so aus, weil es das ist, was wir geschrieben haben. Jetzt klebrig kann im Wesentlichen das gleiche tun, so behoben. Und wir können sagen, das ist klebrig. Und Sie können sehen, wie ich die Seite nach oben und unten scrolle, es bleibt auch bei mir. Der Unterschied zwischen klebrig und fix ist jedoch behoben, wird hier sein, egal was passiert. Und selbst wenn ich die Seite nach unten scrollen, wo es keine zusätzlichen Inhalte gibt, wird es dort bleiben. Während mit klebrig, wird es an seinem Elternelement klebrig sein. Lassen Sie uns also voran und erstellen Sie hier ein Beispiel. Wir haben diese Box, und wählen wir diese Box aus. Und lassen Sie uns die Anzeige klebrig machen. Okay, also habe ich hier ein paar Sachen aus der letzten Lektion geschrieben. Ich gebe dem Körper eine Marge von 0, Polsterung von 0, Standardhöhe von 3 Tausend. Eigentlich brauchen wir das auch nicht. Und die Box ist klebrige Hintergrundfarbe positioniert ist die gleiche wie letzte Lektion. Rand unten als ein wenig Polsterung. Lasst uns das loswerden. Und wenn ich die Seite aktualisiere, haben wir nur diese Leiste hier. Nun gehen wir voran und werfen dies in ein übergeordnetes Element. Also haben wir diese Box und wir können einen Absatz mit niedrigem RAM in Ihrem kopieren einfügen, einfügen, einfügen, einfügen, einfügen, einfügen, einfügen. Und wenn ich das hineinzocke, werden wir sehen, dass es nicht mehr klebrig ist. Und ja, es ist nicht klebrig, aber wir können das klebrig machen. Dies erfordert tatsächlich eine andere Eigenschaft hier. Also, weil es Position klebrig ist, muss es auch oben rechts, unten links haben , normalerweise ist es nur oben. Wir besorgen das hier eine Top-Eigenschaft, wir sagen 0. Und das sagt nur, wo man klebrig sein soll, sonst weiß es nicht. Und jetzt, wenn ich die Seite nach unten scrolle, bleibt es klebrig. Nun, das ist Teil eins von zwei. Der zweite Teil ist, es klebrig zu machen, nur für diesen bestimmten Abschnitt, in dem all das Zeug hier drin ist. Also lassen Sie uns voran und fügen Sie einen Stil auf Ihrem Stil hinzu, um eine Hintergrundfarbe von Rot und eine Farbe von Weiß zu haben . Aktualisieren Sie eine Seite. Und wir werden sehen, oh, ich habe vergessen, das klebrig zu machen, indem ich Top 0 hinzufüge. Bleiben Sie also an der Spitze. Da gehen wir. Jetzt ist es klebrig. Lassen Sie uns einen weiteren Abschnitt unter diesem blauen hinzufügen und diese Änderung auch diese Kopfzeile. Also lasst uns voran gehen und im Grunde das ganze Ding kopieren. Und ich habe das einfach mit einem kleinen Pfeil zusammengebrochen. Und lasst uns darunter gehen. Und dieser hier wird eine Hintergrundfarbe von Blau sein. Und die Veränderung, was hier drin ist. Sagen wir mal, Abschnitt zwei unserer Kiste. Jetzt verwenden wir, wir verwenden CSS wiederverwenden. Und in der oberen hier, lasst uns Abschnitt eins machen. Okay, gehen wir zurück nach oben auf der Seite. Aktualisieren. Oh, wir können diese Farbe nicht sehr gut sehen. Farben gleich schwarz Das ist besser. Das ist also Abschnitt eins, und wenn ich nach unten scrolle, wird es dort bleiben. Und Abschnitt zwei wird aus dem Weg gestoßen. Und dann ihre Sektion zwei. Und während ich nach oben scrolle, kommt Abschnitt eins wieder ins Spiel. Ich mag diesen Teil wirklich. Das ist wirklich nett. Das war früher wirklich schwer für uns zu tun, aber es kommt in diesen Tagen Standard mit CSS3, was wirklich, wirklich nett ist. Also, das ist, was klebrig ist jetzt in der Zusammenfassung, Sie brauchen Position klebrig, Sie brauchen einen Top-Wert. Also haben wir einen Spitzenwert von 0. Und alles, was wir hier getan haben, war, dass wir ein Elternelement haben. Ich habe hier einige in Zeile CSS. Nicht der beste Weg, Dinge zu tun, aber es fuhr wirklich das ganze Beispiel nach Hause. Also haben wir hier einen Container eines Elternteils. Und dann im Inneren haben wir die Position klebrig. Und es wird um all diesen Inhalt klebrig sein , weil er an seinem übergeordneten Element klebrig ist. Nun, was ich möchte, dass Sie dies tun, ist eine Chance zu geben, weil dies wirklich wichtig ist , um Websites aussehen und handeln wirklich, wirklich nett auf mobilen Geräten, die Teil der responsive Web-Entwicklung ist. Und das ist Teil von fortgeschrittenem CSS. Also, Position klebrig zu wissen, wird sehr, sehr hilfreich für Sie sein. Also bitte geben Sie dies eine Chance, wenn Sie stecken bleiben, vergessen Sie nicht, Sie können immer Fragen stellen und das Lernen, Facebook-Gruppe zu programmieren. 12. overflowing: Überlauf ist, wenn Sie die Breite und Höhe eines Elements konstruieren können. Aber dann laufen Sie irgendwie Gefahr, dass Ihr Inhalt oder ein See nach außen überfließt. In dieser Lektion werde ich ein Beispiel geben und wie Sie eine Bildlaufleiste innerhalb Ihrer Boxen erstellen können. Jetzt haben wir ein paar verschiedene Optionen. Wir können uns entscheiden, den Überlauf zu verstecken. Wir können die Benutzer entweder nach links und rechts, nach oben und unten oder einfach nach oben und unten scrollen lassen. Häufiger wollen wir nicht wirklich nur, dass der Benutzer innerhalb einer Box nach oben und unten scrollen. Also lasst uns weitermachen und einige Inhalte zu dieser Box hinzufügen. Jetzt habe ich nur diese reguläre Box, mit der wir gearbeitet haben, während der Rest dieses Kurses sind bis dieser Teil des Kurses sowieso, das ist etwas Lorem ipsum hier drin. Und fügen wir eine weitere Zeile und eine weitere Zeile hinzu. Und lasst uns das einfach wirklich lange machen. Und die Idee hier ist, dass diese Box 300 Pixel breit und 300 Pixel hoch sein soll. Und das wird mehr Inhalt sein, als diese Box enthalten kann. Also, wenn ich diese Seite aktualisiere und heranzoomen , woo, ist es eigentlich nicht genug. Lassen Sie uns das noch ein paar Mal kopieren. Los geht's. Und die Idee hier ist, wenn ich verkleinere, wir haben diese Box und Kunstinhalte brechen aus ihr heraus. Nun ist der Grund, warum dies geschieht, weil wir eine Breite und eine Höhe festgelegt haben. Wir sagten speziell mit diesem, die Höhe dieser Box ist 300 Pixel und es muss 300 Pixel sein, weil vielleicht das ist, was unsere Designer gesetzt oder Designer gesagt haben. Es muss 300 Pixel sein, darf nicht größer sein. Es ist nicht erlaubt zu wachsen, sonst wird es ein wenig seltsam aussehen. Also, was wir tun können, ist, diese kleine Bildlaufleiste auf der rechten Seite hier hinzuzufügen. Und das machen wir ganz einfach. Also in unserer Box-Klasse, alles, was wir tun müssen, ist Überlauf zu sagen. Und lassen Sie uns dies in ein HTML-Dokument ändern. Auch hier habe ich viel Django gelesen, so dass meine HTML-Dateien automatisch eine Django-Vorlage verwenden. Sie sollten standardmäßig standardmäßig HTML verwenden, sobald Sie die Punkt-HTML-Erweiterung in Ihrem Dateinamen haben. Also Überlauf, wir haben ein paar verschiedene Optionen hier. Und das ist wirklich großartig. Ich werde spielen tat war meine Maus dorthin bewegen und es sagt Syntax, sichtbar, versteckte Clip, Scroll Auto. Lass uns das tun, lass uns zuerst verborgen machen. Und wenn wir diesen Inhalt verbergen wollten, wird versteckt, dass zusätzliche Inhalte verbergen. Es gibt tatsächlich mehr Inhalte hier unten. Und wir können tatsächlich sehen, wenn ich den Mauszeiger über diesen Text führe, dass dieser Text den gesamten Abschnitt einnimmt, aber er wird versteckt. Wir können auch sagen, sichtbar. Und das ist nur die Standardeinstellung. Das haben wir ursprünglich gesehen. Und dann können wir das Auto machen. Und das ist die, die Sie mehr wollen als oft nicht ist, hier zurück zu scrollen, drehen Sie Ihren Überlauf Auto. Und wenn ich mich erneuere, erlaubt es mir, einfach so nach oben und unten zu scrollen. Nun wird dies wirklich wichtig sein, wenn Sie einen Bereich Lake erstellen, eine Produkt-Feature-Liste. Sie möchten nicht, dass es die gesamte Seite einnimmt und Ihren Benutzer für immer scrollen lässt. Und sie können auf einem mobilen Gerät auswählen, um einfach innerhalb dieses Feldes zu scrollen. Oder wenn Sie einen häufig gestellten Fragenabschnitt haben, dasselbe. Sie möchten nicht die gesamte Seite aufgreifen. Wenn es etwa 100 Fragen gibt, möchten Sie vielleicht nur, dass es 300 Pixel aufnimmt und sie können durch die Antworten hier scrollen. Das ist also überlaufend. Geh weiter und gib dem eine Chance. Denken Sie daran, dass Sie eine Höhe einstellen müssen I, Sie müssen mehr Inhalt haben als das, was Ihre Elemente derzeit mit dieser Höhe halten können , und setzen Sie dann den Überlauf auf auto. Und das wird dir einfach so eine kleine Bar geben. 13. Zentrierelemente: Um horizontal die Mitte eines Elements. Wir müssen die Blockelemente verwenden, damit sie die gesamte Breite ihrer Art von Abschnitt reservieren können . Und es versucht, wie die gesamte Breite zu reservieren. Ich schätze, ich werde das in einer Sekunde demonstrieren. Und dann können wir Margin-Links-Auto, Margin-Rechts-Auto verwenden. Und so ist alles, was ich hier habe, ein Block, und ich möchte nicht, dass dies Inline-Block ist, ich möchte, dass dies Block ist, was der Standard ist. Also brauche ich das nicht wirklich für ein div. Und so habe ich vier Pixel, einfarbig blau, minWidth und max width. Lassen Sie uns das einfach in eine Breite und eine Höhe ändern. Ich habe die falsche Datei kopiert. Und das ist in Ordnung. Es ist leicht genug, um sich zu ändern. Also mit den 400 Pixeln und einer Höhe von 400 Pixeln. Und wenn ich das in diesem Element oder dieser Seite in meinem Browser öffne, können wir sehen, dass ich diese Box jetzt habe, sagen wir, ich wollte, dass es genau in der Mitte ist. Was ich tun kann, ist, dass ich hier unten sagen kann, und ich werde das ein bisschen größer machen. Rand links automatisch. Und das wird automatisch die gesamte Marge wieder anwenden. Also haben wir es tatsächlich nach rechts verschoben. Das ist irgendwie cool. Aber wenn wir wollten, dass es in der Mitte ist, machen wir Marge, richtig? Automatisch. Und das gleicht es auf beiden Seiten aus. Und eine Abkürzung, die du mich oft sehen wirst, ist so etwas wie Marge. Nehmen wir an, die Spitze wird 50 Pixel sein und links und rechts werden automatisch sein. Das ist oben, das ist richtig, das ist unten. Das ist noch übrig. Und so können wir diese ausschalten, weil sie überhaupt nicht benutzt werden. Und jetzt haben wir Marge ganz herum und unser Element ist zentriert. Warum ist das jetzt wichtig? Denn schließlich müssen Sie in der Lage sein , ein Element basierend auf seinem Rand zu zentrieren, nicht nur auf dem Text, möchten Sie es basierend auf seinem Rand zentrieren. Es ist also immer zentriert. Jetzt fragen Sie sich wahrscheinlich, wow, okay, das ist cool. Wir machen all diese Dinge, aber es sieht nicht wirklich schön aus. Und das Problem beim Lernen von CSS, wie Sie diese kleineren Komponenten lernen müssen, diese kleinen Tipps und Tricks. Bevor wir tatsächlich anfangen können, etwas wirklich Schönes zu machen, müssen wir wissen, wie all diese kleinen Komponenten zusammenarbeiten. Und so zentrieren wir etwas in der Mitte unserer Seite. Und lasst uns einfach tun, tun, tun, tun. Da gehen wir hin. Es befindet sich in der Mitte unserer Seite mit Rändern. Geh weiter und gib dem eine Chance, wenn du bereit bist. Lasst uns zur nächsten Lektion gehen. 14. Fortgeschrittene CSS Auswahl: Okay, lassen Sie uns einen Blick auf erweiterte Selektoren werfen. Wir haben ein paar verschiedene Selektoren, mit denen wir arbeiten können. Wir haben tatsächlich eine Menge Selektoren in CSS, aber wir werden mit Nachkommen Selektoren, untergeordneten Selektoren bei Jason Selektoren und allgemeinen Geschwisterselektoren arbeiten. Also lasst uns voran gehen und hier eine Reihe von Boxen erstellen. Und ich werde das in einem Elternteil mit einer ID namens Eltern setzen. Und lassen Sie uns das einfach nach oben bewegen. Und lassen Sie uns all diese Boxen erstellen. Und lassen Sie uns diese Boxen auch stylen. Also haben wir Dot Box und wir geben diesem eine Höhe von 20 Pixeln und einen Rand von einem Pixel, einfarbig blau. Das wird nur ein Bündel von diesen übereinander gestapelt zu schaffen. Und das sehen wir auf unserer Seite. Dies ist nicht das Schönste überhaupt, aber das ist eine Selektorstunde. Wir brauchen es nicht, um gut auszusehen. Wir brauchen es nicht, um zu viel zu tun, als auszuwählen, was wir derzeit wollen, dass es auswählen. Was wir also tun könnten, ist als allgemeiner Nachkommenselektor, wir benutzen einfach ein Leerzeichen und wir lernten darüber und CSS 101. Also könnten wir sagen, Eltern, das ist die Eltern-ID und es wird damit übereinstimmen. Und dann alle Box-Kinder hier drin. Und wir machen das mit einem Raum. Und wenn ich das speichere, gehe zurück und ich aktualisiere, wollten wir sehen, dass sich nichts ändert und das wird erwartet. Aber alles, was wir sagen, ist, wenn da draußen eine Kiste wäre, und es ist wegen dieser Kiste, das ist keine blaue umrandete Kiste. Wir können sehen, dass dieses Feld, auch wenn wir mit der rechten Maustaste klicken und inspizieren, die Klasse der Box hat, aber es wird nicht gestylt. Und so ist das ein Nachfolger Selektor. Ebenso können wir auch nur untergeordnete Selektoren tun. Anstatt explizit, explizit abgeleiteter Selektor zu sagen, können wir sagen, dass das Dielektrikum des Kindes das Größer-als-Zeichen verwendet. Dies ist also Ihr Elternteil, Ihr Kind-Selektor, und das ist Ihr Kind. Und tatsächlich können wir tatsächlich sehen, dass, wenn wir hier in VS Code gehen, es das gleiche Symbol hier verwendet. Also haben wir div dot box, das ist unsere Klasse und unser Element. Und dann haben wir das Größer-als-Zeichen, das an unsere Eltern geht. Und das wird genau dasselbe tun wie ein Nachkommenselektor. Und wenn ich mich erneuere, ändert sich nichts. Jetzt können wir diese Sache tun, wo wir benachbarte Selektoren auswählen. Also können wir jetzt sagen Eltern. Und dann möchte ich alle Boxen und weitere Boxen auswählen. Und wir können sagen, Hintergrundfarbe ist gleich rot. Und so ist dieser hier unser angrenzender Selektor. Und es wird nur Elemente auswählen, die, denke ich, nebenan sind . Und so wählt es nicht das erste aus, aber es wählt den nächsten und den nächsten und den nächsten, den nächsten, den nächsten ganz nach unten. Und so ist das eine benachbarte Auswahl oder es geht nicht genau wie die erste, es wird die nächsten auswählen. Und dann haben wir diesen allgemeinen Geschwisterselektor. So können wir alles in unserem Elternteil auswählen, unsere Boxen auswählen und dann haben wir diese Tilde. Und so auf meiner Tastatur, ist es direkt neben der Nummer eins oben links auf meiner Tastatur. Es kann unterschiedlich sein, je nachdem, ob Sie eine internationale Tastatur haben. Aber eine generische englische Tastatur ist direkt neben der Nummer eins und es ist diese Tilde. Es ist mein Gast, der eine Tilde ist. Ich kann mich wirklich erinnern, es ist sowieso eine schwippige Linie. Und dann können wir Dot Box sagen. Und lassen Sie uns die Hintergrundfarbe dieser Hintergrundfarbe ändern. Aber beachten Sie nicht Hintergrund Anhang, Hintergrundfarbe schwarz. Und das wird nicht funktionieren, weil ich Eltern geschrieben habe, die Perrin sein sollen, speichern, aktualisieren, und es wählt alle ähnlichen. Und die Idee hier ist, dass es in meinem Inspect-Tool in unseren Entwicklertools in unseren Entwicklertoolsdas erste auswählen wird. Und dann heißt es, oh, eigentlich plus all die anderen die Straße runter. Es sind also zwei verschiedene Möglichkeiten, dasselbe zu tun. Nun möchte ich, dass du das tust, ist, dass du das machst. Eine Sache, auf die Sie vorsichtig sein möchten, ist, dass ich das Elternteil als das untergeordnete Feld auswähle , um all diese mit einem blauen Element zu formatieren. Er merkt, dass diese Box hier unten nicht ausgewählt wird. Aber ich kann auch tun, ist voran zu gehen und Elternteil loszuwerden. Und wenn ich aktualisiere, können Sie sehen, dass meine blaue Box oder meine nicht umrandete Box jetzt einen blauen Rand hat, aber sie hat keinen der schwarzen Hintergrund. Oder wenn ich das auskommentiere, gibt es jetzt gelesen. Also werde ich das einfach rückgängig machen. Aber eine Sache, auf die man achten muss, ist dieses Ding, das Spezifität genannt wird. Also, wenn Sie sagen, wählen Sie die übergeordnete ID und wählen Sie dann die untergeordneten Elemente hier, genannt Feld, und geben Sie ihm eine Höhe von 20 Pixel und einen Rand von einem Pixel, durchgehend blau. Dann muss Ihr nächster Selektor, um genau die gleichen Boxen auszuwählen , genau dieses spezifisch sein. Ansonsten, sieh dir das an. Und das ist ein Crashkurs über Spezifität und wie es ein Albtraum in CSS sein kann. Der Hintergrund ist nun schwarz. Aber wenn ich das loswerde, wird es das effektiv ignorieren, weil dies spezifischer ist. Aktualisieren Sie die Seite. Es ignorierte den schwarzen Hintergrund und es ging mit den spezifischen, so dass es übereinstimmt, dass es sagt, wählen Sie die Eltern-ID, dann die Box-Klassen, Eltern-ID, Box-Klassen, es gibt keine übergeordnete Idee, nur irgendein Feld mit einem anderen Feld daneben zu sagen. Also geh weiter und gib dem eine Chance, spiel damit herum. Fühlen Sie sich frei, mit Spezifität zu experimentieren. Wenn Sie ein wenig mit Spezifität verloren, ehrlich gesagt, müssen Sie es jetzt nicht wissen, aber wenn Sie ein scharfer und Sie wirklich über Spezifität wissen wollen, können Sie immer gehen und Google, dass ein wenig als gut. Das könnte einige zusätzliche Hausaufgaben sein, wenn Sie wirklich das Gefühl haben, CSS bei 150% lernen zu wollen 15. Einführung in pseudo: Pseudo-Klassen sind eine Möglichkeit, Zustände zu verknüpfen. Wir können das CSS-Styling steuern, wenn Sie den Mauszeiger über ein Element bewegen. Wir haben davon in CSS eins zu eins gelernt. Und das ist ein Pseudo-Selektor oder Pseudo-Klasse, ich glaube, es wird tatsächlich genannt. Aber mit anderen Pseudo-Selektoren. Und wir können auch Elemente auswählen, die keine bestimmte Klasse haben sollten. Oder wir können sogar das genaue Element auf einer Seite mit dem n-ten untergeordneten Selektor auswählen. Also in der nächsten Lektion werden wir einen Blick auf das Hover n-te Kind und den Nicht-Selektor werfen. 16. Pseudo Erste Einstieg: Pseudo-Selektoren. Lassen Sie uns über nicht n-th-Kind reden und schweben. Also vor ein paar Lektionen haben wir all diese Kisten gemacht. Lass uns voran gehen und das meistens loswerden. Und was ich diese Seite lade, es ist nur ein Haufen blauer Linien. Es ist also nur ein Haufen Divs und wir können all diese Divs hier sehen. Und so habe ich ein übergeordnetes Element. Es hat eine Idee namens Eltern, und wir wissen, dass es die Eltern ist. Und ein paar Kisten. Jetzt ein Pseudo-Selektor, wir verwenden den nur einen normalen Doppelpunkt, um den Selektor zu verwenden oder zu aktivieren. Es gibt eine Menge von ihnen. Aber in dieser Lektion werden wir wirklich nur daran arbeiten, nicht n-th-child und schweben. Und es sieht aus wie dieser Punkt-Box-Doppelpunkt und dann Ihr Pseudo-Klassenname. Also dieser hier wird Hover genannt, und wir können diese Hintergrundfarbe zu grau ändern, wenn wir wollten. Und lasst uns hier hineinzoomen. Und wenn ich den Mauszeiger über diese bewege, ändert es die Hintergrundfarbe. Nein, es muss nicht nur die Hintergrundfarbe sein. Wir können ändern, wir können die Rahmenfarbe ändern, wir können die Schriftgröße ändern, wir können die Schriftfamilie ändern. Wir können buchstäblich alles auf die gleiche Weise ändern. Aber alles, was wir hier sagen, ist, wählen Sie alle Klassen von Box. Also all das hier drin. Und wenn Sie dann die Maus darüber legen, wenn Sie den Mauszeiger darüber bewegen, was wird sie tun? Das ist ein Pseudo-Selektor. Jetzt haben wir das und CSS eins zu eins sehr schnell gelernt. Lass uns weitermachen und etwas weiter fortgeschrittenes benutzen. Also können wir jetzt sagen Box. Lasst uns das nicht benutzen und tatsächlich sehen, dass es eine Menge von ihnen hier drin gibt. Wir werden das nicht alles durchmachen. Es gibt nur so viele, und ehrlich gesagt die meisten von ihnen auf verdient, in der Regel verwendet, aber sie werden unterstützt. Also lasst uns einen Doppelpunkt machen. Und dann, was wir hier drin tun, ist, dass wir ihm einen anderen Selektor geben. Was sollte es nicht wählen? Also wähle mich nicht aus. Lass uns das kopieren und das in die dritte werfen. Und lassen Sie uns das beenden. Machen Sie eine Hintergrundfarbe von Blau. Diese sollten nun alle einen blauen Rand haben, einen blauen Hintergrund, wenn Sie den Mauszeiger darüber bewegen, werden sie alle grau. Allerdings, die Box nicht wählen Sie mich nicht, das ist diese, wird nicht eine blaue Hintergrundfarbe haben. Also lassen Sie uns voran und aktualisieren und Sie können sehen, dass es diese direkt in der Mitte auswählt. Nun ist hier eine Sache zu beachten, dass CSS, wie die meisten Programmiersprachen, von oben nach unten funktioniert. Also sagten wir, geben Sie ihm eine Hintergrundfarbe von Grau, wenn wir schweben. Aber dann sagten wir, wenn die Box nicht ist, wähle mich nicht aus, Klasse hat diese nicht. Ändern Sie dann die Hintergrundfarbe in Blau. Und wenn wir hierher zurückgehen, werden wir sehen, dass nichts passiert außer diesem hier. Um dies zu beheben, wählen wir das einfach aus und verschieben es einfach nach oben. Speichern, aktualisieren. Und jetzt funktioniert es für uns so, wie wir es wollen. Schön, Schönheit, Schönheit BAD. Okay, sagen wir, wir wollten einen bestimmten auswählen. Nun, es wird eine Zeit in der Zukunft geben, wenn Sie an einer Website arbeiten, die Sie haben, all diesen HTML-Code und Sie werden nicht in der Lage sein, diesen HTML zu bearbeiten. Vielleicht arbeiten Sie mit einem Framework wie Django und Sie müssen in der Lage sein , einfach mit geradem HTML zu arbeiten. Das ist sehr, sehr wichtig. Dies ist eine der wichtigsten Fähigkeiten in CSS, müssen Sie in der Lage sein, Ihren HTML nicht zu berühren und immer noch auswählen, was Sie auswählen müssen. Also lassen Sie uns voran und wählen Sie wie dieses Feld hier aus. Nehmen wir an, wählen Sie den Namen aus. Und lasst uns diese Farbe in Weiß ändern. Auf allen Boxen wird die Farbe weiß sein, damit wir sie lesen können. Da gehen wir. Wir möchten, dass dieses ausgewählt wird und dann wollen wir nicht, dass eines der anderen ausgewählt wird. Nun ist das Problem, dieser ist der gleiche, wie dieser ist der gleiche wie dieser ist der gleiche wie dieser. Und die unteren drei, sie sind alle identisch. Sie leben alle im Elternteil, dass es nichts Einzigartiges an ihnen gibt. Wie wählen wir das aus? Wir können dies mit dem n-ten untergeordneten Selektor schlagen. Und so, was wir sagen können, ist wählen Sie alle über Boxen, dann tun Sie n-te Kind. Und es braucht geschweifte Klammer, geschweifte Klammern, aber Klammern. Und dieses n-te Kind nimmt eine Nummer. Und welche wollen wir das wie 12345. Also werfen wir die Nummer fünf da rein. Und lasst uns diese Hintergrundfarbe ändern. Es ist schon blau. Das wird nichts tun, was die Hintergrundfarbe in Gelb ändert. Und lasst uns diese Farbe in Schwarz ändern. Die Textfarbe ist schwarz. Und wenn wir unsere Seite aktualisieren, wählt sie nur diese aus. So wissen wir, dass es eine bestimmte Anzahl von Boxen gibt. Und wir sagten, oh, wir müssen nur diesen auswählen, aber wir können den HTML-Code nicht berühren. Wir können sagen, überspringen 1234, wählen Sie Nummer fünf mit dem n-ten Kind Selektor und wenden Sie dann unser Styling an. Jetzt ist das wirklich wichtig, weil dies in fortgeschrittene Selektoren gelangt und dies wird Ihnen in Zukunft enorm helfen , irgendwann , wenn Sie mit einem Designer arbeiten, höchstwahrscheinlich. Wenn Sie also mit Ihrem Webdesigner arbeiten, wird der Webdesigner sagen, hier ist ein Haufen Sachen, die Sie vielleicht mit einem Back-End-Entwickler arbeiten , sagt zurück in die Tiefe, okay, wir werden dies in Django und Es wird Beispiel eine Reihe von Checkboxen haben. Aber wir wollen, dass der dritte Punkt, der dritte Punkt im Kontrollkästchen einen Rahmen um ihn herum hat, damit er wirklich hervorsticht. So sind die Leute eher auf diese klicken. Wir können das mit machen. Und das Kind. Wir können sicherstellen, dass sich die Dinge ändern, wenn man über etwas schwebt. Wir können sicherstellen, dass Sie bestimmte Elemente nicht auswählen. Sie können alle auswählen, außer bestimmten. 17. Einführung in Pseudoelemente: Pseudo-Elemente sind in der Syntax ähnlich wie Pseudo-Klassen sind Selektoren. Was wir in dieser letzten Lektion gelernt haben. Der Unterschied ist, wie es sich verhält. Es sieht also sehr ähnlich aus, aber es ist etwas anders. Also in dieser speziellen Lektion werden wir Colins benutzen. Also könnten wir eine Box auswählen, die für Colins verwendet wurde und dann, was auch immer der Selektor in dieser Lektion aufgerufen wird oder nicht, aber in den nächsten Lektionen werden wir über diese Pseudo-Selektoren lernen. Sie sind keine Pseudo-Selektoren, und das sind tatsächlich Pseudo-Elemente. Was wir vorher gemacht haben, war eine Pseudo-Klasse oder ein Pseudo-Selektor von Hover. Dieses Mal werden wir sagen, wählen Sie die Box und dann könnten wir tun, bevor oder Punkt Feld Doppelpunkt, Doppelpunkt nach. Und das wird verschiedene Dinge für uns tun. Jetzt. Vorher und Nachher ist das, worüber wir zuerst lernen werden, sind wirklich, wirklich interessante Elemente. Denn was es tut, ist, und wir werden ausführlicher darüber in den einzelnen Lektionen gehen. Aber es wird tatsächlich Elemente zu schaffen, wird bestimmte Dinge tun, die HTML tun sollte. So geht CSS irgendwie über seine, seine Grenze hier und gelangt in die Welt von HTML. Jetzt ist ein weiterer Unterschied, dass diese nicht wirklich Aktionen haben. Während wie Hover ist, du weißt schon, du schwebst über etwas, du machst tatsächlich etwas. Es wird irgendeine Art von Hover-Ereignissen dauern. Sie legen Ihre Maus darüber und es kann sich ändern. Während diese wie vorher und nachher nicht wirklich dafür entworfen sind, obwohl Sie das absolut tun können. Aber diese werden im Grunde HTML-Elemente zu Ihrer Seite hinzufügen. Also lasst uns voran gehen und ins Vorher und Nachher springen. 18. Die Vor- und after: Vorher und Nachher sind Pseudo-Elemente ähnlich wie Inline-HTML-Elemente. Aber wir müssen dafür kein HTML schreiben. So können wir bestimmte Dinge auf unserer Seite anvisieren. Und wir können im Grunde mehr HTML haben oder zumindest gefälschte HTML hinzufügen und dann eine Reihe von Styling hinzufügen, damit wir unseren HTML überhaupt nicht ändern müssen. Ein gutes Beispiel dafür ist also eine Box. Und wenn ich zu meinem Browser zurückgehe, sieht die Box so aus. Es ist zentriert Seite, die einen schwarzen Rand hat. Es ist nur eine 300 mal 300 Pixel Box. Nun, was wir sagen können, ist, wählen Sie diese Box und dann bevor wir alle möglichen Dinge daran tun können. Das erste, was Sie tun möchten, ist dass Sie einige wollen, um einige Inhalte hinzufügen. Dies erleichtert die Inhaltseigenschaft und in der Regel fügen wir einfach ein, ein leeres Leerzeichen dort hinzu. Und das sagt dem Browser nur: Hey, sieh mal, es sollte hier ein Element sein. Und Sie wissen, wie wenn Sie ein leeres div schreiben, wird es nicht auf Ihrer Seite angezeigt. Dasselbe, aber wir werden ein Leerzeichen hinzufügen , und das stellt sicher, dass es auf der Seite angezeigt wird. Dann können wir eine Anzeige machen. So können wir sagen, Anzeigeblock. Und dann können wir einen Rahmen von zehn Pixeln geben, solide rot. Und mal sehen, wie das bis jetzt aussieht, das wird nicht perfekt sein, aber es wird ziemlich nah sein. Und an diesem Punkt, tatsächlich, sobald ich diese Seite aktualisiere, werden wir Yep sehen. Also haben wir etwas, das cool ist, und wir können hier in unser Inspect-Element gehen und es auswählen. Wir können alle möglichen Sachen damit machen. Wir können dieses CSS jetzt direkt in unsere Entwickler-Tools bearbeiten. Lassen Sie uns voran und geben Sie diesem eine Breite von 100%. Mal sehen, was das tut. Und an diesem Punkt werden wir nur experimentieren. Sie können sehen, dass es eine Breite von 100% wölbt, weil die Grenzen, die schwarzen Ränder. Das heißt, sagen wir, wir wollen ihm eine Höhe und eine 100% geben. Mal sehen, ob das auch geehrt wird. Okay, nicht schlecht, nicht schlecht. Nehmen wir an, wir wollten das bewegen. Also lasst uns in eine Positionierung kommen. Lassen Sie uns Position relativ auf der gesamten Box selbst machen. Aber dann im vorigen Pseudo-Element, dieses gefälschte Element, das nicht wirklich auf der Seite existiert. Hier gibt es keinen HTML-Code. Wir können den HTML bearbeiten. Wir können sagen, lass uns das bewegen. Also lassen Sie uns das nach oben rechts verschieben. Und so können wir sagen, Position absolut. Und wir wissen, dass das funktionieren wird, weil es Eltern ist. Selector verwendet Position relativ. Sein übergeordnetes Element verwendet Position relativ. Wir machen die Position absolut. Lassen Sie uns oben minus zehn Pixel tun, und lassen Sie uns links minus zehn Pixel tun. Und wir werden diese Art von Unebenheiten hier sehen. Oh, eigentlich liegt das daran, dass wir dort Grenzen haben. Ja, ja. Und zehn Pixel, einfarbig roter Rand. Also haben wir es einfach überlappt. Gehen wir voran und machen stattdessen 30. Da gehen wir. Jetzt können Sie tatsächlich sehen, dass dies vorher oben auf dem schwarzen Rand ist. Und ein besseres Beispiel dafür ist, wenn ich die Hintergrundfarbe gleich schwarz auf der Box mache, nicht das Pseudo-Element. Vorher. Wir können sehen, dass das Rot darüber skizziert ist. Wenn wir nun ändern wollten, wie wir es konnten, könnten wir es tun. Und das ist Teil der Positionierung. Wir könnten sagen, Zed Index minus eins. Und das schichtet es dahinter. Nun, ebenso können wir das Gleiche tun, aber mit nachher. So kann jedes Element ein Vorher und Nachher haben. können wir tun. Dickdarm, Dickdarm danach. Und wir werden dieses Feld auswählen, aber wir werden ein After-Element anstelle eines Before -Elements erstellen. Lasst uns weitergehen und kopieren. meiste von diesem Zeug wird sehr, sehr ähnlich sein. Und wir könnten diese Selektoren tatsächlich zusammenfassen, wenn wir wollten. Lassen Sie uns dies von massivem Rot in einfarbiges Blau ändern. Und statt oben, Lassen Sie uns unten und rechts tun. Und mal sehen, wie sich das für uns ergibt. Und es wird nicht genau das sein, was Sie erwarten, aber es wird, es wird etwas zeigen und wir können uns von dort anpassen. Okay, cool, cool. Also haben wir diese auf diesen Vor- und Nachher-Elementen und sie sind dahinter. Lasst uns voran gehen und diesen Set-Index loswerden. Oder wir können es zu einem positiven ist am Index. Ich mag einen oder lass uns zehn sagen. Und das sind nur Schichten oben. Also, jetzt haben wir diesen netten kleinen Irrsinn. Was passiert, wenn wir den Boden loswerden? Und richtig? Ok. Also direkt nach dem Element, wird es direkt im Inneren sein. Sie können tatsächlich sehen, dass es hier diese Grenze gibt, diese Tafel oder diese Zehn-Pixel-Grenze. Es ist genau auf der Innenseite. Was, wenn wir sagen, oben und links sind die gleichen wie die zuvor? Es bewegt es genau dorthin, wo wir es erwarten. Also, jetzt als ein weiteres Beispiel, lasst uns voran gehen und diese oben links loswerden. Lass uns das oben links loswerden. Und diese werden genau die gleichen sein. Wir können diese nicht mehr sehen, aber wir können sie auswählen. Also haben wir eine vor, und wir können sagen, bevor wird oben minus 30 Pixel und links sein. Und ich ziehe das hier im Video nach oben. Minus 30 Pixel. Ok? Und wir können die Nachher auswählen und wir können das gleiche tun, aber andere unten. Minus 30 Pixel, richtig? Minus 30 Pixel. Und das gibt uns nur diesen schönen kleinen Schichteffekt. Sehen wir uns nun ein Beispiel der realen Welt an. Das ist wirklich, wirklich cool, aber das ist nicht wirklich ein echtes Beispiel. Also, was ich tun werde, ist, dass ich hier eine HR erstellen werde, nur eine horizontale Regel. Und ich werde einen neuen Link erstellen. Also, ein Element wird nirgendwo hingehen und diesem eine Grenze geben. Lasst uns auch etwas Lorem reinlegen. Und wirf das direkt in die Mitte. Und das hat meine Sachen da oben aufgehoben, das ist völlig okay. Und wenn ich hier reinzocke, werde ich hier echt, richtig gut heranzoomen. Lassen Sie mich auf 200% vergrößern. Sagen wir, wir wollen uns eine Grenze geben. Lassen Sie uns dieses Standard-Styling loswerden und geben wir diesem eine richtige Grenze. Und wenn man darüber schwebt, die Grenze größer. Also, was wir tun können, ist, können wir R wählen, ein Element, sagen Textdekoration. Keiner. Lass uns da drin nichts tun. Lassen Sie uns die Farbe in Schwarz ändern. Und mal sehen, wie das aussieht. Ok, cool. Es passt hinein. Siehst du, es ist ein Link, passt rein. Wir haben nicht gesagt, dass er eine Verbindung herstellen soll, bis wir den Mauszeiger darüber bewegen. Was wir jetzt tun können, ist, dass wir sagen können, Hey, Element, vorher. Lassen Sie uns mit einem Raum zufrieden machen. Die Breite ist gleich 100%. Die Höhe ist gleich, sagen wir, vier Pixel. Dies gibt uns eine Hintergrundfarbe. Und ich ziehe das einfach in die Mitte des Videos. Die Hintergrundfarbe wird blau sein. Und mal sehen, wie das aussieht. Noch nichts. Warum ist das? Nun, wir müssen uns eine Position geben. Also lassen Sie uns auf unserem Hauptelement hier tun, Position relativ. Und dann auf dem Vorher, lasst uns Position absolut machen. Unten 0, links, 0 hat eine Breite von 100%. Also sollte das jetzt für uns auftauchen. Da gehen wir. Das sieht also überhaupt nicht sehr gut aus. Und das ist nicht wirklich der Punkt hier. Es geht darum, Ihnen zu zeigen, dass wir dem eine Grenze geben können. Jetzt ist dies nicht anders als Grenze unten. Was haben wir hier gesagt? Vier Pixel, einfarbig blau. Aber jetzt beim Hover können wir anfangen, diese zu vergleichen, zu mischen und zu entsprechen. Wir können schon mal einen Schweber sagen. Und lassen Sie uns diese Höhe auf 14 Pixel ändern. Geben Sie dem eine Auffrischung. Und sieh dir das an. Jetzt deckt es den Text ab. Wir können den Text dort nicht mehr sehen. Stattdessen können wir sagen, dass immer unter dem Text stehen, darunter sein, wie wir es sind, als würden wir ein Stück Papier auf ein anderes Stück Papier legen. Also können wir sagen, Index wird minus eins sein. Standardmäßig sind alle Zed-Indizes oder Z-Indizes auf 0. Wir werden sagen, wirf das direkt hinter diesen Text. Und nun bam, nun, wir können das immer noch nicht wirklich sehen, lasst uns das von blau zu gelb ändern. Da gehen wir. Das sieht ein bisschen besser aus. Das ist immer noch sehr schwer im Video zu sehen. Lass uns rot machen. Das ist viel besser. Und jetzt haben wir dieses Pseudo-Element mit einem Hover-Zustand, und wir modifizieren dieses Element selbst. Also, wenn wir hier reingehen und unser a erweitern, können wir sehen, dass es ein Vorher gibt. Und noch eine coole Sache, die wir tun können, ist, dass wir auf diesen Punkt-Punkt-Punkt klicken können, diese Ellipse. Und wir können für Staat Hover tun. Und das schwebt für uns diesen Zustand, als ob wir unsere Maus dauerhaft darüber legen würden. Und dann können wir das vorher anklicken und sehen, was hier vor sich geht. Einschließen des A-Selektors mit einer Hover-Pseudo-Klasse mit einem Vor-Pseudo-Element. Nun möchte ich, dass du das tust, ist eine Chance zu geben. Dies ist sehr, sehr wichtig, da dies Teil von fortgeschrittenem CSS ist. Wir kommen in die fleischigen Teile von CSS. Also gib das eine Chance. Versuchen Sie, einen Link zu erstellen, versuchen Sie, Boxen mit vor und nach Elementen zu erstellen. 19. So veränderst du den ersten Brief und die erste Linie mit pseudo: Mit dem Pseudo-Elemente-Selektor können wir den ersten Buchstaben eines Elements anvisieren. Wir können auch die erste Zeile eines Elements anvisieren. Also lasst uns voran gehen und hier einen Absatz mit einem Haufen Lorem erstellen. Und wir werden eine Menge Wärme hier reinlegen. Und es wird alles in einem einzigen Absatz sein. Und ich werde mehrere Zeilen setzen, meinen Code sauber halten, aber es wird wie ein Absatz auf der Seite aussehen. Also geh hier. Ok, zu klein. Vergrößern wir uns. Und sagen wir, das ist so, als würden wir eine Website schreiben oder eine Website für eine Zeitung oder eine Art Zeitschrift umcodieren. Und wir wollen, dass dieser erste Brief riesig ist. Wir können das anvisieren. Wir können in unserem Styling hier sagen, zielen Sie auf das P-Element. Und wir können den ersten Brief machen. Und dann können wir die Schriftgröße machen, lassen Sie uns etwas Großes tun. Lasst uns wie 50 Pixel machen. Und das wird ich nur zum allerersten l machen, nicht zu den anderen, nur zu diesem allerersten. Wirklich groß. Lasst uns weitermachen. Okay, sieht gut aus, es ist größer. Aber wir wollen, dass der Text um ihn herum wickelt. Und wir wissen, dass wir umschließende Dinge mit Float, Float links machen können. Und das ist sehr, sehr wichtig zu wissen, aber es ist auch etwas, das wir gelernt haben und CSS 101. Wenn Sie also nicht mit Float vertraut sind, sollten Sie sich mit Float vertraut machen. Es ist sehr nützlich in bestimmten Fällen wie diesem. Und damit L immer noch ein wenig zu groß ist. Aber was wir tun können, ist, dass wir dieses p auswählen können, gehen Sie nach unten. Nein, es ist nicht da drin, weil es kein Element ist. Sudo und da gehen wir. Element des ersten Buchstabens Lassen Sie uns voran und ändern Sie die Schriftgröße. Nur eine Gerechtigkeit, die ich nicht weiß. Lassen Sie uns das einfach weiter kleiner machen, bis es anständig aussieht. Ja, so etwas. Und dann können wir auch einen Rand von Lake 50 Pixel hinzufügen. Wenn wir wollten, dass es wirklich heraussteht, können wir einen Rand von fünf Pixeln hinzufügen, um es ein wenig glatter aussehen zu lassen. Und ich ziehe das einfach nach oben. Und das ist der erste Buchstaben-Selektor. Also lassen Sie uns voran und fügen Sie diese Marge auch dort hinzu. Rand von fünf Pixeln. Jetzt können wir auch die erste Zeile auswählen, und es wird nicht unbedingt sein, diese Codezeile wird diese Zeile sein. Und das wird von Ihrem Browser abhängen. Also kommen wir hier in etwas etwas reaktionsfähigeres. Und so gehen wir weiter und sagen P. Erste Zeile. Und lasst uns das Schriftgewicht fett machen. Speichern, aktualisieren, und jetzt ist es gekühlt. Das Schöne daran ist, dass es immer die erste Zeile sein wird. Sie können sehen, es sind nur die ersten vier Buchstaben hier. Das ist wirklich schwer zu sehen. Ich entschuldige mich dafür. Aber wenn ich das mache, ist es immer die erste Zeile. Egal, wie viel Text es gibt, es ist immer die erste Zeile. Das ist also Ihr erster Buchstabe und Ihre ersten Pseudoelement-Selektoren oder Pseudo-Selektor. Und ehrlich gesagt werden Sie das nicht zu oft verwenden, aber es ist gut zu wissen, dass es möglich ist, dies zu tun. Ich werde Ihnen keine Hausaufgaben dafür geben, aber stecken Sie das einfach in Ihre Gesäßtasche und speichern Sie es für später. Wissen Sie, dass dies völlig möglich ist, falls Sie jemals mit einem Kunden arbeiten eine Website im Artikelstil wie eine Zeitschrift oder eine Zeitung hat. 20. Text mit Auswahl herzustellen: Mit Auswahl können wir unserem Browser mitteilen, wie Text aussehen soll, wenn der Benutzer ihn auswählt. Wenn Sie also den Mauszeiger über und dann klicken und die LED ziehen, können Sie sehen, dass meine Änderungen im VS-Code ein wenig. Das können wir auch im Browser ändern. Also lasst uns das in Chrom öffnen. Öffnen Sie es in Chrome. Wir haben Lorem ipsum, nichts Größeres hier. Und wenn wir auswählen, ist es nur der Standardbrowser. Also, weißt du, ehrlich gesagt, es ist nichts falsch daran. Aber wenn Sie es ein wenig interessanter machen wollten, vor allem, wenn Sie einen Artikel haben, Website wie Medium, wo ich glaube, wenn Sie den Mauszeiger darüber bewegen, ändert es die Hintergrundfarbe zu grün und die Farbe zu weiß. Also lasst uns tatsächlich gehen und genau dieses Beispiel machen. Also, was wir hier tun können, ist, dass wir sagen können, und das braucht nicht einmal ein bestimmtes Element. Wir können einfach sagen, wann immer Sie irgendeine Art von Auswahl tun, ändern Sie diese Hintergrundfarbe in grün und ändern Sie die Farbe in Weiß. Und jetzt, wenn ich rette und wir sehen werden, ist es das, was es vorher war. Aktualisieren. Das ist es, was es jetzt ist. Und das ist Selektion. Das gefällt mir persönlich. Ich mag das, wenn ich auf einer Seite bin und ich möchte einige Texte kopieren, die ich genau weiß, wo ich bin, ich wähle das aus. Es sagt mir, dass der Front-End-Entwickler, der diese Website gemacht hat, tatsächlich den Gedanken in Zeit und Mühe, dies zu tun. 21. Wie du reibungslose Übergänge hinzufügst: Werfen wir einen Blick auf Übergänge. Übergänge lassen uns reibungslos Anpassungen vornehmen. Also, weißt du, wenn du mit dem Mauszeiger über ein Element bewegst und es wie zehn Pixel nach oben bewegst, sieht es ein kleiner Junkie aus. Es ist sehr abrupt. Und stattdessen mit einem Übergang, können wir es glatt machen, so dass es reibungslos nach oben bewegt , und wir können ihm sagen, auf eine bestimmte Art von Änderung zu hören , wie eine Breite oder einen Rand oder Position, jede Art von Sache. Wir können hier wirklich viele Dinge umstellen. Aber in diesem Beispiel sollten wir Übergang Sie verknüpfen. Also lasst uns einen Link zu einer Schaltfläche machen. Also lasst uns einen Knopf machen. Und es wird nichts darin sein. Und das wird sagen, klicken Sie auf mich. Und so lasst uns diese Verbindung anvisieren. Und das gibt ihm eine Hintergrundfarbe von fff. Es wird also weiß. Es wird schon weiß aussehen, aber lassen Sie es uns sowieso ein Weiß geben, wir können das später übergehen. Wir können sagen, dass die Anzeige Inline-Block ist, und wir können sagen, dass die Polsterung oben und unten fünf Pixel betragen wird. Und auf der rechten und linken Seite wird 15 Pixel sein. Es gibt auch eine Farbe und explizite Farbe. Und das wird bei unseren Übergängen helfen. Also Farben, die nicht wirklich weiß werden, wird schwarz 000 sein. Und mal sehen, wie das aussieht. Ja. Okay. Nun, nicht ganz Textdekoration. Keine. Und geben wir ihm eine Grenze. Der Rand ist ein Pixel, durchgehend schwarz. Und machen wir das größer. Vergrößern, Zoomen, Vergrößern, Vergrößern. Ich bin bei 500%, also ist das der Knopf. Und wenn Sie den Mauszeiger darüber bewegen und nichts passiert, fügen wir einen Hover hinzu. Wir können sagen, ein Schweben. Und wenn wir den Mauszeiger darüber bewegen, ändern wir die Hintergrundfarbe in schwarz. Oder wir könnten ein Hex Farbe 000 machen. Und lassen Sie uns die Farbe ändern, um weiß oder fff zu sein. Lass uns voran gehen und das speichern. Und okay, also haben wir einen Schwebezustand. Es ist ein kleiner Jackie. Nicht wirklich toll für Epileptiker Um ehrlich zu sein, aber wir können das viel glatter machen, indem wir den Übergang sagen. Und was wollen wir hier übergehen? Wir könnten alles umstellen und wir könnten sagen, dass Sie 0,2 Sekunden brauchen, um es zu tun. Also sagen wir Übergang alle als erster Parameter. Das ist es, was wir wollen, dass es übergeht. Zweiter Parameter ist, wie lange es dauern sollte. Und wenn wir die Seite aktualisieren, können Sie sehen, dass sie ein- und ausgeblendet wird. Nun, das ist viel besser. Jetzt könnten wir das tatsächlich deutlich genauer machen. Und ehrlich gesagt, das ist nicht super performant weil Ihre Browser jetzt nach jeder einzelnen Änderung suchen, wird es nach Anzeigeauffüllung, farbigem Text, Deklaration, Rahmen und Hintergrundfarbe auf dem Hover-Zustand suchen . Vielleicht wollen wir das nicht. Vielleicht wollten wir immer nur die Hintergrundfarbe ändern. Wir können sagen, ändern Sie diese Hintergrundfarbe. Statt allem ändern wir es in Hintergrundfarbe, entspricht diesem genauen Eigenschaftsnamen hier oben. Und es wird 0,2 Sekunden dauern. Jetzt wird sich das ändern. Diese Hintergrundfarbe wird verblassen und wir können tatsächlich ziemlich schwer zu sehen. Also lasst uns etwa 2,2 Sekunden machen. Und Sie können diese Hintergrundfarbe sehen, wenn ich die Seite hier oben aktualisiere Diese Hintergrundfarbe wird eine Weile dauern, bis sie verblasst, aber diese Farbe wird sofort sein. C. Das sieht irgendwie cool aus. Ich schätze, wenn dir diese Art von Effekt gefällt. Sagen Sie auch Komma. Und ich setze das gerne auf eine andere Linie, Farbe. Lassen Sie uns diese Übergangslänge in etwas wirklich langes ändern. Sagen wir mal fünf Sekunden. Und wenn ich hier rauf gehe, klicke auf „Erfrischen“. Komm runter. und Ausblenden. So schön und langsam. Nun sind Ihre Übergänge normalerweise nicht so langsam. In der Regel sind Ihre Übergänge etwa 0,2 Sekunden und dieser kann 0,5 Sekunden betragen. Gehen wir weiter und aktualisieren so etwas. Und das macht es einfach ein bisschen schöner. Jetzt können wir auch Dinge wie Polsterung ändern. Aber schau dir das an, wenn ich Hover sage, Padding mit Änderung beim Auffüllen von fünf Pixeln und 15 Pixeln sage. Ändern wir das zu verdoppeln. Also oben und unten werden zehn Pixel sein. Links und rechts werden 30 Pixel sein. Das wird ein wenig Yankee c aussehen , dass wir nicht wirklich wollen, dass wir wollen, dass es schön und glatt ist. Was wir hier sagen können, ist Komma, Komma Komma Gemeinschaft und Padding. Und wir könnten 0,4 Sekunden sagen oder weil es so viel größer ist, können wir das tatsächlich so eine Sekunde machen. Das ist wieder einmal, nicht das schönste Beispiel aller Zeiten, aber es ist ein gutes Beispiel. Und das ist wirklich gut für den See. Wenn Sie eine Seite haben, wie lasst uns zum Raketenmann gehen, lerne nicht wag tail.com. Und man kann sehen, dass dieser Hover dort ein bisschen einen Effekt hat. Oder wenn Sie den Mauszeiger darüber bewegen, wird dies eine Karte genannt. Sie können die Hintergrundfarbe ändern. Sie können es verblassen lassen, ausblenden. Sie können diesen Schritt machen. Du könntest alle möglichen Sachen mit einem Übergang machen, damit es nicht so Junkie aussieht. Das ist also ein Übergang. Was ich möchte, dass Sie für diese Lektion tun, ist, einen Link zu erstellen, ihn zu einer Schaltfläche zu machen, genau wie das, was ich getan habe, und dann die Hintergrundfarbe ändern, wenn Sie den Mauszeiger bewegen, Sie müssen nicht alle anderen tun, aber nur Ändern Sie die Hintergrundfarbe, wenn Sie den Mauszeiger zeigen und stellen Sie sicher, dass Sie diesen Übergang zu Ihren Hauptelementen hinzufügen, nicht zu Ihrem Pseudo-Selektor, nicht zu Ihrer Pseudoklasse. Ihr Hauptelement. 22. Wie du gradient hinzufügst: Okay, reden wir über Farbverläufe. Es gibt zwei primäre Arten von Farbverläufen. Es gibt lineare und radiale. Ein linearer Farbverlauf geht von Seite zu Seite. Irgendwelche radialen Gradienten entstehen aus der Mitte. Nun, wir werden nur mit Linear arbeiten, weil es viel besser aussieht. Und ehrlich gesagt, ich glaube nicht, dass ich jemals einen Fall gesehen habe , in dem ein radialer Farbverlauf tatsächlich gut aussieht. Aber wenn Sie wollten, wenn Sie etwas über das hinaus lernen wollten , was ich Ihnen im Rahmen dieses Kurses beibringen werde, können Sie radiale Farbverläufe nachschlagen und wir werden wahrscheinlich trotzdem ein Beispiel dafür sehen. Aber wir werden mit linearen Farbverläufen arbeiten , nur weil sie größtenteils besser aussehen, zumindest während dieses Jahrzehnts im Webdesign, es sieht gut aus. Vielleicht kommen alte Stile zurück und es wird gut aussehen, radiale Art von Verläufen, aber Lineare zu haben, während in diesen Tagen also gehen wir voran und fügen Sie eine Box hinzu, und es ist fällig Box. Und in dieser Box werden wir eine Art von Farbverläufen haben. Also nennen wir es nicht Box, nennen wir es Gradient. Und in unserem CSS können wir Farbverläufe machen, dieses Element auswählen und wir könnten sagen, dass das Hintergrund-Hintergrundbild ein linearer Farbverlauf sein wird. Und das wird eine Richtung nehmen. Also eine Richtung, Farbe eins, Farbe zwei. Und so wird das eigentlich gar nichts tun. Ich werde das hier nur für eine Sekunde lassen. Lassen Sie das einfach auf dem Bildschirm und lassen Sie uns eine Höhe von 500 Pixel machen. Und wir müssen keine Breite festlegen, weil es ein Blockelement ist. Aber wissen Sie, für ein gutes Maß ist das die Breite, 100%. Und so gibt es hier einen linearen Farbverlauf. Was soll diese Richtung sein? Sagen wir, die Richtung wird zwei sein, oder? Es wird also von links nach rechts gehen. Es wird mit der Farbe Schwarz beginnen, und dann wird es in Gelb gehen. Und so lassen Sie uns voran und laden Sie diese Seite in Google Chrome. Und jetzt haben wir diese nette kleine Steigung. Nun, was cool ist, ist, dass es von links nach rechts geht, aber wir müssen es nicht von links nach rechts sagen. Wir können es geben und Winkel. Wir können so etwas wie 45 DEG vier Grad sagen. Und das ändert sich, es ändert es von schwarz in dieser Ecke zu gelb in dieser Ecke statt von links nach rechts, es ist von Ecke zu Ecke. Jetzt werde ich hier ehrlich sein, die meisten Leute merken sich das nicht aus. Das ist eine wirklich scharfe Sache. Die Leute benutzen nicht Steigungen genug, um immer unvergesslich zu sein. Und es ist auch schwer herauszufinden, welche Art von Winkel Sie wollen. Normalerweise verwenden wir also eine Art CSS Gradient Tool. Und was ich tun werde, ist einfach zu Google zu springen und ich werde den CSS-Gradienten-Generator eingeben . Und so gibt es CSS Gradient Dot IO, Mozilla. Das ist ein beliebter. Dieser ist seit einigen Jahren beliebt. Aber ich meine, es ist genau wie der erste, weil ich in anderen Kursen diesem eine genug Aufmerksamkeit geschenkt habe, lass uns mit CSS Gradient Dot IO gehen. Und so ist die Idee hier, dass Sie einen Gradienten haben und wir tun können, wir können hier radial machen. Also gehen wir weiter und schnappen uns das. Und ich ziehe das einfach runter und das wurde es los. Und so lasst uns radial machen. Und so sieht Radio aus. Es beginnt von innen und geht nach außen. Es gibt also einen Fall, in dem es okay aussieht. In diesem Fall sieht es in Ordnung aus. Nun, was wir taten, war zu hören, dass diese Farbe schwarz war und dann diese Farbe hier drüben. Und wir wählen einfach, dass man weiß ist. Und das ist radial, das ist linear. Und wir können den Winkel und das Zeug ändern, indem wir hier runter gehen diesen Winkel so ändern. Es gibt keinen Winkel, wenn es um Radial geht. Und jetzt ist das Schöne daran in der Regel, dass diese Ihnen genau das CSS geben , nach dem Sie suchen. Und so ist das eigentlich wirklich schön. Dies sagt uns, dass dies ein radialer Gradient ist. Es ist ein Kreis. Linear wird 0 Grad sein. Gehen wir weiter und ändern das auf 68 Grad RGB 000, das ist schwarz RGBA, das hat das Alpha hier drin, das ist ein Eins, also ist es völlig sichtbar. Und 0% und dann wieder, RGBA 555255 zu 55, das ist weiß. Eine 100% Transparenz oder vielleicht ist das der falsche Wortlaut. So oder so, Sie können es komplett sehen und es wird zu 100% gehen. Es beginnt also bei 0 und geht auf 100. Und das können wir ändern. Das ist, was das 0 100% bedeutet. Sehen wir, dass sich diese Zahl dort ändert. Und wie das aussieht, ist, dass wir das schön und eng machen können wenn wir es wollten, so etwas. Und dann können Sie Text auf der linken Seite haben. Du könntest ein Bild auf der rechten Seite haben, wenn du es wolltest, wenn du das hier durchschaubar machen willst. Genau so. Und Sie können ein Bild haben, ein Hintergrundbild genau so. Die meisten von uns erinnern sich also nicht an all das, nur weil wir es so selten benutzen. Sie sind schön zu haben. Aber normalerweise benutzen wir einfach ein Werkzeug, das uns helfen wird. Was wirklich schön ist, ist, dass wir das tun können. Gehen Sie hier rein, klicken Sie rechts in die Mitte, und lassen Sie uns das grün machen. Und wir können alle möglichen Sachen damit machen, und wir müssen es nicht durch Code herausfinden. Es gibt Werkzeuge, die uns dabei helfen. Ich würde vorschlagen, ein Tool für so etwas zu verwenden. Was ich möchte, dass Sie tun, ist voran zu gehen und Google CSS, Gradientengenerator verwendet dieses Tool, verwenden Sie ein anderes Werkzeug, ist nicht wirklich wichtig. Sie alle machen das Gleiche. Experimentieren Sie einfach und schauen Sie sich dann den Code an, den es Ihnen gibt. Kopieren Sie diesen Code und fügen Sie ihn dann in Ihre Seite ein. Sie können den gesamten Verlaufshintergrund Ihrer Körperelemente ändern. Vergessen Sie nicht, ihm eine Höhe von 100% zu geben, wenn Sie das Körperelement oder eine Klasse oder ein div-Element wie das auswählen , was ich getan habe. Und ich wählte den Farbverlauf und dann habe ich ihn einfach dort angewendet. Also geh einfach voran und gib, dass ein Schuss wirklich, wirklich Spaß macht. Es fügt eine schöne kleine Würze hier Website als auch. 23. Wie du Hintergründe und Farbverläufe zusammen schichten: Hintergrundbild erstellen, so dass Wir können einHintergrundbild erstellen, so dasses dunkler erscheint , ohne wirklich viel Arbeit tun zu müssen. Und jetzt gibt es ein paar verschiedene Möglichkeiten, dies zu erreichen. Man benutzt einen Filter, den wir noch nicht gelernt haben. Oder eine andere verwendet einen Farbverlauf, um die Ebene oben zu legen. Und in dieser Lektion werden wir den Farbverlauf oben verwenden. Nur weil man manchmal einen Farbverlauf an der Spitze haben will und man das überall sehen wird. Sobald Sie dies sehen, können Sie es wie überall auf Facebook sehen. Sie können es überall auf Twitter sehen. Überall gibt es Steigungen und sie sind auch schön und elegant. Also zuerst, gehen wir voran und wählen Sie das Körperelement. Und ich gebe das Nein, nicht nur Leiche. Ich meine, es ist wie der Körper und die HTML-Elemente. Ich werde diese Höhe von 100% geben und lassen Sie uns den Rand und die Polsterung loswerden. Und dann möchte ich nur das Körperelement auswählen. Und hier drin kann ich sagen, dass das Hintergrundbild ein linearer Farbverlauf sein wird. Geben wir uns wie 180 Grad. Und sagen wir, das geht von schwarz nach schwarz, aber anders, unterschiedliche Deckkraft. Also RGBA ist 000, und dann wird das Alpha 0 sein. Und das wird bei 0% beginnen. Und dann geht es zu RGBA 000, das ist wieder schwarz, und das wird gehen, während wir 0 sagen können. Also, das wird eigentlich nichts tun, das wird überhaupt nicht zu Gradienten. Aber wir können 0,6 sagen, um mit 60% durchsichtigem Schwarz und dann zwei zu beginnen. Und das ist einfach so schwer zu lesen. Lass uns weitermachen und das auf neue Linien setzen, so etwas. Da gehen wir. Und das ist eigentlich eine Art, in die Programmierung zu kommen, denn das ist, was diese Klammern bedeuten. Es bedeutet, dass dies eine Funktion ist. Wir werden darüber in JavaScript sprechen. Sobald wir mit CSS fertig sind, erfahren wir mehr darüber in JavaScript. Aber was wir hier sagen, ist, dass wir einen linearen Farbverlauf haben , 180 Grad, fangen mit Schwarz , es sind 60%, durchsichtig, gehen zu 80% und es wird zu 100% auf der Straße enden. Mal sehen, wie das in Google Chrome aussieht. Okay, das ist also ein netter kleiner Farbverlauf. Gehen wir weiter und machen das tatsächlich ein wenig mehr. Ja, da gehen wir. Also die später auf der Oberseite, dunkler auf der Unterseite. Wenn wir nun ein Bild hinzufügen wollten, könnten wir es absolut. Aber zuerst brauchen wir ein Bild. Gehen wir also zu einem Splash.com und schauen wir uns dieses Bild an. Rock, hol das hier. Und ich werde mit der rechten Maustaste klicken und Bild-Adresse kopieren. Und ich werde direkt zu diesem Bild Hotlink zu diesem Bild. Und was wir hier tun können, ist Komma. Und lasst uns das vielleicht wieder auf seine ursprüngliche Linie setzen. Und ich mag es, diese Aufstellung zu machen, also sieht es schön aus. Und dann könnten wir URL sagen, wie ein normales Hintergrundbild. Fügen Sie die URL dort ein, Semikolon. Und gehen wir weiter und schauen uns das an. Das sieht ziemlich gut aus. Lassen Sie uns nun fortfahren und diesen linearen Farbverlauf löschen. Schneiden wir das einfach für eine Sekunde aus. So sieht das Bild normalerweise mit einem linearen Farbverlauf darüber aus. Wie es jetzt aussieht. Nun das Schöne daran ist, dass wir etwas Text hinzufügen können. Aber bevor wir das tun, lassen Sie uns voran und fügen Sie Farben wird weiß sein. Schriftgröße wird etwas Riesiges sein, wie 90 Pixel. Und Text ausrichten wird Mitte sein. Und so können wir in unserem Körper jetzt sagen, das ist eine Rakete. Speichern Sie das als Rakete. Und so ist dieser Text etwas sichtbarer im Vergleich zu diesem. Wenn ich das einfach lösche, weißt du, es ist nicht schlecht, wir können es immer noch sehen. Lasst uns das sogar tun. Lasst uns Polsterung machen. Top 200 Pixel. Beachten Sie, gehen wir weiter, und das geht 500 Pixel. Also können wir das jetzt nicht einmal sehen. Das ist nur die Natur dieses Bildes. Und wir können das Bild nicht ständig ändern. Aber was wir tun können, ist, dass wir diese linearen Gradienten wieder hier reinwerfen können. Und jetzt können wir es ganz gut lesen. Nun, ein Fall in Punkt ist, wenn Sie die CSS eine, oh, eine Klasse nehmen. Wenn Sie einen Raketen-Mann langweilig haben und till.com warten, ist genau das, was hier los ist. Es ist sogar das gleiche Bild. Jetzt möchte ich, dass du das ansiehst. Vergessen Sie nicht, dass Sie Zugriff auf diese Datei haben. Außerdem können Sie Fragen in der Lerngruppe Facebook-Code stellen, wenn Sie jemals Fragen haben oder Sie neugierig auf etwas sind, oder Sie einfach nur Feedback erhalten möchten. 24. So verwendest du benutzerdefinierte Webfonts: Wir können benutzerdefinierte Webschriftarten in unsere Website laden. Die Wave-Schriftarten funktionieren also, es wird versuchen, auf die Schriftart auf Ihrem Computer zuzugreifen. Und wir haben diese Art von zuvor in CSS 101 gesehen, wo es wie Font-Familie ist und dann wie die erste Schriftart hat und dann wie eine Art Rückfall. Und die meisten Leute haben wie Arial. Und dann wird es so etwas wie eine Serifen-Schrift und Serifen-Schrift sagen. Und so wird es dieses versuchen. Wenn es nicht existiert, wird es dieses versuchen. Und wenn es nicht existiert und es wird Sie Computer wählen lassen. Aber sagen wir, das gibt es nicht. Wie lassen wir es existieren? Nun eine nette Sache, die wir tun können, ist es im Grunde von woanders zu importieren. So können wir auf Fonts dot google.com gehen. Und gehen wir weiter und schnappen uns einfach eine cool-aussehende Schrift, die wir etwas finden können , das wirklich auffällt, das ein bisschen anders sein wird. Keiner davon ist ziemlich wild. Da ist das hier, spezifisches O. Und so klicke ich einfach darauf und wähle dieses Zifferblatt aus. Und ich kann verschiedene Schriftvariationen hinzufügen, wenn ich wollte. Ich werde es nicht tun, ich werde nur hier oben einbetten. Und wir können entweder durch, direkt über unser CSS, das ziemlich cool ist, oder durch unser HTML importieren direkt über unser CSS, . Ich werde den HTML-Weg machen. Also nimm die ganze Kopie. Ich entschuldige mich, das ist klein zu sehen, aber wenn Sie folgen, wird es auf Ihrem Computer einfacher sein, es zu sehen. Und dann über unserem Stil, fügen Sie das einfach dort hinein. Jetzt wissen wir noch nicht, wie dieser Name ist. Wir denken, dass es spezifisch o, aber könnte Kleinbuchstaben sein. Großbuchstaben können einen anderen Namen haben. Wir wissen es nie. Also, was wir tun, ist hier zurück zu gehen und es sagt CSS-Regeln, um Schriftfamilien, Schriftfamilie Pacifica oder kursiv anzuwenden . Lass uns weitermachen und das ändern. Und was ich tun werde, ist , dass ich das auskommentiere und wir werden Lorem Ipsum sehen, Lorem Ipsum. Und lassen Sie uns diese Schriftgröße wieder in etwas Größeres ändern, etwa 45 Pixel. Und das ist es, was wir sehen. Dies ist unsere Standardschriftart. Wenn ich Pacific auskommentiere, ändert es es. Nun, hier ist die Sache, wenn ich diese Zeile hier nicht hinzufüge, wenn ich das einfach aus meinem Code herausschneide. Es geht an Kursiv. Das ist, was mein Computer verwendet, wenn man sagt, dass er kursiv benutzt. Also heißt es, Hey, Calebs Computer benutzt Pacifica, aber wenn es nicht Pacifica hat, benutze kursiv, naja, Pazifik o existiert nicht. Und so was wir gesagt haben, machen es in diesem HTML-Element existieren wird sagen, hey, gehen Sie hier rein, laden Sie diese Datei namens Pacifica. In dieser Datei wissen wir, dass es Pazifik o heißt. So können wir jetzt Zugriff darauf haben und sie verwenden. Genau so. Was ich möchte, dass Sie dies tun, ist eine Chance zu geben, gehen Sie zu Fonts dot google.com, wählen Sie eine Schriftart, die kostenlos ist. Sie haben hier einige, die bezahlt werden. Zahlen Sie nicht für eine Schriftart An dieser Stelle bitte. Finden Sie einfach eine kostenlose Schriftart wie Robodog. Robodog ist ein guter. Sie können alle verschiedenen Stile wählen, wenn Sie möchten. Dies sind auch unterschiedliche Schriftgewichtungen. Also bekommen wir heute wie wir, als wäre das so, als wäre das so. Und wir können diese verschiedenen Schriftfamilien hier verwenden. Geh weiter und gib dem eine Chance. Versuchen Sie, eine benutzerdefinierte Schriftart zu verwenden. 25. Was sind Transformationen?: Okay, reden wir über Transformationen. Eine Transformation ist eine Möglichkeit, mit der wir drehen , skalieren oder in einem Element weg von seinem natürlichen Fleck bewegen können. Jetzt in diesem Beispiel habe ich nur eine normale Box auf meiner Seite. Und wenn ich einfach diese bis zu regulären Box öffne, In der Tat, lasst uns, fügen wir eine Marge dazu. Lassen Sie uns Rand 50 Pixel und Auto tun. Und das wird eine Linie zentrieren, die für mich. Lasst uns jetzt weitermachen und einige dieser Transformationen durchlaufen. Jetzt sind es Transformationen nicht schwer. Wir können sie mischen und kombinieren, wenn wir wollten. Aber lassen Sie uns einfach eins nach dem anderen gehen. Also lassen Sie uns zuerst mit übersetzen, um dieses zu beginnen ist interessant. Übersetzen, ich denke, persönlich ist nicht der richtige Name. Die Eigenschaft wird Transformations-Transformation genannt. Und der Schlüssel, oder die vollständige Deklaration wird transformiert werden übersetzen, und dann dauert es Klammern. Und wir können das auf der X-Achse und Y-Achse bewegen. So können wir sagen, bewegen Sie uns auf der X-Achse, ein 100 Pixel, auf der Y-Achse, ein 100 Pixel. Und wenn wir auf unsere Seite zurückgehen, aktualisieren, können wir sehen, dass sie tatsächlich verschoben wird. Das ist also, was Translate tut. Es bewegt es einfach, es übersetzt, wo es natürlich auf der Seite sitzt. Wir haben dies mit Position, relativer Position, absoluter Position, fester Position, klebrig gemacht. Wir haben alle möglichen Bewegungen so gemacht. Wir können auch Rand oben und links verwenden, um das Element irgendwie zu schieben, aber übersetzen als eine andere Möglichkeit, dies zu tun, was wirklich, wirklich schön ist. Werfen wir einen Blick auf die nächste. Also werde ich das kommentieren. Und ich werde dies mit richtigem CSS kommentieren. Wir können auch drehen. Mal sehen, was Drehen tut. Wir wollen also transformieren, transformieren, drehen. Lassen Sie uns 45 Grad DEF für Grad machen. Und das dreht es nur für uns. Und wir können jede Art von Abschlüssen machen, die wir wollten. Wir könnten es tun, wie es 68 Grad oder 91 Grad drehen, was ähnlich ist, wie es um einen Grad oder zehn Grad dreht. Wir können das so viel drehen, wie wir wollen. Wenn Sie perfekt 90 gedreht haben, wird es so aussehen, als wäre nichts passiert, nur weil das ein Quadrat ist. Das sind also 90 Grad, das 0 Grad, 90 Grad. Und dann nur weil wieder, die Art und Weise, wie die Geometrie funktioniert. Also, wenn du jemals magst, ich weiß nicht, ob es wirklich funktioniert. Versuchen Sie, es von wie 90 oder ein 180 oder 270 zu ändern. Versuchen Sie, es auf 200 und nein zu ändern, nicht 370. Machen wir wie 310 Grad und das geht auch in einen Kreis. Die maximale Anzahl von Grad beträgt also 360 Grad. Als nächstes haben wir Trends Form. Und ich liebe diese nennt man Scale. Und damit wir das skalieren können. Im Grunde zoomen Sie auf dieses eine Element und wir können, wir können sagen, skalieren in 200% oder Skalierung auf, und das wird es größer machen. Oder wenn ich in 1.1.3 skaliere. Also noch größer, aber nicht so groß wie zwei. Und lasst uns das aussagen. Es gibt also keine Skalierung. Dies ist, wie groß es natürlich ist, dass Skalierung. Und schließlich werden wir Schrägstellung haben. So können wir tun, transformieren Skew und wir haben x und y. Wir können Skew auf die x und y sagen, oder wir können einfach Skew X sagen, wenn wir wollten. Lassen Sie uns schief machen X und Y nimmt zwei Werte. Also lasst uns 20 Grad machen, und lasst uns auch weitere 20 Grad machen. Das wird also auf die X und Y skalieren und es sieht schief aus. Und das Schöne daran ist, dass es Ihren Text verzerren wird. Also, wenn ich hier drin Lorem mache, entschuldigen Sie meinen Text. Und wenn ich es nur als Beispiel wollte, könnten wir das aussagen. Und wir können sagen, dass sich Trends bilden. Lassen Sie uns sehen, dass Sie als ein Beispiel für Skew X nur 20 Grad. Und wir werden das y überhaupt nicht verzerren. Und so sieht das aus. So schieft es es entlang der x-Achse nach links und rechts. Y wird es so entlang der Auf- und Abwärtsachse verzerren. Das ist also die Transformation. Sie werden nicht diese zu viel verwenden, bis Sie in wirklich elegant ist wirklich verrückt Designs, die ich möchte, dass Sie schließlich zu bekommen. Also tippen Sie das einfach in Ihre Gesäßtasche und wissen, dass Sie Dinge wie diese verwandeln können. Sollten Sie das jemals brauchen? 26. Wie du mit CSS machst: Okay, werfen wir einen Blick auf Animationen. Animationen Lassen Sie uns die Dinge auf eine glatte und kontrollierte Art und Weise bewegen. Es ist eine Menge wie ein Übergang, aber wir brauchen nicht unbedingt eine Art von Ereignis, um es auszulösen. Wie, wissen Sie, wenn Sie den Mauszeiger über einen Link bewegen und dieser Übergang ändert sich eine Art von Änderungen. Nun, das liegt daran, dass du mit der Maus darüber bewegst. Aber was, wenn wir nur wollten, dass etwas auf der Seite ohne irgendeine Art von Auslöser bewegt wird, können wir das mit einer Animation tun. Und das Schöne daran ist, dass wir der Animation sagen können, dass sie sofort anfangen soll. Wir können ihm eine Art Verzögerung geben. Wir können alle möglichen Sachen mit Animationen machen. Zum Beispiel könnten wir Dinge wackeln lassen, wir können Dinge drehen und wir können Dinge springen oder hüpfen lassen, wenn wir wollen. Oder wirklich alles, was wir mit CSS tun können, können wir animieren. Also, was ich hier tun werde, ist, dass ich eine Kiste habe. Und lassen Sie uns voran und zeigen Sie einfach diese Box und lassen Sie uns Grenzradius 50% machen. Und das wird eine Schachtel sein, aber es wird auch ein Kreis sein. Es wird als Kreis angezeigt. Also, hier geht's. Ich habe diesen Kreis. Nichts Schickes. Es ist völlig statisch. Also zuerst, wenn wir eine Animation erstellen, müssen wir ihr einen Animationsnamen geben. Lassen Sie uns also voran und erstellen Sie eine neue Animation. Wir verwenden das at Symbol, Schlüsselbilder und dann einen Namen. Also werde ich diese Folie nennen. Und es wird eine von nehmen, und es wird A2 dauern. Nun, ich möchte sicherstellen, dass das beweglich ist. Sagen wir also, diese Position dieses Elements wird absolut, absolut sein. Es wird oben auf meiner Seite und oben links auf meiner Seite sein. Und wenn ich die Seite aktualisiere, umarmt sie nur die obere Wand hier und die linke Wand dort. Also, was ich jetzt sagen kann, ist von oben gleich 0. Und sagen wir, links ist gleich 0. Und wo ich will, dass es geht, ist links ist 100%. Also lassen Sie es einfach den ganzen Weg über die Seite nach links bewegen. Und wenn ich diese Seite aktualisiere, wird nichts passieren, weil wir eine Animation erstellt haben, aber wir haben die Animation nicht so eingestellt, dass sie auf unser Element anwendbar ist. Also, was wir in unserem Element tun, ist, dass wir sagen Animationsname ist gleich mir schieben und das ist Groß- und Kleinschreibung. Also habe ich ein großes M da drin. Stellen Sie sicher, dass Sie Kapital M in Ihrem haben, wenn Sie Kapital M verwenden, also muss es genau gleich sein. Wenn wir diese speichern und aktualisieren. Wir haben tatsächlich gesehen, dass es nicht funktioniert. Lassen Sie uns voran gehen und geben Sie diesem eine Animationsdauer. Es weiß nicht, wie lange man, um vier zu rutschen. Sagen wir, es wird für vier Sekunden gleiten. Jetzt gehen wir zurück. Und sobald wir ihm eine Dauer geben, wird sich den ganzen Weg über die Seite bewegen und dann weg von ihr, und dann beginnt es von vorn. Nun, wenn wir dies für immer tun wollten, eine Animation, Iteration, Zählung, Iterationszählung, genagelt es. Und wir würden sagen, unendlich, unendlich. Und es wird bis zum Ende gehen und wieder anfangen und so wieder anfangen. Wenn wir nun nach links gehen und dann zurückkommen wollten, können wir ihm eine Animationsrichtung und Animationsrichtung geben. Und wir können sagen, alle Runde acht. Halten Sie sich fest. Ich werde uns auffrischen und es wird nach links gehen und dann wird es gleiten. Es ging den ganzen Weg nach links und dann wird es zurück nach links gleiten und es wird sich nach rechts bewegen und dann nach links gleiten. Nun, das ist eine einfache Animation. Wir können diese wesentlich komplizierter machen, wenn wir es wollten. Wir könnten das einfach komplett auskommentieren und eine neue Animation erstellen. Also habe ich das ausgesprochen und es ist, als würde es nicht einmal existieren. Also können wir Keyframes machen, mich schieben. Das wird also genau der gleiche Name sein wie dieser hier. Zufällig ist es, dass dieser auskommentiert wird. Und dann können wir so etwas wie bei 0% sagen, etwas tun, dann 50% hinzufügen, etwas anderes tun und dann 100% hinzufügen. Nein, nicht da. Dann bei 100%, tun Sie etwas anderes. Also, bei 0%, was wollen wir das tun? Wir wollen, dass dies oben ist, 0, links, 0 bei 50%. Lassen Sie uns die Hintergrundfarbe in Blau ändern, und lassen Sie uns tatsächlich die Hintergrundfarbe auf Schwarz setzen. Standardmäßig. Die Hintergrundfarbe ist gleich schwarz. Und dann bei 100% ändern wir die Hintergrundfarbe erneut, Hintergrundfarbe ist gleich gelb. Und gehen wir weiter und sehen, wie das aussieht. Oh, eigentlich brauchen wir 100%, um übrig zu bleiben, 100%. Und was dies tun wird, ist bei 0% zu sagen, Dies ist, wo das CSS angewendet werden sollte. Diese Art von CSR sollte bei 0% angewendet werden, bei 50% der Animation, die Animationsdauer beträgt vier Sekunden. So ändern Sie bei 50% oder zwei Sekunden die Hintergrundfarbe zu blau und sollte an diesem Punkt vollständig blau sein. Und es wird versuchen, schön und glatt zu sein. Und dann bei 100%, bei vier Sekunden , wird diese Hintergrundfarbe vollständig gelb sein und die Position wird 100% verlassen. Lassen Sie uns voran und geben Sie dies eine Chance und sehen, wie das aussieht. Genau so und dann geht von gelb nach blau zu schwarz. Nun, was ich möchte, dass Sie tun ist, dass Sie eine Animation erstellen, die so etwas tut. Aber ich möchte, dass du eine Schachtel oder einen Kreis oder so machst. Sie können sogar ein Bild animieren, wenn Sie nur ein kleines Div mit einem Bild machen möchten, ich möchte, dass Sie Ihr von oben links nach rechts oben, rechts unten, links unten und dann wieder nach oben nach links oben. Also möchte ich, dass Sie den ganzen Weg um den Rahmen Ihrer Seite gehen. Vergessen Sie nicht, Sie werden die Position absolut für diese Position verwenden müssen absolut. Sie werden den Anfangszustand für Ihr Element festlegen möchten , bevor Sie in die Schlüsselbilder gelangen. Das sagt also oben ist 0, links ist 0, obwohl ich es hier neu deklariere, das ist ALK und es ist schön und explizit. Und dann möchten Sie ihm einen Animationsnamen geben, der Ihrem Keyframe-Namen hier unten entsprechen muss . Geben Sie ihm eine Dauer, sonst wird nicht funktionieren. Und dann für Ihre Aufgabe, dafür, werden Sie für Prozentsätze verwenden. Also 02550%, 70 oder 75% eher. Und dann vielleicht vielleicht 100% der mittleren lassen Sie das bis zu Ihnen, sehen, wie das für Sie funktioniert. Gehen Sie voran und geben Sie, dass eine Chance, wenn Sie stecken bleiben, vergessen Sie nicht, Sie können Fragen und das Lernen, Facebook-Gruppe zu programmieren, die wir hier sind, um zu helfen. 27. Flexbox: die neue Art von Seitenlayout: Okay, lassen Sie uns über Tabellenlayouts sprechen, sind keine Tabellenlayouts nach Seitenlayouts. Bis zu diesem Zeitpunkt haben Sie wahrscheinlich Display-Inline-Block verwendet. Sie haben wahrscheinlich Tabellen oder Floating verwendet, um Ihre Elemente über Ihre Seite zu verschieben. Aber es gibt einen besseren Weg. Es gibt zwei bessere Möglichkeiten, dies tatsächlich in der ersten Flexbox zu tun. Also werde ich dir Flexbox beibringen. Es ist wichtig, dass Sie sich mit Flexbox vertraut machen. Ich werde dir die Basis von Flexbox beibringen. Und dann möchte ich, dass Sie gehen und Flexbox vielleicht ein wenig weiter erkunden. Nun, die Sache mit Flex und was wir nach dem Grid lernen werden, ist sind sehr große CSS-Module und Sie müssen nicht alles wissen. Essen Sie, als müssten Sie sich nicht alles ehrlich auswendig lernen. Man muss sich daran erinnern, wie bestimmte Dinge funktionieren. Aber dann müssen Sie nur später in der Lage sein, Ihre Antworten zu Google. Denn ehrlich gesagt, ich schreibe seit langem CSS und ich erinnere mich immer noch nicht an jede einzelne Möglichkeit, Flexbox von der Oberseite meines Kopfes anzuwenden. Und das ist nur die Natur der Bestie. Es gibt viel zu lernen in CSS und es gibt keine Möglichkeit, alles zu lernen und sich an alles zu erinnern. Sie müssen sich nur daran erinnern können, wie Sie Ihre Antworten erhalten. Und wieder, das ist etwa 50% der Web-Entwicklung in diesen Tagen ist zu wissen, wie Sie Ihre Antworten finden. Lassen Sie uns also über Flexbox sprechen. Flexbox ist ein Layout-Modul, das es einfacher macht, flexible, responsive Layoutstrukturen zu entwerfen , ohne Float oder Positionen oder Tabellen und solche Dinge zu verwenden. Also lassen Sie uns voran und erstellen Sie ein div. Und ich nenne das Nominale, nenne das einen Container. Und hier sagen wir, ich habe zwei Elemente und ich will sie nebeneinander. Also habe ich ein div hier und rufe das links an und ich habe ein div hier. Erinnern Sie sich daran, richtig? Und wenn ich das auf meiner Seite boote, und das ist nur von der letzten Lektion dort. Da steht links und rechts. Was ist, wenn wir wollen, dass sie tatsächlich links und rechts sind? Während wir sie schweben können, können wir sie positionieren, wir können alle möglichen Dinge tun, aber es gibt einen besseren Weg. Und das ist Flexbox. Das Schöne daran ist, dass es ziemlich einfach ist, loszulegen und es kann wirklich, wirklich belästigt werden, weil es viel zu lernen gibt, aber anzufangen ist wirklich einfach. Gehen wir also weiter und wählen Sie unseren Container aus. Und wir sagen „Anzeige“. Dies als neuer Anzeigetyp ist Flachs. Speichern wir das, aktualisieren Sie unsere Seite, und jetzt ist sie links und rechts. Und lassen Sie uns voran gehen und wählen Sie diese Container, Containerelemente oder Containerelemente aus. Und lasst uns das eine Grenze geben. Ein Pixel, einfarbig rot. Cool. Okay, also haben wir etwas, das nebeneinander sitzt. Lass uns voran gehen und machen. Jedes dieser Elemente. Könnte sein, sagen wir 50%. Also sagen wir Flex-Basis und wir wollen, dass dies 50% sein. Jetzt ist dies flexibel, so dass wir nicht das Wort Breite verwenden, weil Breite einen hart codierten Wert impliziert. Flex Basis wird sagen, Start bei 50%. Aber Sie wissen, was, wenn die rechte Spalte mehr Platz und linke Spalte einnimmt, die linke Spalte verkleinern darf oder umgekehrt. Die rechte Spalte darf verkleinern oder die rechte Spalte darf wachsen. Also, was wir hier tun können, ist, dass wir sagen können, Klasse ist gleich, oder? Und dann können wir sagen, wissen Sie, wenn es gibt, lasst uns Lust haben mit unseren Selektoren hier, Container div dot, richtig? Wir können sagen, dass diese Flex-Basis fünfundsiebzig Prozent betragen muss. Lassen Sie uns voran und aktualisieren Sie unsere Seite und wir sehen, dass es jetzt 75% dauert. Und die Linke war tatsächlich ein bisschen geschrumpft. Und wir können hier ein wirklich drastisches Beispiel machen, um 95% zu sagen und es schrumpft so viel wie möglich hier. Jetzt können wir sagen, dass, hey, übrigens, diese dürfen nicht schrumpfen, Diese dürfen auch nicht wachsen. So können wir sagen, flex shrink ist gleich 0 und flex grow ist auch 0. Und was das sagen wird, ist diese Flex-Basis, diese linke Spalte wird immer mindestens 50% betragen. Und jetzt, was Sie nicht sehen, ist, dass ich hier rüber scrollen kann, ist, dass rechts 90% der Ansichtsfensterbreite ist. Es geht nur zufällig zu dem Teil der Seite, den wir standardmäßig nicht sehen können. Jetzt werde ich das gleich da drin loswerden. Nur weil ich denke, dass ich das etwas zu kompliziert machen würde, aber das war ein lustiges kleines Beispiel. Und jetzt können wir nicht nach links und rechts scrollen, und wir haben 50% hier und 50% dort. Was passiert, wenn wir einen anderen Container hinzufügen möchten, den wir könnten, oder ein anderes Element, könnten wir sagen, dass dieser ein Zentrum sein sollte. Also haben wir links in die Mitte und dann haben wir hier drüben geschrieben. Und wieder, dies nimmt 50% meines Ansichtsfensters, 50% meines Ansichtsfensters und schreibe dann nur 50% meines Ansichtsfensters für eine Gesamtbreite von 150%. Und das kann wirklich frustrierend werden. Es gibt einen Weg um das herum. Auf unserem Container. Wir können sagen, flex wrap, wickeln Sie die Seite. Also, was das tun wird, ist zu sagen, das ist 50%, das sind 50%. Wenn etwas über eine 100% geht, stoßen Sie es einfach auf eine neue Linie. Und diese gehen tatsächlich auf ihre eigenen Linien, weil dies 50% plus ein Pixel auf beiden Seiten ist. Lassen Sie uns voran und ändern Sie alles auf unserer Seite zu Box-Größe Rahmenkasten, so dass unsere Boxen auch die Breite des Rahmens enthalten. Und Boom, wir arbeiten jetzt mit Layouts. Jetzt können wir einfach Elemente hinzufügen, wir können sie einfach weiter hinzufügen und sie werden einfach so stapeln, wie wir wollen, dass sie einfach so stapeln. Jetzt können wir diese Flex-Basis ändern. Lassen Sie uns diese Flex-Basis auf etwa 20% ändern. Und jetzt haben wir zehn Zellen, alle Art von Seite an Seite und schön und eng zusammen. Und sie sind flexibel. Das bedeutet, dass wir keine Tabellen mehr verwenden müssen. Wir müssen nicht mehr Floating oder Position absolut mit relativen und solchen Dingen verwenden . Wir können Flexbox verwenden, um Dinge nebeneinander zu stellen. Nun, das ist nicht das beste Beispiel. Ein besseres Beispiel ist, wenn wir dies tun, lassen Sie uns in unserem Container div erstellen, und dies wird Navigation genannt werden. Also lassen Sie uns diesem eine Klasse von Navigation geben. Und wir werden einen weiteren erstellen, der als Inhalt bezeichnet wird. Inhalt hier drin. Und was ich sagen kann, ist, lasst uns die Kastengröße behalten. Lassen Sie uns unseren Container so halten, dass er Display flex, flex rap ist, also wickelt er sich auf eine neue Linie, wenn wir es wollen. Lasst uns das Zeug hier loswerden, außer der Grenze. Und wir werden effektiv neu starten. Ok. Wir haben also keine Flex-Basis oder eine Flexbox-Breite ist eine Möglichkeit, sich darüber nachzudenken. Wir müssen diese Breite jetzt einstellen. Nun wollen wir nicht unbedingt die Flex-Basis für beide festlegen. Dies ist die Auswahl des Containers und der beiden Entwickler, wir wollen es auf der Navigation und Inhalt auswählen. Gehen wir also voran und tippen Sie Navigation ein. Lassen Sie uns diesem eine Flex-Basis geben. Und 20%. Und ist es erlaubt, Flex zu wachsen, wachsen? Nein. Ist es aber erlaubt, zu schrumpfen? Flex schrumpfen, ja. Wir werden sagen, es darf schrumpfen, wenn es muss. Okay, das ist also 20% meiner Ansichtsfensterbreite. Das ist dieser ganze weiße Abschnitt, den wir uns hier ansehen. Und für Inhalte, lassen Sie uns Punktinhalte machen. Flex Basis ist gleich 80%, der Rest von 100% minus 20%. Und lasst uns das Gleiche tun, wo wir sagen: Flex, wachsen und schrumpfen. Aber der Inhalt ist wichtiger. Ist es also erlaubt zu wachsen? Ja, darf schrumpfen. Sagen wir nein. Jetzt haben wir etwas Inhalt da drin und wir können all das da drin loswerden und wir können alle möglichen Sachen erledigen. Wir können sagen, H1, HelloWorld Absatz mit einem niedrigeren sie. Wir könnten eine weitere H2 und andere Überschrift tun, Hallo Welt wieder. Und wir könnten noch einen Absatz mit etwas Lorem da drinnen machen. Und boom, wir haben Navigation, wir haben Inhalt, wir haben ein Seitenlayout. Wir können, auch wenn wir hier einen Header setzen wollten, können wir Punkt-Header tun. Und lassen Sie uns voran und Stil R-Dot Header. Das ist sagen, Punkt-Header. Flex Basis ist eine 100%. Kann es wachsen? Nein, wir wollen nicht, dass es mehr als 100% ist. Kann es schrumpfen, biegen, schrumpfen? Nein, es muss die ganze Zeit 100% sein. Nehmen wir an, der Header nett hat eine Hintergrundfarbe von fff. Nein. Machen wir CCS, CCC. Und sagen wir, die Farbe muss fünf mal fünf sein. Rand unten, zwei Pixel, einfarbig schwarz. Okay, das hat fast geklappt. Wir brauchen nur einige tatsächliche Inhalte da drin. Also Header. Denk dran. Okay, das sieht irgendwie schrecklich aus. Damit kann ich nicht in gutem Bewusstsein leben. Also lassen Sie uns tun Hintergrundfarbe ist gleich fünf f fünf von fünf Farben gehen schwarze Polsterung sein. Es wird 20 Pixel sein. Da gehen wir. Und wenn wir fortfahren und diese Grenze loswerden, und weil sie das Einzige ist, können wir alles loswerden, aber lasst uns das einfach auskommentieren, damit du später auf diesen Code zugreifen kannst, wenn du es wolltest. Wir haben eine Art Tabellenlayout oder keine Tabelle a o, aber in CSS 101 haben wir dies mit einer Tabelle in CSS 201 getan. Bitte benutzen Sie keine Tische mehr. Wir brauchen keine Tabellen für Layouts. Wir können jetzt Flack verwenden. Und so sollten Sie in Zukunft Seitenlayouts erstellen. Flex oder Grid wird in der nächsten Lektion über Gitter sprechen. Nun möchte ich, dass Sie wahrscheinlich 20 Minuten verbringen, vielleicht sogar noch mehr. Sie möchten Anzeigeflex für ein übergeordnetes Element festlegen. Also haben wir unser übergeordnetes Element. Alle untergeordneten Elemente werden Flex-Elemente sein. Das nennt man Flex-Elemente. Also haben wir Navigationsinhalt und Header-Element erhalten. Und dann möchte ich, dass Sie die Flex-Basis von ihnen setzen. Sehen Sie, ob Sie Flex Rap zur Arbeit bringen können. Flex wachsen und schrumpfen, verwirren sich damit. So sehen Sie, ob Sie das für Sie arbeiten können oder nicht für Sie arbeiten und bekommen ein Gefühl dafür, wie es funktionieren soll. Und ich möchte, dass du, bevor du auf das Gitter gehst, etwas kreierst, das ein bisschen so aussieht. Jetzt muss er nicht schön aussehen. Wir konzentrieren uns hier auf das Layout, wo wir hier eine linke Spalte haben. Wir haben eine rechte Spalte hier, und wir haben eine Zeile oben genannt Header. Geh weiter und gib dem eine Chance. Denken Sie daran, wenn Sie stecken bleiben, stellen Sie Fragen unten, stellen Sie Fragen in der Lerngruppe Facebook zu programmieren. Es gibt eine Menge von uns, die viel über Flexbox wissen, wir können Ihnen helfen, einen Moment Klatschen zu haben. 28. Rettung: Das versprochene Land von Seitenlayouts: Raster ist eine noch bessere Möglichkeit, ein Seitenlayout zu erstellen. Es ist fortgeschrittener und Flexbox und es wurde speziell entwickelt, um gut zu sein, Seitenlayouts zu erstellen. Obwohl flexbox seinen Zweck hat, Dinge vertikal auszurichten, was schön ist, haben wir das nicht abgedeckt. Das ist etwas, das du vielleicht auf deiner eigenen Zeit googlen willst , wenn auch als kleine zusätzliche Hausaufgaben. Grid ist nicht dafür ausgelegt. Grid hat buchstäblich für ein Template-Layout. Wenn es um Gitter geht, gibt es ein paar Dinge, die wir wissen müssen. Es gibt Spalten, Reihen und Dachrinnen. Und diese Rinnen, wir nennen sie Lücken. In Frameworks wie Bootstrap sehen Sie sie als Gutter. Wir nennen sie Rinnen technisch nicht, und CSS werden Lücken genannt. Also haben wir Spalten, Zeilen und Lücken zwischen den Spalten und Zeilen. Und wie eine HTML-Tabelle können wir jede Zelle eine oder mehrere Spalten oder Zeilen ausgeben lassen. Also lasst uns in das eintauchen. Also lasst uns weitermachen und unser erstes Raster erstellen. Lassen Sie uns hier eine ID erstellen und ich muss von Django-Template zurück zu HTML wechseln. Lassen Sie uns voran und erstellen Sie ein Containerelement namens Raster. Und es hat eine ID des Gitters. Und geben wir dem einen Gegenstand, und rufen wir diesen einfach an. Und ich habe gerade neun Artikel hier gemacht. Wenn wir unsere Seite aktualisieren, werden wir eins bis neun in ihren eigenen Zeilen sehen. Dies wird vollständig erwartet, da dies derzeit kein Raster verwendet, dies verwendet grundlegenden Standard-Anzeigeblock, und das sind alle divs. Also, was wir hier tun können, ist, können wir unser Raster auswählen und wir können Rasteranzeige und einen neuen Anzeigetyp sagen, hier können wir Raster sagen. Und das wird es einfach in ein Gitter verwandeln. Wenn wir uns jetzt ansehen, passiert nichts. Wir müssen sagen, dies hat eine Rastervorlage, Gitter, Vorlagenspalten. Und wie viele Spalten wollen wir? Nun, wir haben neun Abschnitte, also lass uns drei mal drei machen. Also lassen Sie uns Auto, Auto, Auto. Das sind also Spalten, und das wird Spalte 123 sein. Lass uns voran gehen und sehen, was das tut. Okay, wir kommen da irgendwo nebeneinander hin. Das ist wirklich nett. Lassen Sie uns voran gehen und wählen Sie jedes Element hier aus. Lasst uns Artikel machen. Und geben wir diesem einen Rand, ein Pixel durchgefärbt rot. Und das erlaubt uns nur zu sehen, womit wir hier arbeiten. Nehmen wir an, wir wollen eine Art Lücken zwischen diesen schaffen. Wir können dies mit einem Gitterspaltenabstand oder Gitterzeilenabstand tun. Eine Rasterspaltenlücke wird so aussehen. Also Gitterspalte Lücke, und das wird sein, sagen wir 20 Pixel. Und so schafft es eine kleine Lücke zwischen unseren Säulen. Oder wir könnten Gitterreihenlücke machen. Und das schafft Abstand zwischen r Zeilen. Und wir können beide gleichzeitig haben. Also Spaltenabstand und Rollspalt von 20 Pixeln. Und jetzt haben wir hier ein gut aussehendes Gitter. Aber das ist nicht so toll für Seitenvorlagen. Um Seitenvorlagen haben in der Regel eine Art von Kopfzeile, eine Art von Navigation, Eine Art von Fußzeilen. Lass uns weitermachen und das schaffen. Lassen Sie uns Element eins erstellen. Lass es uns bis 123 überspannen und dann werden wir 23 loswerden. Und das ist viel wie mit der Tabelle zu arbeiten, aber es verwendet CSS. Also, was ich hier tun werde, ist, dass ich all diese kopieren werde. Kopieren. Fügen Sie ein und geben Sie diese Elementnamen hier ein. Also werden diese alle das Styling von 11 Pixel soliden roten Rand teilen. Lassen Sie uns Element eins auswählen. Artikel eins. Und wir können sagen, die Rasterspalte wird bei Artikel Nummer eins beginnen und es wird die Rasterspalte und bei Punkt Nummer drei beenden. Und was wir hier sagen, ist, bei Spalte eins hier drüben zu beginnen, 23. Und es wird all das übernehmen. Und ich mache das falsch. Es sollte beginnen bei eins hier, zwei dort, drei dort, und dann für dort, ändern wir das in vier. Und Artikel eins wird jetzt ein Header sein und es verschoben, es hat Nummer 23 verdrängt. Wenn wir das wollten, könnten wir die loswerden, wenn wir es wollten. Das müssen wir nicht. Lassen Sie uns voran und tatsächlich loswerden 23. So Artikel 23. Da gehen wir. Jetzt verschmelzen wir ein 69 zusammen. Und wir können das mit Rasterzeilenstart und Rasterzeilenende tun. Und wir wollen hier mit Punkt sechs arbeiten. Also lasst uns Punkt sechs machen, Rasterzeile beginnen. Wo soll das anfangen? 1234. Sagen wir mal, das beginnt bei zwei. Und es ist aufgrund Gitter, Zeilenende und 1234, lass uns vier machen. Und gelegentlich verwirre ich diese tatsächlich. Ja, da gehen wir. Habe das getan, richtig. Und jetzt verdrängen wir diejenigen, die kurz danach waren. Also lasst uns voran gehen und versuchen, das zu bereinigen. Manchmal, wenn man das lernt, ist es ein bisschen ein Rätselraten, aber wir haben jetzt Reihe sechs. Okay, also haben wir 1456. Lass uns weitermachen und loswerden, ich weiß es nicht. Lass uns einfach neun loswerden. Und lasst uns neun loswerden. Ok, das ist nett. Gehen wir weiter und verschmelzen 45 zusammen. Also wollen wir Artikel 45 zusammen. Also lassen Sie uns Element für tun und wir verschmelzen Spalten die andere. Also wollen wir Gitterspalten starten. Und das ist hier drüben, 34. Also gingen wir zwei vor vier. Und wir können das tun. Okay, das funktioniert. Jetzt machen wir das gleiche mit 57, weil und mal sehen, was passiert, wenn wir 57 tun. Wir können dasselbe tun, Punkt fünf, und das ist nur die gleiche Art von Styling anzuwenden. Und jetzt können wir sehen, dass dies alles dislodge ist. Es sieht ziemlich gut aus. Gehen wir voran und verschmelzen 78 zusammen. Und lasst uns acht loswerden. Und so wollen wir, dass sieben wie Artikel Nummer eins hier oben aussehen. Und wir können tatsächlich anfangen, Dinge wiederzuverwenden. Weil Artikel eins und Punkt sieben genau das gleiche Layout haben , in dem Sinne , dass ich möchte, dass Element sieben hier die gesamte Breite einnimmt. Und Artikel eins wird die ganze Breite aufnehmen. Also könnten wir dieses Styling genauso gut wiederverwenden. Wir haben hier etwas zu arbeiten. Wir haben eine Kopfzeile hier oben, wir haben eine Fußzeile hier unten, wir haben perfekte Abstände. Wir haben einen Navigationsbereich oder vielleicht einen Werbebereich. Wir haben einige Inhalte für die wichtigsten Inhalte, vielleicht einen Übersichtsabschnitt und den Inhalt der Seite. Und so erstellen Sie ein Seitenlayout mit Grid. Und so wird das Gitter auch viel komplexer als das. Aber das ist ein wirklich, wirklich guter Anfang, um zu lernen, wie man Grid benutzt. Wenn Sie nun in Zukunft eine Seite erstellen, versuchen Sie, Grid als Seitenlayoutmodul zu verwenden. Sie können Flexbox verwenden, Sie können Tabellen und Floats nicht technisch verwenden, Inline-Block anzeigen. Sie können alle möglichen Dinge tun, aber versuchen Sie, Grid von jetzt an zu verwenden. Oder wenn Sie kein Raster verwenden möchten, können Sie immer Flexbox verwenden. Beide sind von hier an völlig akzeptabel. Aber was ich möchte, dass Sie tun, ist, dass Sie versuchen, ein Layout wie dieses zu erstellen. Ich möchte, dass du dein Gehirn schwitzt. Verweisen Sie nicht auf meinen Code, obwohl Sie Zugriff darauf haben. Verweisen Sie nicht auf meinen Code. Ich möchte, dass du versuchst, dich daran zu erinnern, wie das geht. Und wenn Sie sich nicht erinnern, ich möchte, dass Sie gehen und etwas Übung googeln lassen, wie das geht. Denken Sie daran, nur die Begriffe sind, was Sie wissen müssen. Geh weiter und gib dem eine Chance. Wenn Sie wirklich stecken bleiben oder einer Community beitreten möchten, können Sie immer der Lerngruppe Facebook-Code beitreten. Wir sind hier, um zu helfen. 29. Dein endgültiges Projekt: Ihr endgültiges Projekt wird ein wirklich schönes Website-Design finden und es so viel wie möglich replizieren. Du wirst in eine Fülle von Hürden geraten. Es wird wirklich hart werden, wird wirklich gute Praxis sein. Ich würde sagen, tun Sie einfach das Beste, was Sie können, und haben Sie einfach etwas Spaß damit. Wenn du es nicht perfekt machen kannst, ist das völlig in Ordnung. Also, was ich möchte, dass Sie tun, öffnen Sie Ihren Lieblings-Browser, gehen Sie zu Pinterest.com und geben Sie einfach Web-Design oder Web-Design-Inspiration, Web-Design-Layout, so etwas. Lassen Sie uns Web-Design-Inspiration machen. Und erstellen Sie eine schön aussehende Website. Sie kennen alle Teile und vergessen Sie nicht, die Dinge in kleinere Komponenten zu zerlegen. Versuchen Sie nicht, auf eine Seite zu schauen und sie werden gehen, ich weiß nicht, wie ich das alles tun soll, zerlegen Sie es in kleine Komponenten. Ein guter wäre also so. Und das ist eine Squarespace-Website-Vorlage anscheinend. Aber was Sie tun können, ist, dass Sie jetzt wissen, wie Sie diese Navigation hier machen. Sie wissen, wie die Dinge Center zu machen, wissen Sie, wie Sie das mittlere Element für Ihr Logo auswählen. Du weißt, wie man einen Helden macht. Sie Nobel Polsterung und Rand. Also haben Sie diesen Abschnitt bereits behandelt. Hier unten. Wir haben wie eine kleine Karte. Sie haben diesen Abschnitt bereits behandelt. So einfach gestylt. Es muss nicht funktional sein. Es muss kein richtiges Karussell und Rutsche sein und alles. Aber Sie möchten sicherstellen, dass es wie eine Hintergrundfarbe hat , die die Layouts schön sind. Sie können versuchen, Pfeile und solche Dinge hinzuzufügen. In diesem Abschnitt wird auch ein Raster verwendet. Dies ist ein wirklich guter Kandidat für Gitter, und dann verwenden Sie einfach Hintergrundbilder. So können Sie voran gehen und mit so etwas anfangen. Wenn du diese bestimmte Seite nicht machen willst, ist das völlig okay. Das musst du auch nicht finden. Sie können gehen und, wissen Sie, wenn Sie sich wirklich scharf fühlen, können Sie versuchen, so etwas mit allen Winkeln zu tun. Du kannst es benutzen. Transformieren, um Dinge zu verzerren, zu drehen, Dinge wie dieser Abschnitt hier zu verwenden wäre tatsächlich ein Quadrat und dann wäre es nur ein wenig gedreht werden und so, dass es genau in der Mitte trifft. Ja. Gib dem einen Schuss. Vergessen Sie nicht, Dinge wie diese zu brechen könnte Flexbox sein. Dies wäre Flexbox, nicht unbedingt Grid, sondern Flexbox. Und dieses haben wir nur einen Rand oben von einem Extra wie 50 Pixel. Also, was ich möchte, dass Sie tun, ist, gehen Sie voran und geben Sie dies eine Chance und versuchen Sie einfach, es Stück für Stück zu brechen. Versuchen Sie nicht, alles auf einmal anzugehen. Vielleicht haben Sie heute Abend versucht, wie die Navigation zu tun und morgen haben Sie versucht mit dem Heldenbereich zu tun und am nächsten Tag versuchen Sie, den nächsten Abschnitt zu tun. Nehmen Sie sich Zeit damit, haben Sie etwas Spaß damit und versuchen Sie wirklich, in die Uneinigkeit von CSS zu kommen. Alles, was Sie in diesem Kurs gelernt haben, ist auf diese Designs anwendbar. Diese Designs sind eigentlich ziemlich wild. Und um ehrlich zu sein, ist dies ein sehr, sehr fortschrittliches Design. Also vielleicht, weißt du, wenn du dich nicht wohl fühlst, fange nicht mit dem an. Aber Sie können mit so etwas anfangen. Das ist wirklich gut. Es hat Ihre Navigation, hat einen Header, es hat eine Schaltfläche drin. Es hat verschiedene Schriftgrößen, verschiedene Schriftarten. Du hast hier verschiedene Stile. Dies könnte also auch Flexbox sein, oder Floating oder Position relativ oder Position absolut. Du kannst so etwas ausprobieren. Ich würde sagen, versuchen Sie eine von diesen. Wenn Sie mit etwas einfacher beginnen wollen, würde ich sagen, gehen Sie zu Rakete Mann, lernen Sie nicht wag tilde.com und versuchen Sie einfach, diese Seite neu zu erstellen. Die Justizseite, nicht alle, nicht alle Seiten hier, nur diese Seite. Sie haben also Navigation hier drin. Es ist schön und einfach. Sie haben Hintergrundbild, Farbverlauf oben. Sie haben eine Schaltfläche, und Sie haben verschiedene Texte, Sie haben verschiedene Schriftarten, also benutzerdefinierte Web-Fonts. Und hier haben wir Flexbox, wir haben zwei Karten nebeneinander. Hier würden wir zwei Karten nebeneinander haben, aber diese verwendet Position relativ und Position absolut, um es irgendwie in ein wenig zu stoßen. Es ist also mit einem zed-Index überlagert. Gleiches mit diesem, nur der umgekehrte Weg, anstatt sich nach links zu bewegen, und die zweite bewegt sich nach rechts. Und hier drin könnten wir Grid oder Flexbox verwenden. Ich würde Flexbox für diese vorschlagen. Und dann kannst du Grid hier unten benutzen. Geh weiter und gib dem eine Chance. Ich weiß, es ist eine Menge zu nehmen, aber ehrlich gesagt und ich kann das nicht genug betonen. Beginnen Sie klein, beginnen Sie mit nur der Navigation. Beginnen Sie mit nur der Kopfzeile. Nehmen Sie sich Zeit damit. Google eine Menge, stellen Sie eine Menge Fragen. Ich bin wegen dir hier. Das Lernen, Facebook zu programmieren, eine Community. Sie sind alle für dich da. Gehen Sie weiter und geben Sie diesem einen Schuss und fühlen Sie sich frei, Ihre Fortschritte auf dem Weg zu teilen. Oh, und eine letzte Sache, weil Sie auf Fähigkeiten teilen, haben Sie Ihre Fähigkeiten teilen Projekt Abschnitt. Wenn Sie also in Ihre Projekte gehen und auf die grüne Schaltfläche klicken, die Neues Projekt erstellen steht. Ich glaube, das ist es, was es sagt. Sie können Ihr Projekt teilen, damit Sie Screenshots teilen und Ihren Code teilen können, wie Sie alle möglichen Dinge darin tun können. Stellen Sie also sicher, dass Sie es da drin teilen. Aber vor allem, was am wichtigsten ist, haben Sie etwas Spaß damit. 30. Zusammenfassung: In Ordnung, Sie haben CSS 201 beendet. Dies ist Zwischen-CSS und tatsächlich ist dies ein Zwischen- bis leicht fortgeschrittenes CSS, um völlig ehrlich zu sein. Aber, weißt du, tolle Arbeit, den ganzen Kurs abzuschließen. Dies ist eine Menge von Inhalten, die man aufnehmen kann. Ich hoffe, Sie haben etwas Lustiges gelernt. Ich hoffe, Sie haben ein paar Hände auf Erfahrung. Ich hoffe, du hast mit mir durch die Lektionen programmiert. Aber lassen Sie uns über Ihre nächsten Schritte sprechen. Ihre nächsten Schritte werden eine schöne Website mit CSS und HTML erstellen. Ich möchte, dass Sie versuchen, sich selbst herauszufordern und eine Website so schön wie möglich aussehen zu lassen. Fühlen Sie sich frei, Inspiration von Orten wie Pinterest zu erhalten. Denn ehrlich gesagt ist das der ganze Grund, warum CSS existiert. Css rein, um Ihre Website schön aussehen zu lassen. Jetzt, wenn Sie mit CSS fertig sind, können Sie gehen und JavaScript lernen, aber bitte lernen Sie nicht JavaScript, bis Sie ziemlich vertraut und ziemlich zufrieden mit Ihren CSS Fähigkeiten sind . Javascript ist ein ganz anderes Spiel zu spielen. Aber sobald Sie bereit für JavaScript sind, habe ich mehrere Kurse zu JavaScript als auch. Schauen Sie sich also einfach mein Profil auf dieser Plattform für all meine verschiedenen Kurse an. Und schließlich, wenn Sie benötigen oder wenn Sie zusätzliche Unterstützung möchten, kommen Sie bitte dem Lernen zu Code Facebook-Gruppe wo Sie Fragen über alles CSS im Zusammenhang stellen können. Letzt möchte ich mich bei Ihnen bedanken, dass Sie meinen CSS Kurs besucht haben. Ich weiß, dass es andere Kurse gibt und ich schätze, dass Sie meinen Kurs nehmen. Wieder einmal, mein Name ist Caleb Colleen, und ich bin stolz Ihr Lehrer Hals CSS bei 201, und ich hoffe, Sie in einem anderen meiner Kurse zu sehen. Viel Spaß beim Programmieren und ich sehe dich herum.