Einführung in CSS: Anfänger zum Webdesigner in 30 Minuten | Medic 10 | Skillshare

Playback-Geschwindigkeit


1.0x


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

Einführung in CSS: Anfänger zum Webdesigner in 30 Minuten

teacher avatar Medic 10, Medical Student + YouTuber

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      2:05

    • 2.

      CSS-Datei erstellen Und Verlinken

      2:59

    • 3.

      Hinzufügen der ersten Farbe

      2:54

    • 4.

      Hinzufügen von Hintergrundfarbe

      3:37

    • 5.

      Elemente universell mit Asterisk anwenden

      2:20

    • 6.

      Hinzufügen von Farbänderungen nach dem Hovering

      2:29

    • 7.

      Kurse

      3:32

    • 8.

      Text ausrichten

      4:00

    • 9.

      Hintergrundbilder In CSS

      2:13

    • 10.

      Schlussbemerkung

      1:10

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

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.

61

Teilnehmer:innen

2

Projekte

Über diesen Kurs

Du lernst die Grundlagen von CSS und kannst dieses Wissen anwenden, um dein Grundlegendes Websitedesign noch besser zu gestalten. Dies baut sich aus dem vorherigen HTML-Kurs auf.

Keine vorherige Erfahrung erforderlich und nur Voraussetzung für diesen Kurs ist, die Visual Studio Free Version für Windows oder Mac herunterzuladen, abhängig von dem verwendeten Betriebssystem.

Vorübersicht: Vollständige Einführung in HTML: Anfänger zum Webdesigner in 30 Minuten

Triff deine:n Kursleiter:in

Teacher Profile Image

Medic 10

Medical Student + YouTuber

Kursleiter:in

Medical Student YouTuber Programmer Web Designer

Helping you live and lead healthier and productive lives.

Ranging from education, productivity, technology, programming, studying for exams and more, we're here to help!

Vollständiges Profil ansehen

Skills dieses Kurses

Entwicklung Programmiersprachen CSS
Level: Beginner

Kursbewertung

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

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 auf 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. Einführung: Hallo und willkommen zu einer anderen Skillshare-Klasse von Medic Turn , der der zweite in der Skillshare ist. Dies wird eine Einführung in CSS sein, vom Anfänger zum Webdesigner geht. Und eine Stunde. Als Voraussetzung für diesen Kurs würde ich erwarten, dass Sie den HTML-Anfängerdesigner in 30 Minuten abschließen müssen , die ich in meiner anderen Skillshare-Klasse aufgenommen habe. Also gehst du zuerst damit, weil dieser Kurs aufgebaut wurde , auf dem du in diesem Kurs gelernt hast. Und während wir durchgehen, ist CSS, das Erlernen der Regeln und Strukturen. Sie lernen also verschiedene Arten von Eigenschaften kennen, die Sie als Deklarationen auswählen können und wie Sie CSS tatsächlich in eine eigene Datei anwenden diese in die HTML-Datei einbetten können. Erwähnt müssen Sie Ihr Wissen anwenden und im vorherigen Kurs auf dem HTML-Code aufbauen. Wenn Sie völlig neu in der Programmierung sind, würde ich vorschlagen, zuerst zum HTML-Kurs zu gehen, zu lernen, wie Sie Ihre erste Webseite entwerfen und dann zu diesem Kurs kommen, um Ihre Webseite zu gestalten. Denn wenn Sie eine Webseite entwerfen, möchten Sie einfach nicht, dass sie nur mit Text gespielt wird. Sie haben keine Bilder und Videos, aber Sie müssen eine Bedeutung für Ihre Website haben , indem Sie ihr Farbe hinzufügen, den Hintergrund dazu. Am wichtigsten ist, wie Sie die Bilder an Aufregung und verschiedene Stile anpassen . Dies ist ein Einführungskurs und wie Sie natürlich auch projizieren können. Wir werden gegeben, damit Sie Fähigkeiten üben können. Und schließlich verwenden Sie Visual Studio Code, die kostenlose Version für Windows oder Mac, und laden Sie den Visual Studio-Code im Webbrowser herunter und gehen auf die offizielle Website, auf die Sie gelangen können Ihre spezifische Version je nach verwendetem Betriebssystem . Dies ist es für das erste Video, ich werde in den nächsten Bildern in der gesamten Skillshare-Klasse CU sein den nächsten Bildern in der gesamten Skillshare-Klasse , während wir Ihnen zeigen, wie Sie Ihre Webseite tatsächlich stylen und aufbauen können . Wir sehen uns das nächste Mal. 2. Erstellen und Verknüpfen von CSS-Datei: Hallo und willkommen zurück zum zweiten Video der CSS-Webdesigner-Serie. Wir werden erläutern, wie Sie Ihre Website tatsächlich mit Farbe, Hintergrund und Stil nach Ihren Wünschen entwickeln können. Wie Sie hier sehen können, werden Sie, wenn Sie den vorherigen Kurs durchgemacht haben, sehen Sie, dass dies die grundlegende Website ist ich mit HTML erstellt habe. Jetzt müssen Sie darüber nachdenken, wie wir dies tatsächlich erweitern können , um Ihre ganze Menge besser zu machen. Das ist also die Website hier. Was ich getan habe, ist, dass ich das auf Live-Servern geöffnet habe, also drücke die Steuerung, klicke und öffne es mit Live Server. Das kannst du hier automatisch sehen, oder? Wenn Sie also mehr darüber wissen möchten, wenn Sie zum vorherigen HTML-Kurs zurückkehren, können Sie sehen, wie ich alles gemacht habe, was hier zurückgeht. Wenn Sie CSS entwickeln möchten, steht CSS als Erstes für Cascading Stylesheets. Es ist im Grunde die Datei , die Ihrer Website hilft, Farbe, Hintergrund zu erstellen , zu erfassen und zu gestalten. Erstellen wir also eine CSS-Datei. Wenn Sie also hier auf dieses Pluszeichen gehen, genau hier, punkten Sie CSS auf der ersten Seite. Der Grund dafür ist, dass ich die erste Seite setze, liegt darin die HTML-Datei die erste Seite ist. Und es wird eine gute Möglichkeit sein, sich an diese erste Seite zu erinnern , nur CSS hier. Sobald wir dies erstellt haben, möchten wir jetzt wissen, wie wir die Dateien miteinander verknüpfen können. Um zusammen mit Dateien zu verknüpfen, müssen Sie zunächst verstehen, dass diese beiden nicht verbunden sind. erste Stufe, die zweite Stufe wäre, besteht darin, sie zu verbinden. Die dritte Stufe wäre zu sehen, ob Sie das richtig gemacht haben und das funktioniert tatsächlich, was wir in ein paar Videos bearbeiten werden. Schauen wir uns hier an. Damit Ihre Website funktioniert, müssten Sie einen Link schreiben. Sagen Sie zum Beispiel, Sie möchten CSS für die erste Seite haben. Dies wird rho gleich Stylesheet verzogen, da Sie hier einen Link zu Ihrer CSS-Seite erstellt haben . So würden Sie das CSS-Dokument im Grunde genommen zuerst durchführen . Verbinde es tatsächlich. Moment sollten Sie keine Updates sehen, die einmal auf nichts verwendet werden oder etwas hineinlegen, dann können Sie sehen, ob es funktioniert. Dies ist es, dass der erste Teil tatsächlich das CSS-Dokument erstellt. Und die nächsten Teile konzentrieren sich darauf, wie Sie dies tatsächlich erweitern können und wie es Ihre Webseite tatsächlich aktualisieren kann. Und wir sehen uns im nächsten Problem. 3. Die erste Farbe hinzufügen: Hallo und willkommen zum dritten Teil dieser Skillshare-Klasse, in dem ich darüber nachgehen werde, wie Sie Ihrer Website Farbe hinzufügen können , beginnend mit der Schriftart. Lass uns hierher gehen. Sie können hier sehen, dass dies mit Ihrem HTML verknüpft ist. Erste Seite Punkt CSS. Dies ist die Akte. Wenn Sie also mit dem Schreiben von Code und CSS beginnen möchten, möchten Sie zuerst verstehen, was in HTML geschrieben ist . Wenn wir den Titel hier stylen wollen. Meine erste Website wird hier rübergehen. Einer ist hier geschrieben, mein H1 offener Typ, enge Bindung, meine erste Website. Du willst das stylen? So wie es geschrieben wird, ist eine, geschweifte Klammern öffnen, Klammern mit IntelliSense schließen . Schliessen. Im Grunde schreiben Sie auf diese Weise in CSS. Da dies offensichtlich erscheint, möchten Sie die Farbe und die Farbcodierung an die amerikanische Schreibweise anpassen Farbcodierung an die amerikanische Schreibweise und sie wird farbcodiert, da dies zu einer roten Farbe, einem roten Semikolon, machen kann. Vergessen Sie immer nicht das Semikolon, denn viel Semikolon funktioniert immer noch nicht. Drücken Sie nun Speichern oder Befehl Speichern unter Mac, steuern Sie gespeicherte Fenster. Automatisch beginnt die Magie zu passieren. Ihre erste Website-Farbe hat sich gerade für schwarze Farbe in rote Farbe geändert. Versuchen wir eine Mischung von Farben, als wir Blau versuchen, indem wir mit der Arbeit zu Blau wechseln. Ja, es wird funktionieren, weil es nur die Farbe ändert. Blau, Violett vielleicht versuchen wir das. Dies wandte sich zu blauem Wireless. Sie bekommen also das Verständnis, werden tatsächlich gefragt, wenn Sie es in die richtige Syntax schreiben, dann können Sie stehen. Wie Sie dies tun möchten, ist die ausgewählte Eigenschaft type, mit der sie signiert wurde. Sobald Sie den Code hier verstanden haben, ist es eigentlich ganz einfach wie Sie ihn für die anderen schreiben. Nehmen wir an, Sie möchten den Absatz vielleicht mit dem Absatz heraus stylen , sagen Sie ist das p-Tag, okay, also ist es ein p-Tag. Der beste Weg, um dieses Lernen zu machen, ist einfach hier runter zu gehen, oder? P-Raum, öffnen, Tag schließen, Farbe. Versuchen wir es hier mit Farbe. Nehmen wir an, Sie möchten diese neue grüne Farbe, Semikolon, setzen . Werde einfach grün. Also musst du für dich sein, warum wird es einfach grün, denn diese drei erscheinen hier grün? Weil ich sie in das Absatz-Tag eingefügt habe. Wenn er sie in das Absatz-Tag einfügt go passiert ist die Änderungsfarbe als diese? Ist es für diesen Teil im Video. Du wirst rübergehen. Der nächste Teil ist, wie Sie Ihre Farbe stylen. Dann sehen wir uns im nächsten. 4. Hintergrundfarbe: Willkommen zurück zu einem weiteren Video innerhalb der Scotia-Klasse von CSS, das von Anfang an auf der AT-Website geht. Und in diesem wird untersucht, wie Sie einer Website Hintergrundfarbe und farbige verschiedene Teile hinzufügen können Hintergrundfarbe und farbige verschiedene Teile hinzufügen und farbige verschiedene Teile hinzufügen , ohne einige andere Teile zu ändern. Wenn du hier siehst, hast du div id netz. Wenn Sie sich also im vorherigen Video erinnern, haben wir uns angeschaut, wie Sie die einzelnen Wünsche einfärben können. Also haben wir die erste Malware-Website. Dies ist im Grunde unter H1. Wir haben das in ein Tag gesetzt, also hatten wir einen Selektor. Wenn wir zum Beispiel keinen haben, der diesen Topf und diese Farbe hat und wir diesen Teil nicht haben werden, wir an, dass eine Aquafarbe, die wir tun müssen, diese tatsächlich an diesen Teil der Website anhängen. Das Wichtigste, an das Sie sich erinnern sollten , ist , dass Sie etwas verwenden müssen, das als ID bezeichnet wird. Wenn du zum HTML-Kurs zurückkehrst, siehst du ihn. Eine ID ist im Grunde das, was den Absätzen den Namen gibt. Div id gleich bedeutet, dass Sie dies nur verwenden, um diesen Abschnitt speziell von hier nach hier zu färben . Um dieses erste Werkzeug zu färben, um Hashtag-Netz zu drücken, öffnen Sie geschweifte Klammern und von dort aus können Sie Farbe eingeben, die grün sein könnte. Hintergrundfarbe. So setzt man den Hintergrund in Aqua. Ich habe das gerettet. Was passieren sollte, ist, dass diese Farbe bei diesem Text grün wird, der von einer blauen Spalte umgeben ist. So setzen wir im Allgemeinen Farbe mit der ID ein und stylen tatsächlich weiter. Auf diese Weise können Sie verschiedene Teile der Website erstellen. Verschiedene Farben sind keine Strände. Hier, Sehen wir uns den besten Code als Ziel an. Und wir hätten hier haben können, das ist eine Klasse. Anstatt dass diese Klasse heute Abend die ID ändert und es besser macht, als ich möchte, dass Sie lernen. Die ID ist gleich dem Ziel. Dann, okay, ändern wir das in ein Div. Hier hat sich den ganzen Weg geändert. Also hast du dein Div hier. Lassen Sie uns noch einmal das h2-Tag entdecken. Am besten sollte der Coder sehen, dass sich hier nichts wesentlich ändert. Was passiert dann ist wenn Sie hierher zurückkehren, da wir das div haben, jetzt nennen wir diese div id gleich destination. Was danach passiert, wenn Sie hierher zurückkehren, das Ziel in der Lage ist, eine Hintergrundfarbe von lila zu haben. Was passieren sollte, ist, dass der aktualisierte Self-Service nicht funktioniert. Ich werde herausfinden, warum es von dort aus nicht funktioniert , um herauszufinden, wie Sie es geschafft haben das Ziel zu betrachten , hier das Ziel zu betrachten, geteilter bester Coder. Hier. Was sollte passieren ist, wenn du hier klickst, hier klickst, was passiert dann? Es aktualisiert sich selbst. Donut hier drin. Sie müssen jede Seite auf Seite, HTML oder CSS speichern , um dies zu aktualisieren. Dies ist es für dieses Video, dem wir in den nächsten Videos nachschauen, wie sich Schriftgewicht, Schriftgröße und Schriftstil geändert haben. Und wir sehen uns im nächsten. 5. Elemente universell mit Asterisk: Hallo und willkommen zurück zu einem weiteren Video in der CSS Skillshare-Klasse. Und dieses Mal werden wir uns ansehen, wie wir Eigenschaften anwenden können , die auf der gesamten Webseite eine Infektion haben , und die Sache heute betrachtet wird, ist die Verwendung des ausgewählten Sternchens. Wenn ich also das Sternchen hier auswähle, passiert ist so, dass ich eine Eigenschaft anwenden kann, also hat die Verwendung eines Randes. Wenn Sie also einen Rahmen anwenden möchten , der für alle Websites spezifisch ist, schlagen Sie einfach einen Rand ein Pixel, einfarbig. Was wird also passieren? Sollten Sie ein Board sehen oder auf Ihrer gesamten Website und unserer Umgebung kommen . Wie ändern wir die Farbe? Also können wir das wieder hierher stellen. Und das ändert auch die Farbe, je nachdem, wie dick Sie dorthin gehen möchten. Wenn Sie es zu dick machen, kann dies auch die Intensität des Aussehens auf der Website beeinflussen. Je weniger es ist, desto besser. Hängt davon ab, wie sehr sie euch beiden haben wollte , weil sie in bestimmten Worten aufgetaucht sind, weil sie unter bestimmten Überschriften und Entwicklern stehen. Deshalb wird der Vorstand erscheinen. Das haben wir uns gerade angeschaut. So können wir auch die Hintergrundfarbe anpassen, die Sie, sagen wir, eine Strandfarbe haben könnten. Dies gibt Ihnen eine Pfirsichfarbe , die Sie in eine rote Farbe umwandeln können. Und es wird dir eine rote Farbe geben. Und deshalb hast du Gelb, keine Änderung zu Gelb. So können Sie Ihre Website tatsächlich stylen , um eine ganz andere Farbe zu erhalten. Es sieht also sehr daran interessiert aus, wie Sie die Sternchenfunktion verwenden können. Zu diesem Zweck würde nur eine gute Farbe pH-Wert gegeben. Also zeigt dir tatsächlich, wie es funktioniert. Manchmal kann man tatsächlich einen Fehler haben und es wird nicht funktionieren. Stellen Sie also sicher, dass Sie überhaupt nachsehen , warum nicht funktioniert hat. Dies hilft Ihnen, Ihre Fähigkeiten insgesamt zu verbessern , denn wenn Ihre Syntax die Art und Weise ist , wie Sie den Code schreiben, falsch ist, wird ein Fehler angezeigt und die genaue Eigenschaft, die Sie nicht angezeigt werden, wird nicht angezeigt dann. Das ist es für dieses Video. Und der nächste ist, ich werde weiter darüber nachgehen , wie Sie es auch stylen können. Danke, dass du dir das angeschaut hast und wir sehen uns im nächsten. 6. Farbänderung nach dem Hovering: Hallo und willkommen zu einem weiteren Video der Scotia-Serie oder dem CSS, das von Anfang an zum Webdesigner geht. Und nun, ich zeige Ihnen, wie Sie Ihre Website interaktiver gestalten können , insbesondere wenn mehr Zuschauer Ihre Website besuchen und tatsächlich einige Ihrer Absätze ernten . Nehmen wir an, wir wollten diese Linie grün oder liniengrün haben . Und wenn einige gerade über Root schweben , wenn Sie den Mauszeiger darüber bewegen, gibt es eigentlich keine Farbe. Der Weg, dies zu verbessern, besteht darin, Folgendes ausgewählt zu schreiben. Also schreibe P Doppelpunkt. Nun, der Grund dafür ist, dies zu wiederholen und uns einfach wenig Platz zu geben , ohne geschweifte Klammer zu öffnen, dann versuche einfach, die Gier zu färben . Sag das. Was nun passieren sollte, ist Ihre Farbe im Grunde über den Mauszeiger schweben sollte, wenn sie hier ist, dann sieht das viel interessanter aus, ändert sie nicht die Farbe, wenn Sie schwebten? Nun, als Nächstes werde ich eine Hintergrundfarbe haben. Sparen wir oben auf Blau. Happens ist tatsächlich die blaue Farbe überschreiben. Grüne Farbe hier. Es sieht hier grün aus unter Blau und macht es im Vergleich zu zuvor etwas interessanter . Es gibt also irgendeine Form von Interaktion, also ist es CSS. Sie benötigen nicht besonders eine andere Programmiersprache wie JavaScript, um Farbe zu erzeugen. Css ist ein sehr leistungsfähiger Service und bietet den farbigen Hintergrund und auch die verschiedenen Formatierungsarten , die Sie auf Ihrer Website wünschen. Dies hilft Ihrem Publikum tatsächlich mehr mit der Website zu interagieren, erhöht den Traffic die Tatsache, dass sie glauben, dass Sie tatsächlich erfahrener sind und Websites erstellen. Und tatsächlich haben wir das gelernt, indem wir ein paar kleine Codestücke geschrieben haben. Sie können den Hostgast-Top Ihrer Website ändern. Andererseits ist dies die Interaktivitätsart der Website. Dies ist es für dieses Video, das die Show macht, um Ihnen zu helfen, die verschiedenen Pausen zu verstehen , wie Sie eine Repository-Website erstellen können und Ihr Verständnis für die Erstellung einer Website verbessern können insgesamt. Vielen Dank, dass Sie sich dieses Video angesehen haben, wenn es Ihnen gefallen hat, bitte schauen Sie sich diesen Skillshare-Kurs weiter an. Und ich hoffe, du kommst zu uns und wir sehen uns im nächsten. 7. Kurse: Hallo, und willkommen zurück zu dem anderen Redu in der CSS Scotia-Klasse, während wir uns darüber befassen, wie wir so genannte Klassen verwenden können , um deine Website interaktiver zu gestalten. Wenn Sie also zu den vorherigen Videos zurückkehren, sehen Sie, dass ich die Berater-ID besprochen habe und wie Sie einen Hashtag speziell verwenden können , um Ihre Website mit IT zu färben. Okay, dann schauen wir uns dieses Mal Klassen an und den Unterschied zwischen Klassen und IDs. Fangen Sie mit der Klasse an. Sie haben es hier in eingebetteter Davis eigenem Bereich. Sie werden sehen, dass das Ziel Hashtag ist. Ziel mit der Klasse, die wir brauchen, ist die Punktklasse. Also in diesem Fall Punkt-Überschrift. Dies ist es, was wir die Farbe ändern wollen, daher sein Zeichen. Das ist falsch. Wenn ich diese Seite nur aktualisiere, wird es passieren. Ist es immer noch da? Was wir hier also tun müssen, ist ihr Kampf. Schreib einfach Punkt. Geh zurück und es heißt Punkt-Überschrift. Farbe gibt uns einen Bodendecker. Diese Änderungsaufforderung. So klar muss der Unterschied zwischen, wie ich bereits erwähnt habe, zwischen der Idee und den Klassen einen Punkt verwenden , an dem die Klasse aufgerufen wird, wie Überschrift, dann geschweifte Klammern, wie zuvor, Breitenziele , Hashtags. Dies ist also eine gute Möglichkeit, sich daran zu erinnern, welches du magst. Es liegt an Ihnen, ob Sie IT mit Hashtag bevorzugen, wir bevorzugen den vollständigen Stopp der Klassenbreite und erleichtern es Programmierern tatsächlich, zwischen dem Schreiben von viel Code im HTML zu überspringen und anzugeben alles. Wenn Sie einfach eine neue CSS-Datei verknüpfen können, wird Ihr Code viel sauberer als die gesamte HTML-Datei. Das hilft wirklich, dies zu lösen. Wenn ich nun das Konzept der Schriften vorstellen würde, damit Sie eine Schriftgröße haben können, sagen wir die Überschrift, wir möchten, dass diese groß ist, sagen wir Touch. Es erweist sich als einigermaßen klein, weil vorprogrammiert in der Definition darauf hindeutet, dass dies die Wissenschaft ist. Lassen Sie uns sagen, wenn Sie es anpassen möchten, verwenden also etwa zehn Pixel kleiner. Jetzt willst du es größer machen, 100 Pixel. Und auf gute Weise. Das Beste ist, anstatt das Wort mittel oder groß zu verwenden, verwenden Sie tatsächlich die Spezifität der Pixel selbst verwendet eine bestimmte Anzahl von Pixeln macht einen riesigen Alex ziemlich groß. Jemand hat es abgeschwächt , um es ein bisschen kleiner zu machen. Diese Art von vernünftigem brechendem Musikvideo , das auf einen Frauenbaum schaut. Was wir hier gelernt haben, ist, wie man die Schriftgröße für die Farbe verwendet. Ich will die Schriftfamilie. Sie können verschiedene Auswahlen haben. Benutzen wir einfach Second Geneva, ****** und serifenlos. Dies ändert die gesamte Schriftfamilie Ihres Absatzes oder in diesem Fall den Titel. Das ist es für dieses Video. Also habe ich dir im Moment eine Menge Dinge erzählt. Also habe ich Ihnen gesagt, wie Sie eine Klasse verwenden, insbesondere die Punktüberschrift, die Farbe, die Schriftgrößen, wie Sie die Größe, die Schriftart und die Schriftfamilie anpassen die Schriftart und die Schriftfamilie geben Sie einfach eine Schriftart ein , die dazu gehört. Hoffe noch einmal, dass dir das gefallen hat und wir sehen uns das nächste. 8. Text ausrichten: Hallo und willkommen zurück zu einem weiteren Video in dieser CSS-Serie, in dem ich überlege, wie Sie Ihren Text an Ihre Website-Anforderungen ausrichten und auch die Lesbarkeit Ihrer Website verbessern können. Hier sehen Sie also dass alle Texte auf der linken Seite der Website ausgerichtet wurden . Nehmen wir an, wenn Sie sich an der Mitte ausrichten und es tatsächlich interessanter aussehen lassen möchten , die Aufmerksamkeit des Publikums tatsächlich auf bestimmte Teile Ihrer Website, die wir verwenden können, ist so etwas, das als Text ausrichten Selektorfunktion. Nehmen wir an, ich habe einen und Sie möchten sich genau hier ausrichten, Text. Jetzt können Sie hier sehen, dass es viele verschiedene Funktionen gibt. Wir werden uns die Texte für heute ansehen, Center. Dr. Hit „Speichern“. Und was passiert, ist, dass es an der Mitte der Website ausgerichtet ist. So richten Sie sich zum Zentrum hin und erreichen tatsächlich das, was Sie wollen. Was passiert, wenn du wieder nach links gehen willst, könntest du das einfach tun. Und wir fahren sofort zurück. Aber lasst uns präsentieren. Wenn Sie einige professionelle Fähigkeiten einsetzen, wird dies nach links gebracht. Das geht also sofort nach links, rate um zwei und nach rechts wird es zum Laufen verlagert. Schauen wir uns nun genau an, ob Sie es nach den übergeordneten Elementen rechts und links ausrichten möchten . Sie nennen also persönlich gerechtfertigt, nur um im Grunde zu kaufen , bedeutet, dass Sie Mengen begründen möchten. Diese Website gehört nach links, weil Stadt für Position. Und es möchte dorthin gehen denn seine natürliche Position, in Sie möchten, dass Ihr Text das super betrachten soll, können wir uns tatsächlich entsprechend anpassen, wie wir es wünschen. Wenn Sie nun ein paar andere Teile suchen, müssen Sie jetzt die Farbnote machen. Okay, Hintergrundfarbe, sagen Sie Text ausrichten. Lassen Sie uns sehen, was wir haben, ist, dass das Zentrum passieren wird , wenn der Text in der Mitte ausgerichtet wird. Das hilft Ihnen also tatsächlich zu ertragen, wie Sie die Hintergrundfarbe planen möchten . In diesem Fall hat es eine Website verbessert. Und dann nennen wir das hier in Bezug auf die Liste. Wenn wir zu unserem HTML zurückkehren, der sich anschaut, was wir hier abgelegt haben, setzen wir dies als Liste. Aus diesem Grund erscheint es und Sie können Ihr Quartal so ändern, wie Sie es wünschen. Und im Grunde genommen, wenn du das richtige machen willst, wird es das sein, es sieht nicht so gut aus. Also mache ich das Zentrum wieder rückgängig. Das sieht gut aus. Vielleicht weil, wie die aktuelle Seite links links plus, einigen verschiedenen Formen von Texten entspricht, die überall hingehen. Wenn wir also wieder hierher gehen, speichern wir das einfach. Dies ist die Überschrift, Text zu Zeile. Das wäre es, was passieren würde, dann sollte es sich in Richtung damals bewegen. So funktioniert es also, je nachdem, wie Sie es wollen , ist, dass wir das gerade losgeworden sind. Konzentrieren Sie sich einfach genau darauf. Wenn wir nun hierher gehen, text-ausrichten, rechts, geht der Textmotor rechts und links nach links. Und das im Grunde genommen zu verstehen, ist ein Schlüsselkonzept zur Verbesserung des Codes. Nur, wenn Sie wissen, wo Sie Ihre Texte platzieren müssen , und es so viel einfacher macht , Ihre Website tatsächlich zu gestalten , damit Sie nicht darüber nachdenken müssen. Welche Texte gehen wohin, wenn Sie auf einem Blatt Papier entwerfen , das Sie schreiben möchten, verwenden Sie Texte ausrichten. Jeder kann sich als mächtiges Werkzeug erweisen. Wie auch immer, das reicht von mir vorerst, für dieses Video. In den ersten Videos werden wir uns anschauen, wie wir die Website tatsächlich noch weiter verbessern können . Danke fürs Zuhören. Wir sehen uns im nächsten. 9. Hintergrundbilder in CSS: Hallo und willkommen zurück zum vorletzten Video der Skillshare-Serie. Während wir uns darüber befassen, wie Sie ein Hintergrundbild in die CSS-Datei einfügen , um dies mit Ihrer Website zu verknüpfen , die im vorherigen Kurs für HTML angeschaut wurde und in dem heißt, CSS kann im Grunde die Bilder. Während wir in HTML sind , können wir mithilfe des IMG-Turns Bilder direkt zur Website hinzufügen . Jetzt werde ich Ihnen beibringen, wie man den CSS-Selektor verwendet , speziell wenn Sie die Klasse haben, okay, dann, wenn wir also hierher zurückkehren, was wir haben, ist das Div-Klassenbild. Also wollen wir untertiteln Spaß Star Wars Swap und C wird ein Bild gesetzt. Und ich werde dies als Hintergrundbild mit der wichtigsten Sache verknüpfen. Er achtet hier nur auf dieses Hintergrundbild, die URL, die medizinischen Logos, die Sie die Presse automatisch speichern lassen. Was passiert, ist, dass Sie uns danach einfach aktualisieren. Und so haben Sie im Grunde genommen das Bild in Ihren Dateien, die dies bisher betrachten, unsere Website tatsächlich viel mehr als zuvor gestartet . Rückkehr ist ein paar Bilder hinzufügen, um die Interaktivität auf der Website tatsächlich zu erhöhen sind sehr einfach, aber einfach Website. Mit diesem leistungsstarken Tool, oberen Bild und dem Hintergrundbild, können Sie die Bilder tatsächlich an erster Stelle haben und Sie können tatsächlich auch nur Mengen davon haben. Also willst du alles enthalten, um es so zu sein. Es wird ein kleines Bild sein, aber trotzdem repliziere sie. Sag, du hast noch einen. erste passiert ist, dass nur ein Anfangsbild auch die Position der Bilder geändert hat. Geh nach rechts oder links. Wir können allerlei verschiedene Dinge machen , besonders damit. Und danke, dass du dir das angehört hast und hoffe, dass dir dieser Kurs gefallen hat und ich werde ein lustiges Video machen. Wir können unten nachschlagen. Vielen Dank und wir sehen uns im nächsten. 10. Schlussbemerkung: Hallo und willkommen zum letzten Video in der Einführung zu CSS, beginnend mit dem Webdesign und einer Stunde der Skillshare-Serie. In diesem Video werde ich die verschiedenen Arten von CSS, Regeln und Strukturen hinter ihm durchgehen. Wissen anwenden und im vorherigen Kurs auf HTML aufbauen . Natürlich Projekte, die ich aber in den folgenden Projekten aufstellen werde. Ja, vielen Dank, dass Sie diese Scotia-Sitzung tatsächlich versucht haben und sich durch die verschiedenen Klassen und Lektionen gearbeitet haben und Visual Studio Code verwenden, indem Sie diesen herunterladen Im Grunde genommen haben Sie Ihre eigene Website mit HTML, CSS erstellt. Ich habe dich über das gesamte Spektrum der Videos hinweg gelehrt. Und dieser Kurs ist jetzt offiziell eine vollständige Einführung in CSS, beginnend mit einem Webdesigner. Vielen Dank für Ihre Teilnahme und die Zukunft Ich werde einen fortgeschritteneren Kurs in der CSS-Ladung machen und Ihnen beibringen , wie Sie auf Ihren Grundlagen aufbauen und wie es die Analogie eines Maulwurfs verbessert. Ich hoffe, das hat euch gefallen und wir sehen uns in der nächsten Skillshare-Klasse , die veröffentlicht wird. Danke. Tschüss.