CSS-Tutorial für Anfänger:innen: So gestaltest du deine Wordpress-Vorlagen | Eddie Irvin | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

CSS-Tutorial für Anfänger:innen: So gestaltest du deine Wordpress-Vorlagen

teacher avatar Eddie Irvin, Web Development + Coding

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

47 Einheiten (3 Std. 23 Min.)
    • 1. CSS-Tutorial für Anfänger:innen – Erste Schritte

      1:58
    • 2. Was ist CSS-Selektoren + Warum sorgen?

      6:12
    • 3. Was du für diesen Kurs vorbereiten musst.

      2:36
    • 4. Was ist der Punkt, dass du What's kannst?

      1:51
    • 5. Wie funktioniert der Code, um uns CSS verwenden zu können?

      1:25
    • 6. Hinter den Kulissen einer Form!

      6:50
    • 7. Mehr über CSS-Selektoren: Lau oder spezifisch

      6:29
    • 8. Wie speichern wir unsere Änderungen

      9:42
    • 9. Warum du ein Kinderthema verwendest?

      3:28
    • 10. So richtest du ein Kinderthema in Wordpress

      3:09
    • 11. Schnelle Übersicht zu Chrome DevTools: Unser neuer Freund

      5:19
    • 12. Auswahl unseres Codes auf verschiedenen Weise: Es gibt nicht nur eine Antwort!

      11:43
    • 13. Divs: Lass uns mit Margin + Füllung

      3:33
    • 14. Divs: Floats, Hintergründe + Seiten

      6:44
    • 15. Mit mehreren Selektoren für das gleiche Div SPINGEN:

      4:11
    • 16. Elemente verschWINDEN: Verwende die Eigenschaft

      4:39
    • 17. Divs: Es ist Zeit zum FLOAT

      2:11
    • 18. Die Platzhaltertext in deinem Formular verwenden

      7:23
    • 19. Schau dir deinen Code an: Platzhalter MISTAKE!

      1:10
    • 20. Mit Randnummern : Mache dies zur BEHEBE deines Codes

      2:22
    • 21. Was ist Text-Transform

      3:07
    • 22. Achte auf kleine Details: Line-Height ist wichtig

      3:16
    • 23. Den Text für deinen Platzhalter gestalten

      1:53
    • 24. Schnelle Durchleitung: HTML-Elemente, die du jeden Tag verwendest.

      5:48
    • 25. Mit Bildmaterial: Breite, Höhe + Retina-Friendly arbeiten

      10:27
    • 26. Arbeiten mit Links: Padding, Margin + Behebung eines häufigen Problems

      8:26
    • 27. Links zum Styling, die du dir ansiehst, wenn du über sie HOVER

      5:35
    • 28. Erstelle einen Link „Pop“, wenn du darauf klickst

      5:36
    • 29. Schnelle Übersicht: Responsive Design

      6:22
    • 30. Percentages, Pixel + der Border-Box „Hacken“

      5:26
    • 31. Ein Element zum AUFENTHALT führen

      3:39
    • 32. Centering: Text-Align VS. Randlinie

      4:05
    • 33. Sollen wir Styling in der HTML oder der CSS schreiben?

      2:35
    • 34. CSS Specificity: Welcher Code gewinnt?

      3:08
    • 35. Wie du die Korrupte Divs beheben

      4:00
    • 36. Löbe deine schwebenden Divs!

      4:42
    • 37. Formulare für diesen Bereich

      2:09
    • 38. Nächster Schritt: Gib den Eingaben Raum

      4:36
    • 39. Breite + Border-Box spart und das Mach

      1:54
    • 40. Formulare Hintergründe

      2:34
    • 41. Formrändern

      2:58
    • 42. Nächster Schritt: Text-Transform + Text-Align

      1:34
    • 43. Verstelle deine Schriftarten die Materie (und verwende Google Fonts!)

      2:38
    • 44. Die perfekte Submit

      6:20
    • 45. Erstelle die Submit mit dem Klick

      4:02
    • 46. Inspiration von anderen Websites: Modellierung ihres Codes

      2:02
    • 47. Erstelle ein Thema mit der Zeit + Ask Me nichts!

      0:44
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

401

Teilnehmer:innen

--

Projekte

Über diesen Kurs

f4f28905

Der COMPLETE zum neuen Leben und zur professionellen Aussehen deiner Website

BESCHREIBUNG

Bist du jemand, der mit Wordpress funktioniert und deine Websites mit der nächsten Stufe durch die Änderung ihres Looks und ihres Stils ausgehender gestaltet hat?

Oder vielleicht frustriert ist die Tatsache, dass du Änderungen vornehmen möchtest, aber du kannst nicht herausfinden, wie du es machst.

Vielleicht hast du versucht, deine Website besser aussehen zu lassen und das Beste kann auch nicht weiterzumachen, was du möglich kannst, aber du hast auch immer weiter.

Wenn du das nicht lernst, kann ich dir leider sagen, dass die Frustration nicht weggeht! Und so frustrierend wie jetzt ist es auch, stelle dir vor, was du dir mit einem Monat nicht oder mit einem Jahr nicht vertraut machen wirst, wie du deine Website immer noch besser aussehen kannst.

Ich WEISE, wie diese Frustration sich fühlt, ich war dort und ich weiß, wie es mit dem Ärger sein kann zu wissen, welche Art von Veränderungen machen zu wissen, die du machen möchtest, dann nicht weißt, wie du sie machst. Aber ich werde dir die richtige Möglichkeit kennen, die Websites zu gestalten, und das heißt CSS, und das möchte ich dir schon heute beibringen.

Sieh dir dieses Beispiel an, wie eine einfache langweilige Form einfach und schnell in etwas mobiles verwandeln kann! Ich werde dir zeigen, wie man das und andere Dinge wie das in diesem Kurs macht.

Stelle dir auch vor, wie es anfühlen wird, um hinter die Szenen der Wordpress-Website zu schauen und zu sehen, wie sie sich mit ihnen gestylt hat, und dann in der Lage ist, das Design von der Gestaltung deiner eigenen Website nachzustellen!

Stell dir die Verwendung von Code vor, die deine Website so viel besser aussieht so wie DER INSTANT du den Antrag hinzufügst.

Und wie wirst du das Gefühl machen, wenn du ein a Thema mitnehmen und es mit deinem Leben und deiner Persönlichkeit einspritzen kannst, das sich einfach und einfach CSS verwenden.

Dieser Kurs ist der vollständige Kurs zum Anfängerkurs und das genaue Tool, das du BRAUCHst, um deine Wordpress-Website zu gestalten.

Dieser Kurs ist dir jetzt UND in Zukunft sehr hilfreich und wird immer dann in der Frage nach CSS helfen. Es ist einfach, jederzeit Fragen zu stellen, ich werde die richtige dort sein und sie mit dir beantworten.

Nimm dir nun diesen Kurs an der anderen Seite

Wer ist die Zielgruppe?

  • Dieser Kurs richtet sich an Menschen, die an dem LOOK und dem Stil der Wordpress-Website Änderungen vornehmen möchten.
  • Dieser Kurs richtet sich an ANEINANDER bis in CSS und to
  • Dieser Kurs richtet sich an Menschen, die ihre Website schnell und einfach benutzerfreundlicher und einfach machen möchten.
  • Dieser Kurs richtet sich NICHT an jemandem, die sich nicht darum interessiert, wie auf ihrer Website aussieht
  • Dieser Kurs richtet sich NICHT an jemandem, die sich gerne über Möglichkeiten erzählt, die schnell und einfach einfach mit ihrer Website benutzerfreundlicher und lustiger machen können.
  • Dieser Kurs richtet sich NICHT an jemand, der das Lernen und die Entwicklung neuer Dinge

Anforderungen

  • Du solltest mit Wordpress vertraut sein
  • Du solltest sehr grundlegende Kenntnisse in HTML haben
  • Alle erforderlichen Software sind kostenlos (und die Download-Links sind enthalten)
  • Du solltest sicherstellen, dass dir mein teaching gefällt (bitte eine Vorschau eines preview Vorschau

Triff deine:n Kursleiter:in

Teacher Profile Image

Eddie Irvin

Web Development + Coding

Kursleiter:in

Hello! I've been working on websites for a decade and a half, first by starting with my own projects and then building sites for others. I started just with basic html, and since then have moved on to use Wordpress almost 100%, and design using CSS. I know php, jquery/javascript and I'm starting to learn React Native as well to start creating iOS/Android apps!

I want to save you time, and my CSS course on Skillshare is meant to get you up to speed quickly and without the headaches!

Please don't hesitate to reach out with any questions. Coding can be super confusing sometimes, and my goal is to make it as simple as it possibly can be!

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. CSS-Tutorial für Anfänger:innen – Erste Schritte: sind Sie jemand, der mit WordPress gearbeitet hat und möchten Ihre Visiere auf die nächste Ebene bringen , indem Sie ihr Aussehen und ihren Stil ändern. Oder vielleicht sind Sie frustriert, weil Sie Änderungen vornehmen möchten, aber Sie können nicht herausfinden, wie es geht. Vielleicht haben Sie versucht, Ihre Website besser aussehen zu lassen, und Sie haben das Beste getan, was Sie können, aber Sie bleiben immer stecken. Nun, wenn Sie das nicht lernen, tut mir leid zu sagen, dass die Frustration nicht verschwindet. Und so frustrierend es jetzt ist, stellen Sie sich vor, wie Sie sich in einem Monat oder einem Jahr fühlen werden, wenn Sie immer noch nicht wissen, wie Sie Ihre Website schnell und einfach besser aussehen lassen können. Ich weiß, wie sich diese Frustration anfühlt, weil ich dort war, und ich weiß, wie ärgerlich es sein kann zu wissen, welche Art von Änderungen Sie vornehmen wollen, aber dann nicht wissen, wie man sie macht. Aber ich habe den richtigen Weg gelernt, Websites zu stylen, und es heißt CSS, und das möchte ich Ihnen heute beibringen. Werfen Sie einen Blick auf dieses Beispiel, wie eine einfache, langweilige Form einfach und schnell in etwas Mobiles, Freundliches und Reaktionsfreudiges verwandelt werden kann . Ich führe Sie genau durch, wie Sie dies und andere Dinge wie es in diesem Kurs machen können. Stellen Sie sich auch vor, was es sich wie Zeh fühlen wird. Schauen Sie hinter die Kulissen jeder WORDPRESS Website, die Sie besuchen, und sehen Sie, wie sie es gestylt haben und dann in der Lage sein, dieses Styling für Ihre eigene Website zu modellieren. Stellen Sie sich vor, Sie verwenden Code, der Ihre Website so viel besser aussehen lässt, sobald Sie sie hinzufügen. Und wie wird es sich anfühlen, wenn Sie ein langweiliges Thema nehmen und das Leben in Ihrer eigenen Persönlichkeit schnell und einfach mit CSS injiziert ? Dieser Kurs ist der komplette Leitfaden für Anfänger CSS, und es ist das genaue Werkzeug, das Sie brauchen, um Ihre WordPress-Website zu stylen. Wenn Sie noch heute an diesem Kurs teilnehmen, erhalten Sie lebenslangen Zugriff. Und nicht nur das, dieser Kurs wird Ihnen jetzt und in Zukunft super hilfreich sein. Wann immer Sie eine Frage zu CSS haben, ist es einfach, jederzeit Fragen zu stellen, und ich bin mit Ihnen da, um sie zu beantworten. Klicken Sie auf diesen Kurs jetzt nehmen und wir sehen uns auf der anderen Seite 2. Was ist CSS-Selektoren + Warum sorgen?: Hallo und willkommen zu diesem Video. Hier geht es um CSS-Selektoren. Nun, um es super einfach zu machen, möchte ich nur, dass Sie über einen Selektor als Spitznamen für einen bestimmten Teil unseres Codes nachdenken. Nun, wenn du nicht kannst , kannst du keine Spitznamen auf bestimmte Teile deines Codes setzen. Wenn Sie versuchen, die Farbe zu ändern, ändern Sie die Schriftgröße der Änderung all diese Dinge später, Sie werden eine wirklich schlechte Zeit haben, weil Sie nicht auf das Richtige zielen. Du wählst nicht das Richtige aus. Okay, also gibt es zwei Arten von Selektoren. Es gibt I DS und Klassen, aber sie sind beide Spitznamen. Okay, also was die Grundlage dieses ganzen Videos ist, ich möchte, dass du nur OK denkst, alles, wovon er spricht, ist, Spitznamen an verschiedene Teile des Codes zu setzen. Okay, das ist so einfach wie es ist. Manchmal wird der Jargon ein wenig verwirrend, aber es ist nur, dass wir nur Spitznamen auf bestimmte Teile des Codes setzen. Also auf I d ist ein Selektor oder ein Spitzname, den Sie nur etwa einmal im Vergleich zu einer Klasse verwenden sollten, ist ein Spitzname, den Sie mehrmals verwenden können. Ich benutze gerne Klassen, weil Sie sie immer und immer wieder mit einem I. D.verwenden können D. Sie stecken irgendwie daran, dass Onley es einmal benutzt, und das gefällt mir überhaupt nicht. Okay, also benutze ich Klassen. Sehen Sie sich das hier an. P Raumklasse gleich und dann in Anführungszeichen Bananen, Sie können Spitznamen geben. Sie können geben, was auch immer Sie wollen. Zwei Teile Ihren Code. Sie können sie lächerliche Dinge nennen. Sie können sie Dinge nennen, die Ihnen helfen, Ihren Gedanken zu organisieren . Manchmal finde ich wirklich seltsame Spitznamen, nur weil ich finde, dass es Spaß macht und es ein bisschen spannender macht. Aber so wirft dieser bestimmte Teil des Codes einen Blick darauf. Sie können sehen, wenn ich darüber rolle. Es hebt bei p. Klasse gleich Bananen, die hier pinkeln. Das ist nur ein Textelement. OK, schreiben Sie einfach einen Textbereich. Im Grunde. Also sagt es okay mit dem P, es sagt ein Textbereich mit Spitznamen oder Klasse von Bananen. Okay, also komm her und du kannst sehen, dass es P-Dot-Bananen sind. Jetzt sind hier zwei Dinge los. Zunächst einmal sind wir in Chrom und wir sind wir in Dev Tools. Sie gelangen hierher, indem Sie mit der rechten Maustaste auf einen Teil Ihres Codes klicken und auf Inspect on klicken. Dadurch wird dieser Code zur Seite geöffnet. Wenn es so unten auf Ihrem Bildschirm ist, können Sie einfach diese drei kleinen Punkte hier klicken und dann zur Seite bringen. Ich mag es zur Seite, weil das für mich am sinnvollsten ist. Dieser Abschnitt ist also der HTML und dieser Abschnitt ist das CSS. Okay, also, wenn wir von diesem Abschnitt zwei gehen, schauen wir uns tatsächlich zwei verschiedene Arten von Dateien an. Jetzt können Sie jeden Bereich dieses Codes durcheinander bringen, und es wird nicht wirklich in den Code schreiben. Es ist also wirklich überreicht. Du machst dich einfach mit ihm rum, spielst mit und sobald du die Seite aktualisierst, bist du gut zu gehen. Also schauen Sie sich das noch einmal an. Also p Klasse gleich Bananen. Das ist der HTML-Code. So schreiben wir es. Klasse gleich und dann in Anführungszeichen, Bananen. Aber dann hier drüben, schau dir diese p dot Bananen an. Jetzt schau dir den Punkt an. Der Punkt ist, der dich hineinweisen sollte. Okay, das ist ein Spitzname, der ein CSS-Selektor oder eine CSS-Klasse genannt wird oder was? Ich nenne es gerne einen Spitznamen mit dem Punkt. Es ist ein Spitzname. Okay, also dieses P ist ein Blick auf das ist auf verschiedene Abschnitte. Es ist ein es sucht nach P-Bereichen oder Textbereichen mit Spitznamen von Punktbananen. OK, also hier ist die HTM außerhalb Klasse gleich Bananen. Und dann hier drüben ist es die CSS-Seite, die Punktbanane ist. Du verwendest also keine Punkte in diesem Bereich. Sie sagen tatsächlich Klasse gleich und dann Zitate, die Sie eingeben, was es ist. Aber hier drüben auf der CSS-Seite, die Art und Weise, wie wir zielen, das ist durch die Verwendung von Punkten für Klassen. Okay, jetzt, weil ich diesen Bereich mit diesem spezifischen Spitznamen habe, kann ich die Schriftgröße ändern. Ich kann die Farbe ändern. Ich kann die Zeilenhöhe ändern. Ich kann die Breite ändern. Ich kann alle möglichen verschiedenen Dinge nur in diesem Bereich tun, weil ich ihm einen Spitznamen im HTML gegeben habe . Und dann habe ich dann den Code für diesen Spitznamen im CSS geschrieben. Okay, genau hier möchte ich p dot Bananen sehen, die alle irgendwie zusammen waren. Da sind keine Räume. Das liegt daran, dass es vier p Elemente mit dem Spitznamen Bananas aussieht. Wenn ich hier einen Platz habe, was dann für ein Sprichwort? Heißt es, suchen Sie nach P-Elementen? Und dann in diesen p-Elementen, suchen Sie nach etwas anderem mit einem Spitznamen von Punktbananen. Okay, Der Grund, warum dieser Code so funktioniert, wenn Sie ihn zusammenstellen, könnte diesen Raum loswerden , ist, weil er nach P-Elementen mit Spitznamenbananen sucht. Es sucht nicht nach P-Elementen mit etwas anderem darin mit dem Spitznamen Bananas . Okay, das ist also eine große Unterscheidung. Nur ein kleiner Platz kann dich vermasseln. Wenn Sie diesen Code eingeben und alle seine P und dann Space Dot Bananen tun, ist es nicht auf der Suche nach dem Richtigen. Du hast das Falsche ausgewählt. Du hast das Falsche angegriffen. OK, also achten Sie sehr genau darauf, dass, wenn sie zusammengeschüttet werden, es nach Elementen sucht, die es hier nach eso wie Pete sucht. Es sucht nach P-Elementen mit dem Spitznamen Bananen wie diesem. Aber wenn Sie dort ein Leerzeichen setzen, sucht es nach Elementen mit einem P-Element, die den Spitznamen Bananen haben. OK, so dass Sie immer Dinge in anderen Dingen mit HTML haben können, es gibt so viele Boxen in anderen Boxen. Und dann gibt es Schriftarten, Insider. Es gibt Textbereiche innerhalb dieses und dann innerhalb von Textbereichen dort Spannweiten, und es gibt Abschnitte innerhalb dieses Bereichs. Es gibt also immer Abschnitte innerhalb von Abschnitten innerhalb von Abschnitten. Deshalb ist es manchmal praktisch, einen Raum zu setzen. Aber ich will nur, dass du das wirklich, wirklich bekommst, wenn wir einen Platz dort setzen, als es nach etwas in diesem Element mit diesem Spitznamen sucht . Aber wenn Sie es sagen, wenn Sie sie kombinieren, setzen Sie sie zusammen, als es nach diesem spezifischen Element sucht, dass P-Element dieses Textelement mit dem Spitznamen oder Klasse von Bananen Ich werde im nächsten Video sehen. 3. Was du für diesen Kurs vorbereiten musst.: In Ordnung. Also werde ich Ihnen zeigen, wie man sich aufstellt. Alles wird für Sie brauchen, um in diesem Kurs los zu werden. Jetzt müssen Sie eine Wordpress-Installation haben. Wenn Sie Hilfe benötigen, um Wordpress installieren. Das ist nicht der richtige Kurs für Sie. Es tut mir Leid. Es gibt viel Ressource ist, und ich kann versuchen, einige Sachen zu verknüpfen, aber Sie müssen mit einem frischen WordPress-Installation oder einfach nur Ihre Website beginnen. Was auch immer es ist, es muss nicht frisch sein. Aber Sie müssen nur sicherstellen, dass Sie haben, wo drücken Sie bereits installiert und bereit zu gehen . Also gehen Sie zu Plug Ins, stellen Sie sicher, dass Sie Kontaktformulare haben. Sieben. Okay, weil wir daran arbeiten werden. Dies ist ein toller Plug in. Wenn Sie irgendeine Art von Kontaktformular auf Ihrer Website benötigen. Das ist fantastisch. Aber wir werden wir diese Form stylen eso Nur stellen Sie sicher, dass Sie alle damit eingerichtet sind, und dann gehen wir zu Seiten sind tatsächlich weiß. Es tut mir Leid. Wir erstellen zuerst einen Kontakt für ihn und wir werden nur Standard. Nennen Sie es einfach alles, was Sie wollen. - Das ist in Ordnung. Und dann klicken Sie auf. Sparen Sie jetzt, was wir hier brauchen. Die Information, die wir brauchen, ist dieser Kerl dieses Stück Code genau da. Also werde ich das mit den Klammern kopieren. Das nennt man einen Kurzcode. Das brauchen wir. Okay, also kopieren Sie den Kerl dort, nachdem Sie Ihr Kontaktformular erstellt haben und Sie auf Speichern , dass sollte erscheinen, wenn Sie es nicht finden können. Aus irgendeinem Grund, wenn Sie auf Kontaktformulare klicken, sollten Sie diejenige oder dieses ist dasjenige sehen. Diese Standardeinstellung, wenn wir gerade getan haben, gibt es die Informationen direkt dort. Also gehen Sie zu Seiten und klicken Sie, fügen Sie neue und dann direkt in den Text von Ihnen könnte direkt hier Text. Und dann werden wir den Code einfallen lassen, den ich dieses Anfängerformular nennen werde. Es ist nicht wichtig, wie du das Zeug nennst, aber los geht's. Veröffentlichen, und wir haben jetzt haben wir diese ganze Sache eingerichtet. Jetzt haben wir tatsächlich ein Kontaktformular live auf unserer Website. Nun, ich mag diesen Perma-Link nicht, um dieses Fragezeichen mit Seite 87 zu sehen, das diese Art von saugt . Wir werden die Dauerhaftigkeit wirklich schnell ändern, um Namen zu posten, klicken Sie auf Änderungen speichern und dann gehen wir zurück zu Seiten alle Seiten und Anfänger-Formular. Nun, wenn wir auf Anfängerformular klicken, können Sie sehen, dass es ist es Anfängerformular direkt dort ist. Okay, also los geht's. Wir wollen zu diesem Anfängerformular gehen, und hier ist unsere Form sieht schön und hübsch aus. Es hat den ganzen Müll an der Seite. Also will ich dich wirklich. Teoh, stellen Sie sicher, dass Sie an diesen Punkt kommen, bevor Sie weitermachen. Wenn Sie nicht hierher kommen können, dann wird es schwierig sein, in den nächsten Videos mitzuverfolgen, wenn Sie diese oder Art von Post wieder sehen und jeden Schritt tun müssen . Ich weiß, dass ich ein bisschen schnell gegangen bin, aber wir werden im nächsten Video sehen, sobald ihr losgeht. 4. Was ist der Punkt, dass du What's kannst?: Hallo. Okay, warum machen wir das? Was ist der Sinn dieser ganzen Sache? Und wie funktioniert es? Also drüben auf der linken Seite. Hier, sieh dir das an. Dies ist das Dies ist die eigentliche Website. Das ist es, was Menschen angezeigt wird, die besuchen. Und dann, wenn Sie sich diesen Bereich ansehen, ist das HTML der gesamte HTML-Code für Ihre Website, und dann ist hier das CSS. Okay, CSS ist also eine separate Datei von einer HTML-Datei. HTML ist eine Art des Layouts, wie die Dinge passieren. Aber das CSS ist das ganze Styling. - Was? Wie die Dinge aussehen und so verwenden wir Selektoren, um verschiedene Teile des Codes ändern zu können . Es gibt mehr dazu in einem anderen Video. Aber im Grunde möchte ich, dass Sie das Konzept bekommen, was hier vor sich geht, dass, um hier zu diesem schönen Abschnitt der Ziege zu gelangen, wir zuerst diesen HTML los haben , der mit WordPress, einem viel davon ist schon für Sie geschrieben. Alles, was wir hinzugefügt haben, war die Form und dann wird alles andere gesorgt. Aber dann mit dem CSS ist das eine separate Datei, die separat geladen wird. Und, ähm, es erlaubt uns, bestimmte Teile des HTML zu ändern. Ok, so öffnen, Chrom öffnen. Wenn Sie nicht in Cromarty sind, öffnen Sie Chrom. Stellen Sie sicher, dass Sie zu diesem Bereich kommen können, denn das wird uns wirklich, wirklich hilfreich sein. , Wenn Sie nur die normale Webseite so sehen,können Sie entweder f 12 drücken oder, uh, lassen Sie mich wieder F 12 drücken, um da rauszukommen, waren Rechtsklick und klicken Sie dann. Inspection. Ok. Und dann wird das diesen Kerl hochziehen. Wenn dieser Typ aus irgendeinem Grund so niedrig ist oder wenn er wie ein separater Bereich ist , klicken Sie einfach auf diese drei Punkte hier und legen Sie dann das Dock über auf die rechte Seite. Das wird dir super hilfreich sein. Es ist nur sauberer. Es ist klarer. Sie können diese auch ein- und ausziehen. Und hier gibt es auch einen unteren Bereich. Aus irgendeinem Grund ist das so hoch. Zieh das einfach den ganzen Weg runter. Das brauchen wir vorerst nicht. Wir wollen nur sehen, dass HTML hier und dann das CSS im nächsten Video sehen 5. Wie funktioniert der Code, um uns CSS verwenden zu können?: Also eine Sache, die wirklich, wirklich nett über WordPress ist, dass alles irgendwie alles für Sie eingerichtet ist. Wenn Sie versuchen, Ihre eigene Website ohne WordPress zu erstellen und Sie setzen Sie Ihre HTML-Dateien hochladen und Ihre CSS-Dateien hochladen, müssen Sie diese CSS-Datei von mit in der HTML-Datei aufrufen. So ist es genau wie die HTML Files. Die Hauptsache, die geladen wird, wenn Sie zu einer Webseite gehen und es muss sie haben, muss im Grunde die CSS-Datei klingeln und sie einbringen. Andernfalls haben Sie nichts von diesem Styling. Aber mit WordPress, all das Zeug ist für Sie angeschlossen. Okay, also habe ich im Code gefunden, ich habe genau das gefunden, was die CSS-Datei ist. Ok? Und woher es eigentlich ist, woher es gerufen wird. Es ist also in der Kopfzeile, die Sie zwischen diesen Kopf-Tags sehen, es ist in der Kopfzeile, und dann ist es hier unten, normalerweise für WordPress. Es wird in Ihrem doppelten WP-Inhalt in Designs und dann in Ihrem Theme-Namen und dann den Stil , dass CSS-Datei. Manchmal rufen Sie eine CSS-Datei mit in einer anderen CSS-Datei an. Das musst du nicht tun. Das ist eine weitere Ebene von Sachen, um die Sie sich jetzt keine Sorgen machen müssen. Aber ich möchte nur, dass Sie wirklich den Grund verstehen, warum, wenn wir Änderungen am CSS machen , dass wir es auf der Website sehen, weil WordPress bereits die Arbeit für uns getan hat, um die CSS-Datei in die HTML-Datei uns zu verbinden. Wenn wir diese Änderungen vornehmen, tauchen sie auf. Alles klar, sieh ins nächste Bett. 6. Hinter den Kulissen einer Form!: Alles klar. Jetzt, wo wir über Selektoren wissen, wir ein wenig mit ihnen spielen und wir werden Chrome Dev-Tools verwenden, um wirklich herauszufinden , wissen Sie, wo wir zeigen sollen und wie wir sollen bestimmte Spitznamen zu bestimmten Abschnitten des Codes. So können Sie sehen, wo diese Anfängerform Sie haben, oder? Klicken Sie auf Ihren Namen, und klicken Sie dann auf Überprüfen. Dann zieht es direkt in den Code. Es führt uns genau dorthin, wo wir sein müssen. Sie können sehen, dass es dieses p-Element gibt, das ein Textelement auf ist, und dann hat es Ihren Namen genau dort erforderlich. Wenn ich mit der rechten Maustaste darauf klicke und Text bearbeiten klicke, kann ich das sagen, was auch immer ich will Boom sagen. Sieh dir das jetzt an. Das hat den tatsächlichen Code der Webs nicht geändert, dass, wenn ich die Seite neu lade, die weg ist und das ist die Schönheit der Totenwerkzeuge ist, dass ich mit allem herumwirren kann. Ich kann eine Website ändern, wie ich will, und wenn ich sie aktualisiere, habe ich sie nicht vermasselt. Aber wenn Sie Änderungen bewirken wollen, müssen Sie sicherstellen, dass alle Änderungen, die Sie hier vornehmen. Du warst in der Lage, Teoh. Kopieren Sie diese zurück in Ihren Code im Backend von WordPress. Okay, wenn wir also CSS Änderungen vornehmen, werden wir die Änderung vornehmen, damit wir sehen können, was mit ihnen passiert. Wird das in die CSS-Datei im WordPress-Back-End kopieren. Wenn dir das jetzt keinen Sinn ergibt, jetzt keine Sorgen darüber. Ich möchte nur, dass Sie sich auf Selektoren konzentrieren und mit Selektoren spielen. Also werfen wir einen Blick auf diese Eingabe direkt hier. Wir werden mit der rechten Maustaste auf diese Eingabe klicken und klicken. Überprüfen Sie, und Sie können sehen, dass für eine Sekunde. Es hat das Grün um ihn herum. Es hat einen blauen Bereich. Es hat ein kleines Haar von einer Orange. Ich weiß nicht, wie groß du dir dieses Video angeschaut hast, aber es hat ein Haar mit orangefarbenem Rand um ihn herum. Sieht Sieht aus wie eine orangefarbene Grenze. Ist es eigentlich nicht. Es ist nicht orange gewachsen und sagte uns nur, oh, hey, es gibt hier eine Grenze. Schauen Sie sich die Grenze an. Es färbt verschiedene Teile des Code-Waldes, so dass wir wirklich eine gute Vorstellung davon bekommen was in diesem Bereich vor sich geht, anstatt es nur hervorzuheben. Es hebt es hervor, gibt mir verschiedene Highlights für verschiedene Dinge, um mir verschiedene Dinge über den Mantel zu erzählen. Wenn wir also hierher kommen und sehen, dass dieser Top-Typ uns zeigt, weißt du, er hat einen Hintergrund, er muss wieder auf das Bild. Es hat eine Grenze, einen Grenzradius Farbe, der all das Zeug klopft. Lassen Sie uns einige dieser Dinge deaktivieren. Sie können sehen, was los ist. Also lassen Sie mich ungeprüften Hintergrund. Schau, was das für tot ist. Plötzlich sind diese Hintergründe für alle Eingaben verschwunden. Nun, wie kommt es, den Hintergrund auf allen Eingängen zu ändern? Weil der Selektor hier oben ein sehr allgemeiner Selektor war. Es hat keine Eingaben mit dem Spitznamen von Bananen gesagt. Es wählte Eingänge, alle Eingänge. Das ist also wirklich praktisch an CSS ist, dass, wenn Sie eine Änderung vornehmen, ich einfach ein Kontrollkästchen deaktiviere. Es verändert all diese verschiedenen Dinge auf einmal, ohne jedes einzelne durchgehen und ändern zu müssen. Okay, das ist also wirklich, wirklich praktisch. Lass uns diese Dinge durchgehen, nur damit du sehen kannst, was los ist. Also, Hintergrundbild. Das ist eigentlich ein Backup zu diesem Hintergrund hier. Wenn der Hintergrund nicht funktioniert, dann wird er ein Hintergrundbild haben . Eigentlich gibt es da ein bisschen Zutat, schätze ich. Nein, nein, es ist alles gleich. Farbe 2 55 bis 55 bis 55. Okay, ähm und dann Grenze. Sieh dir das Chaos an. Mit der Grenze. Manchmal sehen die Standardgrenzen von Browsern wie 1993 aus. Also bist du wahrscheinlich das, warum das hier ist. Denn die Standardeinstellung sieht so aus, was schrecklicher Randradius ist. Das ist, äh, das ist die Du weißt, wie kreisförmig die Grenze ist. Lassen Sie mich das auf 20 ändern, um zu sehen, ob wir es sehen können. Ja, sieh dir das an. Sehen Sie? Sehen Sie, ich war kreisförmig. Das ist, wie Sie diese Veränderung beeinflussen. Die Farbe des ist die Textfarbe des Textes. Also, hallo. Wie geht es Ihnen? Wo ist sie? Tschüss. Tschüss Vibe mit Bob. Ein Knochen. Oh, jetzt, sieh mal, was passiert ist. Ich fing an, hier zu tippen, und plötzlich ist der Code, an dem ich gearbeitet habe, verschwunden. Wo ist es hingegangen. Es ist hier unten gelaufen. Eigentlich gibt es eine ganze Reihe von Code, der auftauchte, weil ich mich darauf konzentrierte, weil ich darauf geklickt und mit der Eingabe begonnen habe. Der Code hat sich tatsächlich geändert. Okay, so können Sie hier Eingabe sehen und dann Text Kohle und Fokus eingegeben. Es gibt eine ganze Reihe von Code, wenn ich darauf klicke. Es ändert tatsächlich Teoh, um eine andere Art von CSS anzuzeigen. Das ist also wirklich praktisch, weil es Ihren Code zum Leben erweckt. Weißt du, Leute auf Dinge klicken und sich über Dinge bewegen, kannst du deinen Code automatisch ändern lassen. Und das ist das, was ihm Leben erweckt. Sie können sehen, dass sich die Grenze tatsächlich ändert, wenn ich darauf klicke. Das ist praktisch, weil es mir irgendwie zeigt, wo ich bin. Wenn ich das deaktiviere, wird dieser Bereich des Codes nicht wirklich hervorgehoben. Es macht also wirklich Spaß, CSS verwenden zu können, um die Seite lebendig zu machen. Jetzt, in diesem Fall, benutzt es diesen Fokus, um sagen zu können, jedes Mal, wenn Sie sich darauf konzentrieren, als diesen Code stattdessen auszuführen und dann, dass dieser Code den regulären Code überschreibt . Okay, hier unten ist es nur der reguläre Eingabecode. Aber sobald ich mich darauf konzentriere, dann wird dieses andere Zeug in den Blick gerückt. Okay, wenn ich mich nicht mehr darauf konzentriere, lass es mich sehen. Wie machen wir es? Mein Bob wegen Bob, darüber,wo wir dort hinlegen können. Mein Bob wegen Bob, darüber, Okay, also, äh, jetzt habe ich abgeklickt. Ich klickte in Ah, wissen Sie, nur einen weißen Bereich, den ich nicht auf die tatsächliche Eingabe geklickt habe. Ich klickte auf einen anderen Bereich, und dann ging ich in den Code und fand diesen spezifischen Abschnitt wieder, damit ich ihn anzeigen kann ohne den fokussierten Code zu sehen. Ich möchte nur den regulären Code sehen, wenn ich meinen Fokus nicht auf diesen Bereich der Webseite . Also zurück zu hier ist, welche Farbe. Das ist eigentlich die Farbe des Zeugs, das du eingibst. Okay, wenn du also Farbe machst, ist das keine Hintergrundfarbe. Das ist eigentlich Farbe des Textes dort. Und dann klopfte. Sieh dir das an. Wie lustig ist das? Und denken Sie daran, dass das alle auf einmal verändert. Sehen Sie, dass dieser Name, das Feld, das E-Mail-Feldund das Betrefffeld auf einmal geändert Feld, das E-Mail-Feld wird. Das ist die Macht von CSS ist, dass Sie eine Änderung vornehmen und dann alles auf einmal ändern und dann mit Blick auf das mit 100%, damit Sie sehen können, dass es all diese verschiedenen Dinge gibt, die spielen, wissen Sie, machen Ihre Website kann lebendig werden und so aussehen, als ob sie lebt und atmet und auf Sie reagiert. Wenn Sie nichts davon tun, dann wird es entweder wie 1993 aussehen, oder seine Leute werden verwirrt sein, wo ich bin oder was los ist. Aber wenn Sie nur ein paar Änderungen vornehmen, wird Ihre Website ein völlig anderes Gefühl haben und es wird viel professioneller aussehen. 7. Mehr über CSS-Selektoren: Lau oder spezifisch: Nehmen wir nun an, dass Sie Änderungen an einem bestimmten Teil Ihres Codes in Ihrem in Chrome beeinflussen möchten, und Sie haben Deb-Tools geöffnet. Denken Sie daran, dass F 12 oder Ihre Zukunft richtig ist. Klicken Sie auf den Bildschirm und klicken Sie auf. Inspection. Dann wird das Fenster auf der rechten Seite hier erscheinen. Um, aber was Sie tun, was Sie tun möchten, ist, dass Sie wollen, rechten Maustaste und klicken Sie dann auf Inspect auf den bestimmten Teil des Codes, den Sie jetzt ändern möchten . Normalerweise ist Chrome ziemlich gut damit, ähm, Ihnen zu helfen, Ihren Code zu bilden. Wenn du hierher kommst, sieh dir das Plus hier an, das wird eine neue Stilregel schaffen. Nun, das ist wirklich, wirklich praktisch. Denn wenn Sie nur wissen, Sie rechts, Sie rechts, klicken Sie auf einen bestimmten Teil des Codes und klicken Sie auf neue Stilregel. Es wird so ziemlich mit etwas auftauchen, das in der Lage sein wird, Veränderungen für diesen bestimmten Bereich zu beeinflussen . Aber das Problem ist, manchmal wird Chrom ein wenig zu spezifisch oder ein wenig zu breit. Nun, was ich damit meine ist, dass es keinen Spitznamen für diesen spezifischen einen kleinen Bereich tatsächlich nur das P-Element hochgezogen hat. Was bedeutet, wenn ich den Code für dieses p-Element geändert habe, wird es alle P-Elemente auf der gesamten Website ändern. Das bedeutet, dass alles, was Text ist, über die neu gefundene Größe 40 PX geändert wird. Schau, was passiert ist. All diese ändern sich. Und wenn ich dann weitermache, wenn ich durch Block-Posts oder irgendetwas anderes gehe, wäre das ganze Zeug 40 Pixel hoch. Ähm, das ist nicht gut. Manchmal ist Chrome gut, wenn Sie, uh, wenn Sie auf diese neue Stilregel klicken, wird es Sie irgendwie direkt zum Selektor bringen. Sie brauchen es wird den Spitznamen finden und es wird den Spitznamen darauf setzen. Aber manchmal ist es so breit, und es hilft nicht, damit wir verschiedene Wege hier schwächen können. Nun, zuerst einmal, lass mich das loswerden. Zuallererst können wir einen Spitznamen in den HTML setzen. Nehmen wir an, wir wollen diesen Bereich ändern. Wir klicken mit der rechten Maustaste und wir klicken auf als html. Und dann innerhalb dieses P-Tags, hier tun wir. Weltraumklasse ist gleich Bananen. Und jetzt, wie Sie abklicken, um zu klicken, um irgendwie es geschehen. Sie können nicht die Eingabetaste drücken , denke ich, denn das wird nur eine nächste Zeile machen. Aber jetzt hat dieses Gebiet eine Klasse von Bananen. Nun, wenn wir klicken, so denken Sie daran ist gerade jetzt ausgewählt. Wenn wir auf neue Stilregel klicken, Chrome sieht, dass und bemerkt, dass und dann gibt mir, dass Punkt Bananen gibt mir die Klasse der Bananen. Also, wenn wir jetzt etwas ändern, wird Lee das eine kleine Gegend ändern. Okay, also möchte ich, dass du diesen Knopf die ganze Zeit benutzt. Sie werden diese Schaltfläche aton verwenden, aber stellen Sie sicher, wenn Sie darauf klicken Sie Ihre erste, während Sie den richtigen Bereich auswählen. Aber stellen Sie sicher, wenn Sie darauf klicken, dass Chrome, überprüfen Sie doppelt, was Chrome tut. Sie stellen sicher, dass es nicht zu breit ist die Auswahl der P-Bereiche für die gesamte Ihrer Website und auch, dass es nicht zu spezifisch ist. Lassen Sie mich Ihnen hier eine Idee geben. Wenn ich das Recht habe, klicken Sie darauf und klicken Sie auf Inspect. Deshalb klicke ich mit der rechten Maustaste auf die erste Eingabe für den Namen unter dem Namen und klicke auf. Inspection. Und dann habe ich hier geklickt. Schauen Sie sich diese ganze Sache Import Dot wc Haben sieben Form Kontrollpunkt aufmerksam zu sein. Tech Start W Boson bestätigt seinen Rekord. Das sind fast zwei spezifische. Nun, wenn Sie daran Änderungen vornehmen, werden Sie sehen, dass es auf Lee zwei aus diesen drei Kästen geändert hat. Dieser Bereich hier unten ist ein Textfeld. Das ist definitiv anders. Aber diese drei Felder, die dieselbe Größe hatten, sehen das an. Sieh dir ungefähr die gleiche Größe an, die ich denke, Oh, Minute. Ich gehe mit der rechten Maustaste auf den einen kleinen Bereich, und es wird alle drei ändern, aber weil es zu spezifisch ist, hat er diesen Kerl tatsächlich ausgeschlagen. Nun, ich weiß nicht, warum genau, aber ich werde anfangen, ein paar dieser Spitznamen zu nehmen, und ich werde eigentlich von hinten anfangen. Also werde ich, äh, wo, also wähle ich das aus. Ich werde den Kerl ausziehen. Also denken Sie daran, dass der Punkt kommt mit dem, was auch immer danach ist, als Spitzname. Okay, also ist dieser Punkt WP f sieben Validierungen erforderlich, dass alles zusammen geht, also werde ich mit diesem Punkt anfangen und das Ganze rausnehmen. Löschen. Jetzt sieh mal, was passiert ist. Bumm. Boom, Boom. Alle drei dieser Luft wechseln sich jetzt. Also passierte etwas, wo, äh, Chrom. Es gab mir einen Selektor, um den ändern zu können, den ich ändern wollte. Aber es war so spezifisch, dass es tatsächlich nicht alles änderte, was ich sagen wollte. Ich wollte das nicht einfach ändern. Ich wollte Änderungen auf alle drei oder sogar auf alle vier bewirken. Aber wirklich, das ist ein anderes. Dieses Textfeld ist etwas anderes. , Um, also möchten Sie Chrome verwenden, um diese neuen Stilregeln hinzufügen zu können, weil es Ihnen hilft. Es beschleunigt dich, aber lass es nicht zu breit sein. Wie der Stück-Selektor, den wir vorher gemacht haben, würde der gesamte Text, alle P-Elemente auf Ihrer gesamten Website auswählen . Wir mussten dem einen Spitznamen Bananen geben. Richtig. Uh, aber dann war es, ähm es war zu fokussiert, so dass wir tatsächlich verpasst haben, etwas Code zu ändern. Nun, lass mich das mit diesem Kerl erledigen und sehen, was passiert. Ich werde das erledigen. Lassen Sie diesen zweiten Spitznamen oder diese zweite bis letzte Spitzname. Jetzt sehen wir, was jetzt passiert, bleibt der Code noch. Es bleibt immer noch. Also ist es wirklich, wirklich praktisch hier, dass vielleicht alles, was ich beim Get Go brauchte, nur Eingabe war. Das ist also das Element, richtig? Mit dem Spitznamen von WP Debbie PCF sieben Form Control Das ist alles, was ich brauchte, um Veränderungen auf diesen drei beeinflussen zu können . Aber wenn ich auf dieser rechten Maustaste klickte auf diese und klickte, überprüfen Sie markiert es markiert diesen Bereich und klicken Sie dann auf diese neue Stilregel. Chrome gab mir so einen ganz spezifischen Spitznamen für diesen Bereich, dass ich war, äh, ich habe mich irgendwie in den Fuß geschossen, weil ich so spezifisch wurde, dass es nicht war es nicht genug gebracht wurde, um genau die Dinge zu beeinflussen, die ich wollte Wirkung. Also die Regel hier ist, achten Sie darauf, wie Chrom bestimmte Dinge wählt, und dann müssen Sie entweder einen Spitznamen hinzufügen, um es spezifischer zu machen, oder Sie müssen vielleicht einige Spitznamen herausnehmen. Um Teoh in der Lage zu sein, stellen Sie sicher, dass Sie die Änderung, die Sie wollen, wirklich beeinflussen können Teoh Effekt in diesem Bereich. Also hoffe ich, dass das hilft. Ich werde das nächste Video sehen 8. Wie speichern wir unsere Änderungen: Alles klar, was wir jetzt tun werden, ist, dass wir die Änderungen, die wir vornehmen, in den Tiefenwerkzeugen speichern . Nun, das Problem ist mit DEPT. Tools ist, dass alles vorübergehend, gut und schlecht ist. Die Tatsache, dass Sie wissen, wie Sie Änderungen hier vornehmen, wenn Sie zurücksetzen, wenn Sie die Seite aktualisieren, sind sie weg. Eso Es ist in mancher Hinsicht schön, aber auf andere Weise müssen wir sicherstellen, dass wir unsere Änderungen speichern. Das werden wir also tun. Wir werden dafür sorgen, dass mein Name Bobby Jones ist, wenn Leute eintippen . Ich möchte, dass dieser Text anstelle der aktuellen und der aktuellen Farbe gelesen wird. Es geht also zwei Dinge vor sich. Zuerst müssen Sie diesen Bereich auswählen, oder? Aber es ist auch nicht nur die Auswahl dieses Bereichs, sondern die Auswahl, wenn ich mich darauf konzentriere. Jetzt können Sie sehen, wenn ich auf diese verschiedenen klicken, können Sie sehen, dass sie sich ändern. Können Sie die Hintergrundänderungen sagen und dann gibt es eine blaue Linie um sie herum. Das liegt daran, wenn ich mich darauf konzentriere, bringt es mir einen anderen Satz von CSS. Okay, also für diese Eingabe. Wenn ich mit der rechten Maustaste klicke und auf Inspect klicke, zeigt es mir einen wichtigen in all diesem Gobbledygook . Ähm, aber ich will es nicht einfach ändern. Wann? Wenn es ist, wenn ich es nicht so ausgewählt habe. Siehst du, wie es den grauen Hintergrund hat? Ich möchte es ändern, um es rot zu machen, wenn ich darauf klicke, wie sie es ausfüllen, ich wollte gelesen werden. Okay, Ähm, also klicken Sie mit der rechten Maustaste und klicken Sie dann auf Überprüfen, wenn Sie darauf klicken. Es bringt mich nur so weit, weil es mir nicht den Colin-Fokusbereich des Codes hier gibt. tut mir also leid. Das ist verwirrend. Sieh nur zu, was ich tue, und du kriegst es so, wie ich es tue. Okay, das hier haben wir im letzten Video gefunden. Das war gut genug. Zehenfokussieren Sie sich auf diesen einen Bereich. Aber was wir eine Richtung machen werden, benutze dieses Pin-Werkzeug hier. Aber was wir eine Richtung machen werden, Toggle Elemente Zustand, und wir werden uns jetzt konzentrieren. Was das tut, ist, dass es den Code zwingt, mir die fokussierte Art dieses Codes zu zeigen. Wenn ich mich auf diesen Teil des Codes konzentriere, was aus? Was zeigt es mir sonst so, also unkontrolliertes Überprüfen und un check. Dies ist super praktisch, weil Look, es ist fast ein Ziff. Ich bin nur durch Un Check hier drüben. Es ist fast so, als ob ich auf diesen Bereich klicke und dann so abklicke. Siehst du das? Okay, aber ich mache es jetzt tatsächlich im Code, also zeigt es mir genau das, damit du das alles sehen kannst. Colin, Focus, Colin, Focus. Dickdarm, Focus. Cullen, fokussiere dich. Das ist es, was es zeigt. Darauf benötigte ich Zugang, weil ich die Farbe des Fonds ändern wollte, als ich mich darauf konzentrierte. OK, eso hier kommen wir rüber, und das ist Farbe hier. Nummer. Lasst das lesen. Sie könnten auch einfach rot eingeben, wenn Sie möchten. Das ist in Ordnung. Und sieh mal, da gehen wir. Und sieh mal, Wir sind alle bereit. Das ist großartig. Also, was wir jetzt tun werden, ist, dass wir den Code nehmen, und ich werde von unten nach oben wählen. Sieh dir das an. Ich habe die Klammer da. Machen Sie nicht alle Medien, sondern starten Sie einfach vom Tretlager und gehen Sie dann nach oben und sie wollten es kopieren. Und dann, als wir in mein gebloggtes Dashboard gehen. Wir erhalten Zugang zum Erscheinungsbild Editor. Sie sehen das, dann ist das erste, was es öffnet, Stil, dass CSS. Jetzt werden Sie dies in jeder Wordpress-Installation zu sehen. Es wird bei Punkt CSS gestylt werden. Okay, jetzt, dieses 2016-Thema kam mit diesem spezifischen Stil. Sie können alle Vorlagen auf der rechten Seite sehen. Hier geht's. Hier unten können Sie das Stylesheet sehen. Das ist es, was wir ändern werden. Das ist, wo wir den Code für das, was wir tun, in die Tiefe Werkzeuge. Also werde ich gehen und ich werde jetzt nach unten scrollen. Das sieht verrückt aus. Hier gibt es so viele Informationen. Oh, meine Güte. Was wir suchen, ist, dass wir nach der Pause zwischen dem reaktionsfähigen Zeug und dem regulären Zeug suchen. Nein, das erkläre ich noch ein bisschen mehr, wenn wir hier gehen. Okay, also siehst du diesen Medienbildschirm und Männer mit Gleichen bla, bla, bla, bla, bla. Willst du nur nach Medienbildschirm suchen? Weil das uns helfen wird? Wo befindet sich der erste Medienbildschirm? Komm schon, komm schon, komm schon, komm schon, komm raus. Da bist du ja. Oh, ich schätze, das war der Anfang. des Gebietes. Okay, wir werden wenig gehen, um Medienanfragen direkt dort zu sehen. Ich möchte davor beginnen, weil Medienabfragen alles über responsive Design sind und es den Code basierend auf der Größe der Seite ändert, um sicherzustellen, dass wir unseren Code darüber legen , weil alle CSS-Code-Rechte über anderen CSS-Code. Also muss es irgendwie strategisch sein, basierend darauf, wo Sie es setzen. Wenn du dir darüber Sorgen machst, dann mach dir keine Sorgen. Gehe einfach zum Ende des Codes und lege es den Code dort ein. Aber wenn Sie nach Medienanfragen suchen können und direkt davor, werde ich nur einen großen Platz schaffen, weil ich es beim nächsten Mal einfacher für mich machen kann. Und ich werde einfach den Code dort einfügen und du siehst keine sagt Farbe rot. Es hat all diesen Müll mit ihm und klicken Sie dann auf Datei aktualisieren. Der lustige Teil hier ist,dass wir den Code geändert haben. , Jetzt sollte das gleiche Zeug, das in Deva Tools war, auf unserer Seite sein. Okay, wenn wir also zwei Seiten zurückgehen, alle Seiten und dann sehen wir, wenn ich Henry Bob tippe. Sieh dir das an. Es ist jetzt rot wegen diesem Code. Wir brauchten das nicht alles. Wir gehen zurück zum Dashboard und dann Aussehen und Editor. Und wenn wir dann nach unten zu diesem leeren Raum scrollen, mache ich den leeren Raum groß genug für mich, um es leicht zu finden. Ich habe nicht genug Zeit genommen, um es groß genug zu machen. Normalerweise legen Sie hier einen riesigen Raum. Genau das, was ich durchscrolle. Ich kann den genauen Bereich finden, in den ich gehen möchte, aber da ist er. Das könnte tatsächlich funktionieren. Nun, wenn ich etwas von diesem Zeug rausnahm, meine ich, Eingabetyp, Passwort. Nichts von diesem Zeug ist ein Passwort, also könnte ich das wahrscheinlich herausnehmen, wenn du anfängst. Mach dir keine Sorgen darüber, wie viel du raushacken musst. In der Tat wurde ein Teil dieses Codes tatsächlich dupliziert, weil die Hintergrundfarbe in der Rahmenfarbe in der Umrisslinie. Das haben wir nicht mal geändert. Also kappen wir nur den gleichen Code über. Es ist wie, wenn es geladen wird, wird es diesen ganzen Brocken über den vorherigen ganzen Brocken laden. Und obwohl alle seine Farbe Rot änderten. Ich habe noch diese anderen Dinge mitgebracht, aber es ist nicht zu groß, wenn du willst. Wenn du ein perfekter Coder sein willst, wirst du versuchen, genau so präzise und eng zu sein und so weniger Codas möglich zu haben. Wenn du anfängst, bringe es einfach an die Arbeit, richtig? Bringen Sie es einfach an die Arbeit. Also hat es funktioniert. Also sind wir gut. Genau das haben wir getan. Wir wollten damit herumspielen, mit anderen Sachen können. Ich gebe dir noch ein paar Dinge, mit denen du rumspielen kannst. Ähm, lass mich wieder hierher gehen. Also möchte ich mit der rechten Maustaste klicken und dann auf „ Inspect und dann erneut im Hinterkopf behalten. Wir verwenden dieses Pin-Werkzeug, um auf Focus zu klicken, um sicherzustellen, dass der Code 4 geändert wenn er sich darauf konzentriert. Okay, James, James, äh, und das ist es, was ich will, dass du mit dir spielst. Ich möchte, dass du mit der Schriftgröße spielst, also ist das Schriftstrichgröße, und dann machst du was auch immer Nummer und dann p x. Okay, das ist die Größe von 20 p x 20 Pixel. Es sind 40, es gibt 60, da sind 10. Es gibt zu zwei, 20 und 200. Also spielen mit Find Größe und dann will ich auch, dass Sie mit spielen, wo wir gehen. Ich möchte, dass du mit Farben spielst. Nun, du kannst diesen Kerl mit geschickten Werkzeugen umziehen. Sie können auch sehen, dass Sie diesen kleinen Selektor-Typ sehen. Dies ist eigentlich wie ein Farbwähler, so dass Sie einen beliebigen Teil der Website auswählen können. Um sich das anzusehen, ist es wie eine, äh, es ist wie eine kleine Lupe. Gut, das blaue Halsband, und das ist irgendwie lustig. Das Blau hat all diese verschiedenen Töne darin, aber Sie können jeden wählen. Sie können eine beliebige Farbe wählen und sie passt zu dieser Farbe. Sie klicken einfach und es wird es tun. Mal sehen, ob ich das Blau wählen kann. Da gehen wir. So passt es jetzt, dass blau, so ist es wirklich, wirklich praktisch dieses Farbwähler-Tool Spielen Sie mit diesem. Klicken Sie einfach rechts auf den Farbbereich rechts dort und spielen Sie einfach mit und spielen Sie dann mit der Schriftgröße und versuchen Sie dann, diesen Code-Raum zu kopieren. Denken Sie daran, von den Klammern direkt dort, wählen Sie die Klammern bis zum ganz, ganz oben hier. Wählen Sie nicht alle Medien aus. Das brauchst du nicht. Aber dann all das Zeug, wenn du das kopierst und in, äh, lass mich sehen. Also kopieren und das Dashboard und dann Erscheinungsbild Editor und öffnet das Stylesheet sofort. Du hast auch Zugriff auf all diese anderen Sachen. Aber wir arbeiten nur an dem Stylesheet. Gehen Sie dahin, wo es steht, wo Medienabfragen beginnen, dass ich einen ausreichend großen Platz habe. Habe ich. Dieser Raum war super hilfreich, dass ich das wieder finden würde. Und ich werde das hier unten beschleunigen. Nun, sieh mal, was passiert, wenn du einen Code hast, den du vorher gesetzt hast und dann im Grunde genau das gleiche Zeug anvisierst , aber nur ein paar Sachen änderst. Du brauchst diesen alten Code nicht. Okay, also brauchst du nur einen Abschnitt von, du weißt, dass was auch immer deine Änderung Code ist, du musst nicht behalten, dass du nicht willst, wie, wie, du weißt schon, genau wie mehrere der gleichen exakten Sache. Es wird nur das allerletzte Zeug nehmen, weil CSS immer Rechte über sich selbst hat, es schreibt Das Neueste ist, was gewinnt. Grundsätzlich, in dieser Situation, es sei denn, Sie haben den Kerl das Ausrufezeichen wichtige Sache vor sich . Aber stellen Sie sicher, dass Sie nur einen dieser Abschnitte behalten, wenn Sie dies mehrmals tun und verschiedene Dinge ausprobieren, als sicherzustellen, dass Sie nur einen anderen Abschnitt dieser Art von Code haben . Okay, ich hoffe, das hat dir geholfen und ich werde es im nächsten Video sehen. 9. Warum du ein Kinderthema verwendest?: Alles klar. Also die Nummer, die Sie getan haben, die ich will, dass Sie , Ah, sichern Sie nur eine Sekunde und erkennen, dass es mehrere, verschiedene Möglichkeiten gibt , Dinge auf Ihrer Website speichern zu können. Ich benutze eine andere Art und Weise, tatsächlich, mit FTP-Client und Software namens No Plus kein Notizblock Plus. Außerdem gibt es auch Text Wrangler. Und es gibt eine Reihe von verschiedenen FTP-Software ist, dass es eine namens Cyber Ente, die ich zuvor verwendet habe. Uh, aber im Grunde ist der beste Weg, ohne etwas herunterzuladen, einfach 11 Tab mit Ihrem Stylesheet offen zu halten und dann den anderen Tab mit Ihrem HTML offen zu halten. Das ist dann, wenn du daran arbeitest, änderst du verschiedene Dinge. Sie verwenden Dev-Tools und was auch immer. Dann könnten Sie einfach wieder zur anderen Registerkarte wechseln und dann, wissen Sie, dann, dann, Sie wissen, Ihre Änderungen vornehmen, klicken Sie auf Datei aktualisieren und dann Ihre Seite aktualisieren, so dass wir nicht weiter zurückgehen müssen und innerhalb der gleichen exakten Registerkarte. Auch mit deiner FTP-Software,wirst du gehen. FTP-Software, Also, wenn Sie sich anmelden, werden Sie sehen, dies wird Ihre Installationsdatei Ihre gesamte WordPress-Installation . Sie werden sehen, WP Admin Inhalt enthält all diese Sachen Wenn Sie zu WP zählen, wenn Sie Themen haben und dann wählen Sie den Namen Ihres Themes als innerhalb, dass Ihr Stil ist, Ihr Stil, dass CSS-Datei. Und dann, während Sie auf Sie klicken, bearbeiten. Wenn Sie es richtig ohne Plan eingerichtet haben, kein Pad plus, dann öffnet sich dieser Stil, den die CSS-Datei hier öffnet. Und dann ist es eigentlich viel schöner, weil man all diese anders sehen kann. Dieser ganze andere Code ist dann, als wäre er bunter. Dieser ganze andere Code ist dann, Man kann es irgendwie viel leichter sehen. Es ist nicht im eigentlichen Browser, also ist es einfach einfacher, damit zu arbeiten. Das ist genau das gleiche Gebiet. Das ist dann ein bisschen leichter zu sehen, wenn wir es sind, wenn wir hier sind. Ich meine, das Schwarz-Weiß ist in Ordnung, aber wenn wir hier sind, gibt es uns nur ein bisschen mehr Informationen. Also ist es schöner. Teoh benutze, und dann, wenn du das speicherst, gehst du. Gehen Sie zurück zur Datei Zillah, und klicken Sie dann auf Ja, um, uh, toe, wieder auf Ihre Website hochgeladen jetzt im nächsten Video. Das ist, was ich Ihnen gerade erklärt habe, ist irgendwie die einfachste, grundlegende Art, es zu tun. Aber Sie möchten die Hauptthemendateien nicht wirklich ändern. Was Sie tun möchten, ist ein Kinder-Theme für Ihre WordPress-Installation. Also, das bedeutet im Grunde den Kern Ihres Theme für Ihre WordPress. Installieren bleibt gleich, und dann erstellen Sie ein untergeordnetes Design darüber. Und alle Dateien, die Sie hier auf dem untergeordneten Element ablegen, überschreiben automatisch diese Hauptthemendatei . Aber der Punkt ist, wenn Sie diese Hauptthemendatei aktualisieren, werden Sie Ihre Inhalte nicht zerstören. Nehmen wir also an, Sie erstellen ein anderes Stylesheet, einen Stil, der CSS-Datei, wenn Sie erstellen. Wenn Sie sich mit ihm in den Hauptthema Ordner und dann aktualisieren Sie das Hauptthema, es wirft all Ihr Training und gibt Ihnen einen frischen Stil, dass CSS-Datei Das ist nicht gut. Das ist nicht gut, weil Sie die ganze Zeit damit verbringen, den Stil der CSS-Datei zu ändern, oder? Also, was Sie tun Vorfälle, die Sie so verlassen, wie es ist, und Sie erstellen ein untergeordnetes Thema darüber. Und dann wird das nicht gelöscht, wenn Sie Ihre Haupt-Theme-Datei aktualisieren. Okay, also zeige ich dir im nächsten Video, wie man das macht. Das ist ziemlich einfach, aber ich führe dich irgendwie durch, also sehe ich dich dort. 10. So richtest du ein Kinderthema in Wordpress: in diesem Video werden wir durchgehen, wie man das Kinderteam macht. Es ist nicht so schwierig, aber befolgen Sie diese Schritte genau. Okay, also sind wir in unserem Themes-Ordner, der sich innerhalb von WP-Inhalten befindet und dann in unserem Themes-Ordner auf Ich bin in einer FTP-Software namens File Zilla. Jetzt können Sie meinen 2016-Ordner direkt hier sehen. Das ist mein Themenordner. Aber ich muss einen anderen Ordner erstellen, der eine Ableitung davon ist, die nahe dran ist. Aber anders klicken Sie mit der rechten Maustaste und klicken Sie dann auf Verzeichnis erstellen und geben Sie es einige von 2016 Bindestrich Kind. Und dann, jetzt können Sie sehen, dass ich all diese Ordner habe. Jetzt habe ich, wenn ich zu meinen Themen zurückgehe , können Sie sehen, dass ich diesen zusätzlichen Ordner habe, äh, ich werde wieder in mein Hauptthema gehen. Wenn Sie ein anderes Thema haben, ist das in Ordnung. Aber stellen Sie sicher, dass Sie das volle machen, was auch immer das ist, dann haben Sie einfach dasselbe genannt, Dash Kind. Das wird es schön und ordentlich halten, aber dann gehen Sie zurück zum Hauptthemenordner und öffnen Sie es und finden Sie diesen Stil, der CSS-Datei. Okay, das wird dir super hilfreich sein. Klicken und ziehen Sie, dass ich tatsächlich ziehen, dass auf meinen Computer jetzt, Also speichere ich es auf meinem Computer. Und dann öffne ich diesen untergeordneten Theme-Ordner, den ich erstellt habe, und ich ziehe diesen Stil, die CSS-Datei darin ab. Okay, also kopiere ich es aus dem alten Theme-Ordner. Ich schneide es nicht davon ab. Also lassen Sie es, wo es jemals verlassen, wo es ist, aber kopieren Sie es, und dann bringen Sie es irgendwie in diesen neuen untergeordneten Theme-Ordner. Dann klicke ich mit der rechten Maustaste in die neue Ansicht, und ich werde die lokale Einreichung darauf verwerfen. Ein neues auf. Du könntest das ganze Zeug sehen. All das kommentierte Zeug in der Spitze, das Thema Name bla, bla, bla. Aber ich werde das alles außer dem Namen des Themas herausnehmen. Okay, du siehst zwischen diesem, äh, Schrägstrich und dem Stern und dann die Lamelle auf dem Stern im Schrägstrich. Nimm alles außer dem Namen des Themas heraus , und wir werden es 2016 Kind nennen. Oder wenn Sie auch ein anderes Thema haben, nennen Sie es, was auch immer es ist. Und dann setzen Sie einfach Kind am Ende davon. Und die Frau. Super wichtige Vorlage Doppelpunkt. Und dann tippe ich 2016 hier. Nun, das hier sollte der Ordnername sein, den Sie in FTP 2016 sehen. Das ist genau hier. Okay, also, was auch immer das Kind genannt hat. Was auch immer das Kind, was Sie erstellen, Sie müssen darauf verweisen, dass ein anfängliches Hauptthema. Okay, wenn Sie also haben, wenn Sie ah haben, Thema namens Banane, dann ist das, was hier unter Vorlage sein muss. Okay, also dieses 2016 bekomme ich das direkt aus dem Ordner. Name des Hauptthemas. Ok. Jetzt, sobald ich das speichern und es wird wieder auf den Server hochgeladen, wenn ich zu, uh, meine Themen verwalten Bereiche gehe uh, , klicke ich auf Themen, Sie können sehen, dass wir hier ein neues Thema haben. 2016 Kind. Okay, was auch immer du als Themennamen tippst, wird gleich dort auftauchen. Aber dann kann ich klicken, aktivieren, und es sollte genau das gleiche sein. Bis auf jetzt. Wenn wir Änderungen vornehmen, sollten sie das tun. Sie sollten sich nicht mit unserem ursprünglichen Thema verwirren. Und dann, wenn wir unser Hauptthema aktualisieren, wird es nicht zerstört. So erstellen Sie ein untergeordnetes Thema. Und ich werde im nächsten Bett sehen 11. Schnelle Übersicht zu Chrome DevTools: Unser neuer Freund: Ich habe dies viel durch den Kurs referenziert, aber ich möchte mich nur für ein Video nur auf Chrome Dev-Tools konzentrieren. Nun, das ist der Chrome-Browser von Google. Und wenn Sie eine F 12 drücken oder wenn Sie mit der rechten Maustaste klicken und auf Inspect klicken, dann erhalten Sie, um all dies zu sehen. All dieser Code in all diesem gobbledygook. Nun, Jahre können anders aussehen als meine. Sie können diese untere Registerkarte nach oben gezogen haben oder Sie können wissen, bestimmte Dinge größer als andere oder was auch immer Sie haben. Diese drei Punkte, das Dock da unten oder das Doc zur Seite. Aber die Hauptsache hier ist, es gibt uns so auf eine einfache Möglichkeit, Veränderungen auf der Website zu beeinflussen ohne tatsächlich etwas zu ändern. Und wenn wir durch die Seite gehen, können Sie sehen, wie wir irgendwie durchblättern, wenn ich einfach können Sie sehen, wie wir irgendwie durchblättern, wenn ich einfacheinige dieser Pfeile rückgängig mache,können Sie sehen, wie ich über Dinge rollen, es zeigt mir all diese verschiedenen einige dieser Pfeile rückgängig mache, können Sie sehen, wie ich über Dinge rollen, -Abschnitte. Sie könnten sehen, dass es in diesem Bereich hervorhebt, während ich über all diese verschiedenen Teile des Codes rolle . Es zeigt nur all diese verschiedenen Abschnitte und es ist super cool, nur , , weißt du, all diese Pfeile rückgängig zu machen und einfach die ganze Seite zu sehen und zu sehen, wie Die Dinge sind aufgeteilt, du weißt schon, schau dir das genau da an. Das ist grün an der Seite. Du könntest das Grün an der Seite sehen. Das ist Ah, das ist Polsterung. Du könntest es sagen. Sie können tatsächlich sehen, dass hier drüben schwenkt, wenn ich das überprüfe oder deaktiviere, es die Polsterung durcheinander bringt. Also ist es cool, weil ich es kann. Ich kann durch die gesamte Website schauen und einfach eine Idee bekommen oder einfach nur, wie die Dinge angelegt sind , warum bestimmte Dinge größer sind als andere oder was der Grund ist, dass Sie auf dieser einen sehen können. Eigentlich wird diese Orange, die eine Marge anstelle eines Klopfens ist, das ein wenig später durchmachen . Aber Sie können nur Sie gedulden, Sie können sehen, was. Sie können sehen, wie die Website in all diesen verschiedenen Blöcken erstellt wird, indem Sie den Code durchschauen. Sie müssen nicht unbedingt alle verschiedenen Buchstaben und Wörter des Codes betrachten , sondern nur eine Idee bekommen. Wenn du diesen Code durchrollst, sagst du: Oh mein Gott, so ist das, was dieser Abschnitt des Codes ist. Vier können Sie sehen, all dies sind verschiedene Blöcke hier. Es macht Spaß. Also macht es wirklich Spaß. Das ist also der HTML-Sektion hier. Das ist der ganze Code, äh, der HTML-Datei. Und dann wird hier drüben von Blöcken aus diesen CSS-Dateien zerbrochen. Sie können Stil, dass CSS jetzt sehen, dass CSS nach unten , lassen Sie uns CSS , etcetera, usw cetera, etc.. Und das wird durch die verschiedenen Codezeilen unterbrochen. Ich rede schnell, und ich sage auch eine Menge Dinge, die Sie noch nicht unbedingt verstehen müssen. Aber ich will es einfach da raus bringen, damit du konst, dass sich diese Räder in deinem Kopf drehen. Aber diese Medien-Bildschirm und Minimum mit ist 56.875 m. Das ist ein gewisses Messwerkzeug direkt an. Dann sterben Punkt Website-Inhalt. Das ist ein Spitzname Das ist ein CSS-Klassen CSS-Selektor. Ah, es ist ein Spitzname, wirklich, der Website-Inhalt wird diese Informationen haben, also dieser erste Teil ist nur das Targeting. Okay, dieser erste Teil ist das Ziel genau hier. Ist es Targeting, zu sagen, was soll ich ändern? Okay, das heißt also, wenn der Bildschirm mit dem Minimum ist mit 56.875 EMS Ziel alles mit Spitznamen oder Klasse von Website-Inhalt in das zu Tode zu diesem Ziel. Was ich will, dass du jetzt tust, ist, das hier aufzufüllen. Ok? So ist es wirklich und Sie können sehen, was das ist. Wenn wir es zerlegen, ist es klopfend oben Null und dann schwenken rechts ist 4.5 Streicheln unten Null bevorstehenden links ist 4.5. Also, ähm, sieh dir dieses Zeug durch und spiele mit diesem Zeug, das du wirklich irgendwie den Kern von bekommen kannst, wie , Okay, das ist die Hauptseite. Dies ist der HTML-Code und vermisst den CSS-Code und gehen Sie durch und entfernen Sie einfach Sachen und sehen Sie einfach, wie die Website bricht. Weil es wirklich, wirklich lustig ist, sehen zu können, wie Sie Websites kennen, nicht Magie. Es sind nur all diese verschiedenen Dinge zusammengesetzt, aber wenn Sie anfangen, Dinge zu entfernen, gehen Sie. Oh, Mann. Was ist das? Oder Box-Größe oder Web-Kind-Box Größe Zeilenumbruch. Wie funktioniert das oder Spaß Familie in Farbe und Schriftgröße. Und du fängst an, diese Dinger zu deaktivieren. Sie beginnen zu sehen, wie die Website gebildet wird, und dann, wenn Sie über diese Dinge rollen, können Sie irgendwie sehen, wie, wie die Dinge mit angelegt sind, wissen Sie, klopfen und mit Rand und all das Zeug. Es öffnet dir nur die Augen für das, was wirklich vor sich geht. Und dann, wie Sie beeinflussen möchten, ändern Sie können. Sie werden schneller Art zu wissen, wohin zu gehen, zu wissen, wo Sie suchen und was zu dio auf und im Auge behalten, wenn Sie die Seite aktualisieren. Ich habe es gerade getan. Die Kontrolle ist, dann ist es einfach komplett, äh, nehmen Sie alle Änderungen, die Sie vorgenommen haben, werden Sie ausgeschlagen und dann können Sie es erneut versuchen. Also, wenn Sie es jemals so viel vermasselt, wo Sie wollen, ich weiß nicht einmal, was los ist, aktualisieren Sie einfach die Seite und dann werden Sie zurück zu der tatsächlichen Datei. Beachten Sie, dass dies die Website nicht ändert. Es ändert sich nur vorübergehend, was Sie sehen. Und dann, wenn Sie sich entscheiden, das in den eigentlichen Code der Website zu kopieren, dann ist das, was. Nun, das ist es, was bleiben wird. Aber wenn Sie Änderungen mit Chrome Dab-Tools vornehmen, ändert das nichts langfristig. Es ist nur vorübergehend, und sobald Sie die Seite aktualisieren, wird sie gelöscht. Okay, also spielen, spielen, spielen, spielen, spielen und durcheinander und deaktivieren Sie alle diese Kästchen und starten Sie den Code zu löschen und rollen Sie über verschiedene Teile dieses Codes und machen Sie diese Pfeile rückgängig. Sie können sehen, dass es Kisten innerhalb von Kisten gibt, und es gibt Ihnen eine bessere Vorstellung davon, was los ist. Alles klar, danke schien zweckdienlich. 12. Auswahl unseres Codes auf verschiedenen Weise: Es gibt nicht nur eine Antwort!: Okay, es ist Zeit zu spielen. Wir werden anfangen, mit Dibs D I v o k zu spielen also sind Dibs, äh, ihre Boxen. Das sind die anderen nur Kisten. Okay, was wir tun werden, ist, dass wir auf Seiten gehen, neue hinzufügen, und wir werden das „Spiel mit Leben“ nennen. Nennen Sie es, wie immer Sie wollen. Text direkt hier. Wir werden weniger als Symbol div machen, und dann schließen wir es und dann werden wir tatsächlich sagen, lasst uns die nächste Zeile machen. Halten Sie es sauber. Kopiere genau das, was ich tue. Sie können sehen, dass wir ein diff-Tag haben, und dann haben wir auf der gegenüberliegenden Seite ein div-Tag mit einem kleinen Schrägstrich auf der Innenseite des div-Tags. Wir haben ein P-Tag und das ist auch regelmäßig. Und dann hat es einen Schrägstrich. Okay, so regelmäßig, dass reguläre P das ist, was es anfängt. Und dann endet der Schrägstrich p. Das ist also im Grunde der Anfang von etwas und hier ist das Ende davon. Und dann innerhalb dieses div, ist das ein Textelement? Das p ist ein Textelement. Okay, also nein, ich bin ein Text. Ok? Ich gehe eigentlich wieder hier rauf. Ich werde dem eine Klasse geben, weil wir die Klasse gleich geben und ich werde es nennen, ähm, habe wieder gespielt. Du kannst es nennen, wie immer du willst. Du kannst mich kopieren, wenn du willst. Machen Sie es einfach einfacher, genau das zu kopieren, was ich tue. Aber Sie können anrufen Sie können einen Spitznamen für ein div machen. Äh, irgendetwas, was du auch einen Spitznamen gibst. Sie können es nennen, was auch immer Danke. Willst du nur dazu bringen, es nicht für etwas zu wiederholen, was du vorher getan hast. Okay, also nenn es nicht so etwas, das so langweilig ist. Wie wenn du es Div nennst. Klasse ist gleich Div. Das wird wirklich, wirklich, wirklich, wirklich verwirrend wirklich schnell, denn es ist so eine breite Sache, dass Sie am Ende einen Fehler machen und es wieder verwenden Active Play. Das werde ich nicht noch einmal benutzen. Richtig. Also def Classic wurde gespielt, und dann hallo. Ich bin ein Textelement, und dann lässt es Sie das genau kopieren. OK, sobald es Donna ist, klicken Sie auf Veröffentlichen. Und dann renne ich oft und halte die Kontrolle und öffne das auf einer anderen Seite. Und los geht's. So können Sie sehen, es gibt all diese anderen Sachen als gut, dass Wordpress nur irgendwie wirft da rein . Ähm, es setzt die Schlagzeile genau da. Und dann hat es das auch. Aber der Spaß Teil davon ist, wie wir, wie wir rechts, klicken und klicken Sie dann auf Inspect, Blick auf es in Chrome Dev-Tools. Wir können sehen, dass diese div-Klasse. Siehst du das genau da? Def Klasse tive spielen. Und dann hallo. Ich bin ein Textelement. Das ist, was unser Einstiegsinhalt Zeug ist. OK, das ist alles, was wir in der WordPress zurück. Und hier tippst du den Block ein und steckst das Bild hinein und all das Zeug. Sie können den Code genau hier für das sehen, was wir gerade eingeben. Nun, wenn ich dieses Textelement beeinflussen möchte, könnte ich einfach hier klicken und auf diesen Plus-Button klicken, und es gibt mir Es sagt OK. Sie möchten alle P-Elemente ändern? Sie möchten alle Textelemente ändern, oder? Nein, ich möchte eigentlich nur die Textelemente innerhalb des div-Spitznamens „Play with Class of active play“ ändern . Was ich also tun werde, ist eigentlich, dass ich Dot Active spielen werde und dann würde ich einen Raum machen und ich suche nach P-Elementen mit in einer Klasse von Deplane in Dingen, die den Spitznamen Div spielen Ich werde die P die P-Elemente darin anvisieren. . Nun, wenn ich diesen p dot gemacht hätte spielen würde, der nach p Elementen mit dem Spitznamen des Spiels suchen würde Aber das ist nicht, wie wir unseren Code geschrieben haben Wir haben unseren Code mit einem div tatsächlich um fast wie Klammern um die P -Element. Wir haben das P-Element nicht mit einem Spitznamen versehen. Wir haben den Spitznamen um das P-Element herum. Das funktioniert also nicht p dot deplane Das ist nicht korrekt. Das ist richtig Punkt hat p gespielt oder wenn wir wollen, ich denke, wir könnten dieses div dot tun Haben p gespielt und ich werde sagen, Schriftgröße ist 40. Sieh dir das an. Sobald wir es funktioniert haben,können wir Ihnen beweisen, dass es immer noch sein wird. Sobald wir es funktioniert haben, Also, wenn ich da rausnehme, lass mich das tun. Es funktioniert immer noch gut, oder? Aber wenn i dio p dot nicht gut gespielt hat, hat es nicht das Richtige ausgewählt. Der Code ist in Ordnung. Schriftgröße entspricht lustigen Colin. 40 p. X. Das ist in Ordnung, aber der Selektor war falsch. OK, also stellen Sie sicher, dass Sie diesem Selektor sehr genau Aufmerksamkeit schenken. Wenn wir Pia einfach gut machen, versuchen wir es einfach, P. es funktioniert, aber das Problem ist, dass es auf Ihrer gesamten Website funktionieren wird. Und Sie möchten möglicherweise nicht auf Ihrer gesamten Website, dass alle Schriftarten 40 Pixel betragen. Deshalb versuchen wir, Dibs zu verwenden, um bestimmte Bereiche wirklich hervorzuheben. Nun, wir könnten das auch tun. Nehmen wir an, diese P-Klasse, Lassen Sie uns bearbeiten, dass ich mit der rechten Maustaste geklickt und dann als HTML P-Klasse hinzugefügt gleich P spielen. Ich werde wirklich kreativ mit diesen Namen hier. Okay, also haben wir tatsächlich eine Klasse gemacht. Wir haben einen Spitznamen auf das spezifische Element gesetzt, das wir nicht gesetzt haben. Wir haben es nicht auf die Def-Klasse gesetzt. Wir setzen wir die Klasse oder den Spitznamen direkt auf das P-Element. OK, also P-Klasse gleich P-Spiel. Und dann, wenn ich abklicke, können Sie sehen, dass es klebt. Nun, wenn ich hierher komme, wenn ich p dot p spielen, ist das der richtige Selektor. Sie könnten sehen, dass sich der Code nicht richtig geändert hat, wenn ich den Spitznamen durcheinander lasse, wenn ich nur sage Oh , es ist ein P-Element mit Spitznamen. Spiel funktioniert nicht, weil das ist, dass Nick der falsche Spitzname ist . Wir haben die falschen Spitznamen verwendet, dass der Spitzname nicht gespielt wird. Du könntest jedes Mal sehen, wenn es einen Punkt gibt, den wir darauf achten, was danach für den Spitznamen ist. Richtig. Also, äh, der Spitzname ist nicht nur spielen. Der Spitzname ist P play. Okay, Sie können sehen, was hier vor sich geht, ist, wissen Sie, nur gibt es all diese verschiedenen Dinge, die Sie zuerst im HTML herausfinden müssen, müssen Sie sicherstellen, dass Sie, äh, dass Sie das alles richtig machen,wissen Sie, wissen Sie, was auch immer div Space-Klasse mit innerhalb von Anführungszeichen gleich ist. Also, weil das manchmal verwirrend wird, oder? Ist es ein Gleichheitszeichen oder ist es ein Colin oder was auch immer? Weil das hier drüben, dieses Ah, dieses CSS eine andere Syntax oder eine andere Art der Eingabe von Daten hat. Dann dann hier drüben im HTML. Okay, also, nachdem du, wie du das Chaos mit diesem Zeug kopiert hast, hör auf, den Zeh zu versuchen. Vielleicht ändern Sie das div. Klasse hier. Wettbewerbsspiel eins und, äh, ändern Sie diese Klasse. Vielleicht könnten wir das sogar ein i d p e i d d d d gleich Hallo machen. Jetzt gibt es so viele verschiedene Möglichkeiten zu wählen. Jetzt denken Sie daran, zu suchen. Es ist weg. Die Codierung, die wir vorher gemacht haben, ist weg. Jetzt ist es immer noch in der temporären CSS-Datei, aber wir können nicht darauf zugreifen, weil wir nicht den richtigen Selektor verwenden. Wie zum Teufel können wir das Textil auswählen? Es gibt eine Reihe von Möglichkeiten. Der erste Weg besteht darin, nur P-Elemente zu sagen. Alle P-Elemente werden Spaß machen Größe 30 Pixel. Das ist ein guter. Das ist zu ausgewählten. Aber das ist, um alle P-Elemente auf der gesamten Website auszuwählen. Versuchen wir nun eine andere Möglichkeit, P mit dem Hash-Tag auszuwählen. Das ist für Ausweise. OK, also das ist der I. D Spitzname, und Sie können sehen, wir haben eine Idee Spitzname von Hallo, so P Hashtag niedrig und denken Sie daran. Es ist alles zusammen, weil wir nach P-Elementen suchen mit dem I D oder mit Nick, Name von Hallo, es ist alles zerschlagen zusammen. Wenn wir dies getan hätten, dann würde das innerhalb eines P-Elements nach etwas anderem mit dem Spitznamen Hello mit dem Spitznamen I D von helo suchen. Okay, also ist das falsch. Wir müssen es ohne den Raum tun und es funktioniert Jetzt können wir auch div Klasse Div spielen eins und dann suchen Sie einfach nach P-Elementen in Daves mit dem Spitznamen Div Play one. Lassen Sie mich Ihnen zeigen, was ich meine. Wenn wir Doc geben ein Spiel, das, was habe ich gerade getan? Ihre zitierten Dibs mit Spitznamen mit dem Spitznamen. Und das ist eine Klasse, weil es eine Periode mit dem Spitznamen Div hat. Spielen Sie eins. Okay, also dippt mit Dave. Spielen Sie eins und dann konzentrieren wir uns auf P-Elemente in Dibs, die den Spitznamen Div spielen eins haben . Und schauen Sie, unser Code funktioniert immer noch, wenn ich davon abklicke. Ok, wenn ich das vermasselt hätte, wohin gehen wir hierher? Wie kann ich das durcheinander bringen? Was ich versuche zu tun, äh, äh, der Grund, warum es nicht kaputt ist, weil sie eins spielen. Nur du musst Div nicht davor stellen. Du musst das nicht hinstellen. Deshalb habe ich immer noch gearbeitet, als ich dort einen Platz gesetzt habe, weil es sagt: Schau in ein Div. Suchen Sie nach etwas mit der Klasse, um eins darin zu spielen, und suchen Sie dann nach P-Elementen innerhalb davon. Okay, also brauchen wir diesen David nicht am Frontend. Wenn ich hier stattdessen einen ah Hashtag gemacht hätte, würde das es brechen, weil es nicht sucht, dass ich ds einen gespielt habe. Es ist auf der Suche nach Klassen mit hat spielen eins. Also das ist auch eine Möglichkeit, es auszuwählen und dann auch zu schwächen Do Ah, sehr hier drin. Wir könnten P-Klassen machen, weißt du. Es tut mir leid. Es ist ein i d jetzt p i ds, wenn Hallo ein gespielt hat und dann Raum Also schau dir diesen Code an. Das heißt also, dass dies sagt, um das Ziel alles mit dem Spitznamen zu zielen, hat eins gespielt. Und in diesem suchen Sie nach p-Elementen Textelemente Nur Textbereiche mit dem I d oder mit Spitznamen. Hallo. Okay, es ist ein Id weil es den Hashtag hat. Okay, also gibt es all diese verschiedenen Möglichkeiten, genau die gleiche Theorie auszuwählen. Es ist eine einfache ist nur mit p Ihre gute dort, aber das bedeutet, dass es alle P-Bereiche über die gesamte Ihrer Website beeinflussen wird, die ein wenig zu breit ist. Okay, wegen der Tatsache gibt es so viele verschiedene P-Bereiche in Blog's und bei was auch immer sonst. Sie möchten dies normalerweise nicht ändern, es sei denn, Sie möchten eine websiteweite Änderung vornehmen. Okay, deshalb werden wir etwas spezieller und machen so etwas wie P mit der Idee von Hallo oder wenn wir uns ändern wollen. Wenn wir dies in eine Klasse ändern wollen , gibt es nur eine P-Klasse gleich hallo, dann, dann, wie ich hier eine neue Stilregel erstelle, mache ich einfach Pook. Es hat tatsächlich die Arbeit für mich gemacht. Das war wirklich schön, Seifenpunkt Hallo, und dann mache ich einfach lustige Zeichen gleich 40. Also spiele mit diesem Zeug, um genauso einfach wie mit einem div um ein p-Element und setze verschiedene Klassen und ich ds auf verschiedene Dinge und versuche nur sicherzustellen, dass du wirklich gut darin bist , wenn du die Klasse zu etwas änderst, Wie wählen Sie das P-Element darin aus? Oder wenn das P-Element einen bestimmten Spitznamen hat. Wie wählen Sie das aus? Also fangen Sie einfach an. Fangen Sie an, damit zu spielen, und Sie werden ein paar Fehler machen, oder? Aber der springende Punkt hier ist, zu versuchen und zu spielen, und, äh, und du fängst an, Dinge herauszufinden, um ein bisschen schneller zu werden. Ok? Du musst es immer wieder wiederholen. Also spielen Sie hier, machen Sie einen zweiten Stopp, stoppen Sie das Video und spielen Sie einfach. Und, äh, du wirst es besser und besser, sieh im nächsten Bett. 13. Divs: Lass uns mit Margin + Füllung: großartig. Also, jetzt werden wir uns mit Gives ein bisschen vielfältiger anlegen. Dort sind sie sehr wichtig. Dort ist der Hauptbaustein von Webseiten. Dibs sind im Grunde Boxen. Okay, also sieh dir Dibs drinnen an. Ein div befindet sich in anderen Dibs innerhalb anderer Detektive, aber sie sind nur Es gibt die Hauptbausteine. Du kannst unsere Kälte sehen, oder? Bisher ist es Div-Klasse gleich und zitiert dann ein div-Spiel, OK, Und dann haben wir ein P-Element, das geöffnet und dann geschlossen wird. Sieh dir das an. Jedes einzelne Element hat sein Öffnen und Schließen. Nein, vergiss das. Und dann haben wir das, was auch immer der Text dafür ist. Und dann haben wir das schließende Tag für den Dev. Wir müssen Dave mit dem Spitznamen aufmachen. Eine Minute, wenn sie nahe ist. Ok. Also stellen Sie sicher, dass Sie genau das haben, wie das ist. Und dann, ähm, ich fühle mich sehr schnell zu aktualisieren, und dann gehen wir tatsächlich zur Akte. Also, hier geht's. Hallo. Ich bin ein Textelement. Das haben wir erschaffen. Okay, Also, wenn ich mit der rechten Maustaste darauf klicke und inspizieren, können Sie in Chrome hier definierbar sehen, dass es div Klasse gleich gespielt hat. Das haben wir geschrieben. Und dann hallo, mein Textelement. Und dann schließen wir es. Wenn ja, werden wir jetzt tun, ist es, dass wir uns mit diesem div verwirren. Ok, wir werden das Zeug drauf machen, Dave, und wir werden uns einfach mit dem Styling verwirren, Def. Also klicke ich, dass und dann komme ich hierher zu diesem plus neuen Stil Regel Aktiv spielen. Sieh dir den Hintergrund an. Colin Blau. Das war einfach. Jetzt können wir den Dev sehen. Okay, das Blau tut mir irgendwie weh. Okay, also, ähm so machen wir, dass wir den Hintergrund machen können, was auch immer wir wollen, und jetzt können wir dieses div für das sehen, was es jetzt ist, was, wenn ich etwas Padding hinzufügen möchte? Sie können sehen, dass es gerade größer wurde. Ich habe gerade Klopfen hinzugefügt und es in die Luft gesprengt, oder? Und dann kommen wir hierher, und wenn wir darüber rollen, können wir Ah sehen, das Grün um ihn herum. Das ist Polsterung. Wenn Sie auf der CSS-Seite von Einzelpersonen hierher kommen,rollen Sie den ganzen Weg runter. Wenn Sie auf der CSS-Seite von Einzelpersonen hierher kommen, Sie können sehen, äh, zuerst ist der Hauptbereich als die Polsterung. Und dann ist da noch die Grenze. Und am Rand. Okay, so ist es, wie wir das ist irgendwie, wie Sie Dinge herum stapeln. Ein Diff-Padding befindet sich auf der Innenseite eines div. Aber der Rand ist auf der Außenseite. Lassen Sie mich Ihnen zeigen, was ich meine. Wenn wir einen Rand von 20 Pixeln hinzufügen, können Sie sehen, dass der Bereich, der grau ist, nicht wirklich größer wurde. Es wurde eigentlich irgendwie kleiner. Sieh dir das an. Siehst du das? Es hat so die Orange um sie herum, das ist Marge. Es hat eigentlich keinen Grund. Und das ist der Grund, warum es wegen der Marge unten hier ist. Okay, los geht's. Also hat dieser Dave jetzt 20 Pixel Polsterung und 20 Pixel Rand, aber der Hintergrund auf Lee wirkt sich auf die Polsterung aus. Sie können sehen, dass sich der Rand auf der Außenseite dieses grauen Bereichs befindet. Okay, wenn du also Polsterung machst, wird es das Div von innen sprengen, und der Rand wird das Äußere irgendwie in die Luft sprengen. Okay, wenn du also versuchst, den Hintergrund zu haben, sei größer. Verwenden Sie keine Randbenutzung klopfte seine Muster auf der Innenseite der Toten im Inneren der Box. Aber der Rand ist auf der Außenseite der Box. Hab es. Also spiele mit diesem Zeug. Denken Sie daran, dass wir nicht div dot dave spielen mussten. Es ist nur Dot Div. Spieler finden vollständig, aber einfach mit dem Hintergrund Chaos mit Polsterung und Rand und spielen Sie einfach damit und Sie werden das finden. du viel besser geworden? Ich verstehe nur, irgendwie. Sie wissen, wie der Rand funktioniert und wie das Padding funktioniert. Beginnen Sie dort und spielen Sie einfach, spielen Sie herum und bekommen schneller dieses Zeug und ich werde im nächsten Video sehen. 14. Divs: Floats, Hintergründe + Seiten: Alles klar, jetzt fangen wir an, Schwimmer mit Dibs zu benutzen. Und was das bedeutet, ist, dass wir die Kiste irgendwie bewegen und sich zuerst neu organisieren. Bezieht es die gesamte Breite? Es wird kleiner sein, und es wird erlauben, dass andere Dave es irgendwie herumpassen. Okay, also folge mir und du wirst sehen, was ich sage. Also haben wir def Klasse gleich div. Spielen Sie Aktion und ändern Sie, dass div spielen links. Okay, also der Spitzname dafür, Dave, ist,dass Dave, ist, Div Play die Minute verlassen hat, tatsächlich, kopieren Sie die ganze Sache und ich werde es einfach hier unten einfügen. Und ich werde das in Dave Play ändern, richtig? Und dann werde ich hallo sagen. Ich bin auf der rechten Seite halb so breit. Sie können nur Dieser Text kann so einfach wie linke und rechte Seite sein. Alter, was zum Teufel willst du? Aber stellen Sie sicher, dass die Klassen der dibs Luft anders. Okay, also spielte links und spielte, richtig? Okay, etwas Update. Und dann gehen wir los. Sehen Sie sich das an. Das ist nicht auf der linken Seite. Das ist nicht auf der rechten Seite über einander. Richtig? Also, was wir tun werden, ist, dass wir mit der rechten Maustaste klicken und offensichtlich haben hier links gespielt, und ich werde dieses Plus hier klicken für eine neue Stilregel und so dot hat links gespielt. Das ist großartig. Und dann werde ich mit Colin 50% machen. Was ist nun passiert? Lass uns umrollen und einen Blick werfen. Ah, OK, also lassen Sie mich jetzt deaktivieren, dass Sie sehen können, damit es zuerst den ganzen Raum einnimmt. Richtig? Aber jetzt mache ich 50% und jetzt hat es die Marge auf der rechten Seite. Wie kommt es nun? Und so ist das auf der linken Seite. Technisch richtig, es ist auf der linken Seite. Aber warum ist die rechte Seite auf der rechten Seite? Lassen Sie uns tun tun tun, haben gerade jetzt Cook spielen und nicht richtig spielen. Klicken Sie auf Plus und dann gehen wir dot spielen, richtig? Das war nett. Und dann hier gehen wir mit ist 50. Halten Sie eine Sekunde. Der Typ und dieser Typ sind beide 50%. Warum sind sie das nicht? Warum verschieben sie sich nicht irgendwie nach oben? Und dann, ähm, und machen es so, dass diejenigen auf der linken Seite von denen auf der rechten Seite, der Grund, warum ist, weil sie nicht schweben. Okay, wenn du sie schweben lässt, dann wird alles Spaß. Float ist links und unten hier. Aber spielen Sie genau da, wir gehen. Ja, stellen Sie sicher, dass Sie das Richtige bearbeiten. Denn manchmal bekommt dieses Zeug tief einen Schalter, oder? Mit ist 50 Float links. Jetzt sieh dir das an. Hat spielen rechts ist genau da und hat spielen links ist genau da. Jetzt wirst du nicht nach links schweben und rechts schweben? Normalerweise möchten Sie alles auf eine Seite stapeln und dann diese Art von allen selbst neu angeordnet . Fühlen Sie sich frei, schwimmen richtig zu tun, wenn Sie wollen. Aber das ist nicht das, was für ein Wort. Das ist nicht das, was wir jetzt versuchen. Also sieh dir das an. Also hat man links gespielt, oder, Dave? Dramatiker ist genau da. Das ist genau das, was wir wollten. Okay, aber um das zu tun, mussten wir separate Dibs haben. Und dann mussten wir sicherstellen , dass , die Breite 50% beträgt und nicht größer war. Und dann schwimmend links, machen wir mit 51% weg. Dann sind wir in Schwierigkeiten, weil es in die nächste Zeile geht. Das ist, wenn du schwimmst. Wenn irgendetwas ein bisschen größer ist, passt nicht. Es schickt es irgendwie runter in die nächsten Zeilen. Sie müssen wirklich sicherstellen, dass es innerhalb dieser 100% liegt. Okay, um, lassen Sie mich auf 50% zurückwechseln. Großartig. Jetzt können Sie auch sehen, dass es kaum Platz dazwischen gibt. Das macht keinen Spaß. Lassen Sie mich also einen Hintergrund auf diese legen. Sie können irgendwie sehen, so spielte links. Ich werde dem einen grünen Hintergrund geben, einen Blick etwas besser machen. Besser Bob tauchte auf Did-Spiel auf, richtig. Wo ist sie? Spielen Sie genau dort. Der Hintergrund ist blau. Und das Blau brennt meine Augäpfel, also werde ich es ändern. Ok. So können wir sehen, dass wir jetzt haben. Diese haben noch eine Berührung gemacht. Das ist nicht gut. Das gefällt mir nicht. Ich will nicht, dass sie sich berühren. Also, was soll ich tun? Ich werde tatsächlich einen Spielraum für jeden von ihnen haben. Okay, also wird es Marge sein, und dann werde ich es tun? Äh, sagen wir, äh, 2%. Was zum Teufel ist gerade passiert? Was ist passiert? Es ging in die nächste Zeile, weil das zu groß war. Es ist mit 50% plus Marge. 2% was ist was? Eigentlich sind es 54%. Weil es 2% auf der linken Seite und 2% auf der rechten Seite gibt. Ich denke nicht mal an rauf und runter. Ich denke nur an links und rechts. Okay, also hat es 2% auf der linken Seite, dass man die Orange dort sehen kann. Sieh dir die Orange an. Diese Orange ist der Rand. Wer hat 2% auf der linken Seite und 2% der rechten Seite, plus die 50% mit. Das bedeutet also, dass ich mehr als 50% bin, oder? Also, was ich tun werde, ändere ich mich mit 46% hier. Und jetzt bin ich gut, weil 46% plus 2% plus 2% gleich 50% sind. Und ich werde das Gleiche tun, zwei div spielen links, äh , Marge, 2% und dann mit wird kommen auf 46%. Also, jetzt sind sie getrennt und Sie können sehen, was passiert ist, dass wir viel hatten, ursprünglich 50% Recht haben. Aber als wir diese Marge hinzugefügt haben, um sie zu trennen, waren wir in Schwierigkeiten, weil es mehr als 50% war. Also haben wir es auf 46% geknackt. Also 46% plus 2% plus 2%. Die linke und rechte Seite dieses div entsprachen insgesamt 50%. Ok, du kannst sehen, dass es im Inneren keinen Platz gibt. Hallo? Ich muss innerhalb der rechten Seite. Es gibt nicht, dass es im Grunde die Seite berührt. Das gefällt mir jetzt nicht. Wir haben gelernt, dass die Marge auf der Außenseite des div war. Polsterung befindet sich auf der Innenseite eines def. Also lassen Sie uns hier etwas Polsterung hinzufügen. Es wird dio wir tun 1% dort und dann für haben gespielt, richtig? Wo willst du sonst hin? 1%. Sie können sehen, was tut. Es gibt uns ein wenig Raum, wo die Dinge nicht nur die Seite umarmen, wo die Dinge nicht nur so sind, als ob sie sich direkt zur Seite berühren. Sie können es tun, wissen Sie, mischen Sie sich zu Ihrem Herzen. Herzenslust. Tun Sie, was Sie wollen, aber es ist wirklich, wirklich praktisch, dann in der Lage zu sein, zu schauen, Deb-Tools zu verwenden und zu schauen, was Sie getan haben. Siehst du den grünen Umriss? Das ist die Polsterung. Siehst du den orangen Umriss? Das ist die Marge. Okay, also war es wirklich, wirklich hilfreich, in der Lage zu sein, einfach Ihren Code durchzusehen und das zu tun. Jetzt, im nächsten Video, werden wir unseren Code ein wenig einfacher machen, indem wir CSS verwenden. Aber spielen Sie wieder mit diesem Zeug und machen Sie es einfach Ihre eigenen, und ich werde im nächsten Video sehen. 15. Mit mehreren Selektoren für das gleiche Div SPINGEN:: Richtig. Also hatten wir etwas Spaß mit Dibs zu spielen und die Hintergründe, die Polsterung, den Rand usw. zu ändern die Polsterung, den Rand . Jetzt werden wir ein wenig mehr mit dem Code spielen, nur um euch ein wenig zu geben, um etwas für U s zu entsperren. Also gehen wir zurück, Teoh Edit Seite. Und was wir tun werden, ist, dass wir ihm einen weiteren Spitznamen geben werden. Aber was wir tun werden ist, wir geben, äh, ja, wir geben beiden Dibs einen weiteren Spitznamen, aber sie werden genau denselben Spitznamen haben. Okay, also derselbe Nick Name sagt Spitzname. Ich hoffe, das ist nicht verwirrend oder zwei. Metapher. Bist du okay? Also der Spitzname für beide wird der gleiche Spitzname sein. Speichern Sie das. Und dann, ähm und sehen Sie, da ist nur ein Raum dazwischen. Das ist alles, was Sie auf der HTML-Seite brauchen. Okay, also jetzt kommen wir zum Code Rechtsklick. Und jetzt, wenn wir klicken, So klicken wir, Deplete links und dann den gleichen Spitznamen. Wenn wir klicken, dass es mir dieses Zeug gibt, es gibt mir Es sagt, sich auf Es ist das gleiche zu konzentrieren Did Play Left und auch gleichen Spitznamen Ich will das nicht. Ich möchte mich eigentlich nur auf den gleichen Spitznamen konzentrieren, aber hier ist der Spaß Teil. Wenn ich Code hier einfüge, wird es beide Dibs betreffen, weil beide Dibs denselben Spitznamen haben. Okay, ähm, also werde ich Witz machen 50 oder andere. Eigentlich wusste ich 46%, weil ich etwas Marge will. 46% Marge ist 2%. Das bringt uns also 50%, weil die Mitgliederspanne sowohl die linke als auch die rechte ist. Eigentlich es alle Seiten, aber denken, linke und rechte Seite sind beide 2%. Also, das ist zwei plus zwei ist vier plus 46. So kommen wir auf 50. Und dann machen wir Hintergrund oder nein, nicht in den Hintergrund gehen, eigentlich, weil ich will, dass diese Farben anders sein und sie werden schweben bleibt. Jetzt können Sie sehen, dass das, was passiert ist, ich konnte mit nur Bewertung 11 Abschnitt Code, weil beide den gleichen Spitznamen haben. Ich konnte Teoh einfach wirklich schnell ableto mehrere Dinge auf einmal beeinflussen. Nun, was ich tun will Ah, Hintergrund. Das wird nicht funktionieren, weil ich will, dass sie unterschiedliche Hintergründe haben, und Sie können hier sehen, dass sie den gleichen Hintergrund haben, oder? Also will ich das nicht tun. Ich will keine Dinge tun, die das sind. Ich möchte unter dieser Klasse mit demselben Spitznamen anders sein. Aber es ist wirklich, wirklich nett, wenn es mehrere Elemente gibt, besonders, sagen wir, vielleicht hatten Sie 50 davon. Sie wollen nicht das gleiche Zeug für jeden einzelnen eingeben müssen. Okay, jetzt werde ich nur noch einen Hintergrund zu Did spielen links hinzufügen. Denken Sie daran, ich wähle es aus, dass ich auf eine neue Stilregel in einem Chrom klicke. Denkt, ich will diesen Fokus einer Sache. Und ich will nicht, dass alles konzentriert ist. Ich will nur links spielen. Das wird wieder da sein. Ich hasse diese blauen Farben mit Rache. Okay, ähm gut. Und dann spielten Rechte. Holen Sie den gleichen Spitznamen da raus und dass ich gerade Tab gedrückt habe. Nur wenn Sie ein bisschen schneller gehen wollen, können Sie Tab gehen und durch die Dinge gehen. Hintergrund. Es ist grün. So etwas. Ich weiß es nicht. Ok. So können Sie das sehen. Was hier los ist, ist, dass es Code gibt, den Sie beide Dinge in Kraft setzen möchten. Und dann gibt es Code, den Sie wollen, wo Sie nur eine Sache beeinflussen wollen. Deshalb ist es super praktisch von zwei verschiedenen Dibs. Teilen Sie den gleichen Spitznamen und es tut mir leid, dass ich das jetzt benutze, weil dies super Met mit Nickname ist der gleiche Spitzname. Aber es ist wirklich, wirklich, wirklich hilfreich in praktisch, weil jetzt sagen wir, Oh, ich sehe beide müssen Polsterung, weil ich die Klasse mit demselben Spitznamen verwende. Ich mache nur Polsterung, äh, 2%. Und dann ändert es beide und super freakin praktisch. OK, eso Chaos mit diesem Zeug, und wenn Sie wollen, können Sie noch mehr Spitznamen für sie hinzufügen. Mehr Klassen. Stellen Sie sicher, dass sich auf der HTML-Site innerhalb der Klasse gleich Zitat befindet, und dann, was auch immer sie sind, trennen Sie sie einfach durch Leerzeichen. Okay, ähm, und dann sehe ich im nächsten Video 16. Elemente verschWINDEN: Verwende die Eigenschaft: für dieses nächste Zeug. Wir werden anfangen, unseren Code in unserer CSS-Datei zu speichern, weil ich dieses Zeug nicht immer und immer wieder eingeben möchte . So schnell, ich werde das einfach noch mal durchmachen, oder? Klicken Sie auf, und dann machen wir dieselben Spitznamen-Stopps, und ich werde das einfach tun. Es ist einfacher, mit 46% Marge zu tun ist 2%. Ich brauche keinen Hintergrund. Ich brauche Polsterung ist 2%. Und dann oh, ich 19 meine Schwimmer schwimmt zurück gut. Und dann spielte links nur mit Pfeilen und ich lösche nur Dinge. Okay, drücken Sie den Tab. Und dann würde er Hintergrundblau gehen. Ich hasse das Blau. Und dann ist das in Ordnung. Und dann hat das hier Spielrechte gemacht. Schlechte Krone, Kareen. Und das ist gut. Okay, also habe ich gerade Code in meine, äh, äh, Chromtaub-Tools eingefügt, aber es ist nicht gespeichert. Wie kann ich es speichern? Das werde ich also tun. Ich werde nur Abschnitt für Abschnitt nehmen. Also los geht's. Derselbe Spitzname oben von den Klammern da. Und dann tatsächlich, weil es zwei in einer Reihe gibt, sagen Sie, dass diese Trennlinie, aber tatsächlich beide Codezeilen geschrieben, also werde ich nur wirklich auswählen. könnte ich es von oben nach unten Eigentlichkönnte ich es von oben nach untenmachen. Also von diesem Punkt den ganzen Weg da unten, und ich werde das kopieren und dann werde ich einen weiteren Tab öffnen, werde ich den Auftritts-Editor machen und dann den ganzen Weg runter, wo mein Wo ist mein Gewicht Buchten? Wo ist mein Komm, Kim. Da drinnen gehen wir genau hin. Ich habe es gerade da reingeklebt. Ich werde noch mehr Platz schaffen, weil es mich verrückt macht, wenn ich nicht finde, wo ich ihn einfügen muss. Denken Sie daran, ich gehe über die Medienabfragen ein, wenn Sie können. Das ist wirklich, wirklich schlau zu tun, so habe ich Display hat links gespielt und gleichen Spitznamen, den ich brauche spielen gleich zurück zu hier gehen wir spielen, richtig? Und dann möchte ich genau diesen Bereich des Codes mögen. Stellen Sie sicher, dass Sie die Klammern bekommen, okay? Und dann, äh, spielen Sie den rechten Hintergrund. Also okay, also habe ich nicht links für den Hintergrund gespielt. Hat richtig mit dem Hintergrund gespielt. Und dann der gleiche Spitzname mit all dem Abstand, der beiden passieren wird. Und ich klicke auf Datei aktualisieren Jetzt, wenn ich diese Seite aktualisiere, wenn ich diese Seite aktualisiere, speichert sie sie. Also muss ich es nie wieder eingeben. Okay, jetzt bekommen wir in Display Blockanzeige in Zeile und zeigen dann keine an. Okay, also zeigen Block. Betrachten Sie es wie ein Chunk-Display in der Reihe. Denken Sie daran wie Text. Wie fließend wie Steuern. Nicht wie einzelne Stücke, aber wie Textzeilen auf dem Display, keine macht es tatsächlich verschwinden. Das macht also wirklich Spaß. Gehen wir hier hoch. Also der gleiche Spitzname unter dem gleichen Spitznamen , der eigentlich auf beiden Dibs ist. Denk daran, was ich hier habe, wird mit beiden Dibs passieren. Ich zeige keine an, und sie sind einfach so weg. Wie cool ist das? Nein, wenn ich den gleichen Code auf links gesetzt habe, was wird dann passieren? Nur das hier. Und sieh mal, was mit Div passiert ist. Spielen Sie richtig? Haben Sie richtig gespielt? Eigentlich umgezogen. Siehst du das? Weil beide schweben links. Okay, also weil ich genommen habe, habe ich einen loswerden. Es lässt es nicht nur verschwinden, sondern lässt dafür einen Platz. Eigentlich nimmt den gesamten Speicherplatz aus, wenn Sie keinen anzeigen. Das ist also super praktisch, umSie wissen zu lassen, dass in der Regel um Textelemente in Zeilenelementen sind und normalerweise Blockelemente sind. Also nur für Sie brauchen es nicht. Sie müssen sie nicht blockieren Elemente durch Darstellungsblock machen. Aber sagen wir, es gibt keine Anzeige. Wenn ich nur schwarz spiele, ist es zurück. Warum? Weil der letzte Code der Sie wissen, wenn es Code gibt, der in diesem bestimmten Abschnitt tiefer kommt, geht es über rechts. Der andere Code. Okay, jetzt bedenken Sie. Es ordnet diese auf verschiedenen Dingen an. Es ist eine Art, diesen Stil, die CSS-Datei auseinander zu teilen, und es zeigt die Thes bestimmte Stücke nur separat an. Aber innerhalb derselben Sache, wenn Sie keine Anzeige haben, dann zeigen Sie schwarz an. Es wird das ausschalten und nur auf das hören. Okay, ähm, aber spielen Sie damit, nur Display Non und Display Block zu machen, und ich habe das Gefühl, dass Sie viel Spaß damit haben werden. Es ist wirklich, dass es reinkommt. Viel davon kommt später nützlich. Eso stellen Sie sicher, dass Sie die Anzeigeeigenschaft dort verstehen. Ich sehe im nächsten Bett 17. Divs: Es ist Zeit zum FLOAT: In Ordnung, wir werden jetzt ein bisschen mehr über Schwimmer reden, weil wir diesen Code komplett haben. Wir haben es auf unserem CSS gerettet. Jedes Mal, wenn ich die Seite aktualisiere, ist sie immer noch da. Was wirklich, wirklich nett ist. Also, wenn ich hierher komme und den Float abhaken, können Sie sehen, dass sie nicht mehr nebeneinander sind. kannst du sehen. Sie werden nur eins nach dem nächsten nach dem nächsten sein. Was passiert, wenn Sie schweben? Richtig? Siehst du, was passiert ist? Du sagst wenigstens die linke Seite rechts gewechselt. Was immer zuerst kommt, wird Präzedenzfälle bekommen. Okay, also ist es im Grunde, dass es sich neu organisiert, weil dieser, seit er zuerst kam die erste rechte Seite vor Ort bekommt, und dann wird der nächste den nächsten rechten Seitenpunkt bekommen, weil sie beide Float sind, Richtig? Ok. Wenn ich keine schweben, ist das dasselbe, ist einfach nicht ein schwebendes alles, was Art von Standard ist. Okay, in der Regel werden Sie links schweben, weil Art von Dingen, die sie nur sind, wie, links die Linie normalerweise, aber seit dem fünften, da sie 50% 46 plus 2% plus 2% sind, da sie beide 50% Blöcke sind , werden sie aussehen, als wären sie einfach perfekt zentriert. Und alles ist schön, obwohl wir einfach nach links verschoben werden. Wenn ich mich um 20% ändere, können Sie sehen, dass wir alle nach links verschoben sind. Aber wenn ich den Schwimmer auch gewechselt habe , können Sie sehen, was hier passiert, wo alles jetzt auf die rechte Seite verschoben wird. Und weil diese linke Seite sehen, war dieses linke Div höher im Code, der Vorrang für das erhält , was zuerst nach rechts geschoben wird. Und dann häuft sich alles nach rechts. Okay, also ist es irgendwie wie ein Magnet. Betrachten Sie es wie ein Magnet und Sie ziehen einfach alles in Richtung es in der höheren oben Code wird ihre erste gezogen, und dann alles andere Art von füllt. In Ordnung. Spielen Sie auch mit Schwimmern Flug spielen Sie mit Einschalten, schalten Sie sie aus. Denken Sie daran, wenn Sie haben, wenn Sie dies haben, wo Sie Floats haben und dann haben Sie den gleichen Code. Aber dann ist da noch etwas drunter, das es überschreiben wird. CSS wird sich selbst überschreiben, also bleib nicht damit fest. Ein paar von mehreren Codezeilen achten auf das, was Sie tun. Sie können sehen, dass es es tatsächlich durchkreuzt. Und wenn ich das deaktiviere, dann erlaubt es diesem anderen Code, durch zu kommen. Okay, also spielen Sie damit und ich werde es im nächsten Video sehen. 18. Die Platzhaltertext in deinem Formular verwenden: Also, jetzt sind wir zurück auf das Anfänger-Formular, wenn Sie Ah, wenn Sie verwirrt sind, wie wir dort kamen, Wir haben dies in einem früheren Video, aber es ist Kontaktformular sieben. Also brauchen wir diesen kurzen Code. Wenn Sie dies noch nicht getan haben, gehen Sie zum Kontakt. Gehen Sie, Sie brauchen Kontakt. Bilde sieben, einstecken. Gehen Sie, um Formulare durchzuführen, erstellen Sie ein neues und dann werden Sie schließlich mit Ihrem neuen hier enden. Und dann brauchen wir diesen kurzen Code, was auch immer das ist. Sie haben eine Kopie auf eine neue Seite bekommen. Wo ist sie? Fange an, sich hier zu bilden. Und dann können Sie sehen, dass wir das einfach direkt in der Textversion oder im Textbereich ablegen. Nicht das Visuelle, der Text. Ich glaube nicht, dass es wirklich wichtig ist, aber setzen Sie den Text und dann lässt Sie auf Update klicken und dann sind wir in der Form. Also hier ist unsere Form. Jetzt werden wir es stylen. Wir werden mit ihnen spielen. Wir werden es stylen. Also haben wir bereits den Stil von vorher erhalten, um roten Text anzuzeigen, wenn Sie tippen. Aber wir werden jetzt mit all diesen verschiedenen Dingen herumspielen, also lasst uns einfach rummachen und ich zeige dir irgendwie, dass ich einfach ein paar Sachen mache und du kannst einfach darauf achten, mitzuspielen. Also rechts, klicken Sie, inspizieren, und ich sehe sofort die Eingabe. Sehen Sie sich nun die Polsterung an. Siehst du sofort die Polsterung? Ich sehe das Grün um ihn herum. Ähm, das kann ich ändern. Ich werde eigentlich die Schriftgröße auf 20 Pixel ändern, weil ich nett und groß Bob Jones Gmail niedrig sein wollte . Und dann meine Nachricht, ich möchte nur, dass da drin ist, damit ich damit spielen kann. Also bin ich immer so viele Male. Ich klicke einfach mit der rechten Maustaste und klicke, Inspect und immer hier zu den Daten. Okay, also gehe ich Teoh, wir werden diese Farbe loswerden. Ich hasse diese Farbe. Das ist wirklich nervig für mich. Und wenn man dann auf etwas schwebt, ist es eine blaue Linie. Ich will, dass Teoh das ändert. Also werde ich kommen, erscheinen diese Umschaltelement Zustand klicken Sie auf den Fokus. Und jetzt können Sie sehen, wie es aussieht, wenn es sich darauf konzentriert. Ich bin eigentlich Ach Grenze. Und dann werde ich es tun, ich werde das retten. Aber ich werde fünf Pixel diotieren und ich werde dort machen, wo wir gehen. Eigentlich sollte es so sein. Baba. Papa. Papa! Papa. Ich bin Salat. Fünf Pixel und dann die Farbe mit dem Hashtag davor. Das nennt man die Hexefarbe. Sie könnten auch einfach nehmen blau oder was auch immer von Chrome hören. Sieh dir das an. So wie das. Das ist schön. Ok. Und dann skizzieren. Ich weiß nicht, was das ist. Ok? Und ich werde mich auch in Großbuchstaben umwandeln und meine Gelder Familie wird Sand sein . Du kannst sehen, wie du willst, sieh dir das alles an. Diese Veränderung, die wir gerade vorgenommen haben. Das ist riesig. Es ist verrückt, wie viel du jetzt ändern kannst. Ähm, und Sie können sehen, dass diese nicht kleben, aber das ist, weil wir auf dieses Kontrollkästchen klicken. Also, was ich jetzt tue, ist ich. Zunächst einmal mag ich das nicht, also achten Sie bitte nicht darauf, dass dies getan wird. Aber ich will nur, dass du den Kern davon bekommst, wie wir hier arbeiten. Also haben wir diesen Bereich, an dem wir gearbeitet haben, ich werde diesen Code kopieren, und dann gehe ich zurück zu meinem Stil, das CSS und dann finde ich es. Ich finde, wo das vor dem Abgeordneten war. Wir setzen dies in ein früheres Video mit der Farbe Rot für den Eingabe-Fokus Eingabe, E-Mail-Fokus. Aber Earl, Fokus usw. Ähm und ich werde stattdessen meinen Code dort einschlagen und dann auf Datei aktualisieren klicken. Wenn ich dann wieder zu meiner Form komme, brauche ich Teoh nicht. Ich muss nicht mehr von Platz eins anfangen. Ich habe diese Arbeit schon erledigt. OK, also, ähm, das nächste, was wir in einen Platzhalter gehen werden, also geben Sie hier ein, wenn wir rechten Maustaste klicken und dann tun wir es HTML innerhalb dieses rechts am Ende, sie werden zu Platzhalter gleich Name. Sehen Sie, dass es keinen Spaß macht. Nun, das ist ihr statt dort. Also im Grunde muss ich dies in den eigentlichen HTML setzen. Nun ist der HTML-Code an einer anderen Stelle als das CSS. Okay, das CSS, an dem wir gearbeitet haben, und du gehst hin und her mit dem Stylesheet, diese Art von Sache. Aber um in der Lage zu sein, einen solchen Platzhalter für ein Kontaktformular zu machen, werden wir tatsächlich Teoh zu dem eigentlichen Kontaktformular zurückkehren, das wir erstellt haben. Und wo ist dann der Standard? Genau hier. Und dann wird es hier sein, wenn wir neue Dinge erschaffen. Also lassen Sie uns sagen, Sie möchten, dass Sie Formular erstellen. Mencius sagt, benutzt Texas einen Platzhalter des Feldes. Sie sehen, wie Platzhalter nach unten ihren Standardwert ist Text. Sehen Sie, es hat einen Platzhaltertext. Wir werden diese Platzhalter-Space-Zitate kopieren, Tech. Nun, wir werden es in Namen ändern, aber es wird in diesen Klammern sein, und es wird nur mit einem Leerzeichen vor Leerzeichen nach und dann, was wir wollen, in Anführungszeichen . OK, also für Namen, lass uns so Textur sehen, dass du diese lustigen Klammern siehst. Das ist es, wonach wir suchen. Ihr Name, Platzhalter für Leerzeichen. Und dann, in Zitaten, werden wir Ihren Namen hier unten machen. Wir werden Platzhalter oder E-Mail direkt hier machen. Es wird unterworfen sein. Oh, ich muss Platzhalter setzen. Sonst bin ich in Schwierigkeiten, und dann gleich hier. Sie eine Nachricht. Okay, was ich jetzt tun werde, werde, werde ich mich darum kümmern. Ich wollte das hier rausholen. Ich werde all das Zeug bekommen, das normalerweise über das Formular geht, und ich werde diesen Br einfach löschen. Das ist nur die nächste Zeile. Okay, also werden wir nur die nächste Zeile loswerden. Das brauche ich nicht mehr. Ähm, also dein Nein den ganzen Weg von deinem Namen bis zum Ende dieses Br-Tags, und ich lösche es. Und dann waren Sie per E-Mail bis zum Betreff des BR-Tags durch das BR-Tag. Ihre Nachricht durch das BR-Tag. Lass es mich retten. Und jetzt, wenn wir zu diesem Formular zurückkehren ,ist es auf einer Seite. , Ich habe es auf die Seite gelegt. Sehen Sie sich jetzt an, wir haben nichts von dem Zeug? Ich hatte eine Zeit, aber es ist eigentlich hier. Und es macht Spaß, wenn man dann tippt. Nein, ich mag es nicht. Wie es Geld ändert. Wie, wie Sie darauf klicken. Ich weiß nicht, dass mir das überhaupt nicht gefällt. Ähm, aber es macht wirklich Spaß, denn auf diese Weise brauchst du keine zusätzlichen Felder oben oder unten. Diese Leute, Sie können diesen Platzhaltertext einfach direkt in das Formular selbst einfügen. Okay, also, Jones, ähm, bei Gmail und hallo Jahre eine Nachricht. Okay, also macht das wirklich, wirklich, wirklich Spaß, damit zu spielen. Zeigt die Platzhalter-Sache mit dem Kontaktformular an. Sieben. Stecken Sie ein und Sie werden feststellen, dass Ihre Form ein bisschen anders zum Leben erwacht, als , äh, dann nur das gleiche alte langweilige Zeug an der Spitze spielen, mit dem ich im nächsten bisschen sehen werde . 19. Schau dir deinen Code an: Platzhalter MISTAKE!: Tu es nicht. Das letzte Video, wir haben die Form ein wenig geändert, um Platzhaltertext in hier zu haben. Also, wenn Sie anfangen, Bob Jones zu tippen, das tat Text verschwindet. Aber dann kam ich hierher und sagte: Hi, Hi, mein Name. Warum hat das nicht gelassen? Hinterlassen Sie mir eine Nachricht, die immer noch da ist. Was ist das Problem? Warum ist es nicht Platzhaltertext klug, es tatsächlich innerhalb des Textfeldes. Es ist nicht dieses gefälschte Ding, das mir sagt, was ich da machen soll. Aber es ist eigentlich da als tatsächlicher Text. Der Grund dafür liegt daran, dass ich es versaut habe, als ich das Verhaltensformular selbst erstellt habe. Und ich habe den Platzhalter nicht direkt gesetzt, bevor ich die Anführungszeichen gesetzt habe. Okay, das ist also riesig. Wenn Sie Text zu verschwinden wollen, müssen Sie in Kontaktformular sieben. Denken Sie daran, Sie müssen Platzhalter machen und mir dann eine Nachricht hinterlassen. Okay, Also, wenn Sie klicken, speichern Sie jetzt, wenn ich auf die gleiche Seite, die den Kontakt Anfänger Formular hat Hier gehen wir sehen . Jetzt, wenn ich darauf klicke, verschwindet es jetzt. Okay, also lässt dich davon nicht stolperieren. Ich will nur sicherstellen, dass du, äh, wenn du denselben Fehler gemacht hast, den ich gemacht habe, dass du genau so warst , wie ich es repariere. Es ist ziemlich einfach zu reparieren. Ähm, also los gehst du. Siehe im nächsten Video. 20. Mit Randnummern : Mache dies zur BEHEBE deines Codes: Und jetzt eine Sache, wenn Sie ein Formular machen, das mich irgendwie abhakt, ist, dass, wenn Sie unterschiedliche Grenzen haben, Sie sehen können, dass sich der Text verschiebt. Kannst du sehen, dass es etwas größer wird? Es sieht für mich komisch aus. Also möchte ich, dass Sie sicherstellen, dass, wenn Sie Ihr Styling tun, dass Sie die Grenze im Klopfen gleich halten, so dass, wenn Sie von einem Feld zum nächsten Feld klicken , es nicht verrückt aussehen wird. OK, also lasst uns Ah, ich habe gerade auf diesen Eingang geklickt und dann bin ich ein Klick auf diesen kleinen Stift hier und stelle sicher , dass es konzentriert ist. Und jetzt zieht es dieses Ding hoch, diese Art von verstecktem Code, der mir zeigt, was los ist. Es hat einen Salatrand, fünf Pixel mit dieser Farbe. Ich werde das nehmen und das werde ich in die reguläre kopieren. Hier unten kann man sehen, dass es keine Kälte und Konzentration gibt. Sie können den Fokus sehen, und dann können Sie sehen, dass dieser nicht das hat. Da gehen wir Grenze Jetzt das Problem hier ist, dass ich ändern wollte, wenn Sie darauf klicken. Ich wollte toll aussehen, wenn Sie darauf klicken, aber ich wollte Teoh nicht Größe ändern. Also statt dieser, sehen Sie diese Grenze ein PX-Salat, Was auch immer. Was ist der Unterschied? Dein Salat. Fünf S. X. X. Okay, also sind es fünf Pixel, der, den ich hinzugefügt habe. Aber Thea, das Original war nur eins. Also werde ich eigentlich nur Brit von dieser Zeile bekommen lassen, tatsächlich, tatsächlich, drücken Sie einfach ein Leerzeichen und dann, wenn ich abklicke und es löscht nur den ganzen Code die Grenze. Also ich bin tatsächlich ändert die fünf Pixel. Und wenn ich dann durch klicke, schiebt es nichts nach oben und unten, weil ich das Brett von der gleichen gehalten habe. Ja, es sah aus, als ob es aussieht, lassen Sie mich diese Fokus-Sachen ausschalten. Du kannst sehen, was ich sehe. Es sieht immer noch gut aus, wenn Sie darauf klicken. Ich kann sagen, wo ich bin, weil das hervorhebt. Es wird der große Hintergrund loswerden, aber es schiebt nichts nach oben und unten. Sie möchten nicht, dass Ihr Formular Ihre Formularfelder größer oder kleiner ist, wenn Sie darauf klicken , weil es sich einfach irgendwie locker anfühlt. Ist Mauritz besser, ich mag nicht, wie sich der Text in Großbuchstaben ändert, also muss ich das auch beheben. Aber ich wollte dir nur darauf aufmerksam machen, dass, wenn du deine Grenzen nicht gleich hältst , es sich irgendwie locker anfühlt und dafür sorgt, dass deine Muster dieselben sind und deine Grenzen gleich sind. Wenn Sie diese Kälte im Fokus verwenden, dass dieser Kraftelement-Status. Wenn Sie diese Fokus-Sache verwenden, müssen Sie wirklich sicherstellen, dass Sie das Gleiche tun. Alles klar, sieh ins nächste Bett. 21. Was ist Text-Transform: In Ordnung. Also aktualisiere ich die Seite danach. Ah, ich habe gerade das letzte Video gemacht und mir wurde klar, dass ich das, was ich änderte, nicht gespeichert habe, als fünf Pixel. Ich gehe zurück, ziehe mich zurück und überprüfe meine Arbeit, dass sich die Dinge nicht bewegen. Und, äh, dann nehme ich den ganzen Code. Denken Sie daran, Sie daran, ich muss nicht den gesamten Code nehmen, weil das einzige, was ich wirklich geändert habe, war die Grenze. Aber wenn du anfängst, was zum Hack? Nimm einfach die ganze Sache. Mach dir keine Sorgen darüber, es aufzubrechen. Und dann, äh, ich werde es einfach da reinkleben. Klicken Sie auf Datei aktualisieren. Und wenn ich wieder auf mein Formular zurückkomme und es aktualisiere, spart es meine Arbeit. Wie schön. Okay, das nächste, was ich loswerden will, ist das. Ah, Platzhaltertext ist nicht Großbuchstaben. Aber wenn ich darauf klicke, ist es, dass wirklich, wirklich stört mich. Ich hasse diese Schlamperei. Also, was wir tun werden, ist, dass wir zwei hier rüber kommen. Nun, das ist schon offen. Wenn Sie es richtig finden müssen. Klicken Sie auf, klicken Sie auf, Überprüfen. Und dann hast du den Eingang bekommen und dann geht's los. Es ist nicht die fokussierte Version. Behalten Sie im Hinterkopf. Wenn du diesen Stift im Fokus hättest, dann würde er es. Es würde mir das Volk zeigen. Ich möchte die fokussierte Version nicht sehen. Ich möchte die unfokussierte Version sehen, und ich möchte sicherstellen, dass das besteuert Transformation. Wenn Sie an der falschen Stelle klicken, öffnet es nicht wirklich eine neue. Lassen Sie mich gleich da. Text, Bindestrich, transformieren Doppelpunkt Großbuchstaben und eine Sache, die schön ist an Chrome taub Tools ist, dass es irgendwie für Sie ausfüllt. Es ist wirklich hilfreich. Wenn du herausfinden willst, was zum Teufel das war? Was soll ich sagen, ihre oder was sind meine Optionen? Ähm, ich meine, selbst so, ich mache nur Text-Umwandlung Colon und es gibt mir diese ganze Liste. Das ist wirklich, wirklich, wirklich praktisch. Also nutze das. Okay, jetzt, da ich Text in Großbuchstaben transformiert habe, können Sie sehen, wenn es nicht fokussiert ist. Es ist Großbuchstaben, genau wie die fokussierte Version. Wenn ich durch klicke, sieht es wirklich schön aus, und ich kann immer noch sehen, wie sie sich ein wenig bewegen. Das macht mir Sorgen, aber der Text scheint sich nicht zu ändern, was wirklich, wirklich, wirklich, wirklich nett ist wirklich, . Ich mag es wirklich, dass es das nicht tut. Es ändert das Blau, was mir klar wird, was los ist, dass Sie wissen, auf welchem ich mich befinde. Aber ich mag es, dass ich meine, das ist nur schlampig von den Textänderungen so. Es scheint nur seltsam zu sein. Also werde ich das jetzt nehmen und ganzen Code nehmen. Und da ich gerade an dieser Art von Bereich gearbeitet habe, um die Vorsteuer auszuwählen, als E-Mail zu setzen und all das Zeug einzugeben, werde ich gleich über diesen Code gehen, OK? Stellen Sie sicher, dass Sie, wenn Sie dasselbe Zeug auswählen und sich der Code ändert, einfach das gesamte Nicht starten. Fangen Sie nicht an, es so darunter zu stellen. Ok. Sie sicher, dass Sie damit nicht zu schlampig werden, denn sonst werden wir eine wirklich harte Zeit in Ihrem Code haben. Wenn Sie Probleme haben. Kommen Sie nach oben, klicken Sie auf Datei aktualisieren. Dann sind wir wieder da, um mit der Reform zu beginnen. Und hier sind wir. In Ordnung. Stellen Sie also sicher, dass Sie damit spielen und achten Sie einfach darauf, wie Ihre Form ist. Ach, was? Die Dinge sind schlampig. Welche Dinge sehen seltsam aus und versuchen Sie dann herauszufinden, wo Sie auswählen und wie es auswählen, und gehen Sie dann auf die CSS-Seite und beginnen Sie mit ihm zu vermasseln, siehe im nächsten Video. 22. Achte auf kleine Details: Line-Height ist wichtig: Alles in Ordnung. Ich habe herausgefunden, was mich verrückt gemacht hat. Das ist keine große Sache, aber ich möchte nur, dass Sie bemerken, wie viel Detail in der Aufmerksamkeit hier, damit Sie die gleiche Art von Sache tun können, wenn Sie sich darum kümmern. Schau dir an, wie sich diese ein wenig bewegen. Wenn ich auf ihn klicke, sehen Sie, wie sehen Sie den Text dort, Sam bewegt sich nach oben und unten nur ein kleines bisschen, das mich verrückt versucht. Es ist keine große Sache. Ich meine, vielleicht gefällt es dir vielleicht, dass es sich ein bisschen bewegt. Es macht es irgendwie ein bisschen mehr lebendig, aber das gefällt mir überhaupt nicht. Das Problem lügt tatsächlich. Höhe Sie können die Höhe der Eingabezeilen normal sehen. Das ist es, was mich verarscht. Wenn ich das ausgeschaltet habe, können Sie sehen, dass diese Luft massiv ist. , Lassen Sie mich das glauben,weil ich nicht will, dass ich nicht wirklich darüber reden will, denn das ist Input. Da ist das so eine standortweite Sache. Ich möchte nicht wirklich Code darüber schreiben, weil ich es nicht wirklich bin. Ich frage mich wirklich, was das sonst noch aneinander bringen wird. Also, was ich stattdessen tun werde, ist, einfach zu meinem in all diesen Eingabetyp Texteingabe hinzuzufügen, URL, E-Mail, all das Zeug. Und ich werde nur eminent, weil ich ihm nur eine Zeilenhöhe von 20 Pixeln geben werde. Und jetzt ist es Steinsalat, weil ich ihm diese Linie gegeben habe. Ich OK, so etwas von dem Zeug, dass, wo es scheint nur ein wenig wackelig. Sie sind klein. Es sind kleine, seltsame Dinge, die passiert sind. Da gibt es eine Lösung dafür. Irgendwo in deiner Kälte. Da ist etwas los. Deshalb ist es so praktisch, einige dieser Kästchen hier zu aktivieren und zu deaktivieren, ohne Code schreiben zu müssen. Und schätze, Sie können diese Chrom taub Werkzeuge verwenden, um wirklich da rein zu kommen und einfach so zu sein, was zum Teufel macht das? Oder wie Sie versuchen herauszufinden, was Sie versuchen, den Code auseinander zu brechen und zu sagen: Nun, Nun, warum ist er kaputt? Es ist so einfach, diese Kontrollkästchen zu deaktivieren, um den Code betrachten und sehen zu können was er wirklich ist. Also, jetzt werde ich diese ganze Codezeile mit der neuen Zeile Height, Colon 20 PX nehmen und zum CSS-Dateimitglied gehen. Ich hatte das von vorher. Ich habe an diesem Abschnitt dieser Eingaben gearbeitet, oder? Und dann füge ich es hinein und los geht's. Ähm, bedenken Sie auch, auch, dass diese Syntax innerhalb von CSS sehr wichtig ist. Es ist egal, was du ändern willst. Und dann Colin und dann die Daten für die bestimmte Sache, die Sie ändern möchten, dann ein Semikolon. Okay, wenn du keinen Semikolon hast, dann weiß es nicht, auf das nächste zu gehen, was du ändern willst, also wirst du es schwer haben. Stellen Sie also sicher, dass Sie diesen Syntex richtig verwenden. Dies ist CSS in der Steuer. Wenn Sie in sind, wenn Sie in HTML sind als sogar diejenigen, die diese Selektoren wie diese Klasse hier verwenden, dass der Punkt nicht OK übersetzt, ist der Punkt nicht in HTML, es ist nur Klasse gleich, wie es Klasse gleich mit Anführungszeichen ist. Okay, also versuch einfach, das zu kriegen. Stellen Sie sicher, dass Sie die Syntax richtig bekommen, wenn Sie zum ersten Mal mit dem Programmieren beginnen, es ist wirklich verwirrend Es gibt all diese verschiedenen Dinge, die irgendwann aufheben würden. Okay, das soll es hier drüben sein, und das soll es hier drüben sein. Versuchen Sie es einfach weiter. Und wenn die Dinge brechen und wie die Dinge durcheinander sind, versuchen Sie einfach irgendwie, diesen Gedanken in Ihrem Kopf wieder wie, OK, OK, welches CSS und HTML zu durchlaufen. Wie soll es aussehen? Okay, also hier gehen wir auf die Update-Datei und dann überprüfen Sie, ob alles durchgekommen ist, richtig? Ich kontrolliere unsere und diese Luft noch felsig. Gut. Ehrfürchtig. Endlich sehen wir uns das nächste Video an. 23. Den Text für deinen Platzhalter gestalten: Dieses Video könnte ein bisschen zu tief sein für das, was Sie gerade versuchen, aber zumindest wollte es zu Ihrer Aufmerksamkeit zu bringen. Und ich werde es schnell in Bewegung machen. Sehen Sie, schauen Sie sich Ihren Namen an. Siehst du das? Der Text da drüben. Siehst du den Spaß? Sieh mir zu, wie du deinen Namen oben drauf gibst, kannst du sehen, dass es anders ist. Es macht etwas anderes Spaß. Das gefällt mir gar nicht. Es stimmt nicht überein. Aber wenn ich mit der rechten Maustaste klicke, wenn ich auf Inspektieren klicke. Ich werde zu dieser Eingabe gebracht , und ich kann nicht finden,wo das Styling für den Platzhaltertext ist. Es spricht nur über all das Styling dies für die Eingabe. Das ist alles für, äh, Text, den ich gerade eintippe. Es gibt also einen kleinen Trick mit Dev-Tools. Gehen Sie zu diesen drei Punkten und gehen Sie dann zu den Einstellungen. Und dann, wenn Sie auf zeigen wir Benutzer Agent Schatten Deal em. Dann, wenn ich zurückkomme, können Sie sehen, dass diese Eingabe wenig Dropdown-Pfeil hat. Wenn ich darauf klicke, dann bin ich in der Lage, auf das Platzhalter-Styling zugreifen und Sie können die lustige Familie Monserrat, Helvetica, all das Zeug sehen Helvetica, . Das ist, was mit dem tatsächlichen Platzhaltertext los ist. Was ich dann tun würde, ist, dass ich das kopieren würde, und ich würde das zu meinem eigentlichen Eingabetext bringen. Also, wenn ich deinen Namen aufnehme, funktioniert immer noch nicht, weil es nicht im Fokus steht. Eins, lass mich sehen. Konzentrieren Sie sich hier. Dein Name. Da gehen wir hin. Siehst du das? Jetzt passt das zu. Ach, so viel besser. Also wollte ich Ihnen nur sagen, dass die Antwort da ist, aber Sie müssen vielleicht ein wenig mehr graben, aber, ähm, aber ähm, suchen Sie weiter und versuchen Sie weiter, es immer perfekter zu machen, wenn Sie können, don Lassen Sie sich nicht davon verdrängen. Aber ich möchte Sie wissen lassen, dass diese Art von Zeug ist, wonach Sie Ausschau halten sollten . Ähm und ich hoffe, das hat dir geholfen, im nächsten Bett zu sehen 24. Schnelle Durchleitung: HTML-Elemente, die du jeden Tag verwendest.: alles in Ordnung für dieses nächste Video, wir gehen Teoh gehen durch eine Reihe von verschiedenen Elementen HTML-Elemente, die Sie wissen sollten , sie sind nur grundlegende Elemente co Zwei Seiten und fügen Sie dann neue. Und dann beginnen wir eigentlich im visuellen Editor hier. Okay, also lassen wir es mich sehen. Lassen Sie mich dieses kleine bisschen größer machen, Eigentlich, lassen Sie mich geschlossene Dev-Tools kräuseln. Ähm, auch, als ob Sie auf diese Symbolleisten-Umschaltfläche klicken. Hier erhalten Sie Zugang zu diesen verschiedenen Stylings. Diese verschiedenen Überschriften. Ich möchte, dass du das tust. Also zuerst fangen wir mit H eins an und sagen einfach jeden und dann drücken wir die Rückkehr. Es ändert sich zu Absatz ein wenig. Dies ist ein Absatz, und drücken Sie dann erneut die Eingabetaste. Das ist jetzt eine Liste mit Aufzählungen hier. Denken Sie daran, sagen Sie, das ist eine Liste. Das ist die Liste der zweiten Dinge. Das ist das dritte Ding. Und dann, ähm, ich möchte, dass du zum Text gehst und diesen Text hier klickst, und du kannst sehen, was passiert, ist das gleiche Zeug, das wir gerade reingelegt haben, jetzt ist es jetzt co. Sie können tatsächlich den Code jetzt diesen Bereich mit diesem Bereich sehen, der tatsächlich ein P-Element ist nur der Text. Es hat keine P-Tags um, und das ist in Ordnung mit WordPress. Du brauchst keine P-Tags. Es nimmt einfach P-Tags an, wenn Sie nichts anderes haben. Aber ich wollte nur hier sehen. Also ch eins und dann schließt das H ein Tag. Das ist nur eine Überschrift, oder? Und dann haben wir hier P-Elemente. Das ist ein Textelement. Und dann sehen Sie diese ul und dann Ally. Dies ist eine neue geordnete Liste. Und dann, äh, hier ist das. Hier ist wie jede einzelne Kugel mit dem Verbündeten und dann dem Verbündeten. Also möchte ich, dass du das Zeug merkst. Wenn wir das speichern, lassen Sie uns das veröffentlichen. Wenn wir das speichern und einen Blick darauf werfen, können Sie sehen, dass es die Überschrift gibt. Da ist das P-Element, und dann hier ist hier eine Liste, also möchte ich, dass du diese Vorstellung davon machst. Was hier los ist, ist, dass wir verschiedene Dinge im visuellen Editor hinzufügen und bearbeiten können , indem wir diese verschiedenen Überschriften usw. verwenden und dann diese verschiedenen Dinge verwenden. Aber das ist es nicht. Es ist keine Magie. Ich meine, du machst diese Dinge hier, und es schreibt im Grunde den Code für dich. Aber wenn Sie einen Blick auf den Code werfen möchten, klicken Sie auf Text und dann können Sie tatsächlich verschiedene Klassen für Sachen hinzufügen. Lassen Sie uns Therapieunterricht. Sagen wir einfach Absatz Spaß auf Kleidung, die Tag und dann kommen Sie her und stellen Sie sicher, dass Sie den Schrägstrich p. Okay, Sie müssen immer beenden was auch immer. Was auch immer du anfängst, du musst mit dem Schrägstrich enden. Also werden wir auf Update klicken und dann komme ich hierher. Und wenn ich mit der rechten Maustaste klicke und inspiziere, hat es diese Informationen für mich gespeichert. P Klasse entspricht Paragraph Fonds. Nun, manchmal, ah WordPress tatsächlich entfernt Code, und in diesem Fall, Sie wollen einen Stecker installieren, dass, um sicherzustellen, dass WordPress nicht tut, dass. Aber im Moment funktioniert es gut. Das wollte ich dir nur aufmerksam machen. Und dann, wie wir lassen mich das größer, weil es einfach zu arbeiten ist, und dann, wie ich diese neue Stilregel hier klicken wir gehen p Punkt Paragraph Fonds. Dies ist ein P-Element mit der Klasse oder mit dem Spitznamen des Paragraph Fonds. Und dann kann ich sagen, dass Farbe es blaue Juden sein wird, mit denen Sie gearbeitet haben. All diese verschiedenen Aspekte von WordPress wurden zuerst an der tatsächlichen, äh, auf dem visuellen Divisional Editor bearbeitet äh, . Und dann können wir zum Text gehen, und dann können Sie sehen, dass wir Klassen direkt dort hinzufügen können, was wirklich, wirklich, wirklich, wirklich praktisch ist wirklich, . Und dann, wie wir es speichern und wir gehen in tatsächlich die Seite zu sehen, dann können wir Chrome Deva Werkzeuge verwenden, um wirklich durcheinander zu bringen. Okay, p-Klasse entspricht Paragraph Spaß. Ich klicke auf dieses Plus, und dann kann ich jetzt die Farbe für dieses Element auswählen. Und dann, was ich tue, ist, dass ich es speichern, indem ich diesen Code eine Kopie auswähle. ganze Sache mit den Klammern. Okay, also hat es den Selektor oben p-Element mit dem Spitznamen Klasse Absatz Spaß. Und dann können Sie diese Klammern sehen. Das ist der Code zwischen den Klammern. Also werde ich das kopieren und dann gehe ich zurück. Teoh. Nun, ich sollte noch einen Tab öffnen, aber ich gehe zurück, wo ist er? Erscheinungsbild und dann Editor. Aber ich habe mein Stylesheet genau da. Lassen Sie mich nach dem leeren Raum suchen, den ich gemacht habe. Es gibt einen schönen leeren Platz in der Update-Datei eingefügt, und wenn ich dann zu dieser genauen Seite zurückgehe, wird es diese Informationen speichern. Und da gehen wir. OK, also ist das eine Art Spaziergang durch diese super grundlegenden Elemente, aber benutzte den WordPress-Editor plus so das visuelle und den Texteditor, um zu sehen, was los ist , und Sie können Ihre Klassen in dort. Sie können Ihre Spitznamen direkt dort hinzufügen, egal ob Sie eine Klasse für das P-Element hinzufügen möchten, oder wenn Sie eine Klasse für die UN-Wortliste in der geordneten Liste hinzufügen möchten, übergeben oder, wenn Sie für die H ein Elementklasse ist gleich. Dies ist Überschrift Okay, so dass Sie das alles in der WordPress-Back-End tun können. Und dann, wenn wir zu Chrome gehen, schauen Sie sich Chrome Dev-Tools an. Sobald wir die Seite tatsächlich gespeichert haben, alles. Alle diese Klassen werden gespeichert, okay, und dann bin ich dann, wenn ich fertig bin, wenn ich damit arbeite, wirkt sich dies auf diesen bestimmten Abschnitt aus, und es ist einfach so viel einfacher, darauf zu zeigen, weil Sie diese -Klassen. Diese Spitznamen in der WordPress zurück. Und jedes Mal, wenn Sie auf eine neue Stilregel klicken, sollte Chrome schlau genug sein, um Ihnen diese spezifischen Selektoren zu geben. Also hoffe ich, dass Hilfe und ich werde Sie im nächsten Video sehen. 25. Mit Bildmaterial: Breite, Höhe + Retina-Friendly arbeiten: als nächstes nach oben. Wir sprechen über Bilder und Styling-Bilder. Jetzt ist es einfach, ein Bild und WordPress hinzuzufügen und klicken Sie auf Medien hinzufügen. Und dann klicken Sie auf Klicken Sie auf einen dieser Jungs und klicken Sie auf Einfügen in die Seite und Sie können sehen es ist das Bild Tag bekommen. Okay, also Bildraum-Quelle SRC gleich und dann das gesamte mit diesem Bild verknüpfte. Nun, seien Sie vorsichtig. Wenn Sie Bilder im Backend auswählen, können Sie tatsächlich verschiedene Größen wählen. Also nehmen Sie nicht nur unbedingt die Größe, die WordPress wählt. Und in der Tat ist es besser, wenn Sie eine größere Größe wählen, denn dann können wir es sogar mit der Hälfte der Größe für Retina-Monitore oder iPhones laden. Wenn Sie ein kleines Bild haben, das regelmäßig auf dem Bildschirm gut aussieht, wenn Sie Ihr iPhone laden , es nicht so gut aus. Also lade ich normalerweise riesige Bilder. Jetzt ist das eigentlich ein bisschen zu groß. Ich könnte dies ein wenig besser optimieren, indem ich eine ah bessere Komprimierung wähle, aber so wollen wir größere Bilder, denn dann können wir sie zwingen, 50% Breite zu laden und dann alle zusätzlichen Daten gespeichert und wir müssen nicht mehrere Bilder haben. Wenn dir das über den Kopf ging, mach dir keine Sorgen. Lassen Sie uns in bestimmten DuPage nach oben gehen. Und dann entschied ich mich dafür, dass ich eigentlich eine Vollformatversion dieses Bildes wählte , und ich werde auf Update klicken und jetzt tatsächlich das angerufen. Ich beschloss, das herumspielen zu nennen, und so änderte ich auch den Link dafür. Wenn du das tun willst, kannst du das gerne tun. Und jetzt können wir sehen, dass das Bild den ganzen Witz dort füllt. Ich kann Ihnen das beweisen, wenn wir es untersuchen, und wenn ich einfach auftauche und sehe, wo ist es? Ich kann Ihnen das beweisen, wenn wir es untersuchen, Haupt dort. Sieh dir das an. Siehst du die Orange an der Seite? Das ist die Marge für, ah, bestimmte Styling für dieses Thema. Es ist auserwählt, dass es mir so viel Platz auf der Seite gibt. Wenn wir die Seite vergrößern, wird es diesen Leerraum ändern und sicherstellen, dass Sie das auftauchen sehen können. Okay, also, ähm, was wir tun werden, ist, dass wir uns jetzt damit verwirren. Also, wenn Sie mit der rechten Maustaste klicken, überprüfen. Und dann, äh, nein, wenn ich hier klicke. Und genau hier. Sehen Sie, was es wählt. Bild ausgerichtet. Keine Größe Volles WP-Bild. 20. Manchmal möchte ich nur Styling wirklich richtig auf dieses sehr spezifische Bild setzen. Und manchmal möchte ich ein DIV um es herum legen, so dass ich irgendwie diese Seite weit haben kann. Ist das passiert? Site breit. Wenn ich mache, dass dies auf anderen Seiten passiert ist, lassen Sie mich sagen, dass eine andere Art und Weise. Dieses Bild. Im Moment kann ich es auf mehrere verschiedene Arten auswählen. Ich kann entweder nur auswählen, dass es ein Bild ist, nur die Tatsache, dass es ein Bild ist. Ich kann es auswählen. Aber ich möchte das wahrscheinlich tun, denn das wird alle Bilder auf der gesamten Website auswählen . Ich kann nach diesem suchen, diese spezielle Daten WP Strich Bild, Dash 20, das ist spezifischer. Das ist gut, aber das ist nur spezifisch für dieses Bild. Aber wenn ich gehe, um die Seite zu bearbeiten und ich würde sagen, ich lege ein div um es Also gibt es ein div und komm dann hierher und schließe das Dave-Tag. Ich legte diese Box um das Bild, und ich bin tatsächlich geben ihm eine Klasse von Spaß Bild und dann s Sie können sehen, wie ich diese Raumklasse gleich Zitat Spaß Bild ganz. Das ist der Spitzname, den ich dieser speziellen Give-Box gebe, okay? Und es hat das Bild darin. Aktualisieren und dann sind wir wieder auf die Seite. Los geht's. Jetzt sieht alles gleich aus, weil ich noch kein Styling für dieses Div habe. Aber wenn ich mit der rechten Maustaste darauf klicke und auf Inspect klicke, brauche ich ein bisschen mehr Zimmer. Ich kann diesen Code besser sehen. Das ist das für mich. Wenn ich das ansehe, ist es nur bla, bla, bla. Kai, sieh dir das nicht an und sei wie Oh mein Gott, muss das ganze Zeug jetzt verstehen. Mach dir deswegen keine Sorgen. Ich sehe das nur als ein Stück wie Okay, das ist ein Bild. Ich muss mir keine Sorgen um den ganzen Gobbledygook da drin machen. Du könntest Div Bild hier sehen. Eine div-Klasse entspricht lustiges Bild, das div dieses spezifische Bild bis jetzt umgibt. Wenn ich plus klicke, können Sie sehen, es ist als Punkt Spaß Bild. Jetzt wählt man nur die eigentliche div-Box aus. Aber wenn ich wollte, um alle Bilder innerhalb von dibs mit Spitzname Spaß Bild wählen. Ich gehe einfach wie dieser Raum und dann bin ich g. Und jetzt habe ich alle Bilder innerhalb eines div namens lustiges Bild ausgewählt. Wenn ich also einen anderen Beitrag und eine andere Seite erstelle und das gleiche tue, wo ich ein Bild aufstelle, aber dann lege ich ein div um es mit dem Spitznamen des lustigen Bildes, dieses Styling wird das Styling, das ich jetzt mache, wir werden auch Wählen Sie das auch aus. Okay, äh, also hier gehen wir, und ich werde sagen, mit 50 Pixeln, die winzig sind. Es gab 100 203 104 105 100 Boot. Tut mir leid, ich habe es versaut. 200. 304 105 106 107 108. , Wie kommt es,wenn ich 607 108 100 drücke? Wie kommt es, dass es nicht größer und größer wird? Es gibt 4 506 107 100 Nun, das sieht die gleiche Größe weise und immer größer, weil dieses Bild wird nicht größer werden. Es wird sich nicht füllen. Es wird nicht , der Grenze vorbei gehen,weil es ein anderes Styling drauf hat. Siehe, diese maximale Breite beträgt 100%. Wenn ich das ausziehe? Siehst du, was passiert? Es schiebt über diese Grenze, aber WordPress kommt Lager mit diesen spezifischen Stylings, um Ihr Leben ein wenig einfacher zu machen . Aber man kann sich nicht einfach ändern. Du kannst nicht einfach Code schreiben für, du weißt schon, ich will, dass das mit du weißt schon, ich will, dass das mit 1500 Pixel ist. Das wird nicht funktionieren. Du musst durchdenken. Warum wird es blockiert oder was ist damit los? Okay, also ist nicht nur da mit, sondern es gibt auch Max mit Und wenn Sie einen anderen Code nicht rückgängig machen, ist das eigentlich eine site-weite Sache. Sieh dir das an. Ich bin G ist nur Bilder. Nur alle Bilder. Alle Bilder auf der gesamten Website haben diesen Code, da dieser Selektor so nicht spezifisch ist . Es ist nur die Auswahl aller Bilder. Okay, also in diesem Fall ist eigentlich gut, weil wir sagen, OK, Max, Max, mit 100% Bildern werden nie größer sein als die Boxen, in denen sie sich befinden. Es ist also hilfreich. Geht Eso zurück, um was zu hören? Ich will mich jetzt nicht wirklich damit anlegen. Wir könnten sogar sagen, Mal sehen, ob Max mit ihm verwirrt. Okay, also hier. Also, wenn ich Max mit hier mache, würde das für dieses spezifische Bild funktionieren, weil es innerhalb eines lustigen Bild-Tags ist. Okay, ähm, wir können auch tun. Lassen Sie uns versuchen, den Zehenschnitt etwas davon abzuschneiden. Also mit ist 200 Pixel. Die Höhe beträgt 500 Pixel. Sieh dir das an. Yuck. Wenn das bei einigen Ihrer Bilder passiert, möchten Sie automatisch verwenden. Okay, das kannst du also sehen. Das hier unten in dieser Tag-Höhe ist automatisch. Aber wenn Sie wählen wollen, wissen Sie, eine bestimmte mit und aus irgendeinem Grund wird es durcheinander und die Höhe ist, dass Sie versuchen, die Höhe zusammen mit ihm zu setzen . Du brauchst keinen Zeh. Denken Sie an die exakte perfekte Höhe. Sie müssen nicht abschleppen, all diese Mathematik heraus, wenn Sie einfach Auto machen. Oder in diesem Fall kommt Wordpress tatsächlich Lager mit Höhe, kalt und Auto. Weil Sie sehen können, dass alle Bilder auf der gesamten Website diesen Code haben. Ähm, aber tut mir leid. Lange Geschichte kurz. Sie müssen nicht unbedingt immer eine Breite und eine Höhe für Ihr Bild haben, da dieser Code vollständig eingefügt wird. Okay, also wählt es die Breite aus diesem spezifischen Teil des CSS-Codes, und dann wählt es auch, dass die maximale Breite 100% beträgt und auch die Höhe automatisch ist. Okay, also gibt es Code, der bereits in der WordPress-Website ist, auf die Sie irgendwie achten müssen . Wenn Sie wissen, ob Ihr Code nicht richtig funktioniert, müssen Sie herausfinden, wie zum Teufel das passiert? Welcher anderer Code ist da drin, der mich davon abhalten würde, wohin ich gehe? Normalerweise, was ich tun werde, ist normalerweise für ähm, für Bilder, die ich auftauchen möchte. Große Unbereitschaft Bildschirme ist, ich werde sicherstellen, dass die größten sie sind die größten sie gezeigt werden, was bedeutet, dass, wenn die Grenzen der Website sind vielleicht Max 800 Pixel, Ich werde das verdoppeln, für wie groß das Bild tatsächlich sein muss . Nehmen wir an, dass die Breite für ein Bild 800 Pixel betragen wird. Es wird so weit zeigen. Sehen Sie sich das an, wenn Sie hier unten sehen können, es ist schwer, gleichzeitig darauf zu zeigen. Schauen Sie nach unten in diesem Bereich, wenn ich über Sie rollen sehen 400 Pixel von 67. Es zeigt, dass bei 400 Pixeln breit in 267 Pixeln hoch, sogar Teig, das Bild tatsächlich größer ist als das. Jetzt lass mich meinen Code ausschalten, den ich hier gemacht habe, und mal sehen, was es als das größtmögliche zeigt , was es jemals zeigen wird. Versuchen Sie, das hier den ganzen Weg über die Seite zu ziehen, die die größte scheint. Und dann lassen Sie mich mit der rechten Maustaste klicken und auf Inspect klicken. Und dann können Sie sehen, dort gehen wir 8 40 Also sind es 800. Kannst du das kleine sehen? Schauen Sie hier, wenn ich rüber gehe, okay, schauen Sie weiter genau da. 8 40 von 5 59 So 8 40 ist die Breite. Also werde ich das verdoppeln. Okay, also 8 40 16 80 Also werde ich ein Bild haben, das 1680 Pixel breit ist, und wenn ich es dann in einer 840 Pixel-Box zeige, wird es eine Tonne davon abschneiden. Aber wenn ich auf einem Retina-Bildschirm bin, wird es toll aussehen, gegen wenn ich hier ein Bild mit 840 Pixel Breite reinstelle. Es wird auf einem normalen Computerbildschirm gut aussehen. Aber wenn es einen Netzhautbildschirm oder ein iPad gibt, wird es schlecht aussehen. Okay, also willst du immer. Nun, meine Technik ist es, das zu verdoppeln. Sie haben Plug Ins, mit denen Sie Teoh verschiedene Versionen von Bilddateien haben, die mich antreibt. Ich möchte nur ein Bild hochladen und es funktionieren lassen. Also entschied ich mich, ein besseres Bild hochzuladen und es dann in halber Größe zu zeigen. Macht es Sinn? Wenn dies nicht der Fall ist, hinterlassen Sie bitte einen Kommentar und ich werde mit Ihnen mehr darüber sprechen. Okay, Okay, also das ist so ziemlich alles, worüber wir gerade mit Bildern reden. Ich sehe dich im nächsten Video und danke, dass du bei mir geblieben bist. Lasst uns weitermachen. 26. Arbeiten mit Links: Padding, Margin + Behebung eines häufigen Problems: als Nächstes. Wir reden hier über Link-Styling. Nun, zuerst müssen wir eine Verbindung in der Rückseite des Wortes Brust machen. Ein Entwurf ist gleich, was auch immer Ihr Link Google dot com ist. Und dann tippst du, was du willst, genau hier. Das ist es, was sie tun. Text für Ihren Link wird sein, und dann schließen Sie das A Tag. Nun, wenn das für Sie ärgerlich ist, können Sie immer, ähm, zum visuellen Editor gehen und dann einfach Hier ist ein Link eingeben. Und dann, wenn Sie es auswählen und klicken Sie auf diesen Kerl hier, können Sie eingeben, was Sie wollen, und dann wird es den Link für Sie können sehen, die genau gleich aussehen . Wenn ich zum Text gehe, kannst du ihn sehen. Hat das von der H Floß für mich gemacht. Okay, also eine Sache, die ich auch getan habe, ist, dass ich ganz oben bin. Ich habe den Code um das Bild herum loswerden, das ihm ein div mit einer bestimmten Klasse gab, und ich habe eine Klasse um die Gesamtheit der Schmerzen des Verletzungsinhalts gelegt. Eso div Klasse entspricht Spaß Seite und dann stellen Sie sicher, dass mein div Ich habe gerade einen Link hinzugefügt. Deshalb habe ich es vermasselt. Ich werde sicherstellen, dass das Ende dieses div, weil ganz unten. Also ganz oben habe ich den Dave am Anfang und ganz unten habe ich das div-Ende. Also setze im Grunde eine große Box um den gesamten Inhalt herum, damit ich sicher sein könnte, Onley, ähm, Dinge darin auszuwählen ähm, . Okay, wenn ich einen Stil auf allen Links setzen würde, ist das ein bisschen zu breit. Ich möchte das nicht unbedingt tun, denn dann bedeutet das alle Links sogar in der Fußzeile und der heißeren und überall sonst. Ich will das nicht unbedingt tun. Aber wenn ich hier eine div-Klasse um diesen Code lege, dann bedeutet das, dass ich ihn auf verschiedene Arten auswählen kann. Lassen Sie mich Ihnen zeigen, was ich meine Update und dann gehen wir hierher. Also, wenn ich zu diesem Code komme, wenn ich auf Inspect uh klicke, wenn ich auf dieses Plus hier klicke, was ich tun kann, weil ich diese Div-Klasse von Spaß Seite habe, die ich hinzugefügt habe Denken Sie daran, ich habe die Klasse gleich Spaß Seite an der Spitze. Und dann schloss ich das div unten mit diesem ah slash div schließenden Tag. Aber jetzt ist es, anstatt nur alle A-Tags auf der Gesamtheit der Website auszuwählen, was schlecht wäre, weil dann alle Links das Styling bekommen, was ich nicht will. Was ich tun werde, ist, dass ich alles in der lustigen Seite div Box sagen werde. Das ist eine Verbindung. Du siehst das A genau dort. Das ist der Link-Selektor, der dann nur diese Dinge den Code erhalten. Wenn ich also abklicke, schau dir an, was passiert. Also, jetzt bekommen diese nur, dass dieser Code und dieser Link nicht. Okay, deshalb legen wir die DIV-Klasse um diesen Eintrag Inhalt, weil ich jetzt einfach alle Links auswählen kann , die in diesem Eintrag Inhalt enthalten sind. Okay, manchmal willst du also super breit sein und du möchtest Styling für die gesamte Website wählen . Aber manchmal wollen Sie nur, ähm, Sie wollen nur, dass der Code auf einen sehr, sehr spezifischen kleinen Teil fokussiert . Manchmal möchten Sie sich nur auf einen Link konzentrieren, in diesem Fall können Sie eine Klasse für diesen bestimmten Link einfügen. Aber dieses Mal haben wir es ein bisschen einfacher gemacht, und wir haben eine DIV-Box um unseren gesamten Eintrag Inhalt gelegt. Und dann gaben wir ihm einen Spitznamen des Spaßes. Seite. Also dieser Selektor hier sucht nach allem in einem div mit der Klasse der lustigen Seite, und er sucht nach allem, was auch ein Link ist, und es macht die Schriftgröße 40 Pixel. Okay, schauen wir uns das an. Let's dio Hintergrund ist blau und ich hasse diese blaue Farbe, weil es schrecklich ist. Zurück Beule, Beule über Blase Verbindung mit Mitteln. Ich bin kleiner, ich werde das einfach rausnehmen, okay? Und dann, äh, Polsterung ist 40 Pixel. Der Rand beträgt 40 Pixel. Werfen Sie einen Blick auf das. Schauen Sie, was dieser Link passiert ist. Ich habe es so viel Polsterung gegeben, dass es tatsächlich über das Ding drängt, das oben ist. Es schiebt über das Bild darüber. Sie können sehen, dass das Blau es irgendwie trifft. Lassen Sie mich ein bisschen größer machen, um das ein bisschen leichter zu sehen. Da gehen wir. Sie können das so sehen, wie es sich verhält. Es drängt tatsächlich in den Inhalt darüber. Der Grund dafür liegt an der Anzeigeeigenschaft. Es ist ein In-Line-Element. Okay, also das wird im Grunde den Text genau dort halten, wo er ist. Und dann wird es einfach irgendwie nach oben und um ihn herum schieben, egal was passiert. Aber wenn wir es zu einem Inline-Blocker, Element in Linie Bindestrich Block machen , dann beginnt es sich ein wenig besser zu verhalten, und Sie können sehen, wenn wir den Link betrachten. Jetzt hat es die Polsterung im Rand, und es verhält sich tatsächlich gegen Behalten Sie Ihr Auge auf das Grün und die Orange genau dort. Wenn ich die Anzeige im Zeilenblock ausschalte, könnte man sehen, dass es immer noch grün und orange ist. Aber es ist alles vermasselt. Ist es nicht. Jetzt ist es nicht perfekt. Wenn ich Block anzeige, ist das sogar eine andere Art, ihn anzuzeigen. Wo, anstatt es irgendwie auf den eigentlichen Text selbst knirscht, dehnt es sich einfach den ganzen Weg hinaus aus. Okay, also gibt es verschiedene Wege. Lass mich noch mal durch sie gehen. Also erste Anzeige in Linie ist die Art und Weise, wie es ursprünglich kommt. Okay, wenn ich das einschalten und das ausschalten, ändert nichts seine ursprüngliche Anzeige Colin in Schlange. Aber wenn ich im Line-Block mache und es anfängt, sich ein wenig besser zu benehmen, sind eigentlich , dass das meine Endwahl sein könnte. Das könnte das Beste sein. Und dann kann ich auch Anzeigeblock machen, und das ignoriert die Größe des tatsächlichen Textes. Es passt sich nicht wie im Linienblock an den Text an. Sie können hier sehen, dass es immer noch an diesen Text angepasst ist. Es ist quetschen in irgendwie kommen den ganzen Weg um es leicht. Wo ist Block? Dieser Block lässt den ganzen leeren Raum hier nicht. Ok? Und dann kann ich auch keine anzeigen. Sieh dir das an. Ok. So angezeigt. Wenn die Dinge beginnen seltsam zu handeln oder eine Art von funky Chaos mit Ihrem Display ein wenig, wenn Sie wollen. Wenn es Text ist, möchten Sie wahrscheinlich in Zeilenblock gehen, weil Sie nicht unbedingt möchten, dass Ihr Spaß ein ah-Block-Level-Element ist. Aber verwirren Sie sich einfach mit dem Zeug und das wird es irgendwie dazu bringen, dass sich die Dinge etwas besser verhalten , anstatt all diesen anderen Code schreiben zu müssen. Okay, äh , was haben wir hier gemacht? Also haben wir Hintergrundpolsterung gemacht. Lassen Sie mich jetzt eine Grenze machen. Ich versuche nicht, das wirklich toll aussehen zu lassen. Ich verarsche nur herum. Also bitte kopieren Sie mein Styling hier nicht. Ich will nur, dass du spielst und siehst, was passiert. Und dann können Sie an Ihrem jemand Styling Führer arbeiten. Also sieh dir das an. Wir haben uns vermasselt. Sieh dir das an. Wenn ich im Line-Block an- und ausklicke, was es tut, ignoriert es vollständig die, ähm, bestimmte Teile der Ziege, weil es ein in-line-Elemente ist. Wenn Sie Online-Block tun, beginnt es endlich Aufmerksamkeit zu schenken. Wenn ich die Marge ausschalte, können Sie sehen, was los ist. Wenn ich die Polsterung ausschalte, können Sie sehen, was vor sich geht und dann sogar durch diesen Schau dir das an. Da ist ein Raum dazwischen, äh, das ist nur ein P-Tag mit nichts drin. Nur die und nbsp. Das ist ein Raum. Also, wenn ich das loswerden will, mache ich das tatsächlich im HTML. Aber Sie können sehen, wir können einfach mit diesen Links spielen und einfach tun, wissen Sie, Spaß Größe, Hintergrund, Polsterung, Rand Anzeige und Rand. Sie können sie ganz anders aussehen als dünn, wenn Sie anfangen. Okay, Ähm und dann macht es Spaß, wenn du fährst, denn wenn du darüber schwebst und Dinge sich ändern, lass mich abschalten. Lassen Sie mich das ganze Zeug ausschalten. Ich werde es dort lassen, aber ich schalte es einfach aus dem ursprünglichen Schweben. Das ist, wenn Sie das ist, wenn Sie hier nach oben gehen und Sie auf die Pin klicken und Sie könnten es decken zeigt einen anderen Code. Okay, also dieser spezifische Link hat einen Kastenschatten, der an- und ausgeschaltet wird. Und dann ändert sich auch sich die Farbe. Sie können sehen, dass sich die Farbe ändert. Ich klicke dort drauf. Wir werden mehr über den Hover im nächsten Video sprechen, also sehe ich dich in nur einer Sekunde. 27. Links zum Styling, die du dir ansiehst, wenn du über sie HOVER: jetzt werden wir über den Hover-Zustand einer Verbindung sprechen und Sie können sehen, dass dies tatsächlich einen Hover-Zustand hat, der bereits standardmäßig ist . Wenn ich über sie rollen, die Zeile darunter verschwindet und dann wird der Text grau und die Art, wie wir dorthin gelangen, Sie rechts, klicken, klicken, überprüfen. Und dann gehen wir auf den Toggle-Element-Status erscheinen. Und dann decken wir ab. Und wenn ich das mache, taucht der ganze Code auf. Es zeigt mir das ganz, ganz oben. Was ist los? Es ist all dieser Eintrag Inhalt eine Kälte und schweben eine Kälte und Fokus, etcetera und dass der Code ist einfach. Nur Kastenschatten, Keine. Dieser spezifische Bereich schaltet also nur den Boxschatten ein und aus. Und dann können wir auch sehen, wie sich die Farbe ändert. Warum machen wir uns nicht ein bisschen mehr damit an? Das hier ist ein Doppelpunkt schweben. Dies ist standortweit. Dies ist alle Links überall auf der gesamten Website wird ihre Farbe ändern, wenn Sie rollen über. Lasst uns noch mehr mit ihnen anlegen. Lass uns Frankreich machen. Normalerweise würde ich nicht sagen, Schriftgröße zu ändern. Ich will nur etwas Spaß haben. Sie wollen nicht, dass die Dinge größer und kleiner werden, wenn Sie über ihn rollen, weil dann Ihre Website fühlt sich irgendwie seltsam, wenn die Leute versuchen, über etwas zu rollen und alles wird herumgeschoben. Wir spielen gerade gerade. Rand. Und dann lass uns 15. Lass uns groß gehen oder nach Hause gehen. Ordnung, es gibt eine Grenze und wir sind tatsächlich Änderungen an einem Einlass. Nun, jetzt will ich es verlassen. Ich werde es als Element belassen, auf dem es steht. Was können wir dann noch? Ich bin nur lächerlich. Du würdest nie tun wollen, ist Hintergrund, oder ich, mein Gott, mit Rache. Ok, genau da. Und dann machen wir, ähm, was du tust, Farbe weiß? Warum nicht? Und die Polsterung, die ich gerade spiele, möchte ich wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich,dass du spielst und dann auch ein Tags machen werde, mit dem ich in dieser lustigen Seite Sache ein paar Tags machen werde. Wo warst du? Innerhalb der Fondsseite, Div. Ich werde Tags so machen, dass sie im Zeilenblock sind, weil ich Sachen mit Links mache, die Sie normalerweise nicht tun. Normalerweise wollen Sie Ihre Links in Schlange halten, aber ich bin nur wirklich mit ihnen verarschen, OK, damit Sie sehen können, was hier vor sich geht. Ich habe all diesen Code für eine Erkältung und schweben für den Hover-Zustand, und es hat all dieses lächerliche Zeug los, als ich dieses Kontrollkästchen hier deaktiviere, können Sie sehen, dass der ursprüngliche Code der gleiche ist. Aber wenn ich es überwältige, sieh dir all das an, was passiert. Das ist verrückt. Denken Sie nun daran, dass Sie nicht möchten, dass sich die Größe des Textes ändert. Sie können sehen, dass meine meine Seiten tatsächlich länger werden. Wenn ich das mache, ist das kein guter Code. Bitte tun Sie das nicht. Wenn Sie etwas wollen, wissen Sie, super groß wie dieses, als erstellen Sie den Link, um diese Größe zu haben, und dann, wissen Sie, haben Sie einen Schalter zu etwas anderem. Sagen wir, wir wollten das tun. Was wir tun werden, ist ah, eso inspizieren. Und wo ist dann mein Hover-Code? Da. Es gibt meinen Code, den ich gerade in die Schriftgröße 30 mit einem Rahmen von 15 Pixeln einfüge und die Aktion wird das einfach kopieren. Sieh dir das an. Kopieren Sie das. Und dann werde ich eine neue Stilregel für lustige Seitenlinks erstellen. Siehst du, was ich dort gemacht habe. So Dot Fond-Seite ist der Spitzname. Es ist eine Klasse CSS-Klasse. Und dann hat es Raum A Ok, also das ist auf der Suche nach allem mit dem Spitznamen Fun Page. Und dann sucht es nach Links innerhalb der Fondsseite. Und dann wird es das antun. Ich werde diese Dinge tun, weil du sehen kannst, dass gerade gerade da unten passiert ist. Das Problem ist, ich möchte, dass dieser Code Toe auf einem Roll over passiert. Also werde ich ausschalten, ähm, ich werde die Schriftgröße verlassen. Ich werde die Farbe herausnehmen, den Hintergrund herausnehmen und die Polsterung verlassen. Lass mich sehen. Ich brauche Zeh. Eigentlich muss ich die Grenze behalten. Sonst stecke ich in Schwierigkeiten. Also gehe ich zu massivem Weiß, und dann wird die Farbe wieder in Ordnung sein, also alles, was ich ändere, wenn ich dann übergehe, wird die Farbe sein, und die Grenze wird sich ändern und auch der Hintergrund. Also lass mich mich unter diesem Schweben hier rückgängig machen. Jetzt können Sie warten, keine Wartezeit auf eine Sekunde. Wo ist Grenze für Hover muss sein. Wo ist die Grenze für immer? Da. Oh, okay. Ich werde das wichtig machen. Siehst du das? Habe ich. Ausrufezeichen. Wichtig. Normalerweise habe ich das schon mal gesagt. Das sollst du nicht tun. Aber ich mache es die ganze Zeit, weil ich es will, und ich kann, weil es Amerika ist. Okay, also los geht's. Hier ist schweben und wie? Sieh mal, was ich getan habe. Okay, jetzt ist es nicht. Es macht die Seite nicht größer oder kleiner. Ähm, aber das Styling ändert sich, wenn ich mich umwälze, also macht es Knöpfe mehr Spaß. Es macht alles mehr Spaß, wenn Sie Styling hinzufügen können. Es lässt alles herauskommen. Und nur mit ein paar Dingen mit Rand mit Hintergrundpolsterung, gefunden Größe all dieses Zeugs habe ich einen einfachen Link lustig und anders aussehen lassen, indem ich CSS verwende . Okay, also spiele mit diesem Zeug und werde kreativ. Stellen Sie sicher, dass Sie dieses Farbwerkzeug verwenden und einfach nur Art ziehen Sie es herum und gleiten Sie herum und finden Sie einfach verschiedene Dinge und spielen Sie einfach mit diesem Hover-Zustand und Chaos mit diesem Hover-Zustand und wirklich nur eine gute Zeit, diese einzuschalten und aus und versuchen herauszufinden, wie zum Teufel ich? Wie mache ich es lustig und interessant, auf einen Link gegen einen langweiligen alten blauen Link zu klicken? Das ist ein Teil des Punktes von CSS ist, dass Sie Ihre Seite viel mehr Spaß machen, mit dem Sie spielen können. Alles klar, ich werde es im nächsten Video sehen. 28. Erstelle einen Link „Pop“, wenn du darauf klickst: Alles klar, jetzt haben wir gelernt, wie man einen Link stylt und ihn dann auch beim Hover ändert. Aber wie können wir es auf Click ändern? Jetzt, da genau da ist aktiv. Der Elementstatus ist aktiv. Wenn Sie auf diesen Bildschirm zugreifen möchten, klicken Sie einfach auf das kleine Element Zustand Kerl und klicken Sie dann auf aktiv. Und, äh, was wir sehen werden, ist, dass der Code, den wir geändert hatten, bevor es ein Doppelpunkt war, der insgesamt war . Der Hover ist also der gleiche wie aktiv. Jetzt will ich das nicht. Also, was ich tun werde, ist, dass ich tatsächlich meinen eigenen aktiven Code habe und weil ich jetzt spezifisch werde gegen den Versuch, Website-weite Änderungen durchzuführen. Ich benutze immer noch diesen lustigen Seitendef-Selektor und suche dann nach Links innerhalb der Fondsseitenauswahl . Okay, also bitte vergewissern Sie sich, dass Sie das tun. Sie möchten wahrscheinlich nicht Website-breite Änderungen vornehmen, nur indem Sie nur ein auswählen, weil Sie nur ein wählen und das wird Links über Ihre gesamte Website sein. Okay, und dann habe ich etwas für einen Colin vergessen und dann aktiv, okay. Und dann werde ich sagen, ähm, ja. Hintergrund. Es war schwarz. Und das könnte genug sein. Okay, also sieh mal, was? Sieh mal, was los ist? Also haben wir, ähm, und dann zwinge ich tatsächlich mehrere Elementzustände hier. So 1st 1st I Dies ist nur die Art und Weise, dass eine regelmäßige Links aussehen. Und dann, wenn Sie darüber rollen, geht es in einen Hover-Zustand. Ok. Siehst du, der Hover-Zustand ändert sich, und wenn er aktiv ist und sich einmal gegen aktiv ändert, wenn du darauf klickst, werde ich jetzt nicht darauf klicken, denn wenn ich es tue, bringe es mich zu google dot com den Link, den ich eingerichtet und dann wird es Männer, es wird all meinen temporären Code zerstören. Okay, also möchte ich eigentlich nicht wirklich nicht darauf klicken, ohne meinen Code zu speichern, denn dann bin ich in Schwierigkeiten. Also lassen Sie mich das eigentlich tun . Bevor wir weitermachen, möchte ich das hier auswählen. Nehmen Sie das und dann denken Sie daran, gehen Sie zum Stylesheet. Wo ist dieser Platz? Wo ist der leere Platz? Los geht's. Ok. Also alle meine Links mit Hover mit Fokus jetzt aktiv, das ist im Hinterkopf behalten. Das ist nicht richtig, weil es so ist, es ist Dies ist eine Website weite Änderung. So schnell, ich werde nur Spaß Seite Spaß Seite Links mit Hover tun. Und dann sagt dieses Komma, suchen Sie auch nach anderen Dingen . Ich suche auch nach einer lustigen Seite, einem Fokus, und dann werde ich das tatsächlich so aktiv machen, weil ich das aktive Es nicht mag alles, was Sie sehen können, ich habe eigentlich zwei Selektoren, die beide diesen Code bekommen. Es ist lustig Seite Links mit auf der Hover-Zustand und dann Fonds Seite Links mit dem Fokus ST Okay , und dann bin ich auch ich werde zurück, und ich werde bekommen, wo war mein aktiver Code? Da gehen wir. Es gibt aktive aktive Erinnerungen, wenn Sie darauf klicken. Also das sucht nach Dingen innerhalb des Spitznamens innerhalb der Klasse der lustigen Seiten, die nach Links für den aktiven Zustand suchen. Dingen innerhalb des Spitznamens innerhalb der Klasse der lustigen Seiten, die nach Links für den aktiven Zustand suchen Ok. Und dann wird es den Code des Hintergrunds schwarz geben. Und dann, äh, was war sonst noch, was da war? Oh, und dann auf der Titelseite A, natürlich. Nur der normale Link. Denn weil ich will, wenn ich nicht, Wenn ich das nicht hatte und die Schriftgröße kleiner war, als es aussehen würde. Es würde dämlich aussehen, denn wenn man darüber rollt, würde sich die Größe ändern. Wenn Sie sicherstellen möchten, dass, wenn Sie die Größe Ihrer schweben Links ändern, dass Sie auch die Größe Ihrer ursprünglichen Links ändern. Also werde ich das auch nehmen. Oh, und ich werde das stehlen, denken Sie daran, denken Sie daran, Anzeige im Zeilenblock. Andernfalls wird mein Code funky, weil es ein in-line-Element ist und es beginnt, in das, äh in das Ding darüber zu schieben . Okay, also habe ich das genommen. Und dann gehen wir los. Ok. Sie können jetzt sehen, ob Sie haben, wenn Sie die Dinge in Ihrer Tiefe deaktiviert haben, salzig begreifen es nicht markiert. Chrome kopiert es immer noch, aber es legt Kommentare um sie herum. Du siehst diesen Schrägstrich und dann den Stern, der ihn auskommentiert. Also ist der Code tatsächlich nicht. Es ist es nicht erlaubt, dass der Code durchläuft. Okay, deshalb sieht das hier flippig aus, und dann auch hier unten. Sie könnten diese einfach löschen, aber manchmal möchten Sie Dinge herauskommen, um es mit oder ohne mit tatsächlich testen zu können , ohne es tatsächlich zu löschen. Wir werden es einfach lassen, weil wem interessiert? Und dann aktualisieren wir die Seite, und dann aktualisieren wir die Seite. Und mal sehen, ob wir uns vermasselt haben. Es hat funktioniert. Klicken wir nun auf und sehen, was passiert. Äh, golden. Es wird lebendig. Die Seite wird lebendig. Ähm, und es macht wirklich Spaß. Toe haben Links, die gestylt werden, weil dann auf diese Weise, es ist nicht nur die gleiche alte langweilige Sache, mit der Sie beginnen. Also spiele mit all dem Zeug. Spielen Sie mit Padding mit Rand mit Rand auf und stellen Sie sicher, dass Sie die Syntax zu dem kopieren, was ich mit Sündensteuern meine. Genau die Art und Weise, wie ich Dinge eintippe, wie für Grenze. Sie sehen, wie es zuerst ist, also ist es die Anzahl der Pixel 15 PX, dann ein Leerzeichen, dann ein Volumenkörper, dann ein Leerzeichen. Dann lässt die Farbe Sie das kopieren. Syntex. Okay, denn sonst wird es sein, weißt du, du könntest dich vermasseln, und dann bist du vielleicht neugierig. Warum zum Teufel ist das vermasselt? Alles klar, das sind Links. Wir sehen uns im nächsten Video. Danke, dass du bei mir bleibst. Und, äh, los geht's. 29. Schnelle Übersicht: Responsive Design: Alles klar, jetzt werden wir ein bisschen über reaktionsfähiges Design reden. Jetzt, auf der grundlegenden Ebene, Responsive Design ist nur Ihre Website ändern ihre Größe und Änderung, wissen Sie, schieben bestimmte Elemente um, basierend auf der Größe, die Menschen sehen die Website auf. Okay, wenn sie also auf einem wirklich kleinen Gerät sind, wird es anders aussehen, als wenn sie auf einem gigantischen Bildschirm sind. Es ist wirklich hilfreich, vor allem, wenn so viele Leute auf ihrer auf unserer Website auf ihren mobilen Geräten kommen , dass wir in der Lage sind, die Website zu ändern, um im Grunde die beste Version zu machen. Setzen Sie unseren besten Fuß nach vorne für jede einzelne Größe. Okay, ähm, also ändert sich die Seite, während Sie ein- und ausblättern. Die Seite verändert sich und arrangiert. Sieh dir einfach das Bild an. Sie können sehen, dass die Bilder zwei verschiedene Größen auftauchen, und alles verschiebt sich etwas herum. Okay, im Grunde gibt es verschiedene Breakpoints, an denen diese verschiedenen Dinge passieren werden. Es ist also, was Responsive Design tut, ist, dass es verschiedenen Code bereitstellt, basierend darauf, wie breit unsere Ansicht ist. Port basiert darauf, wie weit schwächen sehen, so wie wir es auseinander ziehen, können Sie sehen, dass es uns anderen Code gibt. Jetzt schauen Sie hier nach oben. Siehe Medienbildschirm und Männer mit 56.875 Das bedeutet, dass dieser Code ausgelöst wird, wenn das Minimum mit 56.875 Mal sehen, wenn das verschwindet. Aber, äh Boom, siehst du das? Boom Boom. Okay, also ändern sich die. Du siehst zu. Ich schaue hier rüber. Sieh dir das an. Sagen Sie das. Codes ändern sich. Es reagiert auf die Größe der Seite. Okay, also xcar ving-up verschiedenen Code basierend auf der Größe der Seite. Also, was ich tun will, ist, dass Teoh dir zeigt, wie man das wirklich schnell macht. Was wir tun werden, ist, dass wir sagen, sobald es vorbei ist. Sieh dir das hier oben auf sieben oder drei Pixel an. 7 10 genau da. Da ändert es sich. Und dann schauen wir uns in der Kälte hier drüben an. Minimum mit ist 44.375, also werden wir es schaffen. Wir werden das kleiner machen, wenn es diese Größe trifft. Okay, also sagen wir, lassen Sie uns sagen, lassen Sie uns das halb so breit machen, wenn es auf diese Größe trifft. Also Bild und Mitglied, ich bin innerhalb der Fondsseiten-Tags, weil ich ein div-Tag um meinen gesamten Eintrag Inhalt. Also suche ich innerhalb des Fondsseiten-Tags. Und dann werde ich nach Bildelementen in diesem Fonds-Seiten-Tag suchen, und ich werde sagen, mit ist 50% jetzt, ich bin noch nicht fertig. Was ich getan habe, ist, dass ich gerade Code für welche Größen erstellt habe. Egal, welche Größe es ist, es wird mit 50. Das will ich nicht. Ich wollte nur 50% breit sein, wenn es größer ist. Wo war es? Sieben Tonnen. Ja, größer als diese Größe. Dann möchte ich, dass dieser Code eintritt. Okay, ich will reintreten, wenn ich diese Größe erreicht habe. Also werde ich das kopieren. Stellen Sie sicher, dass Sie alles mitbringen und dann einen Blick darauf werfen. Werfen Sie einen Blick auf den Inhalt des Eintrags und Sie können sehen, dass er gefangen wird. Siehst du das? Sehen Sie, wie es sich ändert. Jetzt schauen Sie hier nach oben. Wo wir genau hier sind. Media-Bildschirm und Männer mit 44.375 m. Dieser Code tritt in dieser Größe ein. Deshalb möchte ich das ist, wo ich meinen Code eingeben möchte, den ich gerade geschrieben habe. Okay, also suchen wir nach 44,375, also gehen wir zu unserem Redakteur, und dann suchen wir einfach nach 44,375 m und los geht's. Sehen Sie sich dies auf dem Medienbildschirm und in Klammern an. Männer stürzen mit Colin 44.375 m und dann hat es diese Klammer hier. Alles, was ich in diesen Klammerbereich gelegt habe, wird bedient, wenn das Minimum mit 44.375 M ist, was irgendwo in dieser spezifischen Situation ist, irgendwo um 710 Pixel lag. Also habe ich diesen Code einfach hier reingesteckt. Ist es nicht. Der Code schwebt nicht im Raum nur im regulären at Stil, dass CSS-Datei. Es befindet sich in dieser Klammer für diesen Medienbildschirm auf Lee, wenn das Minimum mit 44.375 ist. Andernfalls wird der Code es einfach ignorieren. Die Website wird es nur ignorieren, bis das Minimum mit 44.375 wird Okay, also, also, äh, Spaß zahlen. So ist es auf der Suche nach allen jeder Box, die Sie wissen, Spaß, Spaß Seite Klasse. Und dann wird es nach Bildern suchen, die es mit 50% machen wird, wenn die minimale Breite der gesamten Seite 44,375 Also lasst uns die Datei aktualisieren und dann gehen wir zurück zur Website. Ich werde es neu laden, und jetzt sehen wir, dass es 50% sind, außer wenn ich hier bin. Bumm! Es geht zurück. Okay, damit du es sehen kannst. Und wenn ich es so groß mache, können Sie sehen, wo unser Rechtsklick ist und klicken Sie dann auf Inspect. Schauen Sie hier auf Medien-Bildschirm in Men mit ist 44.375 m. Es sucht nach all den lustigen Seitenselektoren, die Seitenklassen mit denen finanzieren, die Bilder in ihnen haben , und es wird ihm diesen Code hier dienen, weil wir es an der richtigen Stelle in unserem CSS setzen. Nun, manchmal sehen Sie CSS anstelle von 44.375 Mal, Sie werden Pixel sehen und dann manchmal sehen Sie auch Max wit. Anstatt Männer mit, Sie haben Max mit okay, so achten Sie einfach auf genau, wie Ihr spezifisches Thema tut. Es ist es ein reaktionsfähiges Design, ob es Männer mit ihrer Maske, Max mit und, ähm, und ändern, wo Sie das abhängig setzen. Aber im Grunde sagt es für das Minimum, mit 44.375 wird es diesen Code servieren, damit ich ihn größer und größer und größer machen kann , und es bleibt einfach so. Aber sobald ich es klein mache, tritt es ein und wird diesen Code los, den ich einfach in Ordnung gebracht habe, also ist das ein wenig über responsive Design. Da ist noch mehr. Es gibt offensichtlich noch mehr, in die du eintauchen kannst. Aber ich wollte dir nur ein grobes Verständnis dafür geben, wie es passiert und ich werde im nächsten Video sehen. 30. Percentages, Pixel + der Border-Box „Hacken“: In Ordnung, reden wir über Prozentsätze im Vergleich zu Pixeln. Damals ging es in den Tag alles um Pixel. Damals ging es in den Tag Aber jetzt, in der Welt des Responsive Designs, wenn Sie Ihren Bildschirm größer oder kleiner machen können in der Welt des Responsive Designs, wenn Sie Ihren Bildschirm größer oder kleiner machen könnenund die Bilder bei 100% der Box-Größe bleiben, in der sie sich befinden,wollen Sie es nicht. und die Bilder bei 100% der Box-Größe bleiben, in der sie sich befinden, Sie wollen wirklich nicht in der Welt der Pixel leben. Sie möchten wahrscheinlich auf die Seite der Prozentsätze gehen, anstatt zu versuchen, Pixel zu tun . Werfen wir einen Blick auf das. Also lassen Sie uns diesen Kerl inspizieren. Ich habe meinen Mantel schon hier aufgestellt. So lustige Seitenbilder. Und ich werde sagen, mit seinen 10% Ja, man kann sagen, dass die Breite 200 Pixel oder 250 ist. , Aber das ist nicht,dass du damit nicht so gut amüsieren wirst, denn mit Prozentsätzen bleiben sie im Vergleich, wenn du Pixel machst. Es ist ein Unterschied. Eine andere Art von Sache. Normalerweise werden Sie wahrscheinlich Prozentsatz von manchmal tun wollen, werden Sie Pixel tun wollen, aber egal, was Sie wählen, stellen Sie sicher, dass Sie mit der gleichen Art von Sache für, uh, für die Gesamtheit des Trainers bleiben uh, . Was ich damit meine, ist wie, wenn Sie wollen dio Marge 5% Sie können sehen, wir tun 5% plus gut, und denken Sie daran, Marge ist auf der linken Seite, die rechte Seite, oben und unten, aber nur links und rechts, 5% plus 5% entspricht 10%. Dann haben wir eine Breite von 90, so dass das ganze Ding dann gleich 100% ist. Wenn ich einen Spielraum in ein bisschen zu groß habe, werfen wir einen Blick. Was passiert? Marge. Das sind 20%. Es schiebt tatsächlich die Box der Seite zu groß, und so endet es, Hinzufügen es endet das Hinzufügen dieser zusätzlichen Daten auf der Seite des Bildschirms, die wir definitiv nicht wollen. Also, äh, erste Regel ist, dass, wenn Sie mit Prozentsätzen bleiben oder wenn Sie wollen, oh, spielen Sie mit Prozentsätzen, bleiben Sie mit Prozentsätzen. Wenn Sie es aus irgendeinem Grund nicht haben,haben Sie es ernsthaften Grund, einfach nur Pixel zu machen. Wenn Sie es aus irgendeinem Grund nicht haben, Aber dann, sobald Sie einmal bleiben mit, dass, stellen Sie sicher, dass Sie nicht, dass Sie nicht tun zu viele zu groß von einem Prozentsatz, wenn alles summiert sich, weil Sie 90% die Bilder nur 90% y. Aber dann Sie 5% hinzufügen und schon sind wir 100% okay, wenn wir das tun, ist Polsterung 5%. Jetzt. Das funktioniert wirklich gut, dass es es tatsächlich hineingedrungen hat. Wenn es so war, wenn die Box-Größe seltsam war. Box-Dimensionierung ist, ähm, sehr, sehr praktisch, wenn Sie Polsterung haben. Wenn Sie Prozentsätze zu Ihrem Padding hinzufügen, anstatt es zur Seite zu drücken, drücken Sie die Grenzen heraus, wie wir gesehen haben, bevor die Box-Größe, ähm, Randbox. Dann sind wir, was eigentlich das ist, was es ursprünglich war, was schön ist. Manchmal kommt es nicht anfänglich, aber die Polsterung schauen sich das an. So waren 90% plus 5% plus 5% nur mit der Breite der Marge bereits 100%. Wie können wir eine weitere 5% Polsterung hinzufügen? Und es sprengt sich nicht aus dem Verhältnis, wie es war, mit der Marge von 20%. Siehst du, wie es all das Zeug wegen der Box-Größe hinzufügt? Okay, tun, äh, Grenzbox zu machen. Das ist genau das, was du willst. Manchmal, wenn sein Inhalt Box Inhalt Strichkasten. Dann wird die Polsterung tatsächlich anstelle von ihm hinzugefügt, um sicherzustellen, dass sie nur innerhalb dieses 100% passt. Okay, die Polsterung sieht das wilde Auto aus, das wir hier hinzufügen. Und wenn Sie Box-Größe ist nicht korrekt, Wenn es nicht Grenze Box, dann werden Sie eine schlechte Zeit haben. Okay, wir hatten Glück mit diesem speziellen Fall, dass es bereits auf der Grenzbox war. Aber wenn Sie ein Problem haben, bei dem Sie versuchen, einfach Nein zu sagen, möchte ich nur, dass die Polsterung 5% beträgt. Sie müssen nicht alle Ihre Mathematik wiederholen dann Ihre Box-Größe in Rahmenfeld ändern. Okay, wenn es auf Inhalt ist, Boxer, wenn du es nicht ändern kannst oder wenn du dich nicht ändern willst und du lieber die Mathematik machst, als sicherzugehen , dass du alles addierst. Wenn dies nun 5% Marge und 5% Polsterung hat, ist das auf der linken Seite. Es sind nur 5% plus 5% und dann auf der rechten Seite 5% plus 5%, also sind es 10% auf jeder Seite. Auf diese Weise, wenn Sie Content-Box tun wollten, müsste die Breite 80% betragen und dann würde das dieser Regel folgen. Aber wenn du diese Mathematik überhaupt vermasselst, siehst du hier, dass du diese Mathematik überhaupt durcheinander bringst. Und die Marge ist Ah, sagen wir, die Margen 10%. Und das wird mit zwei multipliziert. Weil, Mitglied, es ist die linke und rechte Seite und die Muster 5%. Das ist eine zusätzliche 30%, aber die Breite ist 80, so dass endet 110%. Okay, so einfache Reparaturen, nur um sich zu ändern. Die Rückseite ist die Größe des Rahmens. Aber der mathematische Weg ist, einfach die Mathematik zu machen und sicherzustellen, dass es nicht größer als 100% wird. Okay, hoffe, das war hilfreich. Und wir sehen uns im nächsten Video. 31. Ein Element zum AUFENTHALT führen: Ich möchte Ihnen etwas vorstellen, das sich Position nennt. Jetzt gibt es verschiedene Möglichkeiten, bestimmte Dinge auf eine Seite zu setzen. Typischerweise die Art und Weise, wie dieser Code im unteren unten kommt schreiben Siedie Art und Weise, wie dieser Code im unteren unten kommt. Das ist ein Ort, an dem es auf der Seite steht. Weißt du, je tiefer du direkt am unteren. Es wird unten auf der Seite sein, aber Sie können etwas namens Position fixiert haben. Wo? Lassen Sie mich einfach das Bild auswählen. Ich werde Spaß Seite Klasse machen, Fonds Seite und dann Raum Bild. Also suche ich nach all den Innern dibs oder innerhalb von Klassen der lustigen Seite und dass ich nach Bildern in diesem suche . Das ist also genau das Bild da. Und dann mache ich Position, fixiere den Blick, was passiert, wenn ich nach oben und unten scrolle. Es bleibt tatsächlich das Bild zu schreiben. Das ist also praktisch für Angebotskopfleisten und andere Dinge wie das, wo Sie nur auf der Seite bleiben wollten, unabhängig davon, ob Sie nach oben oder unten scrollen, es nimmt es irgendwie vollständig aus dem Fluss der Seite und dann klebt es einfach richtig dort. Wir können auch, äh, kommen, äh, äh, 20 Pixel, zwei Pixel, damit wir es überall bewegen können, basierend auf der Verwendung von oben links, rechts unten, all das Zeug. Aber die Verwendung der Position fixiert ist genial, weil wir einfach können Wir machen es auf alles zu bleiben , egal was passiert. Als Nächstes ist die Position. Absolute. Und so ist es irgendwie in der gleichen Gegend zu bleiben. Aber alles andere wird irgendwie hochgedrängt. Sie können sehen, dass dieser Link Lassen Sie mich un lassen Sie mich uncheck dies. Sie können sehen, es ändert sich tatsächlich auch Größen, was eine Art Spaß macht. Oh, ja, denn die volle Größe zieht es komplett aus dem Fluss. Also Position absolut. Lassen Sie mich dieses Zeug von oben links loswerden. Also Position absolut. Es macht es nicht auf der Seite behoben, weil es immer noch nach oben und unten scrollen kann. Aber es nimmt es irgendwie aus dem Fluss der, du weißt schon, alles andere darunter zu schieben, und stattdessen wird all das andere Zeug darunter irgendwie an den Ort geschoben, wo das ursprüngliche Ding waas Auch gibt es Position relativ und das ist Ah, das ist, dass Sie nicht wirklich bemerken, dass man ganz so viel. Aber Sie können Dinge bewegen, wenn ich einfach oben und links für diese spezifischen Elemente nirgendwo gehen. Aber wenn ich Position relativ mache, dann kann ich ändern, wo es darauf basiert, wo es sein sollte. Okay, also, basierend darauf, wo es sein sollte, werde ich es bewegen. 50 Pixel von links, okay. Oder wo es sein sollte. Ich werde es 20 Pixel von oben runterschieben. Okay, es ist also fixiert, wo es auf der Seite bleibt, wo immer du es hinstellst. Egal, wenn Sie nach oben oder unten scrollen, es gibt absolut wo, Ah, es wird irgendwie aus dem Fluss genommen, Sommer es tatsächlich, es tut so, als wäre es nicht da. Und so ist die ganze andere Sache irgendwie hineingedrungen, obwohl es in derselben Position bleibt. Und dann, wenn Sie nach oben und unten scrollen, kann es sich immer noch mit Seite bewegen. Dann gibt es auch eine Position relativ, wo Sie dann die Dinge je nachdem, wo es sein sollte, um sie herum verschieben können. OK, also nimmt es immer noch den gleichen Bereich ein, den es ursprünglich tut. Aber dann kannst du es verschieben,weißt du, weißt du Schriftsteller schieben, nach links schieben oder was auch immer. Sobald Sie einmal haben, haben Sie es irgendwie in Position gesetzt. auch Spielen Sieauchmit denen und haben Sie Spaß mit denen. Seien Sie vorsichtig mit diesen beiden, denn sie, sobald Sie anfangen, Dinge aus dem Fluss Ihrer Website zu ziehen , Dinge verrückt gezählt und sie verhalten sich irgendwie seltsam. Aber manchmal ist es wirklich praktisch. Wenn Sie möchten, dass etwas einfach auf der Seite bleibt und sich nicht bewegt, schauen Sie aus wie eine Kopfleiste. Was auch immer noch so viel Spaß damit haben und ich sehe dich im nächsten Video. 32. Centering: Text-Align VS. Randlinie: Als nächstes werden wir alles über die Zentrierung von Elementen sprechen, die Sie denken könnten, dass dies einfach ist weil Sie einfach auf die mittlere Schaltfläche klicken und Dinge zentrieren lassen. Es ist schwierig. Und hier ist der Grund. Nun, es ist nicht allzu schwierig, aber bleib bei mir. Es gibt in Zeilenelementen und Blockelementen. Okay, also in der Zeile ist nur an tatsächliche Textzeichen zu denken. Nur eine Reihe von Textzeichen im Vergleich zu ah, Block ist wie eine Box. Okay, also ist es so, als ob es die eigentliche Box selbst im Vergleich zu den Buchstaben in der Box beeinflusst hat. Okay, also tun wir zwei Dinge, die entweder zentrieren. Ah, Box, die Elemente darin enthält, die nicht einmal zentriert oder nicht zentriert werden können. Oder wir lassen die Kiste so, wie sie ist. Und wir zentrieren nur die Elemente darin. Lassen Sie mich Ihnen zeigen, was ich meine. Werfen Sie einen Blick auf Hallo. Das ist ein Absatz, richtig? Klicken Sie darauf, und überprüfen Sie. Und dann kommen wir hier rüber. Das ist also ein P. Dies ist ein P-Element mit der Klasse des Absatzes Spaß. Wenn ich hierher komme und ich einfach Text, Bindestrich, Ausrichtung, Doppelpunktmitte mache Bindestrich, Ausrichtung, , die den Text in diesem Element einfach genug zentriert, richtig? Aber wenn die Breite davon, wenn die Breite dieses schwarzen nur 50 Pixel breit ist, dann ja, ich zentrierte den Text in diesem Feld, aber dieses Feld ist nicht zentriert. Okay, also siehst du, was hier los ist? Dass manchmal, wenn Sie einfach auf Text klicken, das ist alles, was Sie tun müssen, wenn Sie alle eingestellt sind, aber manchmal wird frustriert sein, weil Sie nein sagen, ich möchte, dass es die ganze Sache zentriert. Ich wollte keinen Zeh. Ich wollte nicht, dass es zentriert ist. Aber dann auf die Seite. Ich will, dass ich es im Zentrum will. Ok? Sie In diesem Fall verwenden Sie Marge Null Auto, So Marge, Doppelpunkt Null Herbst. Was das bedeutet, ist die Oberseite in der Flasche. Also diese Marge hier, können Sie sehen, ob ich das unten klicke. Schmaler Rand. Oberer Null-Rand. Richtig? Ist Auto Marge unten Null emergent links sein Auto. Okay, das dauert also bis nach oben unten, und dann nimmt dieses Auto rechts hier links und rechts, also zentriere ich im Wesentlichen etwas Auto links ein Auto. - Richtig. Okay, also nicht nur vier p mit der Klasse der Paragraph Fund. Nicht auf Lee. Habe ich den Text in der Box zentriert? Ich habe tatsächlich zentriert, die Box selbst, die ich mit der Zentrierung gemacht habe, ist okay. Wenn man also über das Zentrieren nachdenkt, muss man durchdenken. Möchten Sie die Elemente in der Box zentrieren oder möchte ich die Box jetzt zentrieren? Wenn ich Wenn ich ausschalten, schreibe die Zeilenmitte, beobachte, was passiert. Sie sehen, dass das Feld immer noch zentriert ist, aber der Text innerhalb des Feldes ist nicht zentriert. Und jetzt lassen Sie mich Text in der Zeile behalten und lassen Sie mich die Ränder loswerden. Dein Auto, sieh mal, was da passiert ist. Jetzt ist die Box nicht zentriert, aber der Text darin ist zentriert. Okay, also musst du diese Dinger wirklich kaputt machen. Ein Teil meiner Zentrierung einer Kiste, wo ich die Dinge in einer Kiste mit deinen zentrierenden Dingen in einer Kiste zentriere. Verwenden Sie Text Bindestrich, Ausrichten, Doppelpunkt Mitte. Wenn Sie die Box selbst zentrieren, verwenden Sie Marge, Colin Null Auto. Und Sie brauchen eine Breite, um das tun zu können. Okay, Okay, in diesem Fall sind wir okay, denn nur die Verwendung von Text ausrichten Zentrum ist alles, was wir tun mussten, weil das P-Element die gesamte 100% mit einnimmt, aber für den Fall, dass der Zeuge kleiner wie Das, Ähm, wir wollten ihr eigentlich nicht den Text in ihr schicken. Wir wollten nur die ganze Kiste zentriert haben. Und dann, ja, wir haben dem Text darin zugestimmt, wenn wir wollen. Aber so oder so ist es in der Mitte der Seite, und wir haben getan, was wir tun wollten. Also hoffe ich, dass das hilft. Denken Sie in Zeile oder Block ist ein In-Line-Element, oder ist es ein Blockelement, das ich ein Zentrum möchte, wenn es ein In-Line-Element ist? Verwendeter Text Strich ausrichten, Doppelpunkt Mitte. Wenn das schwarze Element verwenden Rand Doppelpunkt Null automatisch sehen Sie im nächsten Video. 33. Sollen wir Styling in der HTML oder der CSS schreiben?: eine Sache, die ich auf Sie aufmerksam machen möchte. Ist das alles, was Sie in der CSS-Datei tun, können Sie tatsächlich tun? Schreiben Sie in HTML. Sie benötigen keine separate CSS-Datei, um diese Codierung durchführen zu können. Aber wenn Sie keine separate CSS-Datei verwenden, müssen Sie wirklich sicherstellen, dass bei jeder Gelegenheit, dass Sie bestimmte Dinge auf eine bestimmte Art und Weise stylen möchten , dass Sie es in den HTML einfügen. Lassen Sie mich Ihnen zeigen, was ich meine. Genau hier. Diese p-Klasse hat etwas Code mit sich. Es hat die Farbe Blau. Siehst du das? Das ist im CSS. Okay, Jetzt kann ich den gleichen Code nehmen, und ich kann es direkt in der HTML Watch, wie man das macht. Ist, dass eine P-Klasse ist Absatz Spaß. Ich werde das wirklich löschen, und ich werde Friedensstil gleich machen. Und dann habe ich in diesen Anführungszeichen diesen CSS-Code eingefügt. OK, was jetzt passiert, ist, dass der gleiche Code durchkommt, aber er ist im HTML. Es bedeutet also nicht, dass ich Klassen verwenden kann , weil ich keine Klassen mehr verwenden kann, weil ich meine Bearbeitung in Zeile gemacht habe. Ich lege es direkt in den Code, anstatt dass es diese externe CSS-Datei verwendet. Es ist also immer noch genau das Gleiche. Das Problem ist, dass, wenn Sie diese Codierung direkt im eigentlichen HTML tun, Sie eine schwierigere Zeit haben werden. Denn wenn du den gleichen Code noch einmal machen willst, musst du diesen ganzen Code kopieren. Deshalb ist es so schön, ihm einfach eine Klasse zu geben, anstatt sie richtig zu stylen anstatt Stil zu verwenden, ihm eine Klasse zu geben und ihm einen Spitznamen zu geben, denn dann können wir diesen Code extern in der wenig ändern Sie es für alle Klassen versus durchgehen zu müssen. Und wenn Sie sich ändern, wenn Sie den Stil von etwas ändern möchten, müssen Sie das gleiche in jedes andere separate Element kopieren, das Sie anders sein möchten . Okay, manchmal wird das wirklich, wirklich kompliziert, wo man versucht, den Stil an einem Ort zu ändern, und man merkt, dass man vergessen hat, es woanders zu ändern , und es bekommt alles verwirrend. Deshalb müssen Sie stattdessen Klassen verwenden. Sehr selten. Manchmal mache ich Stil, nur weil ich weiß, dass ich einmal eine Änderung vornehme, die ich nie wieder tun muss . Es ist für diese eine Sache, und ich möchte nicht den CSS-Code durchgraben müssen, um es herauszufinden. Ich möchte nur sicherstellen, dass ich den Stil dieses Dings sofort geändert habe und einfach damit fertig bin. Dann mache ich diese Art von Sache, wo es P-Raumstil gleich ist und dann in Anführungszeichen setzen Sie Ihren CSS-Code. 34. CSS Specificity: Welcher Code gewinnt?: Ich möchte sicherstellen, dass Sie über die CSS Spezifität Bescheid wissen. Nun, das ist ein großes Wort, aber im Grunde bedeutet nur, welcher Code sich windet. Manchmal werden mehrere Teile verschiedener Codes zusammenkommen, und dann muss der Computer wählen. Nun, welche wähle ich? Wählen Sie diese, oder wähle ich diese, wenn Sie Stil Seite Spezifität bedeutet, dass bestimmte Arten von Code wird über andere bestimmte Arten von Code gewinnen wollen. Also, was ich vorher getan habe, ist, dass ich dir gezeigt habe, wenn du es tust, Ausrufezeichen. Wichtig. Als Nächstes. Jeder Code, der die Nummer eins Gewinner ist. Es gewinnt immer Hände nach unten, egal was passiert. Das war's. Ähm, das ist also wirklich praktisch, wenn du Probleme mit deinem Code hast und du nur sagst, dass ich gerade etwas ändern will und ich nicht herausfinden muss, was zum Teufel hier los ist. Es ist ein bisschen faul, weil man wirklich keine andere Art finden sollte, es zu tun, aber, ähm, aber ähm, wenn man jemals dieses Ausrufezeichen wichtig benutzt, bedeutet das, dass dass der Code gewinnen wird. Wenn du das tust, siehst du diesen Pinkel genau hier, der Typ hat nicht so viel Spezifität. Wenn du das tust, So spezifisch ist es nicht. Es ist einfach eine Art von einer Website weit. Wählen Sie einfach alle P-Elemente aus. Also, wenn ich hier tippe, wenn ich Marge tippe, äh, 40 dieser gewinnt, weil es spezifischer ist. Es hat eine Klasse, aber es ist P. Aber es hat auch eine Klasse von Paragraph Fund, also ist es spezifischer als nur diese pl Minuten. So gewinnt oder klopft es diesen anderen Code aus. Und so, wenn Sie wollen, wenn Sie sicher wollen. Das hier ist also die Sache. Wenn bestimmter Code, den Sie schreiben, nicht funktioniert und Sie sehen, dass er auftaucht, senken Sie nach unten und er ist in Tiefe Werkzeuge wie diese durchgestrichen. Ja, das ist tiefer nach unten. Es ist auch durchgestrichen. Sie müssen Ihren Code mawr spezifisch machen, indem Sie eine Klasse hinzufügen oder ein I D verwenden. Oder wenn Sie dieses Ausrufezeichen wichtig verwenden, werde ich auch eine Datei einschließen. Sie können einen Blick werfen. Pdf, Sie können einen Blick auf diese wirklich Art von Detail genau werfen. Du weißt, was über alles andere gewinnt, aber die Hauptsache, die du brauchst, ohne all das zu lernen . Die Hauptsache, die Sie erkennen müssen, ist Ausrufezeichen wichtige Werke jedes Mal, wenn es immer gewinnen wird . Das war's. Und dann auch, wenn es genauer ist, wenn Sie irgendetwas eine bestimmte Klasse wie p dot Absatz funder p mit der Klasse des Absatzes Fonds geben , der nur das P-Element gewinnen wird, wird es mit dem Code überschreiben Sie den P-Elemente-Code, weil dieser Typ hier einfach nicht so spezifisch ist. Es ist nur eine Art von dieser Website breit. Jedes P-Element erhält diesen Code, aber du sagst nein dafür. Für Paragraph Fonds. Leisten Sie sich für dieses p-Element mit der spezifischen Klasse von Paragraph Spaß, tun Sie diesen Code, so dass er sagen wird, dass das spezifischer ist, also gewinnt es Hoffnung, die Sinn macht. Ich weiß, es ist irgendwie verwirrend, aber ich werde in einem PDF nur mehr Informationen über Besonderheiten hinzufügen. Sie können wirklich tauchen, und wenn Sie daran interessiert sind, ist es die meiste Zeit nicht zu groß. Aber wenn Sie feststellen, dass der Code nicht funktioniert und sie verwirrt sind, warum Spezifität das Problemsein könnte das Problem 35. Wie du die Korrupte Divs beheben: Wir werden jetzt ein bisschen mehr mit Floats spielen, also geh auf eine neue Seite und kopiere diesen Code. Div. Space-Klasse ist gleich und in Klammern. Aaron zitiert Dave Same. Und dann brauchen wir noch nichts im Leben. Und dann um die ganze Sache, Alter, wenn Klasse Equals Halter und dann stellen Sie sicher, dass Sie den ganzen Weg hierher kommen und das schließen . Also haben wir ein div um einen Haufen anderer Todesfälle. Macht das Sinn? Ist, dass wir diese vier haben, die wir haben, weißt du, vier genau die gleichen Dinge. Es gibt vier Dibs in der Box, genannt Dave Holder. Kopieren Sie das. Genau. Und dann, da Sie gut sind, veröffentlichen Sie es oder klicken Sie auf Aktualisieren und gehen Sie dann zu Ihrer Seite und es gibt nichts hier. Richtig? Aber wenn wir überprüfen und öffnen einige dieser Jungs ziehen das über ein wenig Eintrag Inhalt . Dave Holder aus. Da gehen wir hin. Dave Halter Und wenn das Gleiche. Da ist also da. Da ist nichts, aber es gibt wirklich. Okay, also klicke ich auf Dave Holder, und dann mache ich eine neue Stilregel, und ich werde sagen, mit sind 400 Pixel und, ähm, Grenze ist fünf Pixel fest in schwarz. Und dann, was wir für div tun werden. Dasselbe. Das sind alle gleich, oder? Wir machen eine Grenze oder einen Hintergrund. Es ist grün. Und dann werden wir sagen, mit 200 Pixel und Höhe, 200 Pixel. Werfen Sie einen Blick. Was ist hier los? Way hat all diese Dibs in einem weiteren Tod und wir werden jetzt gehen. Wenn wir nach links schweben, ist etwas passiert. Was ist gerade passiert? Grenze für das DIV, das die anderen Daves umgab, ist zusammengebrochen. Lassen Sie mich diesen Schwimmer links aufklappen, Sie könnten sehen, was los ist. Ein Klick und ein Klick auf diesen Fluss links gibt mir einen Fehler. Es ist ein Problem. Es ist eine Panne. OK, wenn Sie also Floats in einem Dibs verwenden möchten, müssen Sie etwas tun, das Überlauf versteckt genannt wird. Also gehe ich zurück zu Dave Holder und wo ist das? Da ist mein Mantel schon angefangen zu überlaufen. Versteckt. Das ist der Weg, um Ihre Struktur für ein div zurückzubekommen, das zusammenbricht. Okay, also wenn du jemals ein getan hast, das zusammenbricht, möchte ich, dass du dich daran erinnerst, dass du dich versteckt überlaufst und auf diese Weise, und lass mich das bisschen größer machen, ähm, auf diese Weise, nein egal was, dass die Außengrenze oder wenn es einen Hintergrund darauf hat, Hintergrund blau. Es gibt dieses schreckliche Blau, dass ich so sehr hasse, dass sie wirklich eine andere Farbe wählt. Ähm, damit das funktioniert. Aber wenn du einen Überlauf versteckt hast, dann wirst du eine schlechte Zeit haben, weil du sagst: „ Nun, Nun, halt eine Sekunde. Ich habe diesen Div Halter, der all diese anderen Dave hält. Warum dehnt es sich nicht auf die richtige Größe aus? Weil es eine Panne ist. OK, also Überlauf Doppelpunkt versteckt wird Ihnen hier helfen. Und dann kannst du einfach nach Herzenslust stylen. Rand 20 Pixel. Sieh dir das an. Sieh dir an, wie schön das ist. Und dann, wenn die Höhe verrückt ist als die außerhalb Div erweitert Zehe halten Sie alle diese anderen gegen Wenn Sie das nicht tun, dann schalten Sie aus, überlauf versteckt. Dann verlieren Sie die Dinge in ihm immer noch ihre Styling. Aber das außerhalb von Div bricht einfach zusammen. Okay, also geht es nur um Überlauf versteckt. Wenn dir das passiert 36. Löbe deine schwebenden Divs!: Jetzt reden wir über Clearing. Wenn Sie schweben Dibs, wenn Sie Dibs Float haben, werden sie alle irgendwie nach links schieben, wenn Sie links oben nach rechts schweben, wenn Sie überWasser schwimmen. Wenn Sie schweben Dibs, wenn Sie Dibs Float haben, werden sie alle irgendwie nach links schieben, wenn Sie links oben nach rechts schweben, wenn Sie über Richtig. , Aber manchmal wollen Sie,dass bestimmte Dinge in die nächste Zeile gehen, egal was passiert. Auch wenn Sie alles nach links schweben lassen. Manchmal willst du OK sagen, ich verstehe. Ich habe alles, was nach links schwebt. Aber dieses Ding, das ich brauche, um seine eigene Linie zu haben. Ich musste irgendwie brechen, dass schweben und mir eine neue Linie geben und nicht weiter schweben. Lassen Sie mich Ihnen zeigen, was ich meine. Also fangen Sie hier an. Das ist das gleiche wie das letzte Video, das wir machen, Dave Holder rund um die gleichen Diff. So Div Klasse gleich Div. Gleiche an dann Was wir tun werden, ist, dass wir eine schwierige setzen einen Raum, den Sie gerade während der Klasse konsumieren gleich klar. Und dann werde ich das ganze Div Sames auswählen und ich werde sie nur ein paar Mal einfügen, nur damit du sehen kannst, was los ist. Also habe ich es getan. Ich habe es einmal eingefügt und dann zweimal eingefügt. Wir haben insgesamt einen Haufen div sames, und dann habe ich def clear und dann das gleiche Diff von demselben Diff gelöscht. Und das ist alles innerhalb des div-Halters. Okay, bedenken Sie diese Div-Klasse, um hier oben einen Halter zu haben , der sich hier unten auflöst. Also Def Holder ist eigentlich, es ist irgendwie Klammern um die ganze Sache. In Ordnung, sparen Sie das bis zu acht, und dann öffnen wir die Seite. Hier gibt es ein paar Dibs, aber da ist nichts drin. Hier gibt es ein paar Dibs, Okay, also brauche ich einen Rechtsklick. Irgendwie sah ich mein Gold ein bisschen durch. Einstiegsinhalte sind das, wonach ich suche. Und dann gehen wir, Dave Halter, und dann sehen, wie diese Div gleiche klare geben, etcetera, Etcetera. Okay, also was ich tun werde, ist, dass ich hier plus klicke, Div Same und ich werde zuerst sagen, mit 50 Pixeln, Höhe, 50 Pixeln und dann werde ich tun, um grünen Rand 10. Nur damit ich sie alle getrennt sehen kann. Sieh dir das richtig an. Und dann werde ich eigentlich genau das gleiche Aussehen für die Dave Clear Boxes haben. Oh, es tut mir leid. Ich muss ein Komma machen und dann klar, dass dieser Code sowohl Dev sames als auch Dave Clears zuweisen wird . Okay, also, wenn man das gemeinsam da macht, sagt es okay. Und was soll ich sonst noch auswählen? Alles klar, oh, los geht's. Und jetzt werde ich sagen, Float links. Jetzt schweben sie alle. Sie drängen alle. Wenn ich den Code hier einfach heruntergerollt habe, können Sie sehen, dass sie alle nach links drängen. Aber jetzt, wenn ich eine andere neue Stil-Regel nur für div clear finde und ich beide klar mache. Was passiert, ist jedes Mal, wenn ein div klar ist, es schiebt in die nächste Zeile. Siehst du das? Lassen Sie mich. Eigentlich werde ich das ein bisschen einfacher für uns machen. Div Clear! Ich werde den Hintergrund für Div machen. Klar, Lesen und studieren. Ok. So können Sie sehen, was hier vor sich geht. Zuerst sind alle diese Boxen gleich. Das gleiche und wenn klar, sind beide das gleiche Web, gleiche HaIf, gleichen Hintergrund. Außer ich änderte den Hintergrund nur für unterscheiden klar, weil ich in der Lage sein wollte, es klar zu sehen . Marge ist 10, also haben wir etwas Platz dazwischen, und dann schweben sie alle nach links. Aber weil ich es klar gegeben habe. Aber weil es Colin nicht gelöscht hat, bedeutet beides, dass ich jeden Tag klar, auf eine neue Linie drängen werde. Auch wenn alles weiter links schwebt, räumen wir unsere Schwimmer ab, was bedeutet, dass wir sagen: OK, OK, machen wir weiter, was wir tun. Aber lasst uns einfach von vorne anfangen mit einer neuen Linie, okay? Also ist es einfach, nur klares beides zu sagen. Und jetzt jedes Mal, wenn es ein div clear gibt, das kommt, schießt das Ganze in die nächste Zeile. Okay, obwohl wir genug Platz haben, um Boxen zu haben, die noch breiter werden, mit DIV clear oder mit einem klaren Colin, beide, die dann sicherstellen, dass jedes Mal, wenn es einen div klaren Spitznamen gibt, ist es Ich werde sagen, sauber. Es wird dem Code beides klar geben, und es wird alles in die nächste Zeile schieben. Obwohl wir immer die Dinge auch nach links schweben 37. Formulare für diesen Bereich: in diesem Video. Wir nehmen eine Form von langweilig bis aufregend, indem wir es von Grund auf stylen . Jetzt habe ich es außerhalb von WordPress gezogen, weil ich sicherstellen möchte, dass wir keine der CSS verwenden , die Party mit ist. In WordPress, WordPress kommt Lager mit einigen ziemlich anständigen Styling, obwohl wir es immer besser machen und ändern Sie es irgendwie passen unsere Marke oder was auch immer ich möchte in der Lage sein, ein Formular aus dem Nichts zu stylen. Deshalb habe ich diese beiden Dateien eingeschlossen. Es ist Test aus HTML und Test Formular-Stil, CSS gebildet. Stellen Sie nun sicher, dass, wenn Sie diese auf Ihrer Website hochladen, beide im selben Ordner sind und dann, um auf sie zuzugreifen, gehen Sie zu was es ist dot com oder was auch immer Ihre Website ist. Schrägstrich. Was auch immer der Ordner ist, dass Sie es in Schrägstrich Test Form dot html. Also öffne das in deinem Browser, und das wirst du hier sehen. Das macht es hübsch hier. Das wirst du sehen. Okay, ich habe den HTML-Code bereits so eingerichtet, dass er den Testformular-Stil CSS einzieht, solange er sich im selben Ordner befindet. Und auch, ich habe es schon etwas Styling gegeben, richtig? Eingeschichtet direkt in den HTML-Code. Werfen Sie einen Blick auf das. So Div Stil genau da. Ich habe es hart gestrichen. Kodiert es direkt. Und wenn Sie aus irgendeinem Grund die andere CSS-Datei nicht richtig verabscheuen, werden Sie immer noch dieses Styling sehen, weil dies tatsächlich hart direkt in die HTML-Datei codiert ist und Sie sehen können, was wir hier tun. Also, Margin, werfen Sie einen Blick hier rüber. Randaugen, 200 Pixel, oben und unten. Und dann automatisch links und rechts. Okay, das wird also die Kiste zentrieren. Jetzt. Außerdem wird die Breite 100% sein, aber das Maximum mit ist 500 Pixel in Ordnung. Außerdem schreib der Zeilenmitte, die alles darin machen wird. Ja, die Box ist zentriert, aber alles in der Box wird auch zentriert sein. Ok auf. Und dann habe ich ein bisschen Styling gemacht. Ich habe gerade die Schriftgröße für Alter eins auf 50 Pixel festgelegt. Okay, also fangen wir an. Um, gehen wir in das nächste Video und wir beginnen mit dem Styling des Formulars 38. Nächster Schritt: Gib den Eingaben Raum: Alles klar, also zuerst, was wir tun werden, ist, dass wir all das den Vornamen Nachnamen nehmen. Also werden wir diese als Platzhalter in die Eingaben selbst setzen. Okay, das wird also ein HTML sein. Stellen Sie sicher, dass Sie sich in f FTP öffnen oder wenn Sie eine andere Art und Weise haben, das ist auch in Ordnung . Aber, ich meine, folge Zilla und ich bin auf meinem Server, und ich teste die HTML-Ansicht daran, verwerfe lokale Datei und lade eine neue Datei und dann sollte das mich öffnen in, äh, in kein Pad plus plus. Okay. So können Sie hier sehen wir den Vornamen des Forums. Der Nachname hat all das Zeug im Eingabetypnamen all das Zeug, wir werden hier etwas hinzufügen Platzhalter gleich. Und dann werden wir setzen, was auch immer der Platzhalter ist Vorname, und dann werde ich den Text dort löschen, und dann br Das ist nur die nächste Zeile. Okay, also werden wir auch die nächste Zeile loswerden. In der Tat, lassen Sie mich loswerden all diese Nachnamen, Betreff und Nachricht. Okay, jetzt werden wir diese Platzhalter für jeden einzelnen haben. Wenn Sie eine Kopie einfügen möchten, könnten Sie es noch schneller tun als ich Thema. Und dann, äh, hier unten, Platzhalter. Das ist ein Wie wär's mit diesem Urlaub. In Ordnung, das werden wir sagen. Und dann haben wir wieder auf unseren Server hochgeladen und dann laden wir die Seite neu. Boom! All das Zeug sind jetzt Platzhalter. Jetzt werden Sie feststellen, dass es zentriert ist. Werfen Sie einen Blick auf die CSS-Datei, okay? Ich habe bereits etwas Styling und für die Platzhalter den Blick auf diese Selektoren, sie sind sehr seltsam. Sie können sehen, was hier los ist. Sie alle den gleichen Code. Aber diese sind alle für Platzhalter. Das Problem ist, es ist noch nicht ganz standardisiert, Also, ähm, manchmal müssen Sie Code für verschiedene Browser duplizieren. Ich habe diese Arbeit für dich erledigt. Wenn Sie das Styling dieses Platzhaltertextes auch Mawr ändern möchten, können Sie dies gerne tun. Aber stellen Sie sicher, dass Sie es kopieren. Stellen Sie sicher, dass Sie nach unten kopieren und es gibt vier verschiedene Platzhalterplätze, um Code zu setzen Stellen Sie also sicher, dass Sie denselben Code in jeden Code kopieren. Okay, also schauen Sie sich jetzt hier an. Lasst uns erst anfangen zu spielen. Wir werden daran arbeiten, klopfen OK? So richtig. Klicken Sie auf. Und weißt du, was mir klar wurde? Wir gehen auf die Zehe. Möchten Sie in der Lage sein, alle Eingaben für das gesamte Formular zu formatieren. Okay, also werfen wir einen Blick auf, äh werfen wir einen Blick auf den Formularcode in HTML. Die Formklasse ist eine hübsche Form. Jetzt sieh dir das an. Okay, also ist es eine Form, aber es hat eine Klasse. Es hat einen Spitznamen für ihn. Hübsch. Also werden wir diese spezifische Form gezielt anvisieren. Okay, Also, wenn ich das tue und ich ah, Form Punkt Denken Sie daran, der Punkt ist für Klassen Form hübsch und dass ich Raum tun und ich werde eingeben. Also möchte ich auf eine Auswahl aller Eingaben innerhalb des Formulars mit Spitznamen Form Pretty konzentrieren. Okay, ich gehe zum Padding und ich mache 20 Pixel. Jetzt können Sie sehen, dass ich es getan habe. Ich habe, ähm, ich habe nur die Eingaben geändert. Dieser Boden hier ist dieser untere. Hier ist ein Textfeld. Okay, also möchte ich das auch auswählen. Also, was ich tun werde, ist, dass ich wieder hierher kommen werde, und ich werde Komma machen, gebildet aus Pretty. Also, das sind Formen mit Spitznamen oder Klasse von ehemaligen hübschen und ich werde sagen, Do space und dann Textfeld. Und das sollte mir Klopfen geben. Oh, und es ist nicht nervig. Äh, uh, oh. Textbereich Es tut mir leid. Es ist kein Textfeld. Es ist Textbereich. Okay, also lass mich wieder hier rauf gehen. Uh, wo wir okay, also wo ist der Code? Wo ist mein Code hin? Oh, ich habe es geändert. Da gehen wir. Okay, also tut es mir leid. Lassen Sie uns zurück eine Form Punktform hübsch und dann in Port. Okay. Und dann auch aus Form Pretty Textbereich gebildet. Entschuldigen Sie mich. Also, jetzt sind wir gut. Jetzt haben wir etwas Padding ausgehen und das Letzte an einem Textbereich ist, dass das einfach für immer geht. Okay, wir haben ein paar Polsterungen vor sich. Ich sehe dich im nächsten Video, um noch weiter zu gehen 39. Breite + Border-Box spart und das Mach: Alles klar. Nächstes Mal machen wir die Breite zu 100%. Okay, also klicken Sie mit der rechten Maustaste auf einen dieser Typen inspizieren. Ich weiß, dass mich das tatsächlich in die falsche Gegend gebracht hat. Ich möchte diese Eingaben, also klicken Sie auf eine Eingabe. Und dann, was wir tun werden, ist, dass wir mit 100% machen. Siehst du das jetzt? Siehst du, wie der Textbereich eigentlich etwas kleiner ist als die Eingabe? Das ist ein Problem. Was ist hier los? Und dann scheint auch der Submit-Button zur Seite zu sein. Was ist los? Werfen wir einen Blick auf das ganze def. Uh, wenn wir uns den ganzen Dev ansehen, ist der größte Tag davon, alles andere zu halten. Sie können sehen, dass diese Ah, sieh mal. Genau hier. Schauen Sie genau hier. Wenn ich über diesen Bereich rolle, siehst du, dass sie über Bord gehen. Sie gehen jetzt zu weit. Warum ist das so? Der Grund dafür ist, dass wir bei einer Breite von 100% sind. Aber dann fügen wir Polsterung hinzu. Okay, das macht es jetzt breiter, als es sein sollte. Aber um uns hier zu helfen, machen wir einfach Box-Dimensionierung, Grenzbox. Alles sollte in Linie fallen. Sie können sehen, dass es so passt. Wenn ich das mache, wenn ich das ausschalte, dann bedeutet das, dass es eine Breite von 100% haben wird. Wenn ich das mache, wenn ich das ausschalte, Und das wird auch Padding im Vergleich zu einer Breite von 100% hinzufügen. Und dann wird die Polsterung irgendwie reingeschoben oder rausgestoßen werden. Okay, also das ist Box-Größe Randbox Sehr praktisch, wenn Sie nur sagen wollen, okay mit 100%. Aber dann will ich ein bisschen klopfen. Sie die Mathematik machen wollen, können Sie diese Pixel mischen und die 100% es ist, ähm, und dann, selbst wenn Sie 3% haben , wird es immer noch funktionieren. Aber es ist nicht wirklich wichtig. Sie können hier tatsächlich Pixel und Prozentsätze mischen, weil Randbox Art die Mathematik für Sie macht und es für Sie repariert. Okay, Okay, also achte sehr genau darauf, dass das eine kleine Veränderung ist, aber es macht wirklich einen großen Unterschied, alles sauber und präzise zu machen. 40. Formulare Hintergründe: aus dem letzten Video. Stellen Sie sicher, dass Sie Ihren Code speichern. Jetzt werden wir das Ganze klappen, zum CSS zurückkehren, und dann werde ich das wegen der gleichen Selektoren mit etwas mehr Code kopieren . Jetzt, speichern Sie es. Und dann sind wir wieder drin. Wenn ich die Seite aktualisiere, sollte alles so bleiben, wie es war. Okay, was ich jetzt tun werde, ist, dass ich etwas Spielraum hinzufügen werde, und ich werde es nach unten tun, weil ich wirklich nur versuche, diese Typen zu verbreiten, okay? Ich brauche keine Marge an der Seite. Ich möchte ihnen nur ein bisschen mehr Platz geben, oben nach unten. Also mache ich Ach, 10 Pixel. Darüber, vielleicht 20 und 15 für den Wind. Ok. Und dann nehme ich das, und ich werde es retten. Kopieren, Einfügen, speichern Sie es, bringen Sie es zurück und dann aktualisiere ich die Seite, und hier sind wir. Es hat meine Arbeit gerettet. Sehr, sehr nett. Wir werden jetzt einen grauen Hintergrund für vier Felder hinzufügen, die ich noch nicht ausgefüllt habe . Also, was wir tun werden, ist, dass wir hier Teoh gehen. -Hintergrund. Es ist großartig. Siehst du jetzt den hässlichen Schatten da? Ich hasse das. Es ist schrecklich. Ah, es war Grenze. Okay, also war es nicht zurück. Schatten Rand. Ähm, das hasse ich. Was auch immer das ist, es sieht aus wie 19 Neunzigern. Okay, das ist Grenze. Also mache ich Grenze? Keine, da das Standard-Styling nur grob ist. Okay, also werde ich Hintergrundfarbe D 40 44 mit einem Hashtag vorne mit einem Heck haben, denn es ist eine Hack-Farbe, du könntest auch einfach grau eingeben, wenn du willst. Das ist völlig in Ordnung. Sie können sehen, was ich tue, ist nur Stück für Stück. Ich füge nur ein bisschen mehr zu meinem Code hinzu. Und dann wähle ich ab und zu das Kopieren von oben nach unten aus. Und dann komme ich hierher und füge das einfach ein und speichere es, lade es hoch, und wir sind wieder da. Ich möchte, dass das Grau erscheint, wenn es nicht ausgewählt ist, aber wenn es ausgewählt ist, wollte ich Zehenweiß knallen und einen Rand darauf haben. Also werden wir im nächsten Video darüber reden 41. Formrändern: Was wir jetzt tun wollen, ist, dass wir es zum Leben erwecken wollen. Wenn ich darauf klicke, möchte ich, dass sich der Hintergrund ändert. Es sieht so aus, als ob ich diesen Bereich wirklich auswähle, nur um ihn ein bisschen besser zu machen. Also, was ich tun werde, ist, dass ich dieselben Selektoren auswählen werde, die ich zuvor benutzt habe, und ich werde sie kopieren. Ich werde eine neue Stilregel machen, aber ich werde Colin Focus und Text Area Colin Focus eingeben. Es sind also die gleichen genauen Selektoren. Außer jetzt, worauf ich mich konzentriere, ist, wenn ich tatsächlich auf einen von ihnen klicke, dann wird es stattdessen diesen Code dienen. Gehäuse mit Hintergrund. Es sind weiße Männer. Border ist fünf Plektren auf einfarbigem Blau. Ich meine, sie war eine bessere blaue Farbe, weil ich das andere Blau hasse. Okay, also nein, sie werden irgendwie ein bisschen zum Leben erweckt. Sieh dir das an. Nun, das Problem hier ist, wenn Sie sehen können, wir schauen, wo das Textsubjekt ist, Sie könnten sehen, dass es sich nach oben und unten bewegt, weil was ich diese Grenze hinzufüge, es macht Ah, es macht alles größer, weil ich schiebe an dieser Grenze. Äh, um , nach außen, und es macht die ganze Kiste größer. Jetzt könnte ich versuchen, Box-Sizing, aber es funktioniert nicht. OK, was ich tun muss, ist, dass ich meinen ursprünglichen, nur regulären Eingaben einen Rahmen hinzufügen muss . Aber ich muss diese Grenze genau die gleiche Farbe wie der Hintergrund machen, also sehe ich sie nicht wirklich. Okay, also fünf Pixel fest, und dann wähle ich diese Farbe D 40 44. Nun, sieh dir das an. Ich kann es nicht sehen, aber es hat tatsächlich eine Grenze drauf. Okay, also ist das etwas gehackt, um eine Grenze hinzufügen zu können, aber, ähm, ähm, haben Sie eine Grenze, wenn Sie sich auf Dinge konzentrieren, aber vorher keine Grenze zeigen. Okay, jetzt, wenn ich es teste, bleibt alles genau dort, wo es ist. Aber diese Grenze kommt raus, und sie gibt es nur ein bisschen mehr Zing oder wie immer du es nennen willst, also werde ich den Code speichern. Also, äh, Grenze, warum habe ich Grenze keine. Ähm oh, weil er hatte, dass von vorher wegen der Grenze war wirklich dumm aussehend. Okay, also habe ich das rausgenommen. Und dann gehen wir los. Kopieren Sie diesen Code, der direkt dorthin geht. Und dann gehe ich zurück und ich kopiere diesen Code Der fokussierte Code, wenn wir darauf mit dem Hintergrund weiß in der Grenze, fünf Pixel-Salat klicken Hintergrund weiß in der Grenze, und dann speichern, Hochladen, aktualisieren Sie die Seite. Mai weiter und alles ist gerettet. Alles ist alles bereit. Okay, also sehe ich dich im nächsten Video. 42. Nächster Schritt: Text-Transform + Text-Align: jetzt werden wir an Schriftgröße und Texttransformation arbeiten. Okay, also werden wir gleich hier mit geformter Form, hübscher Eingabe und gebildetem Textbereich gehen . Es ist also wie alle, und wir werden die Schriftgröße hier auf 30 Pixel ändern und dann Text in Großbuchstaben umwandeln. Und jetzt haben wir diese Jungs wirklich, wirklich groß, benutzerfreundlich. Du musst es nicht tun. Du musst mein Styling nicht exakt kopieren. Ich zeige Ihnen irgendwie, was ich tun würde. Fühlen Sie sich frei, Ihr eigenes Ich in Ihrer eigenen Kreativität zu haben und Dinge so zu tun, wie Sie wollen . Manchmal mag ich Dinge größer wie diese, denn auf Mobilgeräten, auf mobilen Plattformen, sieht es schöner aus, wenn die Dinge nur ein Blick waren, wenn Texas nur ein bisschen größer. Obwohl es auf einem Desktop-Computer groß aussieht, ist es aber benutzerfreundlicher. Es macht mir nur mehr Spaß, als nur kleine Kleinigkeiten zu klicken. Es ist schön, große Dinge zu klicken. Aber hier ist das Problem. hier ist das Problem Wenn ich hier anklicke, fange ich an, meinen Vornamen Jimbo einzugeben. Dies ist alles links ausgerichtet Jetzt ist der Platzhaltertext zentriert, aber der Text hier bleibt in der Zeile. Warum jetzt? Warum passiert das? Denn wenn Sie sich die C s bis jetzt ansehen, habe ich diesen Code bereits hinzugefügt. Dieser Text, der Zeilenmittelpunkt für alle Platzhalter. Aber wir haben keinen Text in der Zeilenmitte für die Eingaben hinzugefügt. Also werden wir das auch in diesem alles in der gleichen hinzufügen. Der gleiche Text Bindestrich ausrichten, Coleman Mitte. Und jetzt sollte es funktionieren. Da gehen wir. Sehr, sehr nett. Also, jetzt ist das alles auch zentriert. Wir sehen uns im nächsten Video. 43. Verstelle deine Schriftarten die Materie (und verwende Google Fonts!): Stellen Sie sicher, dass Sie Ihre Arbeit vom letzten Mal gespeichert haben. Wenn Sie die Seite aktualisieren und das nicht tun, wird sie weggespült. Stellen Sie sicher, dass Sie die richtige zu kopierende Option auswählen. Oben. Okay, das ist der Fokus. Dies ist der Fokus auf Selektoren hier unten, aber das sind nur die regulären Eingaben. Äh, sag das und bringe es dann zurück. Aktualisieren Sie die Seite und alles. Whoa. Los geht's. Etwas. Aus irgendeinem Grund hat es das CSS nicht geladen, als es das für eine Sekunde tat. Okay, jetzt werde ich es testen. Bob Jones. A Woher wissen Sie das? Sieh dir das an. Warum ist dieser Fonds anders? Das ist nicht gut. Das gefällt mir gar nicht. Das ist also ein Textbereich, und aus irgendeinem Grund hat diese Texttheorie einen anderen Fonds. Also würden wir einfach hier anfangen, weil das die Eingaben und der Textbereich sind , und wir sagen, dass die Fondsfamilie Dash Familie gefunden hat. Colin Sands, Sand Saref. Sie können sehen, dass es behebt. Was ist alles, was wir dort tun mussten. Sie könnten verschiedene Freunde aus Google-Fonds mitbringen. Wenn Sie möchten oder müssen Sie zuerst den Fonds in Ihre Header-Datei laden, und dann können Sie. Dann können Sie es hier referenzieren. Sie können einfach jeden Spaß eingeben, den Sie wollen. Sie müssen es in Ihre Website laden, und dann können Sie darauf verweisen. Aber es gibt auch WordPress Plug in der Suche nach Google-Fonts. WordPress Plug in und es wird es so viel einfacher für Sie, andere Mittel in Ihre Website zu bringen . Okay, aber hier gehe ich einfach nach San Serif. Das ist einfach genug. Und tatsächlich ist dieser Code genau dort genau der gleiche Code wie diese Platzhalter, die hier das CSS betrachten . suche nicht die Platzhalter Ichsuche nicht die Platzhalter nach dem Code, den wir bereits gesagt haben, finde Familie Sand Saref genau dort. Also ist es nein, es ist keine Überraschung, dass nur das Hinzufügen von lustigen Familienserifenserif diesen Kerl an Ort und Stelle schnappen würde . Du kannst sagen, wann wir das rausnehmen. Das ist genau das Gleiche. Der Platzhalter-Fonds ist die gleiche, äh, eine Nachricht. Wenn ich das nehme und ich es schneide, kann man sehen, dass es genau der gleiche Spaß macht, also funktioniert das wirklich, wirklich gut. Uh, und jetzt werden wir sicherstellen, dass wir es per Kopie speichern. Einfügen. Bringen Sie es hier rein. Macht Gebrauch wie die richtige. Und dieser Typ wird immer länger und länger. Speichern Sie es auf, und aktualisieren Sie es. Und wir sind gut. Ehrfürchtig. Im nächsten Video werden wir darüber reden, dass der Submit-Button cool aussieht. Also werde ich in nur einer Sekunde sehen. 44. Die perfekte Submit: Also, jetzt arbeiten wir an der Submit-Button, und im Grunde, was ich für eine gute Submit-Button will, ist, wie ich über sie rollen. Ich wollte mich irgendwie austauschen und mir zeigen, dass ich darauf klicken kann und dann, äh und dann, wenn ich darauf klicke, wollte ich mich auch ändern. Also registriert wirklich meinen Klick, so dass es nicht nur, wenn sich nichts ändert, wenn ich darauf klicke, manchmal frage ich mich, habe ich tatsächlich auf die Schaltfläche geklickt oder nicht? Aber wenn es auftaucht, wenn du darauf klickst , dann gibt es mir irgendwie gutes Feedback, und das gefällt mir. Das sind also die beiden Dinge, die ich jetzt anstrebe. Im Moment, wenn wir durch diese Eingaben klicken, können Sie sehen, dass sie sich ändern. Aber schauen Sie, was passiert, wenn wir auf die Schaltfläche „Senden“ klicken. Es ist wie das Gleiche. Es ist fast so, als wäre es ein Eingang, aber es ist keine Eingabe. Okay, also gefällt mir nicht, dass ich es nicht mag, dass es so klebt. Der Grund, warum das passiert, ist, weil wir diesen Code haben, diese Form Form ziemlich Eingabe. Aber wenn es sich darauf konzentriert, dann ändert es den Hintergrund und es gibt ihm eine Grenze. Okay, aber ich will nicht, dass es sich darauf konzentriert. Ich möchte diesen Fokuscode nicht verwenden. Ich möchte Hover-Code verwenden. Okay, also was wir tun werden, ist, dass wir dasselbe schaffen, nur dafür. Für diesen speziellen Knopf genau da. Wir werden den Code ändern. Also lassen Sie mich die Seite aktualisieren. Und doch gehen wir hin. Okay, was ich jetzt tun werde, ist, dass ich dort eine neue, äh, neue Stilregel erstellen werde äh, . Nun, dies ist Eingabetyp gleich Taste. Wenn Sie tatsächlich ein wirklich Formular erstellen, ist der Importtyp tatsächlich Typ senden. Aber jetzt ändere ich es in Button. Nur weil ich wollte, dass das vorerst nützlich ist, um darauf klicken zu können und es nicht wirklich etwas tun zu lassen. Okay, also werden wir tun, ist wieder für ihn gebildet. Ich wähle aus. Ich bin, dass ich in Zonen einräume. Ich wähle eine sehr spezifische Eingabe aus, aber ich wähle nicht nur eine Eingabetaste aus. Ich wähle Eingabebuttons aus, die innerhalb des Formulars mit dem Klassenformular hübsch sind, die den Typ der Schaltfläche haben . Es sind nicht die anderen Eingänge. Es ist dieser spezifische Submit-Button hier. Ich könnte sogar eine Klasse auf diesem Submit-Button, wenn ich wollte, aber im Moment ist das gut genug. Also, was ich tun werde, ist, dass ich das eigentlich stylen werde. Lassen Sie mich hier sehen. Einfach großartig. Ich werde es ein bisschen anders machen. Nur damit es ein wenig auffällt, äh, ich brette fünf Pixel fest. Und bedenken Sie den Grund, warum wir eine Grenze mit der gleichen Farbe wie der Hintergrund setzen , ist, denn wenn wir darüber rollen und ihm eine Grenze geben wollen, wollen wir sicherstellen, dass dieser Raum bereits etabliert ist. Okay, das ist gut für jetzt. Und dann werde ich das in eine andere Stilregel kopieren. Also habe ich einfach kopiert und eingefügt, aber ich werde Colin schweben lassen. Wir sind jetzt habe ich den gleichen Knopf ausgewählt. Aber jetzt werde ich mich darauf konzentrieren, Code zu erstellen, wenn ich darüber schwebe. Etwas wird jetzt passieren. Also, was ich will, mit einem Hintergrund der Veränderung, äh mal sehen, was Alice Blue ist. Es sieht nicht wirklich so aus, als hätte es alles darüber vermasselt. Ah, das ist irgendwie cool. Ich werde diesen Hintergrund tatsächlich loswerden. Also mag ich den Hintergrund nicht oder ich mag die Grenze überhaupt nicht. Also werde ich die Grenze von der gleichen machen. Nein, eigentlich, um das ein bisschen einfacher zu machen, werde ich keine Grenze zu beiden haben. Also bin ich eigentlich keine Grenze. Und dann, wenn ich da rüber gehe, gehen wir. OK, also habe ich einen Rahmen für diesen speziellen Button gemacht. Es ist immer noch zu finden, die Grenze ist immer noch auf diesen anderen Eingängen. Aber für diesen Submit-Button wird es auf diese Weise keinen Rahmen haben. Ich muss nicht die Grenze von der gleichen Farbe wie der Hintergrund machen und all diesen Unsinn machen. Also habe ich die Grenze nicht gemacht. Und dann, wenn ich den Hintergrund ändere, ändert sich die Gesamtheit der Schaltfläche. Aber ich kann auch ich kann auch dio Textfarbe. Das ist nur Farbe. Okay, es gibt also Hintergrundfarbe. Aber dann gibt es auch Textfarbe auf dir. Ändern Sie die Textfarbe, indem Sie einfach die Farbe hier verwenden. Das sieht also aus. Lassen Sie mich hier sehen. Ich wollte der lustige Teil über Chrom sein, ist, dass man wirklich irgendwie genau sehen kann, wie es ist . Also gehen wir hin. Ich mag, wie das auf DNA aussieht. Nun, was ich tun werde, werde ich das etwas Zeit machen, um die Farbe des Textes zu ändern, wenn ich darüber rolle. Ich wollte nur so aussehen, als würde es aus mir rausfallen. Ich wollte zuerst nur verblasst werden, und dann, wenn ich es überrollte, wollte ich wirklich irgendwie zum Leben erwecken. Wenn du willst, dass das versiegelt wird, funktioniert Weiß. Und weißt du, was ich tun werde? Eigentlich werde ich zwingen, dass diese Eingabe angeheftet wird, also kann ich mir dieses Styling ansehen, während ich daran arbeite, ohne hin und her gehen zu müssen und weiter zu rollen. Okay, ähm, lass uns sehen, was sonst noch? Es ist schwer zu sehen. Grasen Sie dort. Das ist besser. Ich liebe es nicht. Lassen Sie mich sehen, ob ich eine blaue Farbe verwenden kann. Los geht's. Irgendwie Spaß. Sie können auch, mit Ihren spezifischen Markenfarben, können Sie irgendwie alles passen. Also ist es, was wirklich schön an CSS Styling ist, dass Sie können Art von anpassen alles um Ihre Marken, eigene Farben, Lassen Sie uns hier für dieses Video stoppen. Im nächsten Video werden wir am aktiven arbeiten, was bedeutet, wenn wir tatsächlich auf die Schaltfläche klicken, wie es sich ändert. Aber wo das jetzt gut ist, spielen Sie mit verschiedenen Farben, unterschiedlichen Hintergründen herum und nehmen Sie diese Grenze heraus. Ok? Und sorgen Sie dafür, dass Sie, äh Sie auch Ihre Arbeit speichern. Alles klar , was werden wir tun? Ich habe tatsächlich geklickt. Ich habe geklickt. Schweben Sie direkt da. Und jetzt bekomme ich all meinen ganzen Code zu sehen, den ich gerade in Form von Punktform einen hübschen Eingabetyp-Button und dann informierte Formular ziemlich Eingabetyp-Button mit dem Hover mit dem Hover Extra-Code. Also, Minister, so, gehen Sie in dieses CSS und speichern Sie es hochgeladen und überprüfen Sie, um zu sehen. Ich habe meine Arbeit richtig gemacht, und ich habe alles in Ordnung gemacht. Wir sehen uns im nächsten Video. 45. Erstelle die Submit mit dem Klick: In Ordnung. Also hier sind wir mit der gleichen Form, die Sie sehen können, wir haben all dieses Styling ist immer noch das gleiche . Und dann, wenn ich über den Submit-Button rolle, ändert es sich, was gut ist. Aber sieh mal, was passiert, wenn ich darauf klicke. Nichts ändert sich wirklich. Es sagt mir das nicht wirklich. Es ist, uh es ist, dass mein Klick zu sehen, was ärgerlich ist, wenn Sie auf ein Formular klicken, wenn Sie auf ein Formular klicken, das Sie Sie reagieren wollten Die Art und Weise, wie wir das tun, ist mit aktiv. Okay, also das ist Ah, das ist ein Elementzustand. Wenn wir nur diese Form kopieren ziemlich Leerzeichen Eingabe gebildet und dann mit diesen seltsamen Klammern , geben Sie equals quote Taste. Könnte eine neue ah Stil Regel und dann tun wir Colin aktiv und s Oh, ja. Das ist also ein Zustand, ein Elementstatus, den wir tatsächlich ein- und ausschalten können, um zu sehen, was los ist . Also, was ich tun werde, ist, dass ich aktiv klicke und dann sicherstelle, dass der kleine Punkt da ist . Das zwingt, dass diese Eingabetyptaste jetzt aktiv ist. OK, so sieht es so aus, wenn es aktiv ist. Wir werden dio-Hintergrund weiß und wir werden Farbe weiß machen, so dass es fast verschwindet. Mal sehen, wie das ist. Sie können sehen, dass es knallt. Siehst du das? Weil es jetzt in Ordnung ist, normalerweise ganz weiß. Das ergibt keinen Sinn, oder? Alles weiß ist nicht gut, weil man nichts anderes sehen kann als die aktive Ist Onley für einen Bruchteil Sekunde passiert ? Also ist es OK, wenn es einige Dinge im krassen Gegensatz zu, ah, was auch immer das schwebende Styling in Ordnung ist, weil es ein starker Kontrast ist. Ich kann wirklich sehen, wenn ich auf diese Schaltfläche klicke. Es macht wirklich viel Sinn für mich, dass du auch hier aktiv sein könntest macht wirklich viel Sinn für mich, dass du auch hier aktiv sein könntest. Du könntest auch Farbe machen, , die nah am Hintergrund ist , , der schon da ist, aber nur ein bisschen weg. Also sieh mal, was ich meine. Also Hintergrund ist, dass, wo ich gehen werde, um aktiven Hintergrund. Und dann ist die Farbe des Spaßes so. Oh, warte, nein, ich wollte schweben. Wo sind die Hover-Informationen dort? Okay, einige kopieren das Kind, das Styling vom Hover-Code über den aktiven Code. Es ist also genau das Gleiche. Jetzt schweben sie und die aktiven. Aber ich ziehe sie ein bisschen ab. Sehen Sie sich diesen Hintergrund an. Ich ziehe es ein bisschen leichter, ein bisschen höher nach oben und dann auch ein bisschen nach links. Und dann ist die Farbe Nun, ich ziehe sie nach oben, diagonal nach links. Also ist es die gleiche Art von Tonfarben, aber sie sind nur nach oben gezogen ihre verschoben nach links. Okay, das bedeutet also weniger Sättigung und mawr Helligkeit näher Zehe weiß und weniger Sättigung. Das habe ich für beide getan. Werfen wir nun einen Blick darauf, was passiert, wenn wir auf die Schaltfläche klicken, damit Sie sie sehen können. Es ist nicht ganz so stark ein Kontrast wie alles weiß zu gehen, aber es gibt uns definitiv eine Vorstellung von. Es gibt uns definitiv einen guten Blick für das Klicken auf die Schaltfläche Senden, die uns gibt, dass das Feedback, das uns klar macht OK, klicken wir auf jeden Fall nach unten, dass Sie auch in die entgegengesetzte Richtung gehen könnten, wenn Sie wollen. Statt hier können wir diagonal runter gehen, und dann könnten wir auch diagonal runter gehen. Und nein, wenn wir es uns jetzt ansehen. Es wird dunkler, wenn wir darauf klicken. Nun, nach Herzenslust, können Sie es so gestalten, wie Sie wollen. Normalerweise gehe ich gerne leichter, also ziehe ich die zurück, wohin? Art von wo sie hier oben waren. Dieser Typ war irgendwo da. Ich mag es, leichter zu werden. Das ist nur mein Stil und einfach so. Aber fühlen Sie sich frei, mit Ihrem Submit-Button zu tun, was Sie wollen, und machen Sie es übereinstimmen. Sie sind auch Ihre Markenfarben. Okay, also das ist, ähm, das ist, wie Stil ist Submit-Button und ich werde im nächsten Video sehen. 46. Inspiration von anderen Websites: Modellierung ihres Codes: Wenn Sie also etwas in diesem Tutorial gelernt haben, wissen Sie, dass es so viele verschiedene Optionen gibt, so viele verschiedene Dinge, die Sie tun können, wenn Sie ein Formular formatieren möchten. Oder wenn Sie eine div-Box oder den Text in einer DIV-Box oder was auch immer es ist stylen möchten, gibt es so viele verschiedene Dinge, die Sie tun können. Was ich Sie ermutigen möchte, ist das nächste Mal, wenn Sie eine Website sehen, wo Sie wirklich, wirklich wie ihr Styling. Nehmen wir an, Sie sehen ein Kontaktformular, in dem Sie ah sehen, bestimmten Text innerhalb, Sie wissen schon, vielleicht wie eine Zeitschrift, wo sie einen Text haben, der irgendwie herausspringt und es in seinem eigenen Bereich ist, was auch immer ist, richtig. Klicken Sie darauf, und klicken Sie erneut auf Inspect. Wir sind in Chrom. Wir suchen nach Dev Tools und versuchen Sie einfach, einfach, zu versuchen, zurückzuentwickeln, wie sie es gemacht haben. Okay, also geh nach rechts durch. Sie wollen mit der rechten Maustaste in einen Teil des Bildschirms klicken und dann klicke ich auf Inspect und Sie können dann einfach durchreißen, wie sie, äh, wie sie dieses Formular erstellt haben. Es sind nur all diese kleinen kleinen Codestücke von Anfang bis Ende zu gehen. Es macht so Spaß, diesen Fortschritt von hier bis hin zu sehen, wo wir gelandet sind. Es ist Nacht und es ist Tag und Nacht. Also, äh, so bleiben Sie neugierig, Staat neugierig. Und jedes Mal, wenn Sie etwas sehen, rollen Sie nicht einfach um und sagen, Oh, sie haben nur ein schönes Styling. Es ist erstaunlich. Geh da rein und stehle ihren Code. Sehen Sie sich an, was los ist, aber stehlen Sie nicht ihren Kegel. Sir, es tut mir leid, dass ich gesagt habe, dass sie ihre Karte leicht kopieren. Sehen Sie, was sie sehen, was sie getan haben und Ihre eigenen machen. Ok. Du machst dein eigenes Ding. Setzen Sie Ihren eigenen Spin darauf, Ihr eigenes Flair und lassen Sie es lebendig werden, so dass Sie wirklich genießen und dass Sie sich gut fühlen, wenn Sie es verwenden. Sollten Sie das Gefühl, Sie sollten Sie fühlen sich wie Sie Websites lustig und interessant und nicht nur langweilig sind. Das ist wirklich, wirklich langweilig. Diese Anfängerform hier ist so langweilig 1993. Okay, zieh dich davon weg und füge dein eigenes Styling Teoh hinzu, damit es lebendig wird. 47. Erstelle ein Thema mit der Zeit + Ask Me nichts!: Vielen Dank, dass Sie diesen Kurs besucht haben. Danke, dass Sie sich mir angeschlossen haben. Danke, dass du hier bist. Ich bin so stolz auf dich, dass du das Ende schaffst. Wenn Sie Fragen haben, stellen Sie bitte in den Kommentaren. Zögern Sie nie zu fragen. Ich würde Ihnen gerne helfen. Ich hoffe, Sie sind, ich hoffe, die ganze Welt von CSS explodiert gerade in Ihrem Kopf. Ich hoffe, es öffnet sich. Nur Welten der Möglichkeiten. Wenn Sie überwältigt sind, nehmen Sie einfach eine Sache nach dem anderen. Lernen Sie jeden Tag eine neue Sache am Tag Am Ende von ein paar Wochen werden Sie überrascht sein, wie viel Sie tatsächlich gelernt haben. Du musst nicht alles auf einmal machen, eins lernen, es gut lernen und dann weitermachen. Nochmals vielen Dank. So viel dafür, dass du mich anschließen kannst. Ich hoffe zu sehen, wenn ein weiterer meiner Kurse und ich werde Sie bald sehen.