So ändern Sie die Farbe eines Wortes mit dem Span-Tag und CSS

Inhalt

• Schritt für Schritt Anleitung
• Tipps und Dinge, auf die Sie achten sollten

Mit CSS ist es einfach, die Farbe des Textes in einem Dokument festzulegen. Wenn Sie möchten, dass Absätze auf Ihrer Seite in einer bestimmten Farbe gerendert werden, geben Sie dies einfach in Ihrem externen Stylesheet an, und der Browser zeigt Ihren Text in der ausgewählten Farbe an. Was passiert dann, wenn Sie die Farbe nur eines Wortes (oder vielleicht nur einiger Wörter) innerhalb eines Textabschnitts ändern möchten? Dazu müssen Sie ein Inline-Element wie das Tag verwenden.

Letztendlich ist es mit CSS einfach, die Farbe eines einzelnen Wortes oder einer kleinen Gruppe von Wörtern innerhalb eines Satzes zu ändern, und die Tags sind gültiges HTML. Machen Sie sich also keine Sorgen, dass dies eine Art Hack ist. Mit diesem Ansatz vermeiden Sie auch die Verwendung veralteter Tags und Attribute wie "Schriftart", die ein Produkt einer vergangenen HTML-Ära ist.

Dieser Artikel richtet sich an Webentwickler, die wahrscheinlich noch nicht mit HTML und CSS vertraut sind. Hier erfahren Sie, wie Sie mit dem HTML-Tag und CSS die Farbe eines bestimmten Textes auf Ihren Seiten ändern. Davon abgesehen weist diese Methode einige Nachteile auf, die wir am Ende dieses Artikels behandeln werden. Lesen Sie zunächst weiter, um die Schritte zum Ändern dieser Textfarbe zu erfahren. Es ist sehr einfach und sollte ungefähr zwei Minuten dauern.

Schritt für Schritt Anleitung

1. Öffnen Sie die Webseite, die Sie aktualisieren möchten, in Ihrem bevorzugten HTML-Texteditor. Dies kann ein Programm wie Adobe Dreamweaver oder ein einfacher Texteditor wie Notepad, Notepad ++, TextEdit usw. sein.
2. Suchen Sie im Dokument die Wörter, die in einer anderen Farbe auf der Seite angezeigt werden sollen. Verwenden wir für dieses Tutorial einige Wörter, die sich in einem größeren Textabschnitt befinden. Dieser Text wird im Tag-Paar enthalten sein. Suchen Sie eines von zwei Wörtern, deren Farbe Sie bearbeiten möchten.
3. Platzieren Sie den Cursor vor dem ersten Buchstaben des Wortes oder der Wortgruppe, deren Farbe Sie ändern möchten. Denken Sie daran, wenn Sie einen WYSIWYG-Editor wie Dreamweaver verwenden, arbeiten Sie gerade in der "Codeansicht".
4. Umschließen Sie den Text, dessen Farbe wir ändern möchten, mit einem Tag, einschließlich eines Klassenattributs. Der gesamte Absatz kann folgendermaßen aussehen:

   Dies ist Text, auf den sich ein Satz konzentriert.

5. Wir haben gerade ein Inline-Element verwendet, das, um diesem bestimmten Text einen "Hook" zu geben, den wir in CSS verwenden können. Unser nächster Schritt besteht darin, zu unserer externen CSS-Datei zu springen, um eine neue Regel hinzuzufügen.
6. Fügen wir in unserer CSS-Datei Folgendes hinzu:

7. .focus-text {

8. Farbe: # F00;

9. }

10. Diese Regel würde festlegen, dass das Inline-Element, das, in der Farbe Rot angezeigt wird. Wenn wir einen früheren Stil hätten, der den Text unseres Dokuments auf Schwarz setzt, würde dieser Inline-Stil dazu führen, dass der Span-Text fokussiert wird und sich durch die unterschiedliche Farbe auszeichnet. Wir könnten dieser Regel auch andere Stile hinzufügen, vielleicht den Text kursiv oder fett machen, um ihn noch stärker hervorzuheben?
11. Speichern Sie Ihre Seite.
12. Testen Sie die Seite in Ihrem bevorzugten Webbrowser, um die Änderungen zu sehen.
13. Beachten Sie, dass einige Webprofis zusätzlich zu den Elementen andere Elemente wie das oder das Tag-Paar verwenden. Diese Tags waren früher speziell fett und kursiv, wurden jedoch nicht mehr unterstützt und durch und ersetzt. Die Tags funktionieren jedoch immer noch in modernen Browsern, so dass viele Webentwickler sie als Inline-Styling-Hooks verwenden. Dies ist nicht der schlechteste Ansatz. Wenn Sie jedoch veraltete Elemente vermeiden möchten, empfehlen wir, das Tag für diese Art von Styling-Anforderungen beizubehalten.

Tipps und Dinge, auf die Sie achten sollten

Dieser Ansatz eignet sich zwar gut für kleine Styling-Anforderungen, z. B. wenn Sie nur einen kleinen Text in einem Dokument ändern müssen, kann jedoch schnell außer Kontrolle geraten. Wenn Sie feststellen, dass Ihre Seite mit Inline-Elementen übersät ist, die alle eindeutige Klassen haben, die Sie in Ihrer CSS-Datei verwenden, machen Sie es möglicherweise falsch. Denken Sie daran, je mehr dieser Tags sich auf Ihrer Seite befinden, desto schwieriger wird es Es ist wahrscheinlich, dass diese Seite auch in Zukunft beibehalten wird. Darüber hinaus weist eine gute Web-Typografie selten so viele Farbvarianten usw. auf der gesamten Seite auf.