CSS richtig lernen

CSS richtig lernen

CSS (Cascading Style Sheets)werden von Webentwicklern zum Gestalten von Websites verwendet.

Als ich anfing, Webentwicklung zu lernen, war ich sehr verwirrt über CSS. Die größten Schwierigkeiten bestanden für mich darin, mir Eigenschaften zu merken und meinen Code beizubehalten. In diesem Artikel werde ich Anfängern helfen, die Fehler zu vermeiden, die ich beim Lernen gemacht habe.

1. Üben
Programmieren ist etwas, das man sich nicht vollständig merken kann. Es geht darum, es durch Übung zu verstehen.
Beim Üben von CSS war es etwas schwierig, weil ich mir Dinge nicht sehr gut merken kann. Ich habe versucht, das „Kopieren und Einfügen“ zu vermeiden, weil ich dachte, es würde meine Fähigkeiten ruinieren. Am Ende habe ich den CSS-Code kopiert und eingefügt. Nun sage ich nicht, dass Kopieren und Einfügen die Dinge verbessern würden. Aber wenn Sie versuchen zu verstehen, was passiert, wenn Sie Ihren kopierten und eingefügten CSS-Code ausführen. Es wird viel besser sein, als sich CSS-Eigenschaften zu merken.

(Zum Beispiel) Wenn Sie eine Schaltfläche rund und schwarz mit weißem Text gestalten möchten und beim Bewegen des Mauszeigers die Hintergrund- und Textfarben vertauschen möchten. Sie könnten einen Block CSS-Code einfügen, der genau das tut:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

Ohne zu verstehen, was es bewirkt, hilft es nicht viel.
Wenn Sie das verstehen:

• Rand: 2 Pixel fest; Der Schaltfläche wurde ein durchgehender 2-Pixel-Rahmen hinzugefügt,
• border-radius: 16px machte es 16 Pixel runder,
• Hintergrundfarbe: #000000; machte den Hintergrund schwarz,
• Farbe: #ffffff; machte den Text weiß, :hover,
• Hintergrundfarbe: #ffffff;
• und Farbe: #000000; Macht den Hintergrund weiß und den Text schwarz, wenn Sie mit der Maus darüber fahren.

Sie werden das nächste Mal in der Lage sein, eine Schaltfläche zu codieren, ohne sie kopieren und einfügen zu müssen, und noch besser: Sie verfügen über ein grundlegendes Verständnis von Rahmen, Rahmenradius, Hintergrundfarbe, Farbe und :hover und können es für mehr verwenden als nur ein Knopf. Aus diesem Grund sollten Sie den Code verstehen, den Sie kopieren und einfügen.

Regressmöglichkeiten:
Es spielt auch eine Rolle, woher Sie den Code kopieren und einfügen. Da Sie als Anfänger eine gute Erklärung des Codes benötigen.

Es gibt viele Websites, die diese Aufgabe gut erfüllen, aber ich würde Folgendes empfehlen:

1. Geeks für Geeks:

GeeksforGeeks ist eine führende Online-Plattform, die Millionen von Entwicklern und Technologiebegeisterten weltweit Informatik- und Programmierressourcen mit einer umfangreichen Bibliothek an Kursen, Offline-Klassenzimmerprogrammen, Tutorials, Artikeln, Codierungsherausforderungen, Übungsproblemen und vielem mehr bietet.

Diese Plattform bietet Code mit guten Erklärungen und ist mein persönlicher Favorit.

Besuchen Sie GeeksForGeeks

2. W3Schools:

W3Schools ist eine Schule für Webentwickler, die alle Aspekte der Webentwicklung abdeckt: HTML-Tutorial. CSS-Tutorial. JavaScript-Tutorial. PHP-Tutorial.

Diese Website ist auch ziemlich identisch mit „Geeks For Geeks“. Aber die Erklärungstechnik ist anders, es hängt also davon ab, ob Sie sich wohl fühlen oder nicht.

Besuchen Sie W3Schools

Wartbarkeit des Codes:
Das Zweitnervigste beim Erlernen der Webentwicklung war, dass mein CSS-Code zu groß wurde. Es wurde immer schwieriger, CSS-Code für ein komplexes Website-Projekt zu pflegen. Dank Frameworks wie TailwindCSS müssen Sie nicht immer rohes CSS schreiben.

TailwindCSS:

Tailwind CSS ist ein Open-Source-CSS-Framework. Im Gegensatz zu anderen Frameworks wie Bootstrap stellt es keine Reihe vordefinierter Klassen für Elemente wie Schaltflächen oder Tabellen bereit. Stattdessen wird eine Liste von „Utility“-CSS-Klassen erstellt, mit denen jedes Element durch Mischen und Anpassen gestaltet werden kann.

TailwindCSS erstellt CSS-Codes wie unser vorheriges Schaltflächenbeispiel:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

In Kurse wie:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

Das kann zu Ihrem HTML-Schaltflächenelement hinzugefügt werden wie:

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

Auf anderen Frameworks wie ReactJS würde ich TailwindCSS für Anfänger empfehlen. Es ist viel einfacher zu erlernen und in der Produktion anzuwenden. Es macht Ihren CSS-Code viel wartbarer. Sie können es auch mit ReactJS verwenden, um die Effizienz und Wartbarkeit Ihres Codes zu erhöhen. TailwindCSS verfügt außerdem über Dokumente mit sehr detaillierten und leicht verständlichen Codeerklärungen.

Besuchen Sie TailwindCSS

Fazit:
Auch wenn das Erlernen von CSS schwierig sein kann, wird es sehr hilfreich sein, es häufig zu üben und gleichzeitig zu verstehen.

Kopieren Sie nicht nur den Code und fügen Sie ihn ein, sondern verstehen Sie auch, was er tut, denn das ist der richtige Weg, CSS zu lernen.

Das obige ist der detaillierte Inhalt vonCSS richtig lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!