Wie man Text mit CSS hervorhebt

Wie man Text mit CSS hervorhebt
Während beim Lesen von Notizen oder Artikeln müssen einige wichtige Punkte oder Terminologien später überarbeitet werden. Dafür verwenden wir Highlighter, um die wichtigen Dinge zu markieren, anstatt den gesamten Artikel jedes Mal zu studieren. Es gibt auch einen überzeugenden Blick auf diese Informationen. Um die Informationen auf der Website zu markieren, bietet HTML uns die “die“ an”Tag und CSS ermöglicht es uns, verschiedene Eigenschaften zum Hervorheben von Text zu verwenden.

Das Ergebnis dieses Blogs ist:

  • Methode 1: Heben Sie den Text mithilfe des HTML -Tags hervor
  • Methode 2: Heben Sie den Text mithilfe des HTML -Tags hervor
  • Methode 3: Heben Sie den Text mithilfe von CSS -Gradientenfarben hervor

Methode 1: Heben Sie den Text mithilfe des HTML -Tags hervor

Die HTML "Das Tag wird verwendet, um Text hervorzuheben oder zu markieren, der wichtige Informationen liefert. Standardmäßig machen Browser den markierten Text mit einer gelben Hintergrundfarbe.

Syntax
Die Syntax der Verwendung der “Das HTML -Element wird unten erwähnt:

Inhalt…

Beispiel: So fügen Sie Element in HTML hinzu?
Erstellen Sie zunächst in HTML eine DIV mit dem Klassennamen “Kasten”. Dann,

wird hinzugefügt, um die Überschrift und die einzuschließen

Tag wird verwendet, um der Webseite einen Absatz hinzuzufügen. Innerhalb der

Element, verwenden Sie die “Element, um den erforderlichen Text hervorzuheben:


HTML -Markelement


Das Markierungselement wird verwendet, um das Markierte zu definierenText.


Wenden Sie dann CSS -Eigenschaften auf die HTML -Elemente an.

Style Box Div

.Kasten
Grenze: 5PX Solid #9A1663;
Hintergrundfarbe: #fdf0e0;
Breite: 90%;
Höhe: 200px;
Rand: Auto;
Polsterung: Auto;
Text-Align: Mitte;
Schriftgröße: 20px;

Hier, ".Kasten”Wird verwendet, um mit dem Klassenfeld auf das DIV -Element zuzugreifen und die folgenden Eigenschaften anzuwenden: -

  • GrenzeDie Eigenschaft kann mehr als zwei Werte haben, um den Randstil anzugeben, z. B. Breite, Linienart und Farbe.
  • BreiteDas Attribut wird verwendet, um die Breite des Elements anzugeben.
  • HintergrundfarbeDie Eigenschaft wird verwendet, um die Farbe des Hintergrunds des Elements anzugeben.
  • HöheEigenschaft definiert die Höhe des HTML -Elements.
  • RandEigenschaft definiert den Raum außerhalb des Elements.
  • PolsterungEigenschaft definiert den Raum innerhalb des Elements.
  • TextausrichtungDie Eigenschaft wird verwendet, um die Ausrichtung des Textes anzupassen.
  • SchriftgrößeGibt die Größe der Schriftarten an.

Der obige Code generiert das folgende Ergebnis:

Mit CSS können wir auch verschiedene Stile auf das Element anwenden.

Stil HTML -Element
Standardmäßig die “”Tag zeigt eine gelbe Farbe. Mit Hilfe von CSS können Sie jedoch verschiedene Eigenschaften anwenden, um den Stil des HTML -Markierungselements zu ändern.

In diesem Beispiel haben wir Inline -CSS zum Styling des HTML -Tags verwendet:

Das Markelement wird verwendet, um die zu definieren markiert Text.

Es kann beobachtet werden, dass der Text nun unter Verwendung der roten Farbe hervorgehoben wird:

Methode 2: Heben Sie den Text mithilfe des HTML -Tags hervor

Die HTML "Element ist ein Inline -Element, das verwendet wird, um einen Teil eines Dokuments zu markieren.

Beispiel: So fügen Sie HTML Element hinzu?
Zuerst ein

Das Tag wird platziert, um einen Absatz hinzuzufügen. In der

Tag, das “Das Tag wird verwendet, um einen bestimmten Teil des Absatzes zu markieren. Jedes Span -Tag erhält eine ID als “S1”.

Html

LinuxHint ist das Beste Online -Tutorial Webseite.
Wenn Sie lernen möchten Bash -Programmierung, Dann bist du am richtigen Ort.

Wenden Sie nun CSS -Stile auf die oben genannten Spannelemente an.

CSS

#S1
Hintergrundfarbe: RGB (235, 247, 6);

Der "#S1”Bezieht sich auf den Spann -ID. Hier das Eigentum “Hintergrundfarbe”Mit dem Wert RGB (233, 247, 6) wird auf das Span -Element angewendet.

Aus der Ausgabe kann beobachtet werden, dass der Text innerhalb des Span -Elements mit der angegebenen Farbe gekennzeichnet ist:

Methode 3: Heben Sie den Text mithilfe von CSS -Gradientenfarben hervor

Fügen Sie in HTML eine mit ID als "hinzu"hauptsächlich”. Dann in diesem Div -Element platzieren

Tag zum Hinzufügen von Inhalten. Innerhalb des Inhalts von

Tag, Tag mit Klassennamen als "Markieren”. Zuletzt werden wir die CSS anwenden “GradientEigentum in dieser Spannweite.

Html


Der Erfolgspreis ist harte Arbeit und Engagement.


Stilklasse Highlight des Elements

.Markieren
Hintergrund-Image: Linear-Gradient (nach rechts, #06283d, #8bbccc, #47b5ff, #256d85);
Border-Radius: 6PX;
Polsterung: 3px 6px;

Die Beschreibung der oben genannten CSS -Eigenschaften finden Sie unten:

  • .Markieren”Wird verwendet, um auf das Klassenhighlight der zuzugreifen

    Element.

  • HintergrundbildEigentum als "linearer Gradient”Verwendet die Parameter als Richtung, dann zwei oder mehr Farben.
  • GrenzradiusImmobilien werden verwendet, um die Ränder der Elemente rund zu machen.
  • Polsterung”Wird verwendet, um Platz um den Inhalt des Elements zu bieten.

Style Main Div

#hauptsächlich
Rand: 10px Auto;
Breite: 90%;
Höhe: 150px;
Grenze: 5px fest #fb2576;
Border-Radius: 10px;
Hintergrundfarbe: Schwarz;
Polsterung: 5px;

Die folgenden beschriebenen CSS -Eigenschaften werden mit der ID als „Haupt“ auf das DIV -Element angewendet:

  • #hauptsächlich”Wird auf das ID -Haupthaupt des DIV -Elements verwiesen.
  • Rand”Eigenschaft wendet den Abstand außerhalb des DIV -Elements an.
  • BreiteEigenschaft wird verwendet, um die Breite des Containers festzulegen.
  • Höhe”Legt die Höhe des Behälters fest.
  • GrenzeGibt die Breite, den Typ und die Farbe des Randes an.
  • Grenzradius”Gilt, um die Ränder der Elemente zu machen.
  • Hintergrundfarbe”Wird verwendet, um Farbe auf den Hintergrund des DIV -Elements anzuwenden.
  • PolsterungWird angewendet, um Platz um den Inhalt der DIV zu geben.

Stil

Element

#main> p
Farbe: #fff;
Text-Align: Mitte;
Schriftfamilie: Sans-Serif;
Buchstabenabteilung: 2px;
Polsterung: 20px 0;
Schriftgröße: 2EM;

Der

Element of Div Main wird mit den aufgelisteten CSS -Eigenschaften angewendet:

  • FarbeEigenschaft gibt die Farbe des Textes an.
  • Textausrichtung”Eigenschaft wendet eine Ausrichtung auf den Text an, wie z. B. Mitte, links und mehr.
  • Schriftfamilie”Wird verwendet, um die Schriftfamilie des Textes festzulegen.
  • Buchstaben-AbstandEigenschaft maximiert oder minimiert den Abstand zwischen den Zeichen des Textes.
  • Polsterung”Repräsentiert Raum um den Inhalt eines Elements.
  • Schriftgröße”Zeigt die Größe der Schrift an.

Nach dem Speichern des obigen Codes sieht die Webseite in unserem Webbrowser wie folgt aus:

Wir haben einige Methoden besprochen, um den Text mit CSS hervorzuheben.

Abschluss

Zum Hervorheben von Text erleichtert HTML und CSS uns viele Techniken. Html "" Und "Tags werden verwendet, um den Text zu markieren, aber wir können den Highlight -Stil mit CSS anpassen. In diesem Blog wurde das Verfahren zum Hervorheben von Text mithilfe von HTML-, und Gradientenfarben erörtert.