Die Erstellung gut gestylter Websites im heutigen Web erfordert ein tiefes Verständnis von Cascading Style Sheets. Wenden Sie eine Reihe von CSS-Stilen auf Ihr HTML-Dokument an, um das Erscheinungsbild Ihrer Webseite zu beeinflussen.
Klassen- und ID-Attribute
Designer müssen manchmal nur einen Stil anwenden etwas der Elemente in einem Dokument, aber nicht alle Instanzen dieses Elements. Um diese gewünschten Stile zu erreichen, verwenden Sie die Klasse und ICH WÜRDE HTML-Attribute. Diese Attribute sind globale Attribute, die auf fast alle anwendbar sind HTML-Tag– Unabhängig davon, ob Sie Unterteilungen, Absätze, Links, Listen oder andere HTML-Elemente in Ihrem Dokument formatieren, können Sie sich bei dieser Aufgabe an Klassen- und ID-Attribute wenden!
Klassenselektoren
Der Klassenselektor legt mehrere Stile auf dasselbe Element oder Tag in einem Dokument fest. Um beispielsweise bestimmte Abschnitte Ihres Textes in einer anderen Farbe als Warnhinweis hervorzuheben, weisen Sie Ihren Absätzen Klassen wie folgt zu:
p { Farbe: #0000ff; }
p.alert { Farbe: #ff0000; }
Diese Stile würden die Farbe vonalle Absätze blau (#0000ff), aber jeder Absatz mit einem Klassenattribut von aufmerksam würde stattdessen rot gestylt (#ff0000). Dies liegt daran, dass das Klassenattribut eine höhere Spezifität hat als die erste CSS-Regel, die nur einen Tag-Selektor verwendet. Bei der Arbeit mit CSS, überschreibt eine spezifischere Regel eine weniger spezifische. In diesem Beispiel legt also die allgemeinere Regel die Farbe aller Absätze fest, aber die zweite, spezifischere Regel überschreibt diese Einstellung nur in einigen Absätzen.
So könnte dies in einigen HTML-Markups verwendet werden:
Dieser Absatz wird in Blau angezeigt, was die Standardeinstellung für die Seite ist.
Dieser Absatz wäre auch blau.
Und dieser Absatz würde in Rot angezeigt, da das Klassenattribut die standardmäßige blaue Farbe aus dem Element-Selektor-Stil überschreiben würde.
In diesem Beispiel ist der Stil von p.alert würde nur für Absatzelemente gelten, die das verwenden aufmerksam Klasse. Um diese Klasse in mehreren HTML-Elementen zu verwenden, entfernen Sie das HTML-Element am Anfang des Stilaufrufs wie folgt:
.alert {Hintergrundfarbe: #ff0000;}
Diese Klasse ist jetzt für jedes Element verfügbar, das sie benötigt. Jeder Teil Ihres HTML-Codes mit einem Klassenattributwert von aufmerksam wird jetzt diesen Stil bekommen. Im folgenden HTML-Code haben wir sowohl einen Absatz als auch eine Überschrift der zweiten Ebene, die das aufmerksam Klasse. Beide haben eine rote Hintergrundfarbe:
Dieser Absatz wäre rot geschrieben.
Auf Websites werden heutzutage häufig Klassenattribute für die meisten Elemente verwendet, da sie aus Spezifitätsperspektive einfacher zu bearbeiten sind als IDs. Sie finden die meisten aktuellen HTML-Seiten, die mit Klassenattributen gefüllt sind, von denen einige in einem Dokument häufig wiederholt werden und andere möglicherweise nur einmal vorkommen.
ID-Selektoren
Die ID Wähler benennt einen bestimmten Stil, ohne ihn mit einem Tag oder anderem zu verknüpfen HTML-Element.
Nehmen Sie eine Unterteilung in Ihrem HTML-Markup an, die Informationen zu einem Ereignis enthält. Du könntest dieser Aufteilung ein geben ID-Attribut von Veranstaltung, und skizzieren Sie diese Unterteilung dann mit einem 1 Pixel breiten schwarzen Rand:
#event { Rahmen: 1px solid #000; }
Die Herausforderung mit ID-Selektoren ist, dass sie in einem HTML-Dokument nicht wiederholt werden können. Sie müssen eindeutig sein (Sie können dieselbe ID auf mehreren Seiten Ihrer Site verwenden, jedoch nur einmal in jedem einzelnen HTML-Dokument). Für drei Ereignisse, die alle diese Grenze benötigen, müssen Sie also die ID-Attribute von. identifizieren Veranstaltung 1, Ereignis2, und Ereignis3 und stylen Sie jeden von ihnen. Es wäre daher viel einfacher, das oben erwähnte Klassenattribut von zu verwenden Veranstaltung und style sie alle auf einmal.
Komplikationen von ID-Attributen
Eine weitere Herausforderung bei ID-Attributen besteht darin, dass sie eine höhere Spezifität aufweisen als Klassenattribute. Das Überschreiben eines zuvor festgelegten Stils kann schwierig sein, wenn Sie sich zu stark auf IDs verlassen haben. Viele Webentwickler sind weggezogen von IDs in ihrem Markup verwenden, auch wenn sie diesen Wert nur einmal verwenden möchten und sich stattdessen für fast alle den weniger spezifischen Klassenattributen zugewandt haben Stile.
Der einzige Bereich, in dem ID-Attribute ins Spiel kommen, ist, wenn Sie eine Seite erstellen möchten, die In-Page-Ankerlinks enthält. Stellen Sie sich beispielsweise eine Website im Parallax-Stil vor, die den gesamten Inhalt auf einer einzigen Seite mit Links enthält, die zu verschiedenen Teilen dieser Seite "springen". ID-Attribute und Textlinks verwenden diese Ankerlinks. Fügen Sie den Wert dieses Attributs mit vorangestelltem hinzu # Symbol, zum href Attribut des Links, wie folgt:
Das ist die Verbindung
Beim Anklicken oder Berühren springt dieser Link zu dem Teil der Seite, der dieses ID-Attribut hat. Wenn kein Element auf der Seite diesen ID-Wert verwendet, würde der Link nichts tun.
Um In-Page-Links auf einer Site zu erstellen, ist die Verwendung von ID-Attributen erforderlich, Sie können sich jedoch weiterhin für allgemeine CSS-Styling-Zwecke an Klassen wenden. So markieren Designer heute Seiten – sie verwenden so oft wie möglich Klassenselektoren und greifen nur auf IDs zurück, wenn sie das Attribut nicht nur als Hook für CSS, sondern auch als In-Page-Link benötigen.