Das Ersetzen eines Textes erfolgt hauptsächlich in serverseitigen Programmiersprachen, einschließlich PHP. Entwickler arbeiten jedoch gelegentlich unter bestimmten Einschränkungen und können den Text auf dem Server nicht ersetzen. In solchen Szenarien ist das Ersetzen des Textes mit CSS eine gute Wahl. Wenn der Benutzer den Text ersetzen möchte, CSS “InhaltEigenschaft kann verwendet werden. Darüber hinaus können Sie den ersetzten Text mit CSS auch stylen.

In diesem Tutorial wird untersucht:

• So fügen Sie Text in HTML hinzu?
• So ersetzen Sie Text durch CSS?

So fügen Sie Text in HTML hinzu?

In HTML kann Text auf unterschiedliche Weise hinzugefügt werden, z. B. ein Überschriftenelement “

”Wird verwendet, um Überschriftentext hinzuzufügen oder die“

Gehen Sie die angegebenen Anweisungen durch, um den Text dem HTML -Dokument hinzuzufügen.

Schritt 1: Erstellen Sie einen Div -Container

Machen Sie ein "DIV" -Element mit Hilfe des "" Schild. Fügen Sie außerdem eine ein “Ausweis”Attribut, um einem Element einen bestimmten Namen zuzuweisen.

Schritt 2: Text hinzufügen

Verwenden Sie als nächstes das Absatz -Tag “

”Und zuweisen es eine“Klasse”Attribut. Dann bögen Sie einen Text in die Absatz -Tags ein:

LinuxHint ist eine der besten Tutorial -Websites. (Alter Text)

Es kann beobachtet werden, dass der Text erfolgreich hinzugefügt wurde:

Schritt 3: Stil "Div" Element

Verwenden Sie nun die “Ausweis"Selektor und ID"#Main-Div”Zu dem Zugriff auf das" Div "-Element zugreifen. Wenden Sie dann die folgenden Eigenschaften an:

#Main-div
Grenze: 3px fest schwarz;
Hintergrundfarbe: RGB (179, 233, 250);
Rand: 50px;
Schriftstil: kursiv;

Hier:

• “GrenzeEigenschaft wird verwendet, um eine Grenze um das Element zu definieren.
• “HintergrundfarbeEigenschaft verteilt eine Farbe am Hintern des Elements.
• “RandGibt einen Raum um die Grenze des Elements an.
• “Schriftstil"Bestimmt den spezifischen Stil für einen Text als" als "kursiv”:

So ersetzen Sie Text durch CSS?

Um Text durch CSS zu ersetzen, verstecken Sie zunächst den vorherigen Text mit der Verwendung des “Sichtweite" Eigentum. Dann den Text mit dem “einbettenInhalt" Eigentum.

Probieren Sie die angegebene Prozedur aus, um den Text in CSS zu ersetzen.

Schritt 1: Verstecken Sie den alten Text

Greifen Sie zunächst auf das Element zu, in dem Sie den Text eingebettet haben. In unserem Szenario werden wir auf die “zugreifen“

"Element nach dem Klassennamen".Ersetzen Sie-Text”. Dann wenden Sie die “an“Position" Und "Sichtweite" Eigenschaften:

.Ersetzen Sie-Text
Position: Relativ;
Sichtbarkeit: versteckt;

Hier das "Position”Gibt an, dass das Element relativ zu seiner normalen Position auf der Webseite positioniert wird, und das“SichtweiteEigenschaft wird verwendet, um das Element zu verbergen.

Ausgang

Schritt 2: Text ersetzen

Zugriff auf den Text der “

"Tag von Klasse".Ersetzen Sie-Text”. Verwenden Sie auch die Pseudoklasse “:nach”, Der Text nach dem Inhalt des ausgewählten Elements einfügt:

.Ersetzen-Text: nach
Inhalt: "LinuxHint ist eine in Großbritannien ansässige Organisation. (Neuer Text) ";
Position: absolut;
Sichtbarkeit: sichtbar;
links: 0;
Top: 0;

Die Beschreibung der oben genannten Eigenschaften lautet wie folgt:

• “InhaltDie Eigenschaft wird verwendet, um den Inhalt im ausgewählten Element hinzuzufügen.
• “linksIn CSS wird die horizontale Position eines positionierten Elements zuordnen.
• “SpitzeGibt die Position an der Oberseite eines Elements an.
• “Sichtweite”Wird als" eingestellt "sichtbar”Um den Inhalt im Div zu zeigen.

Ausgang

Es ist zu bemerken, dass der Text mit CSS erfolgreich ersetzt wird.

Abschluss

Fügen Sie zuerst den Text mit der Verwendung der “den Text durch CSS durch, um den Text durch CSS zu ersetzen

" Schild. Dann greifen Sie auf die “zu"

Element in CSS unter Verwendung der zugewiesenen Klasse und wenden Sie die “anSichtweite”Eigenschaft mit dem Wert“verstecktUm den alten Text zu verbergen. Verwenden Sie danach die Pseudoklasse “:nach”Mit der zugewiesenen Klasse der“

" Element. Ersetzen Sie den Text durch Hilfe des “InhaltEigentum und setzen Sie erneut die "SichtweiteEigentum als "sichtbar”. Dieser Beitrag hat die Methode zum Ersetzen des Textes von HTML mit CSS erläutert.