Lernen Sie CSS: Von den Grundlagen bis zum Profi

1. Einführung: Wollten Sie schon immer Ihre eigene Website gestalten? Wenn ja, müssen Sie CSS kennen und beherrschen. Heute werden wir genau das tun, indem wir dieses Projekt ausbauen. Hi, mein Name ist Zoe. Ich bin ein Softwareingenieur und ehemaliger Professor , der es liebt, anderen beim Einstieg in das Programmieren zu helfen Ich habe unzählige Websites und Web-Apps mit React, CSS, HTML und mehr erstellt . Heute werden wir uns mit den Grundlagen von CSS und diese Fähigkeiten nutzen, um unserer HML-Website ein neues Design zu verleihen Wenn Sie mit HTML nicht vertraut sind, würde ich Ihnen dringend empfehlen, sich meinen vorherigen Kurs anzusehen, in dem wir den Basiscode für dieses Projekt erstellt haben den Basiscode für dieses Projekt erstellt Aber so oder so, ich werde den Startercode unten auf der Registerkarte Projekt und Ressourcen verlinkt haben. In diesem Kurs werden wir alles über Cascade, Stylesheets und die verschiedenen CSS-Regeln Zunächst werden wir mit einem Überblick darüber beginnen was CSS ist und wie es verwendet wird Dann tauchen wir direkt in unser Tutorial ein. In dem Tutorial können Sie erwarten, zu lernen, wie Sie CSS schreiben, wie Sie Ihr CSS mit Ihrem HTML verbinden, wie Sie ein Stylesheet effektiv verwenden und wie Sie CSS verwenden, um ein Design schnell zum Leben zu erwecken Dieser Kurs richtet sich an alle , die daran interessiert sind, ihre eigenen Websites zu erstellen und ihre eigenen Websites zu erstellen und und zu lernen, wie man mit CSS arbeitet Am Ende dieses Kurses werden Sie in der Lage sein, dies selbst zu tun. Also lass uns anfangen. 2. Kursprojekt: Klassenprojekt. Unser Projekt für diesen Kurs wird darin bestehen, eine einfache Website nur mit CSS zu gestalten. Für diesen Kurs ist es wichtig, Zugriff auf einen Computer zu haben, auf dem Sie Visual Studio-Code oder einen anderen Code-Editor Ihrer Wahl ausführen können Visual Studio-Code oder einen anderen Code-Editor Ihrer Wahl ausführen . Sie sollten auch einen Browser wie Google Chrome in Betrieb haben , da wir ihn zur Anzeige unserer Webseite verwenden werden. Wie ich bereits erwähnt habe, wird es einen Startercode geben, falls Sie dem Tutorial folgen möchten. Ich hinterlasse Links zu allen Ressourcen und Ressourcen Sie benötigen, auf der Registerkarte Projekt und Ressourcen unten. 3. Was ist CSS?: Was ist CSS? CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache, die verwendet wird, um zu beschreiben, wie HTML dem Benutzer präsentiert wird CSS kann entweder über ein externes Blatt verlinkt oder in das HTML-Dokument selbst geschrieben In diesem Kurs werden wir beide Optionen untersuchen. Als Sprache besteht CSS aus zwei Hauptteilen: Selektoren und Regeln Lassen Sie uns untersuchen, was diese jeweils sind. 4. Selektoren und Regeln: Selektoren und Regeln. Selektoren sind Indikatoren , die dem Computer mitteilen, auf welche Elemente die gewünschten Stile ausgerichtet werden sollen, und die Regeln Jede CSS-Regel beginnt mit mindestens einem, möglicherweise aber mit mehr als Diese können entweder einen Elementtyp wie H-Eins, P oder Bild, eine bestimmte Elementklasse oder die Idee eines einzelnen Elements auswählen Elementtyp wie H-Eins, P oder Bild, eine bestimmte Elementklasse . können sowohl Klassen als auch IDs hinzugefügt werden, um Jedem HTML-Element können sowohl Klassen als auch IDs hinzugefügt werden, um sie zu gruppieren oder zu identifizieren. Es gibt jedoch einen wesentlichen Unterschied zwischen Klassen und IDs. Klassen können hingegen mehreren Elementen hinzugefügt werden , um ein einheitliches Set von Stilen, eine Art Webseite oder eine gesamte Website zu vermitteln. IDs sollen dagegen nur für ein Element eindeutig sein. Abhängig von Ihrem Styling-Ziel möchten Sie vielleicht entweder Klassen oder IDs oder beides verwenden. Die meisten Websites haben eine gesunde Kombination aus beidem. Klassenselektoren werden in CSS geschrieben , indem dem Namen der Klasse, die Sie selbst wählen , ein Punkt vorangestellt Sie selbst wählen , ein IDs werden fast auf die gleiche Weise geschrieben, aber statt eines Punkts verwenden Sie einen 5. Wasserfall: Kaskade. Wie Sie sehen, gibt es mehrere Möglichkeiten, ein Element mithilfe von CSS auszuwählen Aber woher wissen Sie, ob Ihre Regel korrekt angewendet wird oder nicht ? CSS verfügt über zwei Funktionen , die bei dieser Kaskade und Spezifität helfen können dieser Kaskade und Spezifität Wie der Name schon sagt, werden die Stile in CSS kaskadierend angewendet Das bedeutet, dass die Stile, die am Anfang der Datei stehen, zuerst angewendet werden, und dann, wenn Sie nach unten gehen, werden die anderen Stile auf diesen ursprünglichen Stil angewendet auf diesen ursprünglichen Falls Sie zufällig zwei widersprüchliche Stile für dasselbe Element geschrieben haben zwei widersprüchliche Stile für dasselbe Element , wird zunächst der Stil angewendet, der später im CSS-Blatt erscheint angewendet, der später im CSS-Blatt erscheint Dies ist jedoch nicht sehr wartungsfreundlich, insbesondere wenn Sie mit mehreren Stylesheets arbeiten müssen mehreren Stylesheets arbeiten Es gibt also eine Möglichkeit, dieses Verhalten zu überschreiben. Schauen wir uns ein anderes Feature an, das als Spezifität bezeichnet wird. 6. Spezifität: Spezifität. Spezifität ermöglicht es uns, zuvor festgelegte Regeln zu überschreiben, je nachdem, wie spezifisch das Element ausgewählt Wenn zum Beispiel für alle P-Tags die Farbe Rot festgelegt wurde, wir dann aber einem bestimmten P-Tag die Klasse Spezial“ und dieser Klasse die Regelfarbe Blau geben, unabhängig davon, wo die Regel im Dokument angegeben Unabhängig von der Kaskade müsste dieses P-Tag also die Farbe Blau annehmen weil Klassen spezifischer sind als Elementselektoren Das Gleiche gilt für IDs. Wenn wir demselben P-Tag die ID unique geben und als Regel für diese ID die Farbe Grün festlegen würden, würde dieses P-Tag dann die Farbe Grün annehmen. Das liegt daran, dass IDs die spezifischste aller drei unserer Selektoroptionen Wenn wir also von den unspezifischsten zu den meisten gehen, haben wir Elemente, dann Klassen, dann IDs 7. Erklärungen: Deklarationen. Sobald Sie das Element oder die Elemente, mit denen Sie arbeiten möchten, richtig ausgewählt haben, ist es an der Zeit, Ihre Stile zu schreiben. Wie Sie vielleicht schon bemerkt haben, werden CSS-Regeln mithilfe einer Reihe von Deklarationen geschrieben , die die Verwendung von Eigenschaften und Werten Die Eigenschaft auf der linken Seite der Deklaration ist das stilistische Merkmal, das wir mit unserer Regel ändern möchten Der Wert auf der rechten Seite ist die spezifische Stilauswahl, die wir getroffen haben Wenn wir die Eigenschaft auf der linken Seite und den Wert auf der rechten Seite kombinieren , erhalten wir eine CSS-Deklaration. Diese Deklarationen befinden sich in unseren CSS-Regelsätzen oder -Regeln und werden dann auf unser HTM angewendet 8. Zusätzliche Informationen: Zusätzliche Informationen. Wie Sie sich vorstellen können, hat CSS Hunderte von verschiedenen Eigenschaften, aber keine Sorge, Sie sind nicht dazu bestimmt, sie alle auswendig zu lernen Sie können Websites wie W Three Schools, Mozilla Developer Dots und Stack Overflow verwenden , um nach der richtigen CS-Eigenschaft zu suchen , die Sie verwenden können, wann immer Sie sie benötigen Jede Eigenschaft kann viele verschiedene Werte haben , die richtig geschrieben oder in der richtigen Reihenfolge geschrieben werden müssen richtig geschrieben oder in der richtigen Reihenfolge geschrieben , damit sie Wenn Sie sich also unsicher sind mit welcher Eigenschaft oder welchem Stil Sie arbeiten, empfiehlt es sich, einfach in der Dokumentation nachzuschlagen 9. Lernprogramm: Ordnung. Jetzt ist es an der Zeit, unserer Seite etwas CSS und etwas Styling hinzuzufügen. Aber wie arbeiten wir überhaupt mit CSS, und wohin gehört es, und wie verbindet es sich? Und lassen Sie uns einfach von Anfang an eintauchen. Der beste Ort, um CSS zu schreiben, ist in einer eigenen Datei. Wir werden also unsere eigene CSS-Datei erstellen. Gehen wir dazu in unseren Ordner, in dem sich Indext HTML befindet, und erstellen wir eine neue Datei Wir nennen es Dateien Dot CSS. Fantastisch. Wir haben unsere CSS-Datei erstellt. Perfekt. Was wir jetzt tun müssen, ist, es mit unserer HTML-Datei zu verknüpfen, weil sie im Moment einfach nebeneinander sitzen, aber sie wissen nicht unbedingt , dass sie zusammenarbeiten sollen. Was wir also tun müssen, ist zu unserer HTML-Datei mit Indexpunkt überzugehen . Wir werden weitermachen und unsere CSS-Datei mit unserem HTML verknüpfen . Also gehen wir in den Kopfbereich und verwenden ein sogenanntes Link-Element. Das Link-Element macht also genau das. Es verknüpft eine Datei mit einer anderen. Also verwenden wir Tinte und dann die Beziehung. Es gibt ein paar verschiedene Attribute , die den Link des Linkelements ausmachen. Eines ist also RL, was für Beziehung steht. Also möchte er wissen, warum diese beiden Blätter quasi zusammenarbeiten müssen . Also nennen wir das hier. Die Beziehung hier ist Stylesheet, weil CSS, das CSS-Sheet, mit dem wir arbeiten, ein Stylesheet ist. Es ist dazu gedacht, HTML zu stylen. Und dann werden wir ein anderes UM-Attribut namens HRF verwenden ein anderes UM-Attribut namens HRF HRF ist im Grunde die URL oder der Speicherort der Datei In diesem Fall, da es um eine lokale Datei handelt, wird sie genau dort sein, aber Sie können sogar google.com für Ihre HRF verwenden, wenn es das sein muss Sie würden es nicht als Verkaufsblatt verwenden, weil Google keine CSS-Datei ist, aber Sie haben die Idee verstanden HRF kann in einer Vielzahl von Situationen für verschiedene Arten von Links verwendet werden, und wir werden Links etwas später verwenden Im Moment nehmen wir also unsere HRF und setzen sie ein, wir verknüpfen sie mit unserem Style-Punkt-CSS Denken Sie jetzt daran, dass wir, als wir über Terminal und den Punktstrich und all das gesprochen haben, nun ja, ganz ähnlich, mithilfe eines Punktstrichs angeben können, dass sich eine Datei in demselben Ordner befindet wie der, in dem wir uns gerade Wenn ich also einen Schrägstrich verwende und Sie sehen, dass VSCode bereits erkennt, was ich zu tun versuche, listet es alle Verzeichnisse in den Dateien auf, die sich in dem aktuellen Ordner befinden , in dem ich arbeite. Wenn ich also zu einem Punktstrich und zu Styles Dot CSS gehe, ist das eigentlich das Stylesheet, das wir also die Eingabetaste, und es wurde bereits unterstrichen, weil es im Grunde genommen diesen Link in VSCode erstellt hat, der mir sagt: Ja, ja, wir haben diese CSS-Datei verlinkt Jetzt muss ich nur noch ein selbstschließendes Tag schließen Sie werden feststellen, dass sich die meisten Tags im Kopf selbst schließen, weil sich nichts dazwischen befindet. Sie sind nur dazu gedacht, Informationen zu speichern , und wir werden sie speichern. Und jetzt sollten wir unser Stylesheet in unserem HTML-Code haben. Aber es passiert noch nichts. Nochmals, weil wir nichts in unser CSS eingefügt haben. Also lass uns weitermachen und anfangen, das zu stylen. Es gibt verschiedene Möglichkeiten, wie Sie HTML-Elemente mit CSS ansprechen können HTML-Elemente mit CSS ansprechen Lassen Sie uns das hier fortsetzen, damit wir uns beide gleichzeitig ansehen können. Sie können sie also gezielt ansprechen indem Sie verwenden, um welche Art von Element es sich handelt, oder? Sie können also den Körper ins Visier nehmen. Sie können alle Divs, H-Zonen, Ps, Strongs, Eingabeformen usw. ins Visier nehmen Ps, Strongs, Eingabeformen Das ist eine Art der Zielgruppenansprache. Und wenn Sie eine Art übergreifende Änderung vornehmen möchten, ist das wahrscheinlich der beste Weg, dies zu tun Also zum Beispiel eine Sache, die ich gerne ändern würde, denn wie Sie hier feststellen, handelt es sich um eine SNSerf-Schrift und die Schrift , die wir verwenden, Es hat diese kleinen Kanten, diese kleinen Hüte. Ich möchte sichergehen, dass die Schrift, die in diesem Dokument verwendet wird, San, son serif Also wählen wir das Body-Tag aus. Den Körper, also werden wir das Körperelement segmentieren und wir werden die Schriftfamilie erstellen. Also Schriftfamilie. Es gibt also all diese verschiedenen Arten von Eigenschaften, auf die Sie innerhalb von CSS zugreifen können. Schriftfamilie ist nur eine von buchstäblich Dutzenden und Hunderten. Schriftfamilie können Sie also bestimmen, um welche Art von Schrift es sich handelt. Allgemein gesprochen. Manchmal können Sie die tatsächliche Schriftart angeben. Manchmal geht es darum, die Schrift herunterzuladen oder zu verlinken und all das. Aber in diesem Fall möchte ich nur eine San Sera-Schrift. Also werde ich hier nach unten scrollen, wo Ariel, Helvetica und SnSerf stehen, und darauf Helvetica und SnSerf stehen, und Jetzt sollte hoffentlich alles im Körper SnSerf alles im Und eine wirklich, wirklich wichtige Sache, an die Sie denken sollten, nachdem Sie eine Änderung an Ihren Dateien vorgenommen haben, ist immer sicher Schauen wir uns da drüben um und schauen uns das an. Unser gesamter Text ist jetzt SnSerf. Es hat Es gibt keine kleinen Hüte und Schwänze mehr. Es ist perfekt sauber und sieht ein bisschen modern aus. Perfekt. In Ordnung, schauen wir mal, was wir sonst noch mit dieser Seite machen können . Nun, hier ist eine Sache Ich will die H-Zone ins Visier nehmen, und um fair zu sein, ich kann es einfach so machen, lass uns sehen. Ich will es tatsächlich ins Visier nehmen, mal sehen. Ich möchte auf einen Teil des Textes auf der Seite zielen, aber nicht auf den gesamten Text auf der Seite. Wenn Sie sich unser Bild hier ansehen, werden Sie feststellen, dass ein Großteil des Textes tatsächlich weiß ist. Das ist also weiß, das ist weiß. Sieben Tage lang kostenlos testen ist weiß. Aber dieser Text unten scheint grau zu sein, und dieser Text scheint rosa oder rot oder so zu sein . Wir wollen also eine Kombination aus verschiedenen Texttypen und Textfarben haben. Wie ich bereits erwähnt habe, gibt es beim Programmieren verschiedene Möglichkeiten , alles anzugehen. Einige Methoden sind besser als andere, aber es liegt wirklich an Ihnen und Ihren persönlichen Vorlieben. Ich möchte das also angehen, indem die Gesamtfarbe weiß mache und dann wahrscheinlich auf die nicht weißen Elemente abzielt. Ich denke, das ist der sauberste Weg, das zu tun. Eine andere Möglichkeit , das zu tun, besteht darin, den Hauptteil ins Visier und die Eigenschaft „Ich verwende die Farbe“ zu verwenden, die für die Schriftfarbe bestimmt ist, und ich nenne sie einfach Weiß Jetzt haben Sie vielleicht schon verstanden, was passieren wird. Unsere Seite sieht so aus dort fast nichts steht, oder? Stimmt. Also, was wir jetzt tun werden ist unseren Hintergrund umzusetzen. Jetzt ist es also ziemlich wichtig, dass wir den Hintergrund in Gang bringen. Wir wissen aus unseren Dateien, wenn wir also in die Dateien gehen , die in unserem Projekt enthalten sind , dass wir ein Hintergrundbild haben , diesen Hintergrunddesktop. Aber es ist nicht wirklich das rosafarbene Bild. Es sind nur die kleinen Symbole, die oben drauf sind. Also müssen wir mit diesem Hintergrund etwas arbeiten. Ordnung, also lasst uns weitermachen und unser Hintergrundbild Und wir werden es verwenden, wir werden es mit unserem Desktop-BG in oder Desktop-PNG verknüpfen unserem Desktop-BG in oder Desktop-PNG Der beste Weg, das zu tun, ist also, eine URL zu verwenden, genau wie Sie google.com haben, genau wie Sie hf haben, werden Sie eine URL verwenden, um diesen Selektor mit der Hintergrundbilddatei zu verknüpfen diesen Selektor mit der Hintergrundbilddatei zu , die sich in unserem Projekt Also machen wir URL. URL, Klammern. Und dann werde ich in Anführungszeichen den Speicherort dieser BG Intro-Desktop-Datei angeben , richtig Wenn ich mir also ansehe, wo wir uns befinden, befinden wir uns derzeit in Styles Dot CSS Ich muss eine Ebene runter zu Bildern und dann zum Bg Introdsktop Dot PNG gehen Um dorthin zu gelangen, tippe ich einen Schrägstrich ein , der auf diesen Ordner hinweist Dann möchte ich in den Bilderordner gehen, also füge ich Bilder hinzu und klicke dann auf Nun, ich tippe den Bg Intro Desktop Dot PNG aus, und das sollte es direkt mit dem Bild verknüpfen Also, wenn ich auf Speichern klicke und zurück navigiere. Großartig. Wir können anfangen zu sehen, dass unser Bild angewendet wird. Aber es gibt noch eine Sache. Da ist diese rosafarbene Farbe, die nicht Teil des Hintergrundbilds ist. Wie kriegen wir das da überhaupt hin? Nun, es gibt noch eine andere Eigenschaft namens Hintergrundfarbe. Ich denke, das kommt mit einem Styleguide, weshalb sie uns all diese Dateien gegeben haben. Wenn wir also zum Styleguide Punkt D übergehen und dann zu, mal sehen. Es gibt ein Layout. Die Farben. Die Primaten sind rot, grün und die Akzentfarbe blau, eine Schrift Okay, sie haben uns tatsächlich eine bestimmte Schrift gegeben, also können wir sie auf jeden Fall verwenden, wenn wir möchten Ich bin mir nicht ganz sicher, welche Farbe es ist, aber weißt du was? Wir müssen nicht einmal raten. Lassen Sie uns ein anderes Tool nutzen , das uns zur Verfügung steht. Es gibt also dieses Tool namens Eyedropper. Es ist eine Erweiterung, die Sie völlig kostenlos zu Ihrem Google Chrome-Konto hinzufügen können zu Ihrem Google Chrome-Konto hinzufügen , und Sie klicken einfach Sobald Sie es in Ihren Google Chrome-Erweiterungen installiert haben , klicken Sie darauf und klicken auf die Stelle , an der Farbe von Webseite auswählen steht Sie können den Mauszeiger einfach über den Teil Ihrer Webseite bewegen, um diese Farbe zu erhalten Da wir uns nicht sicher waren, um welche Farbe es sich handelt, haben wir uns diese Farbe einfach ausgesucht und können sehen, dass sie uns auf drei verschiedene Arten beschrieben werden sie uns auf drei verschiedene Arten beschrieben Es ist also in einem Hash-Hash EC 7476. Das ist also eine Art, es zu beschreiben. Es gibt auch die Werte HSL, Farbton, Sättigung und Luma, also 359, 76% und 69% Äh, oder es ist in RGB, also ist es eine Kombination aus Rot, Grün und Blau, und das sind die Zahlen Also 236 Rot, 116 Grün und 118 Blau. Wir können jedes davon verwenden. Es gibt keine richtige oder falsche Antwort. Zu diesem Zweck. Ich verwende einfach den Hash, weil er der kürzeste ist. Wenn ich also zurück gehe und zu unseren Stilen zurückkehre, erstelle ich eine neue Immobilie. Und ich ordne sie nur in alphabetischer Reihenfolge an, aber Sie können es wirklich in jeder beliebigen Reihenfolge tun Ich finde es einfach einfacher, es zu finden, wenn es alphabetisch ist. Du kannst die Hintergrundfarbe wählen und ich füge den Hash hinzu. Ich werde sparen. Sie werden sehen, dass VS-Code ihn tatsächlich für mich ausfüllt Es sagt mir, welche Farbe es hat. Und da haben wir es. Jetzt haben wir unseren rosafarbenen Hintergrund. Wir können unseren weißen Text sehen und sind auf dem besten Weg. Fantastisch. Großartig. Wir sind an einem guten Ort. Tatsächlich befinden wir uns in einer so guten Position, dass wir das vielleicht in unser GitHub-Repository übernehmen möchten , denn wenn wir etwas anderes machen und wir es komplett vermasseln, wünschen wir uns vielleicht , wir könnten zu diesem Punkt zurückkehren. Lassen Sie uns also weitermachen und genau das tun. Also arbeiten wir jetzt mit ein paar verschiedenen Stücken. Lassen Sie uns also weitermachen und den Intro-Desktop im Hintergrund übernehmen, das ist das Bild , das wir verwenden Lassen Sie uns weitermachen und auch unser Style-Punkt-CSS übernehmen. Und lassen Sie uns unseren Index-Punkt-HTML, der diese Dateien miteinander verknüpft , festschreiben . Fantastisch. Geben wir also unsere Botschaft als ersten Stil an. Lassen Sie uns zunächst versuchen, richtig zu buchstabieren. Da haben wir's. Und das werden wir begehen. Und jetzt , wo wir diesen Commit gemacht haben, werden wir ihn tatsächlich unser Remote-Repository übertragen, um sicherzustellen, dass unser Computer, auch wenn er in den nächsten 5 Minuten einfach verschwindet, immer noch im Internet ist Und wenn wir einen neuen Computer bekommen, können wir ihn zurückbringen. Also tippen wir auf diese kleinen drei Knöpfe hier, diese kleinen drei Punkte hier oben, und wir klicken auf das Wort Push, weil wir die beiden Repositorys bereits verbunden haben. Es wird wissen, dass, wenn ich Push sage, ich meine, es auf die Fernbedienung drücken, mit der wir es verbunden haben Lassen Sie uns weitermachen und auf Push klicken. Und du wirst sehen, dass der kleine blaue Balken anfängt zu verschwinden. Es waren nicht sehr viele Dateien, also wird es nicht sehr lange dauern. Aber wenn wir zu GitHub gehen und zu unserem Code für unser Anmeldeformular zurückkehren, werden wir feststellen, dass wir gerade erst Pushs hatten. Wir haben also eine Styles-at-CSS-Datei, was hier unser erstes Styling ist, und wir haben unsere Image-Datei, die unseren Bilderordner hat, eine Datei enthält, nämlich das Desktop-PNG. Fantastisch. Toller Ort zum Verweilen. Wir fliegen das durch. Das nächste, was wir in Angriff nehmen wollen, schauen wir uns an, was wir hier haben. Das nächste, was wir wahrscheinlich angehen wollen, ist entweder die Trennung oder Aufteilung dieser Elemente in verschiedene Elemente. Wir können beide Wege gehen. Fangen wir damit an, diese kleinen Elemente in Angriff zu nehmen, und dann trennen wir die beiden voneinander. Und wie gesagt, beim Programmieren gibt es acht verschiedene Möglichkeiten, alles zu tun. Es liegt ganz bei Ihnen und was Sie zuerst tun möchten. Und natürlich können Sie Ihre Meinung jederzeit ändern und etwas anderes tun. Wenn Sie sich dafür entschieden haben, wissen Sie, den falschen Ansatz gewählt haben, ist das völlig in Ordnung, besonders wenn Sie lernen. Fühlen Sie sich frei, Fehler zu machen und dann einfach Z zu kontrollieren und etwas Neues zu tun. Also, fangen wir damit an, das zu nehmen. Testen Sie es sieben Tage lang kostenlos und danach 20$ pro Monat. Lass uns weitermachen und versuchen, diese Box zu erstellen. Lassen Sie mich zu unserem Styleguide zurückkehren und nachsehen, ob dort etwas steht. Ich denke, das könnte das Dunkelblau oder vielleicht das Graublau sein. Ich bin mir nicht ganz sicher Versuchen wir es mal und sehen, was wir tun können. Also, um diese Linie genau hier anzuvisieren, dieses P-Tag, richtig, es gibt ein paar Möglichkeiten, das zu tun. Wir können entweder dem P-Tag eine Polsterung hinzufügen oder wir können es in eine Trennlinie einwickeln und der Trennlinie das Design hinzufügen Es liegt ganz bei Ihnen, was Sie tun möchten. Du weißt schon, triff einfach deine Wahl und bleib dabei. Lassen Sie uns also über Polsterung sprechen. Was Padding ist , ist dieser kleine Raum , dieser Raum zwischen dem Raum zwischen dem Text und der äußeren Begrenzung der Box Das ist Polsterung. Also eigentlich habe ich gerade meine eigene Frage beantwortet Wir müssen ein Div verwenden, wenn wir Padding verwenden wollen. Margin ist jedoch das Ding an der Außenseite von etwas, oder? Der Rand ist also der Abstand zwischen zwei Objekten. Also, weil wir zum Beispiel eine Hintergrundfarbe verwenden wollen, müssen wir sie als Hintergrund für ein Element haben. Lassen Sie mich Ihnen zeigen, was ich meine. Wenn ich die Hintergrundfarbe für dieses Erbsenetikett hätte, und ich würde es so machen, bläulich-gräulich . Also lass uns hier etwas versuchen Nehmen wir alle Erbsenetiketten, Hintergrundfarbe und dann wählen wir aus. Lass uns dieses Graublau ausprobieren. Ich bin mir nicht sicher. Und das werden wir tun und wir werden sparen. Alle P-Tags haben diese Farbe. Aber wie Sie sehen, ist auch um die P-Tags herum nicht viel Platz, oder? Es sind einfach alles wirklich lange gerade Linien. das zu vermeiden, erstellen wir ein Feld um das P-Tag und geben mit etwas Abstand innerhalb dieses erstellen wir ein Feld um das P-Tag Feldes an , wie viel Platz wir für dieses Element benötigen Lassen Sie mich Ihnen zeigen, was ich meine. Lassen Sie uns diese P-Tag-Hintergrundfarbe loswerden. Und lassen Sie uns eine Box um unser P-Tag herum erstellen, richtig? Also werden wir hier dieses größere Feld um unsere kleine Textzeile herum erstellen . Lassen Sie uns also ein weiteres Div erstellen und das um unser P-Tag wickeln. Fantastisch. Ordnung. Jetzt wollen wir auch auf dieses spezielle P-Tag zielen, denn wie Sie bemerkt haben, waren es, als ich diese Farbe auf das P-Tag gesetzt als ich diese Farbe auf das P-Tag gesetzt habe, alle P-Tags, richtig? Das wollen wir nicht. Wir wollen , dass dieses spezielle Div dieses spezifische P-Tag umgibt. Nun, es gibt ein paar Möglichkeiten, dies zu tun. Wir können tatsächlich versuchen, eine Art verschachteltes Ding zu machen, bei dem wir etwas schreiben könnten , als ob wir etwas schreiben könnten Wir könnten so etwas schreiben wie, ähm, Körper, und dann ist das Kind des Körpers ein Div Und dann denke ich, es ist in einem anderen Div und dann haben wir ein Ptag und das ist das Petag, auf das wir abzielen wollen Aber erstens wollen wir nicht das Pe-Tag ins Visier nehmen . Wir wollen das Div ins Visier nehmen. Und zweitens, das ist immer noch nicht spezifisch genug. Klar, das wird auf dieses eine bestimmte Div abzielen und es wird funktionieren. Wenn ich also Hintergrundfarbe mache und das machen wir, glaube ich nicht , dass das das richtige Blau war. Lass uns dieses Mal ein anderes Blau machen. Lass uns das Dunkelblau machen. Vielleicht nur normales Blau, aber wir werden sehen. Wir werden das machen. Das wird auf dieses spezielle Div abzielen. Aber der einzige Grund, warum es darauf abzielt , ist, dass es nur ein Div gibt. Schauen wir uns noch einmal an, was ich hier gemacht habe. Also habe ich den Körper ins Visier genommen, den Körper. Und dann habe ich die Tauchgänge innerhalb des Körpers ins Visier genommen, das ist dieses Div und dieses Div Dann habe ich die Divs innerhalb der Divs ins Visier genommen, und in diesem Fall gibt es nur Div innerhalb eines Divs Ich weiß, dass es ein bisschen kompliziert wird, aber in diesem Fall gibt es nur ein Div innerhalb eines Divs, und das ist dieses Div und das ist dieses Das ist also nicht die beste Vorgehensweise, denn selbst der Versuch, es Ihnen zu erklären, war verwirrend. Was wir lieber tun würden, ist, nur auf diesen bestimmten Teiler, dieses spezifische Element und nicht auf irgendein anderes Element abzuzielen dieses spezifische Element und nicht auf irgendein anderes Element Es gibt also zwei Möglichkeiten, wie wir das tun können. Wenn das Design, das wir implementieren möchten, woanders wiederverwendet wird. Wir können etwas verwenden, das als Klasse bezeichnet wird. Eine Klasse ist also eine Art von Eigenschaft, die in jedes sichtbare HTML eingefügt wird. Sie können also eine Klasse eingeben und dann können Sie einer Klasse einen beliebigen Namen geben. Sie können jeden Text, den Sie ihr geben möchten, so benennen. Also, wenn ich diese Klasse nenne, du weißt schon, CTA wie Call to Action nenne, dann ist das der Name der Klasse, auf die ich abzielen soll Und wenn ich noch andere Handlungsaufforderungen auf der Website habe, möchte ich vielleicht, dass sie alle gleich aussehen Wenn ich dann hierher gehe, kann ich einfach diese Struktur ändern und den CTA ins Visier nehmen Um nun auf eine Klasse abzuzielen, müssen Sie tatsächlich einen Punkt vor dem Text setzen vor dem Text Der Punkt gibt also Klassen an. Wenn ich CTA eintippe und die Hintergrundfarben so setze und ich identifiziere, dass das die Klasse CTA hat und das ist das einzige Ding mit einer Klasse CTA, es sollte nur noch einmal auf dieses spezielle Ding abzielen Großartig. Hab ich wieder gemacht. Perfekt. Nun, was wäre, wenn wir nur ein einzelnes Exemplar von etwas ins Visier nehmen wollten , oder? Wir wollten also keine andere Art von CTA ins Visier nehmen? Das ist buchstäblich nur für diesen einen und einzigen CTA. Nun, was wir dann tun können, ist diese andere Kennung, die als ID bezeichnet wird, im Grunde genommen eine Art Identifikation, zu verwenden diese andere Kennung, die als ID bezeichnet wird, im Grunde genommen eine Art Identifikation, Es ist ein weiteres Attribut , das Sie für sichtbare HTML-Elemente oder für nicht sichtbare HTML-Elemente verwenden können . Und du kannst es nennen, du gibst buchstäblich einfach die ID ein. Und genau wie in der Klasse kannst du ihr einen beliebigen Namen geben. Sie können also für diesen Text tippen, ich könnte Unique CTA eingeben Und spar dir das. Und wenn ich es dann hier spezifiziere, werde ich tatsächlich einen Hash verwenden, weil ein Hash der Selektor für IDs in CSS ist der Selektor für IDs in CSS Also gebe ich einfach den Namen ein, Unique CTA, und mache meine kleinen Klammern, und dann ändere ich vielleicht die Hintergrundfarbe Dieses Mal setze ich es auf Blau. Aber wir haben es bereits gesagt, also sollte es sich nicht ändern, oder? Falsch. Es hat sich definitiv geändert. Nun, warum ist das passiert? Nun, die Sache mit CSS ist, dass es eine Hierarchie hat. Es gibt also zwei Möglichkeiten, diese Hierarchie und die Spezifität, auf die CSS zurückgreift, zu bestimmen und die Spezifität, auf die CSS zurückgreift Auf der untersten Ebene, auf der Ebene mit der geringsten Bedeutung, steht das Element Das sind also unsere Körpermarken. Wenn wir H eins, H zwei eingeben, beziehen sie sich im Allgemeinen nur auf die Art des Elements im Allgemeinen, oder? Das sind unspezifische Elemente. Darauf folgt der Unterricht. Wenn ich spezifiziere, dass alle H-Einsen die Farbe Rot als Text haben sollen. Aber dann gebe ich an, dass ich einem meiner H-Einsen eine Klasse gebe, H eine Klasse. Was auch immer ich als Farbe in diese H-eine-Klasse eingebe wird tatsächlich das überschreiben, was ich für dieses H-Eins-Element eingegeben habe. Du weißt also, dass H-Eins dann blau statt rot sein wird. Macht das Sinn? In Ordnung. Nun, noch konkreter, wie Sie gerade gesehen haben, sind Ausweise. IDs sollen eindeutige Identifikatoren für nur ein Element Sie sollten sie nicht für mehr als ein Element wiederverwenden. Es ist wirklich nur für dieses eine einzelne Element gedacht. Wenn ich also wirklich, wirklich spezifisch sein wollte und sagen würde, nur dieses eine, dieses eine Div, würde ich dann eine ID verwenden und H eine ID sagen und dann die Farbe auf Gelb ändern. Stimmt das? Also, wenn ich meinen H-One nehmen und all diese Kurse hinzufügen würde. Also habe ich hinzugefügt, dass Klasse gleich H eine Klasse ist und ID gleich H einer Ich buchstabiere es richtig, sehr wichtig. Welcher würde deiner Meinung nach die Nase vorn haben? Hoffentlich hast du erraten, dass er es getan hat. Und wenn du es wüsstest, würdest du es erraten, richtig, weil es gelb ist. Es soll also so sein, es soll durch Spezifität gehen. Aber sagen wir, ich hatte diese H-one-ID nicht , oder? Sag mal, ich hatte gerade Unterricht. Es sollte blau sein, oder? Und das ist es auch. Aber es gibt noch eine andere Sache, die Sie beachten sollten. CSS funktioniert auch in Bezug auf das, was es sieht , in welcher Reihenfolge es es sieht. Das Letzte, was CSS sieht, ist das, was es braucht. Also, wenn du H eine Klasse geschrieben hast und sie hier blau genannt hast, und du hast sie hier grün genannt, und dann Hoppla Und dann bist du unter das Grün gegangen hast gesagt, nein, ich färbe es lila Wenn du dafür deinen Linter anhast, wird das wahrscheinlich tatsächlich einen Fehler auslösen Aber nehmen wir an, Sie tun das nicht und speichern das, es sollte die letzte Version der Klasse wählen , die Sie angeben Wenn Sie es erraten, sollte es also lila sein. Und wenn du nachschaust, ist es lila. Was wir also aus dieser Lektion mitnehmen müssen , sind zwei Dinge. Eines davon, dass CSS Klassen verwendet. Sie können also Klassen angeben und sie auf mehrere Elemente anwenden. Also kann ich mich tatsächlich bewerben. Auch wenn es sich nicht um H-Mitglieder handelt, kann ich mich für dieses PTAG bewerben und das, weißt du, speichern Und dann hätte ich es tun sollen, es ist ein bisschen schwer zu sagen, aber das ist auch lila Also kann ich es auf mehrere verschiedene Elemente anwenden. Klassen sollen sich innerhalb einer bestimmten Anzahl von Elementen teilen . Sie können auf das Element selbst, den Typ des Elements, abzielen , aber Sie müssen wissen, dass es sich über all diese Elementtypen hinweg überträgt über all diese Elementtypen hinweg . Das ist wirklich nur empfehlenswert , wenn Sie wissen, dass alle PTAs eine bestimmte Größe haben sollten oder etwas Ähnliches Und dann haben wir IDs, oder? IDs sollen eigentlich auf etwas ganz Bestimmtes abzielen. Sie sollen nur singulär sein? Sie sollten immer nur eine ID für ein Element verwenden und sie nicht wiederholen . Dafür sind Klassen da. Fantastisch. Lassen Sie uns also weitermachen und den Rest dieser Seite gestalten. Lassen Sie uns also weitermachen und die Polsterung, über die wir zuvor gesprochen haben, zu unserem Element hinzufügen die Polsterung, über die wir zuvor gesprochen haben, zu unserem Element Es scheint also, als ob es eine gute Menge Polsterung auf der linken Seite und eine Polsterung auf der rechten und ein bisschen Polsterung oben und ein bisschen Polsterung auf der Unterseite Wie bereits erwähnt, ist Polsterung das Material, das sich in einem Element Es macht im Grunde das Element selbst größer, oder? Stellen Sie sich das als natürliche Polsterung vor. Du ziehst quasi zusätzliche Schichten an, um dich gegen die Kälte Fügen wir also ein paar hinzu, fügen wir etwas Polsterung hinzu. So wie Sie Padding schreiben, gibt es zwei Möglichkeiten, Padding zu schreiben Sie können Padding Um tatsächlich schreiben und dann die Richtung angeben Also Polsterung links. Und dann können Sie es in Pixeln angeben Nehmen wir an, es sind etwa 20 Pixel. Und das wird links etwas Polsterung hinzufügen, nur ein bisschen Polsterung genau dort nur ein bisschen Polsterung genau Es gibt einen anderen Weg und dann macht man das für die Polsterung links, rechts, oben und unten Das sind die vier Seiten eines beliebigen Elements in CSS, links, rechts, oben und unten Das ist eine Möglichkeit, Dinge mithilfe von Padding gezielt anzusprechen. Sie können in Padding auch nur das Wort für sich selbst eingeben und zwei Selektoren verwenden Sie können also oben und unten sowie links und rechts auswählen sowie links und rechts Es ist eine Art Abkürzung, um Padding in nur einer Zeile schreiben zu können Du könntest also die obere und die untere Polsterung schreiben , denn wenn wir uns unser Design ansehen, sieht es so aus, als ob sie sich ziemlich ähnlich sein sollten, oder Die linke und die rechte Seite sehen ähnlich aus, und die Oberseite und die Unterseite sehen ähnlich aus Also könnten wir unsere linke und rechte Seite als, sagen wir, 40 Pixel angeben oder tut mir leid, oben und unten sollten wahrscheinlich etwa 20 Pixel groß sein. Und links und rechts, vielleicht 40 oder 60 Pixel. Ähm, lass uns einen Blick darauf werfen. Und es ist ungefähr das, wonach wir suchen, vielleicht nicht genau das, wonach wir suchen, aber ungefähr. Das Problem dabei ist jedoch, dass sich unsere Elemente über die gesamte Seite erstrecken , was wir überhaupt nicht wollen. Wir wollen sichergehen , dass sie einfach nett und süß sind und so verpackt sind, wie sie sie hier auf dem Bild haben, oder? Um das zu tun, müssen wir also einen größeren Behälter verwenden , so etwas, dass das alles quasi in diese zwei Spalten passt. Wir müssen sie dazu bringen, innerhalb von zwei Spalten zu bleiben , und dann auch diese Polsterung reparieren und, du weißt schon, sie ein bisschen hübscher aussehen lassen Lassen Sie uns also ein paar Schritte in diese Richtung unternehmen. Lassen Sie uns diese zunächst in zwei Spalten aufteilen, weil ich denke, das wird unser Styling ein bisschen einfacher machen. Also die Art und Weise, wie ich das machen werde , und wieder 100 verschiedene Möglichkeiten, 100 verschiedene Dinge zu tun. Aber die Art und Weise, wie ich das tun werde ist mit Flexbox Flexbox ist eines der besten CSS-Tools, und ich empfehle Ihnen wirklich, sich etwas Zeit zu nehmen und es zu lernen, weil Sie es jeden Tag verwenden werden , das garantiere ich Ihnen Flexbox ist ein flexibles Box-Layout, das im Wesentlichen eine Art von Container erstellt , der verschiedene Elemente enthält Und je nachdem, welche Eigenschaften Sie dieser Flexbox zuweisen, ändert sich ihre Größe im Grunde genommen je nach Größe des Fensters und des Bildschirms, um den es Es ist wirklich großartig, es für responsives Design und responsive Layouts zu verwenden , und es ist ein bisschen bahnbrechend Lassen Sie uns also Flexbox verwenden und einige dieser Tools einsetzen, damit unsere Seite so aussieht, wie wir sie haben möchten Und ich werde diesen Link zu CSS Trix in der folgenden Beschreibung haben CSS Trix in der folgenden Beschreibung , damit Sie selbst einen Blick darauf werfen können Wenn wir uns das Design ansehen, wissen wir, dass diese beiden Textteile dazu bestimmt sind, zusammen zu sein, und dieser ganze Abschnitt ist irgendwie dazu bestimmt, zusammen zu sein, diese beiden Spalten, die wir uns ansehen Und dann, was noch größer ist, da scheint es so etwas wie Seitenpolsterung oder was auch immer am Körper oder vielleicht einen Rand zu geben, für den wir uns noch nicht entschieden Lassen Sie uns also weitermachen und diesen beiden Divs einige Identifikatoren geben und dann von dort aus weitermachen Also, was wir hier tun können , ist, weißt du, was wir tun werden Wir werden alles in einem großen Div zusammenfassen und alle Stile darauf verteilen. Also, das ist ein Div, und Sie können sehen, wo Dinge Dinge festhalten. Da ist also der Hauptteil , der quasi das Seitenelement ist. Damit werde ich nicht herumspielen. Lassen Sie uns ein Div verwenden, das alle darin enthaltenen Elemente umschließt Und wir geben dem Ganzen den Klassennamen Container, falls ich es den Klassennamen auf einer anderen Seite oder so wieder verwenden möchte auf einer anderen Seite oder so wieder Und jetzt geben wir diesen Container, dann wählen wir diesen Container aus. Ähm, wähle diesen Container aus. Und geben wir ihm das Flex-Display. Wenn Sie also Display Flex eingeben , wird tatsächlich ein Flexbox-Container erstellt Wenn wir es also richtig gemacht haben, werden Sie hier sehen, dass unsere beiden Informationen jetzt nebeneinander liegen Jetzt sind sie bereits getrennt, denn wenn Sie sich erinnern, haben wir diese beiden Divs erstellt Flexbox hat also schon einen Großteil der Arbeit für uns erledigt , was großartig ist Schauen wir uns also an, was wir sonst noch tun müssen. Wir müssen sicherstellen , dass wir hier irgendwie Platz haben , etwas Polsterung. Es sieht rundum sogar hübsch aus. Also lass uns weitermachen und das hinzufügen. Lassen Sie uns also etwas Polsterung machen. Und wir werden alle vier Seiten machen. Ein weiterer Trick bei der Polsterung besteht darin, dass, wenn Sie alle vier Seiten bearbeiten , die gleiche Menge ergibt Sie können es einfach in eine Zahl eingeben. Wenn Sie also etwa 50 Pixel eingeben, sollten es 50 Pixel auf allen vier Seiten sein. Pixel oder REM oder EM sind also grundsätzlich zwei verschiedene Arten, Größe zu beschreiben. Ich persönlich bevorzuge REM oder EM nur weil es etwas anpassbarer ist. Wenn Ihr Browser also auf eine Schriftgröße von 16 Pixeln eingestellt ist, dann basieren alle Schriftgrößen der folgenden Schrift auf dieser Grundgröße. Deshalb bevorzuge ich REM, einfach weil es ein bisschen anpassungsfähiger ist, denn wenn jemand seine Pixelgröße auf etwa 24 ändert , um die Dinge besser sehen zu können, passt es sich an und es wird diese sehr kleine Größe nicht beibehalten Es ist schwer zu erkennen. Also werde ich tatsächlich weitermachen. Oh, und auch die meisten Browser, Standardpixel, die Standardschriftgröße ist 16 Pixel. Also im Grunde ist alles, was in REM folgt, eine Multiplikation davon Ein REM besteht also aus 16 Pixeln. Zwei REM sind 32 Pixel. Drei REM ist 30 Nr. Drei REM sind 48 Pixel, et cetera, et cetera, et cetera, et cetera Wenn Sie sich also ein bisschen mehr daran gewöhnt haben, werden Sie den Dreh ein bisschen verstehen Also, was ich hier tun werde, ist, das auf drei REM zu ändern, und ich werde weitermachen und die Polsterung auf meinem CTA hier auch auf REM ändern , nur um mir das Leben ein bisschen zu erleichtern Und das sind ungefähre Bäuche. Ich spiele auch irgendwie mit den Schlingen herum. Also, wenn ich wieder hierher gehe und anfange, zu sehen, dass sich dort an den Rändern etwas bildet, lassen wir die Polsterung etwas größer machen Und das Tolle an RMT ist, es einfach um ein paar Zahlen zu erhöhen, und schon ist es eine Menge mehr Polsterung Zum Beispiel gibt es da eine Menge mehr Polsterung an der Seite. Ich denke, es könnten sogar bis zu zehn sein. In Ordnung, belassen wir es dabei. Im Moment scheint das eine gute Menge zu sein. Fantastisch. Wir haben also die Polsterung um unsere Elemente herum, und jetzt haben wir unsere beiden Elemente nebeneinander Schauen wir uns noch einmal unser Design an. Okay, eine weitere Sache, die man hier beachten ist, dass unser Text hier zentriert ist, und ich vermute, das ist auch zentriert , weil er quasi zentriert ist, oder? Das ist eine wichtige Sache, auf die Sie achten sollten , wenn Sie ein Design implementieren möchten, bei dem die Dinge zentriert sind, ob sie sich nach links neigen, sich nach rechts neigen Das wirklich Tolle an Flexbox und an der Verwendung von Google Chroma General ist, dass Sie im Browser selbst mit diesen Stilen herumspielen können diesen Stilen Sie müssen also nicht eine ganze Menge Sachen programmieren und sich dann fragen, ob es funktioniert Du kannst hier wirklich einfach damit herumspielen und sehen, ob es funktioniert. Ordnung, also was ich zuerst tun werde , ist, diese Elemente tatsächlich innerhalb dieses Containers zu zentrieren diese Elemente tatsächlich innerhalb dieses Sie werden also unseren Container hier sehen. Und wenn du hier unter dem Style-Teil nach unten scrollst , kannst du tatsächlich die Polsterung sehen Wir haben also zehn Gramm Polsterung an allen Seiten, und das sind 160 Pixel Polsterung an allen Seiten. Das ist der grüne Rand genau dort. Ziemlich cool, oder? Ähm, also die Mitte hier, das ist die Größe unserer eigentlichen Elemente selbst Also ein paar Probleme hier. Das Formular ist nicht wirklich ausgearbeitet, deshalb sieht es so geschrumpft Vielleicht ist der Text auch ein bisschen klein. Lassen Sie uns also weitermachen und diese Komponenten irgendwie konkretisieren und dann sehen, wie viel mehr Polsterung Polsterung und Margus wir unseren Elementen hinzufügen müssen Fangen wir also hier auf der rechten Seite von vorne an, weil es die komplexeste ist Und lassen Sie uns sehen, was wir tun können. Lassen Sie uns das, was wir hier tun, mit diesem kostenlosen Test-CTA beenden mit diesem kostenlosen Test-CTA Wenn wir es uns also genau ansehen, werden wir tatsächlich feststellen, dass die Kanten abgerundet sind und dass sie auch eine Art Schatten darunter zu haben scheinen eine Art Schatten darunter zu haben , weil das quasi ein Teil davon ist Und wenn wir es uns jetzt ansehen, gibt es keinen Schatten. Es gibt keine Rundung Außerdem gibt es eine erhebliche Lücke zwischen diesem und dem Formular selbst Was wir hier also tun wollen, ist ein paar Dinge zu tun. Wir wollen diese Kanten abrunden. Und tatsächlich scheinen diese Kanten ähnlich rund zu sein und einen ähnlichen Rand zu haben. Also könnten wir dafür einfach eine Klasse erstellen. Wir runden die Kanten ab und fügen dann den kleinen Schattenrand hinzu. In Ordnung, also lassen Sie uns eine Klasse namens Round Edges erstellen. Punktiere runde Kanten. Und gehen wir mal durch , welcher Div war das? Es war der CTA. Eine andere Sache ist also, dass Sie jedem Element mehrere Klassen hinzufügen können jedem Element mehrere Klassen hinzufügen Also fügen wir hier die zweite Klasse der runden Kanten hinzu. Und dann fügen wir hier die andere Klasse zu unserer Form von runden Oops Klasse. Runde Kanten. Aber weißt du eigentlich was? Ich habe meine Meinung geändert. Mir wurde klar, dass wir dieses Formular eigentlich in ein Div packen sollten dieses Formular eigentlich in ein Div packen weil dieses PTag hier Teil dieser größeren Sache ist, aber es ist nicht wirklich Teil des formal definierten Formulars Also lass uns das stornieren. Und lassen Sie uns hier ein weiteres Div erstellen. Hoppla, Div. Und dann lassen Sie uns das hier um unser P-Tag wickeln. Und dann fügen wir diese Klasse hier hinzu. Klasse entspricht Whoops. Abgerundete Kanten. Fantastisch. Geil. Nun, da wir diese Klasse erstellt haben, lassen wir sie etwas bewirken. Es gibt also eine CSS-Eigenschaft namens Border Radius. Und ja, ich habe viele davon auswendig gelernt, aber das ist erst, nachdem ich immer und immer wieder mit ihnen gearbeitet und immer wieder mit ihnen Sie können buchstäblich einfach nach CSS-Eigenschaften für einen Rahmen oder nach CSS-Eigenschaften suchen , um dies zu tun, und Sie erhalten eine vollständige Liste aller Eigenschaften, auf die Sie möglicherweise abzielen könnten Ähm, es gibt vielleicht sogar bessere Möglichkeiten, das zu tun, was ich hier mache 10. Fazit: Fazit. In diesem Video haben wir über viel gesprochen von den Grundlagen von CSS bis hin zur Gestaltung Ihrer eigenen Website. Zukunft sollten Sie in der Lage sein, Ihre eigene Website von Grund auf neu zu gestalten. Denken Sie daran, etwas nachzuschlagen , wenn Sie sich nicht sicher sind. Ich würde gerne sehen, wie sich Ihre Website entwickelt hat. Hinterlassen Sie also bitte den Link zu Ihrem Code, einem Screenshot oder der gehosteten Website im Tab Projekte und Ressourcen unten, damit ich all die harte Arbeit sehen kann , die Sie geleistet haben. Ich lese jeden Kommentar, jede Bewertung und sehe mir alle eingereichten Projekte an. Wenn Sie also Fragen haben, Sie gerne einen Kommentar im Bewertungsbereich unten hinterlassen oder mich direkt kontaktieren. Weitere Informationen dazu finden Sie auf meiner Profilseite. Wenn du mehr über Programmieren erfahren möchtest, schau dir die anderen Videos an, die ich auf meiner Profilseite habe. Ich habe auch Videos zu Next S und React auf meinem YouTube-Kanal und meiner Website verfügbar. Ich werde diese unten und in meinem Profil verlinken, wenn du daran interessiert bist , sie ebenfalls zu lernen , und wir sehen uns im nächsten Video.