Wie man Klassen für HTML5 und CSS3 programmiert Programmierung - Dummies

Sie können einfach einen Stil auf alle Elemente eines bestimmten Typs in einer HTML5-Seite anwenden, aber manchmal möchten Sie vielleicht eine bessere Kontrolle über Ihre Stile haben. Zum Beispiel möchten Sie möglicherweise mehr als einen Absatzstil haben. Betrachten Sie zum Beispiel die Klassen. HTML-Seite.

Auf dieser Seite befinden sich wieder mehrere Formate:

• Fragen haben eine große Italic Sans Serif-Schriftart. Es gibt mehr als eine Frage.

• Antworten sind kleiner, blau und in einer Kursivschrift. Es gibt auch mehr als eine Antwort.

  

Fragen und Antworten sind Absätze, daher können Sie den Absatz nicht einfach formatieren, da Sie zwei verschiedene Stile benötigen. Es gibt mehr als eine Frage und mehr als eine Antwort, also wäre der ID-Trick problematisch. Zwei verschiedene Elemente können nicht dieselbe ID haben. Hier kommt die Vorstellung von Klassen ins Spiel. Jede ID gehört zu einem einzelnen Element, aber viele Elemente können dieselbe Klasse verwenden.

So fügen Sie der Seite Klassen hinzu

Mit CSS können Sie Klassen in Ihrem HTML definieren und Stildefinitionen erstellen, die über eine Klasse hinweg angewendet werden. Es funktioniert so:

1. Fügen Sie das Klassenattribut zu Ihren HTML-Fragen hinzu.

   Im Gegensatz zur ID können mehrere Elemente dieselbe Klasse verwenden. Wenn Sie die Klasse auf Frage setzen, werden diese Abschnitte als Fragen formatiert:

   Welche Art von Kuh lebt in der Arktis?
   
   
   
   
   
   
   

2. Fügen Sie den Antworten ähnliche Klassenattribute hinzu, indem Sie die Klasse der zu beantwortenden Antworten festlegen:

   Ein Eskimoo!
   

   Jetzt haben Sie zwei verschiedene Unterklassen von Absatz: Frage und Antwort.

3. Erstellen Sie einen Klassenstil für die Fragen.

   Der Klassenstil ist in CSS definiert. Geben Sie eine Klasse mit dem Punkt (.) Vor dem Klassennamen an. Klassen sind in CSS wie folgt definiert:

   . Frage {font: italic 150% arial, serifenlos; text-align: left;}
   

   In dieser Situation ist die Fragenklasse als eine große Sans-Serif-Schrift definiert, die links ausgerichtet ist.

4. Definieren Sie das Aussehen der Antworten.

   Die Klasse verwendet eine rechtsbündige kursive Schriftart.

. Antwort {font: 120% "Comic Sans MS", kursiv; Textausrichtung: rechts; color: # 00F;}

Klassen verwenden

Hier ist der Code für die Seite, der zeigt, wie man CSS-Klassen verwendet:

Klassen. html. Frage {font: italic 150% arial, serifenlos; Textausrichtung: Links;}. Antwort {font: 120% "Comic Sans MS", kursiv; Textausrichtung: rechts; Farbe: # 00F;}

Lieblingswitze
Welche Art von Kuh lebt in der Arktis?
Ein Eskimoo!
Was steht auf einem Hundehaus?
Der Schuß!

Manchmal sehen Sie Selektoren, wie

p. Fancy

, der sowohl einen Elementnamen als auch einen Klassennamen enthält.Dieser Stil wird nur auf Absätze mit der angefügten Klasse angewendet. Im Allgemeinen sind Klassen großartig, da sie auf alle möglichen Dinge angewendet werden können. Sie können also den Namen des Elements beibehalten, um den Stil so wiederverwendbar wie möglich zu machen.

Klassen kombinieren

Ein Element kann mehr als eine Klasse verwenden.

Die Absätze erscheinen in drei verschiedenen Stilen, aber nur Rot und Skript sind definiert. Der dritte Absatz verwendet beide Klassen. Hier ist der Code:

RedScript. html. rot {Farbe: weiß; Hintergrundfarbe: rot;}. script {font-family: cursive;}

Mehrere Klassen
Dieser Absatz verwendet die rote Klasse
Dieser Absatz verwendet die Skriptklasse
Dieser Absatz verwendet beide Klassen

Das Stylesheet führt zwei Klassen ein. Die rote Klasse macht den Absatz rot (gut, weißer Text mit einem roten Hintergrund), und die Skriptklasse wendet eine kursive Schriftart auf das Element an.

Die ersten zwei Absätze haben jeweils eine Klasse, und die Klassen verhalten sich wie erwartet. Der interessante Teil ist der dritte Absatz, weil er zwei Klassen hat.

Beide Stile werden auf das Element in der Reihenfolge angewendet, in der sie geschrieben wurden. Beachten Sie, dass beide Klassennamen in Anführungszeichen vorkommen und keine Kommas benötigt werden (oder zulässig sind). Wenn Sie möchten, können Sie mehr als zwei Klassen auf ein Element anwenden. Wenn die Klassen widersprüchliche Regeln haben (zum Beispiel macht man das Element grün und das nächste macht es blau), überschreibt die letzte Klasse in der Liste frühere Werte.

Ein Element kann auch eine ID haben. Der ID-Stil, der Elementstil und alle Klassenstile werden berücksichtigt, wenn der Browser versucht, das Objekt anzuzeigen.

Normalerweise ist es am besten, Klassen anhand ihrer Bedeutung zu benennen (wie mainBackgroundColor). Sie könnten entscheiden, dass Grün besser als Rot ist, also müssen Sie entweder den Klassennamen ändern oder Sie müssen eine rote Klasse haben, die Dinge grün färbt. Das wäre komisch.