So definieren Klassen für HTML5 und CSS3 Programmierung

Sie können ganz einfach einen Stil auf alle Elemente eines bestimmten Typs in einer HTML5-Seite, gelten aber manchmal möchte man eine strengere Kontrolle der Stile haben wollen. Zum Beispiel möchten Sie vielleicht mehr als einen Absatzstil zu haben. Als Beispiel sehen Sie die classes.html Seite.

Wieder einmal sind mehrere Formate auf dieser Seite:

  • Fragen haben eine große kursiv serifenlose Schrift. Es gibt mehr als eine Frage.

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

    bild0.jpg

Fragen und Antworten sind alle Absätze, so kann man nicht einfach den Absatzstil, weil Sie zwei verschiedene Arten benötigen. Es gibt mehr als eine Frage und mehr als eine Antwort, so dass die ID Trick problematisch wäre. Zwei verschiedene Elemente können nicht die gleiche ID haben. Dies ist, wo der Begriff der Klassen ins Spiel kommt. Jede ID gehört zu einem einzelnen Element, aber viele Elemente können die gleichen Klasse teilen.

Wie fügt Klassen auf die Seite

CSS ermöglicht es Ihnen, Klassen in Ihrem HTML zu definieren und Formatdefinitionen zu machen, die über eine Klasse angewendet werden. Es funktioniert wie folgt:

  1. Ergänzen Sie die Klasse Attribut auf Ihre HTML-Fragen.

    Anders als ID können mehrere Elemente der gleichen Klasse teilen. Einstellen der Klasse Frage zeigt diese Absätze wie Fragen gestylt werden:

     
    Welche Art von Kuh lebt in der Arktis?

  2. Fügen Sie ähnliche Klassenattribute auf die Antworten, die Klasse der Antworten Einstellung Antworten:

     
    Ein Eskimoo!

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

  3. Erstellen Sie eine Klasse-Stil für die Fragen.

    Der Klassenstil wird in CSS definiert. Geben Sie eine Klasse mit der Periode (.) Vor dem Klassennamen. Die Klassen sind in CSS wie folgt definiert:

    In dieser Situation wird die Frage Klasse wird als eine große serifenlose Schrift definiert nach links ausgerichtet.

  4. Definieren Sie das Aussehen der Antworten.

    Die Klasse verwendet ein Recht, gerechtfertigt Kursivguß.

 .Antwort {font: 120% "Comic Sans MS", Kursiv-text-align: right; color: # 00F-}

Mit Klassen

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

classes.html
Lieblingswitze
Welche Art von Kuh lebt in der Arktis?
Ein Eskimoo!
Was geht auf einem Hundehaus?
Der Einschlag!

Manchmal sieht man Selektoren, wie

p.fancy

das schließt sowohl ein Element und einen Klassennamen. Dieser Stil wird nur der Absätze mit der Klasse verbundenen angewendet. Im Allgemeinen sind Klassen groß, weil sie für alle Arten von Dingen, angewendet werden können, so können Sie den Namen des Elements, den Stil als wiederverwendbare wie möglich zu machen auslassen.

Die Kombination von Klassen

Ein Element kann mehr als eine Klasse.

image1.jpg

Die Absätze erscheinen in drei verschiedenen Arten zu sein, aber nur rot und Skript definiert. Der dritte Absatz verwendet beide Klassen. Hier ist der Code:

redScript.html
Mehrere Klassen
Dieser Absatz verwendet die rote Klasse
Dieser Absatz verwendet das Skript Klasse
Dieser Absatz verwendet beide Klassen

Das Stylesheet stellt zwei Klassen. Das rot Klasse macht den Absatz rot (gut, weißer Text mit einem roten Hintergrund) und die Skript Klasse wendet einen Kursivguß auf das Element.

Die ersten beiden Absätze haben jeweils eine Klasse, und die Klassen handeln, wie man es erwarten würde. Der interessante Teil ist der dritte Absatz, weil es zwei Klassen hat.

Beide Stile werden in der Reihenfolge auf das Element aufgebracht werden, die sie geschrieben werden. Beachten Sie, dass beide Klassennamen in Anführungszeichen auftreten und keine Kommas benötigt (oder erlaubt). Sie können mehr als zwei Klassen auf ein Element anwenden, wenn Sie es wünschen. Wenn die Klassen widersprüchliche Regeln haben (sagen wir eine macht das Element grün und das nächste macht es blau), wird die neueste Klasse in der Liste früherer Werte überschrieben.

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

Normalerweise ist es am besten Klassen zu nennen auf der Grundlage ihrer Bedeutung (wie mainBackgroundColor). Sie können entscheiden, dass grün als rot besser ist, so dass man entweder den Klassennamen zu ändern, oder Sie haben ein zu haben rot Klasse, die Dinge grün gefärbt. Das wäre seltsam.

Ähnliche

Menü