Der Anfängerleitfaden für CSS ()

Willkommen noch einmal bei deine-webseite.click.net! Ich bin Sven und heute werden wir über den CSS-Leitfaden für Anfänger sprechen

Wenn Sie derzeit eine Website haben oder planen, eine Website zu erstellen, ist CSS definitiv ein Begriff, der Ihnen begegnet ist. Aber für diejenigen unter Ihnen, die nicht programmieren können und keine Erfahrung in der Entwicklung haben, kann es etwas verwirrend sein.

Beginnen wir mit den Grundlagen.

CSS steht für Cascading Stylesheets. Es ist eine Stilsprache, die das Aussehen oder die Präsentation einer Website beschreibt. Im Wesentlichen teilt CSS Webbrowsern mit, wie jedes Element in einem HTML-Dokument erscheinen soll.

CSS ist neben JavaScript und HTML ein wesentlicher Bestandteil aller Webseiten im Internet.

Der Hauptvorteil von CSS ist die Möglichkeit, Website-Inhalte von Designelementen zu trennen, indem einfach die Regeln in einer CSS-Datei geändert werden.

Vor der Verwendung von CSS wurden fast alle Attribute im Zusammenhang mit der Darstellung von HTML-Dokumenten im HTML-Format geschrieben. Dies bedeutete, dass viele Regeln im gesamten HTML-Code wiederholt werden mussten.

Aber CSS ermöglicht es Entwicklern, diese Informationen in ein Stylesheet zu verschieben, was HTML vereinfacht.

Dadurch ist HTML kürzer, leichter und weniger fehleranfällig. Es macht auch Ihr HTML viel einfacher zu pflegen.

In diesem Leitfaden gebe ich Ihnen einige gängige CSS-Anwendungsfälle und zeige Ihnen meine bevorzugten Methoden, um CSS online zu lernen.

Häufige Verwendungen von CSS

Es gibt viele verschiedene Möglichkeiten, CSS auf Ihrer Website zu verwenden. Aber ich möchte Ihnen einige der grundlegendsten und gebräuchlichsten Anwendungen zeigen, damit Sie sich mit der Funktionsweise von CSS vertraut machen können.

Sobald Sie diese gängigen Prinzipien und Anwendungsfälle beherrschen, können Sie in Zukunft komplexere CSS-Elemente angehen.

Schriftstil

Sie können CSS verwenden, um einen Zeichenstil zu erstellen. Schreiben Sie Eigenschaften für Elemente wie:

  • Zeichentyp
  • Farbe
  • Gewicht
  • Abmessungen
  • Ausrichtung
  • Mäppchen
  • Zeilenhöhe

CSS kann auch verwendet werden, um Effekte wie Unterstreichen und Durchstreichen hinzuzufügen. Lassen Sie mich Ihnen ein Beispiel geben, um Ihnen zu zeigen, wie es funktioniert.

Schauen Sie sich die drei Regeln an, die ich im Stil dieses CSS geschrieben habe. Eigenschaft A ist ein normaler Schriftschnitt, Eigenschaft B ist ein kursiver Schriftschnitt und alle H1s sind rot.

Wenn Sie sich nun den Rumpf ansehen, können Sie sehen, dass ich den HTML-Code so geschrieben habe, dass er diesen Eigenschaften entspricht. Basierend auf diesen Informationen können Sie auf der rechten Seite des geteilten Bildschirms sehen, wie sie auf der Webseite aussehen würde.

Mit einem einfachen Beispiel wie diesem werden Sie die Vorteile von CSS vielleicht nicht sofort erkennen.

Aber jetzt versuchen Sie sich ein Dokument mit 30 oder 40 H1 vorzustellen. Basierend auf den Eigenschaften dieses Beispiels würden alle H1s automatisch in Rot erscheinen, ohne dass zusätzlichen Code im HTML hinzugefügt werden muss. Wenn Sie sie in Blau ändern möchten, müssen Sie nur das CSS ändern, anstatt 40 H1 einzeln im Dokument durchzugehen.

Standort-Eigenschaft

Website-Layouts können mit CSS-Positionseigenschaften definiert werden. Sie können Regeln schreiben, um die Position bestimmter Elemente innerhalb eines HTML-Dokuments speziell anzugeben.

Zu den allgemeinen Eigenschaftswerten gehören:

  • Statisch – Elemente in der Reihenfolge, basierend darauf, wie sie im Dokument erscheinen.
  • Behoben: Die Elemente befinden sich in einer Position relativ zum Navigationsfenster.
  • Absolut: Die Elemente werden in Bezug auf ihre erste Position positioniert.
  • Sticker – Elemente werden relativ zur Scroll-Position des Website-Benutzers positioniert.

Wenn Sie die Positionseigenschaft verwenden, um Website-Layouts zu erstellen, kann es vorkommen, dass Seitenelemente andere Elemente überlappen. Daher können bei diesem Ansatz potenzielle Probleme auftreten.

Es gibt andere Möglichkeiten, die Position von Elementen auf einer Seite zu definieren, die wir weiter unten sehen werden.

Schwimmende Eigenschaften

Der Hauptzweck der float-Eigenschaft besteht darin, ein Element in HTML rechts oder links von einem anderen Element zu senden, ohne den Fluss des Dokuments zu ändern. Dies ist einer der besten Ansätze, um Designs für eine Website zu erstellen.

Sie haben beim Surfen im Internet sicherlich schon einmal Schwimmer gesehen, auch wenn Sie nicht wussten, dass Sie einen Schwimmer betrachten.

Es wird am häufigsten für Bilder verwendet. Ein Bild kann innerhalb eines Textblocks platziert werden, damit kein Leerzeichen zwischen dem Lauftext entsteht.

Hier ist es Ein Beispiel die Float-Eigenschaft, die für ein Bild verwendet wird.

Wie Sie sehen können, sagt die CSS-Eigenschaft, dass Bilder nach rechts schweben. Beim Einfügen eines Bildes im HTML-Text wird die float-Eigenschaft automatisch angewendet.

Floats werden auch häufig verwendet, um Website-Menüs zu erstellen. Menüelemente schweben, sodass sie auf einer horizontalen Linie statt einer Aufzählungsliste angezeigt werden können.

Eigentumsrechte löschen

Die clear CSS-Eigenschaft wird oft verwendet, um den Float zu löschen. Wie Sie gerade erfahren haben, werden beim Floaten eines Elements alle folgenden Elemente so angepasst, dass sie basierend auf der float-Eigenschaft richtig ausgerichtet sind.

Wenn nachfolgende Elemente unter einem schwebenden Element beginnen sollen, anstatt daneben, müssen Sie die clear-Eigenschaft anwenden, um das Element in einer neuen Zeile zu beginnen.

Hier ist ein visuelle Darstellung um Ihnen zu zeigen, wie es für Bilder wäre.

Die clear-Eigenschaft kann auch auf andere Elemente angewendet werden, aber ein Bild wie das, das Sie oben sehen, ist sicherlich eine der gängigsten Praktiken.

Box-Box-Modell

Jedes HTML-Element kann als Box betrachtet werden. Bei der Verwendung von CSS bezieht sich das Box-Modell auf das Design und das Layout einer Seite.

Der beste Weg, dieses Modell zu beschreiben, ist, dass es eine Box gibt, die jedes Element des HTML-Codes einschließt. Das Box-Modell besteht aus drei Hauptkomponenten.

Hier ist ein Beispiel dafür, wie Sie eine CSS-Regel für das Boxmodell schreiben könnten.

P.

Polsterung: 10px;

Rahmen: 20px durchgehend blau;

Rand: 20px;

Diese CSS-Eigenschaften würden in 10 Füllpixel auf jeder Seite des Textes übersetzt. Dies wird ein Leerzeichen um den Absatz herum sein. Es würde auch einen vollen blauen Rand von 20 Pixeln um die Füllung geben. Schließlich würde es 20 Pixel Rand zwischen der Kante und allen anderen umgebenden Elementen geben.

Responsives Webdesign mit CSS

Heute haben wir Hunderte, wenn nicht Tausende von verschiedenen Displays auf dem Markt. Das bedeutet, dass Nutzer, die Ihre Website besuchen, dies mit unzähligen Variationen von Geräten, Bildschirmgrößen, Bildschirmgrößen und Auflösungen tun können.

Eine Website in voller Größe mit nur einem zusätzlichen Layout für ein kleineres Gerät zu haben, ist keine Option mehr. Sie müssen also CSS verwenden, um ein responsives Layout zu erstellen.

Damit dies geschieht, müssen Sie einige Prinzipien befolgen, um sicherzustellen, dass Ihr CSS auf jedem Bildschirm von jedem Gerät aus reagiert.

Das gesamte Layout und Raster sollten nahtlos sein. Sie müssen sicherstellen, dass die Größe der Bilder automatisch angepasst wird, um sie von jedem Bildschirm aus ästhetisch zu rendern.

Eine der beliebtesten Methoden für responsives Webdesign ist a mobiler Fokus zuerst. Das bedeutet, dass das Layout zuerst mit Blick auf kleinere Bildschirme erstellt wird und dann mit zunehmender Größe Stile hinzugefügt werden.

Dieser Ansatz hat viele große Vorteile.

Ein mobiles Design zwingt Sie zunächst, die wichtigsten Funktionen Ihrer Website zu bestimmen. Sobald sie identifiziert sind, verwenden Sie sie als Grundlage und Bausteine ​​für Ihr Website-Design.

Meistens enthält eine Website in voller Größe zusätzliche Elemente, die auf mobilen Versionen der Website nicht sichtbar sind. Ein Mobile-First-Ansatz stellt jedoch sicher, dass alle Kernzwecke und -funktionen im Vordergrund des Designs stehen.

Es ist auch erwähnenswert, dass dieser Ansatz bedeutet, dass mobile Benutzer nicht so viele Site-Assets und CSS-Regeln herunterladen müssen, wenn sie über ein Mobilgerät auf eine Website zugreifen. Dies spart Benutzerdatennutzung, schafft schnellere Ladezeiten und eine bessere allgemeine Benutzererfahrung.

CSS-Lernressourcen

Alles, was ich bisher behandelt habe, kratzt mit CSS kaum an der Oberfläche. Ich wollte dir nur eine Einführung geben, damit du besser verstehen kannst, wie es funktioniert.

Aber für diejenigen unter Ihnen, die CSS über ein Anfängerniveau hinaus lernen möchten, gibt es einige großartige Online-Tools und -Ressourcen, die Sie nutzen können. Ich habe einige meiner Lieblingsoptionen eingegrenzt.

Codeakademie

Codeakademie ist eine der besten Plattformen, um online Programmieren zu lernen. In den letzten sieben Jahren haben mehr als 45 Millionen Menschen gelernt, mit ihrem System zu programmieren.

Fast 500.000 dieser Personen haben den CSS-Kurs besucht. Es dauert ungefähr 15 Stunden und der Einführungskurs HTML ist eine Voraussetzung. Insgesamt benötigen Sie also etwa 22 Stunden Ihrer Zeit, um CSS zu lernen.

Codecademy zeigt Ihnen, wie Sie Webseiten mit Dateistrukturen, Textänderungen, Farben und verschiedenen Layouts gestalten. Sie können diese Fähigkeiten nutzen, um Ihre Webseiten anzupassen.

Die Klasse umfasst auch:

  • CSS-Selektoren
  • Visuelle Regeln
  • Das Modell der Box
  • Ausstellen
  • Positionierung
  • Typografie
  • CSS-Raster

Wie Sie dieser Liste entnehmen können, werden einige dieser Themen in diesem Handbuch behandelt. So haben Sie bereits ein grundlegendes Verständnis einiger Prinzipien, was Ihnen einen Vorteil verschafft.

Sie haben kostenlosen Zugang zu einigen dieser Kurse, aber um die volle Erfahrung zu erhalten, empfehle ich Ihnen, auf die Pro-Version von Codecademy zu aktualisieren.

Der Preis beträgt 19,99 US-Dollar pro Monat für einen Jahresvertrag, was das beste Angebot ist, das sie haben. Andernfalls würden Sie 29,99 USD bzw. 39,99 USD für einen Halbjahres- bzw. Monatsvertrag zahlen.

W3 Schulen

W3 Schulen hat Tonnen von kostenlosen Coding-Ressourcen. Tatsächlich habe ich Ihren kostenlosen Editor zweimal für die Beispiele in diesem Handbuch verwendet. Der Schriftstil und das mobile CSS, das ich Ihnen zuvor gezeigt habe, wurden auf der W3Schools-Plattform geschrieben.

Ich mag diese Ressource, weil sie sehr einfach und praktisch ist.

Zuerst erklären sie, wie eine bestimmte Funktion oder Eigenschaft funktioniert, dann zeigen sie Ihnen ein Beispiel. Danach machen sie es Ihnen leicht, diese Beispiele zu üben, indem Sie selbst Änderungen am CSS vornehmen.

Auf der W3Schools-Website gibt es über 300 verschiedene CSS-Beispiele. Sie können all dies mit Ihrem Editor ausprobieren.

Nutzen Sie auch die CSS-Vorlagen, CSS-Übungen und CSS-Quiz.

Für diejenigen unter Ihnen, die sich für Webentwicklung oder Webdesign interessieren, können Sie auch ein CSS-Zertifikat von W3Schools erwerben. Obwohl dies etwas ist, das Sie bezahlen müssen.

Nach Abschluss der Schulung können Sie eine Prüfung mit 70 Fragen ablegen, die 70 Minuten dauert. Wenn Sie 75 % dieser Fragen richtig beantworten, bestehen Sie eine Zertifizierung und erhalten eine Zertifizierung. Wenn 95 % der Antworten richtig sind, wird das Zertifikat zusätzlich mit einem Exzellenzgrad versehen.

Das CSS-Zertifizierungsprogramm von W3Schools kostet 95 US-Dollar.

Fazit

CSS ist ein wesentlicher Bestandteil jeder Website. Sie können es verwenden, um Ihr HTML zu vereinfachen und letztendlich die Komplexität Ihrer HTML-Dateien zu reduzieren.

Es gibt viele verschiedene Möglichkeiten, wie CSS verwendet werden kann. Aber als Anfänger wollte ich dich nicht mit zu vielen Dingen auf einmal überfordern.

Trotzdem sind die Informationen in diesem Handbuch für alle sehr nützlich, die mehr über CSS erfahren möchten. Bewahren Sie sie also zum späteren Nachschlagen auf.

Für diejenigen unter Ihnen, die Ihre CSS-Kenntnisse auf die nächste Stufe bringen möchten, probieren Sie eine der zuvor erwähnten Online-Ressourcen aus.

Bis zum nächsten Mal.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.