Springe zum Hauptinhalt

7 Tricks CSS zu lernen

Divi: das am einfachsten zu verwendende WordPress-Theme

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Das Erlernen von CSS kann schmerzhaft sein, insbesondere wenn Sie nicht wissen, wo Sie anfangen sollen.

CSS ist eine Styling-Sprache und keine Programmiersprache wie Javascript oder PHP. Es ist eigentlich recht einfach zu erlernen, insbesondere wenn Sie über HTML-Kenntnisse verfügen.

Heute werde ich Ihnen einige Tipps geben, die Ihnen beim Erlernen von CSS helfen können.

1. Grundlegender Aufbau

Was Sie zuerst wissen müssen: Um zu lernen, wie Sie Ihr eigenes CSS schreiben, müssen Sie wissen, wie man es richtig formatiert. Es gibt tatsächlich zwei anständige Möglichkeiten, dies zu tun, aber eine davon hält Sie organisiert.

Da HTML häufig die erste Sprache ist, die Menschen lernen, wenn sie mit WordPress-Sites arbeiten möchten, ist es hilfreich, die CSS-Syntax zu lernen, indem Sie sie zuerst ähnlich wie HTML schreiben.

Hier ist die Grundstruktur von CSS:

.class selector {property: value;} #id selector {property: value;}

Es ist ziemlich einfach, wenn Sie nicht viele Stile für ein Element auf Ihrer Site implementieren möchten, aber wenn Sie sich mit CSS vertraut machen, benötigen Sie viel mehr als ein Styling. für ein Element, das eine solche Struktur unangemessen macht.

Aus diesem Grund gibt es eine effizientere und besser organisierte Möglichkeit, Ihr CSS zu schreiben:

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

.class selector {property: value; 2-Eigenschaft: 2-Wert; 3-Eigenschaft: 3-Wert; } #id selector {property: value; 2-Eigenschaft: 2-Wert; 3-Eigenschaft: 3-Wert; }

Jetzt können Sie die in diesem Beispiel verwendeten Begriffe untersuchen. Jeder dieser Begriffe sind die Grundbausteine ​​von CSS: Klasse, ID, Selektor, Eigenschaft und Wert. Eigenschaften und Werte werden auch als Deklaration bezeichnet.

Dies ist ein guter Ausgangspunkt, um zu lernen, wie Sie Ihr eigenes CSS schreiben. Wenn Sie erst einmal angefangen haben, fragen Sie sich vielleicht, wo Sie all dies am Ende Ihrer WordPress-Dateien schreiben sollten.

In Ihrer WordPress-Installation ist jede Datei mit der Erweiterung .css eine CSS-Datei, wie Sie wahrscheinlich inzwischen erraten haben. Die Hauptdatei, nach der Sie suchen sollten, ist Ihr Stylesheet mit dem Namen " style.css". In dieser Datei finden Sie im Allgemeinen den gesamten Stil des Themas.

2. Bequem mit einfachen Selektoren

Als Nächstes müssen Sie grundlegende Selektoren und Eigenschaften kennenlernen, vor allem aber, wie sie in einem Thema funktionieren. Selektoren wie h1, h2 et h3 für Header und p zum Beispiel Absatztext sowie Eigenschaften wie font-family und "Hintergrundfarbe" für die Hintergrundfarbe.

Es gibt eine einfache Möglichkeit, diese neuen Fähigkeiten zu üben und die vorgenommenen Änderungen wirklich zu sehen, ohne einen eigenen WordPress-Blog erstellen zu müssen. W3Schools Es gibt eine Menge Informationen zu CSS sowie Beispiele, in denen Sie den Code ändern können, um schnell zu üben. Sie können dies auch lesen Während Mathier Nebra auf OpenClassrooms.

3. Merken Sie sich das Box-Modell

Sie können in kürzester Zeit leicht Selektoren und Eigenschaften finden, die Sie nicht kennen. Sie müssen lediglich eine einfache Suche bei Google oder Bing durchführen. 

Box-Modell

Dies kann bei vielen der Fall sein (oder die meisten) Dinge im Leben, aber das Modell der Box muss eine Ausnahme sein.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Im Wesentlichen sind dies die grundlegenden Elemente des CSS-Layouts, die Sie beherrschen müssen, um viele Eigenschaften zu verstehen. Das Layout der Box enthält auch viele Elemente, die Sie anpassen können.

Glücklicherweise ist es nicht schwer zu lernen und wenn ich es mir merken kann, sollten Sie ehrlich gesagt kein Problem damit haben. Im Wesentlichen enthält die Box-Vorlage einen Inhaltsbereich, die inneren Ränder oder Auffüllungen, die Ränder oder den Rand und den äußeren Rand oder Rand.

4. Learning by doing

Sobald Sie sich mit CSS vertraut gemacht haben, ist es eine gute Idee, die Auswahl eines Themas mit einem völlig einfachen Design zu üben, an dem Sie Ihre Änderungen vornehmen können.

Es ist wichtig zu verstehen, wie einfache Änderungen ein Thema manchmal drastisch und manchmal weniger stark beeinflussen können. Wenn Sie so viel wie möglich üben, können Sie die Änderungen, die Sie vornehmen, visuell erkennen.

Sobald Sie in der Lage sind, die Punkte zu verbinden, können Sie im Projekt nicht nur das CSS schnell schreiben, sondern Sie müssen auch in der Lage sein, Probleme in der Zukunft zu beheben, was für Sie zu einer wichtigen Aufgabe wird. Webdesign und -entwicklung.

5. Haben Sie Inhalte in Abhängigkeit von der Breite und Höhe

Sobald Sie ein einfaches Thema installiert haben, an dem Sie arbeiten können, können Sie sofort mit dem Ändern des Layouts beginnen, indem Sie unterschiedliche Längen und Breiten für die Inhaltsbereiche angeben.

Auf diese Weise können Sie sich mit den Layouts von WordPress-Themen vertraut machen

6. Schwimmer und Positionierung

Hier wird CSS in der Regel etwas knifflig, da Sie ein Layout nur mit CSS und insbesondere mit Floats und Positionierungen erstellen können. Das Problem ist, dass diese Eigenschaften nicht zum Erstellen ganzer Präsentationen ausgelegt sind.

Im Moment zeigen so viele Leute ein völlig richtiges Layout an. Erkunden Sie den Code des Themas, an dem Sie arbeiten möchten.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

7. Erweitertes CSS

An diesem Punkt werden Sie anfangen, sich an CSS zu halten, aber es gibt noch viel mehr zu entdecken:

  • Nickname Klassen  - Dient zum Festlegen eines bestimmten Status eines Elements, z. B. Mauszeiger und Bildpositionierung.
  • Komplexe Selektoren  - Sie können Ihren Stil mit erweiterten Selektoren optimieren.
  • CSS3 Animationen  - Erstellung einer Fade-Animation oder anderer Übergänge.
  • Reagiert auf Medienabfragen CSS3  - ermöglicht es Ihnen, in kürzester Zeit reaktionsschnelle Themen zu erstellen.
  • Transformationen  - Steuern Sie die Größe und Form ausgewählter Inhaltsbereiche.
  • At-Regeln  - Wird zum Importieren von Schriftarten und Stylesheets in Ihr Thema verwendet.
  • Verläufen  - Hinzufügen eines Verlaufs zu Ihrem Thema, ohne dass ein Bild verwendet werden muss.

Dies sind viele Elemente, in denen Sie wirklich lernen können, Ihrem Thema mehr Stil zu verleihen.

Das ist alles, was Sie wissen mussten, um CSS für Ihr WordPress-Blog zu lernen. Teilen Sie dieses Tutorial mit Ihren Freunden in Ihren bevorzugten sozialen Netzwerken.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

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

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie6
tweet
Registrieren