Eine Einführung in Klassen in HTML und CSS

Es versteht sich von selbst, dass die Webentwicklung enorm ist. Ein großer Teil davon ist, dass fast jeder im Web ist. Es gibt jedoch einen Mangel an Entwicklern auf dem Gebiet, und aus diesem Grund ist der Lehrplan für die Webentwicklung so schnell verfügbar und auch kostenlos. In diesem Sinne zeigen wir Ihnen ein wenig, worum es bei HTML und CSS geht. Im Einzelnen zeigen wir Ihnen, wie „Klassen“ funktionieren.

Wir fangen Sie nicht von vorne an, da es bereits eine Menge kostenloser Lehrpläne gibt. Stattdessen zeigen wir Ihnen speziell, wie Klassen funktionieren, da dies eine notwendige Komponente für die Gestaltung Ihrer Website ist. Wir dachten auch, dass es sich lohnen könnte, darauf einzugehen, bevor wir unseren Blick auf die Bootstrap-API von Twitter werfen, da Klassen auch hier eine erforderliche Komponente sind.

Wenn Sie HTML und CSS noch nicht kennen, ist dies wahrscheinlich kein guter Anfang für Sie. Wenn Sie damit vertraut sind, sollte es jedoch nicht zu schwierig sein, es zu erlernen. Wenn Sie jedoch nach einem vollständigen Tutorial für Anfänger suchen, gibt es online viele großartige Optionen. Um nur einige zu nennen: FreeCodeCamp, das Odin-Projekt, CodeAcademy, Code School, Team Treehouse, Udacity und viele mehr. Wenn Sie sich dafür entscheiden, sich mit einem dieser Inhalte zu befassen, würde ich Ihnen wärmstens empfehlen, sich an eines zu halten (wie z. B. Free Code Camp) und es zu beenden, bevor Sie mit einem anderen beginnen, da sich viele der „grundlegenden“ Inhalte häufig wiederholen.

Lassen Sie uns aus dem Weg gehen und untersuchen, um was es in Klassen geht.

Wie Klassen funktionieren

Der Unterricht ist äußerst nützlich. Sie nehmen die Wiederholbarkeit des HTML-Stils. Ohne Klassen würden Sie jedes Element in Ihrem Markup individuell gestalten. Und was wäre, wenn Sie zwei gleiche Elemente hätten, aber jedes anders stylen wollten? Es wäre ein völliges Durcheinander. Deshalb haben wir Unterricht. Klassen fügen Ihrem HTML-Code eine gewisse Organisationsstruktur hinzu, sodass Sie Ihren Code relativ sauber halten können. Darüber hinaus können Klassen mehrmals verwendet werden. Mit anderen Worten, Sie müssen niemals zweimal dieselben Stilregeln erstellen.

So sieht der Unterricht bei uns aus Etikett:

Wie Sie sehen, haben wir unter unserem Body-Tag zwei

Elemente mit verschiedenen Klassen. Der Erste

Das Tag hat die Klasse "head1", während das zweite Tag die Klasse "head2" hat

Element können wir das Styling auf diese einzelnen Klassen anwenden. Warum sollten wir das tun wollen?

Der Hauptgrund ist, dass Sie nicht alles von Ihnen wollen

Elemente, die das gleiche Styling haben. Es würde eine Menge Kopfschmerzen verursachen, wenn man eine Website erstellt, und außerdem würden Websites nicht sehr gut aussehen. Mit Klassen können wir das Styling nur auf diese eine Instanz des Tags anwenden, nicht auf alle

Tags im gesamten Dokument. Wie schreibt man eine Klasse in HTML? So was:

Einige Inhalte

Sie können fast jedem HTML-Element die Eigenschaft „class“ hinzufügen.

Toll! Wir haben also Kurse, aber in ihrem gegenwärtigen Zustand machen sie eigentlich gar nichts. Das liegt daran, dass wir der Klasse noch keine Stilregeln hinzugefügt haben. Dazu müssen wir ein separates CSS-Dokument erstellen. Ich werde es einfach main.css nennen. In diesem Dokument würden wir eine Klasse wie folgt formatieren:

Um eine Klasse auszuwählen, die wir stylen möchten, gehen Sie wie folgt vor:

.head1 {Farbe: rot; Textausrichtung: Mitte; }

In den geschweiften Klammern stehen alle „Regeln“ (oder Stile), die wir für diese Klasse anwenden. Es gibt viele verschiedene Regeln, die Sie in diese Klasse einfügen können. In meinem Fall habe ich die Farbe des Texts mithilfe der Farbregel in Rot geändert und den Text mithilfe der Textausrichtungsregel zentriert. Eine vollständige Liste der CSS-Regeln sowie deren Dokumentation finden Sie im Mozilla Developer Network.

Jetzt wird unser Stil immer noch nicht auf die Klassen in unserem HTML-Dokument angewendet, und das liegt daran, dass wir die beiden Dateien noch nicht miteinander verknüpft haben. Gehen Sie zurück zu Ihrer HTML - Datei und in die Tag, Sie wollen Ihre CSS-Datei verlinken, indem Sie dies tun:

Ihr HTML-Dokument sollte folgendermaßen aussehen:

Und so sollte unser Testprojekt im Web aussehen:

Ein detaillierteres Video, das diese Schritte ausführt, finden Sie unten.

Video

Fazit

Und das ist alles, was der Unterricht zu bieten hat! Sie sind wirklich einfach zu verstehen. Auf großen und beliebten Websites, die Sie besuchen, sind die Regeln in den Klassen natürlich viel komplizierter als die, die wir behandelt haben, aber in ihrer grundlegendsten Form funktionieren sie so.

Wenn Sie Fragen haben oder lange Probleme haben, teilen Sie uns dies bitte in den Kommentaren in den PCMech-Foren mit! Wenn Sie sich für einen vollständigen HTML / CSS-Leitfaden für Anfänger in PCMech interessieren, teilen Sie uns dies bitte ebenfalls mit!