Ändern Sie die Wortfarbe mit dem SPAN-Tag in CSS

click fraud protection

Sie können Schriftfarben, -größen und andere Parameter in einem externen CSS-Stylesheet angeben. Wenn Sie jedoch die Farbe nur eines Wortes oder einer Phrase ändern möchten, ist die einfachste und einfachste Methode die Verwendung des Tags inline. Inline-CSS ist genau so, wie es sich anhört: Es wird in den HTML-Code der Seite eingefügt und nicht in ein externes Stylesheet.

Vermeiden Sie die Verwendung des Tags, das veraltet ist.

So ändern Sie die Farbe eines Wortes mithilfe des Tags:

  1. Verwenden Sie Ihren bevorzugten Text- oder HTML-Editor im Codeansichtsmodus und platzieren Sie den Cursor vor dem ersten Buchstaben des Wortes oder der Wortgruppe, die Sie färben möchten.

  2. Lassen Sie den Text, dessen Farbe wir ändern möchten, mit einem Tag umbrechen, einschließlich eines Klassenattributs. Der gesamte Absatz kann so aussehen: Dies ist Text, auf den sich ein Satz konzentriert.

  3. Geben Sie diesem bestimmten Text einen "Hook", 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.

    instagram viewer

    In unserer CSS-Datei fügen wir Folgendes hinzu:

    .fokus-text {

     Farbe: #F00;

    }

    Diese Regel würde das Inline-Element the, so einstellen, dass es in der Farbe Rot angezeigt wird. Wenn wir einen früheren Stil hätten, der den Text unseres Dokuments auf Schwarz gesetzt hat, würde dieser Inline-Stil dazu führen, dass der Span-Text fokussiert wird und sich durch die andere Farbe abhebt. Wir könnten dieser Regel auch andere Stile hinzufügen, den Text vielleicht kursiv oder fett, um ihn noch stärker hervorzuheben?

  4. Speichern Sie Ihre Seite.

    Testen Sie die Seite in Ihrem bevorzugten Webbrowser, um die wirksamen Änderungen zu sehen.

    Beachten Sie, dass einige Webprofis zusätzlich zu den anderen Elementen wie den oder Tag-Paaren wählen. Diese Tags waren früher speziell für fett und kursiv gedacht, wurden aber veraltet 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, aber wenn Sie veraltete Elemente vermeiden möchten, empfehlen wir Ihnen, beim Tag für diese Art von Styling-Anforderungen zu bleiben.

Tipps und Dinge, auf die Sie achten sollten

Dieser Ansatz funktioniert zwar gut für kleine Stilanforderungen, z. B. wenn Sie nur einen kleinen Textabschnitt in einem Dokument ändern müssen, aber er kann schnell außer Kontrolle geraten. Wenn Sie feststellen, dass Ihre Seite mit Inline-Elementen übersät ist, die alle über einzigartige Klassen verfügen, die Sie in Ihrer CSS-Datei verwenden, können Sie Machen Sie es falsch. Denken Sie daran, je mehr dieser Tags auf Ihrer Seite vorhanden sind, desto schwieriger ist es wahrscheinlich, diese Seite am Laufen zu halten nach vorne. Außerdem hat eine gute Webtypografie selten so viele Farbvarianten usw. auf der ganzen Seite.

instagram story viewer