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 innerhalb eines Textabschnitts nur die Farbe eines Wortes (oder nur einiger Wörter) ändern möchten? Dafür müssen Sie ein Inline-Element wie das Tag verwenden.
Das Ändern der Farbe eines einzelnen Wortes oder einer kleinen Gruppe von Wörtern innerhalb eines Satzes ist letztlich mit CSS einfach und die Tags sind gültiges HTML. Mit diesem Ansatz vermeiden Sie außerdem die Verwendung veralteter Tags und Attribute wie "font", die aus einer vergangenen HTML-Ära stammen.
Dieser Artikel richtet sich an Anfänger von Web-Entwicklern, die wahrscheinlich noch nicht mit HTML und CSS vertraut sind. Sie erfahren, wie Sie das HTML-Tag und CSS verwenden, um die Farbe eines bestimmten Texts auf Ihren Seiten zu ändern. Allerdings gibt es einige Nachteile dieser Methode, die wir am Ende dieses Artikels behandeln werden. Lesen Sie zunächst die Schritte zum Ändern dieser Textfarbe. Es ist sehr einfach und sollte ungefähr zwei Minuten dauern.
Schritt für Schritt Anleitung
- Ö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.
- Suchen Sie im Dokument die Wörter, die auf der Seite in einer anderen Farbe angezeigt werden sollen. In diesem Tutorial verwenden wir einige Wörter, die sich innerhalb eines größeren Textabschnitts befinden. Dieser Text wird im Tag-Paar enthalten. Finden Sie eines von zwei Wörtern, deren Farbe Sie bearbeiten möchten.
- Setzen Sie den Cursor vor den ersten Buchstaben des Wortes oder der Gruppe von Wörtern, deren Farbe Sie ändern möchten. Denken Sie daran, wenn Sie einen WYSIWYG-Editor wie Dreamweaver verwenden, arbeiten Sie gerade in der "Codeansicht".
- Lassen Sie den Text, dessen Farbe wir ändern möchten, mit einem Tag umschließen, einschließlich eines Klassenattributs. Der gesamte Absatz kann folgendermaßen aussehen:
Dies ist ein Text, auf den sich ein Satz konzentriert.
- Wir haben gerade ein Inline-Element, das, verwendet, um diesem spezifischen Text einen "Haken" zu geben, den wir in CSS verwenden können. Im nächsten Schritt müssen Sie zu unserer externen CSS-Datei springen, um eine neue Regel hinzuzufügen.
- Fügen Sie in unserer CSS-Datei Folgendes hinzu:
-
.fokus-text {
-
Farbe: # F00;
-
}
- Diese Regel würde dieses Inline-Element festlegen, das in der Farbe Rot angezeigt wird. Wenn wir einen früheren Stil hätten, der den Text unseres Dokuments auf Schwarz setzen würde, würde dieser Inline-Stil dazu führen, dass der Text für den Bereich hervorgehoben wird und mit der anderen Farbe hervorsticht. Wir könnten dieser Regel auch andere Stile hinzufügen und den Text vielleicht kursiv oder fett hervorheben, um ihn noch mehr zu betonen.
- Speichern Sie Ihre Seite.
- Testen Sie die Seite in Ihrem bevorzugten Webbrowser, um die Auswirkungen der Änderungen zu sehen.
- Beachten Sie, dass einige Web-Profis zusätzlich zu den anderen Elementen wie dem oder den Tag-Paaren verwenden. Diese Tags waren speziell für Fett- und Kursivschrift gedacht, wurden jedoch nicht mehr empfohlen und durch und ersetzt. Die Tags funktionieren weiterhin in modernen Browsern. Viele Webentwickler verwenden sie jedoch als Inline-Styling-Hooks. Dies ist nicht der schlechteste Ansatz. Wenn Sie jedoch veraltete Elemente vermeiden möchten, empfehlen wir Ihnen, das Tag für diese Art von Styling-Anforderungen beizubehalten.
Tipps und Dinge, auf die Sie achten sollten
Dieser Ansatz eignet sich zwar für kleine Stilanforderungen, z. B. wenn Sie nur ein kleines Textstück 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 über eindeutige Klassen verfügen, die Sie in Ihrer CSS-Datei verwenden, tun Sie dies möglicherweise falsch. Denken Sie daran, je mehr Tags auf Ihrer Seite vorhanden sind, desto schwieriger ist es ist wahrscheinlich, diese Seite fortzusetzen. Außerdem hat eine gute Web-Typografie selten so viele Farbvarianten usw. auf der gesamten Seite.
