Ein Strikethrough wird als Zeile durch den Text definiert. Es wird häufig verwendet, um irrelevanten Text anzuzeigen, aber wir können ihn auch zur Dekoration verwenden. Frühe Versionen von HTML verwendet Element, um einen Text zu erstellen. HTML5 unterstützt das Element jedoch nicht. Insbesondere in CSS die “Textdekoration"Eigenschaftswert wird als" festgelegt "ZeileFür den gleichen Zweck.

In diesem Artikel wird Sie über die CSS-Streifen und die anderen Textdekorationseigenschaften führen. So lass uns anfangen!

Was sind Textdekoration CSS-Eigenschaften?

Da sind viele "TextdekorationIn CSS verwendete Eigenschaftswerte. Einige von ihnen sind unten aufgeführt:

• Zeile
• unterstreichen
• überaus
• keiner

Lass uns nacheinander sie durchgehen!

Textdekoration: Zeile

Der "Zeile”Textablagerungseigenschaft wird verwendet, um eine horizontale Linie durch den Text hinzuzufügen. Diese Eigenschaft ist auch als gekreuzter Text bekannt.

Beispiel 1: So verwenden Sie CSS -Streifen?

Erstens werden wir einen Namen hinzufügen “Container”Im Körperelement der HTML -Datei. Dann schließen Sie die ein

Tag zum Hinzufügen eines Textes.

Html

Textdekoration: Strikethrough

Weisen Sie im CSS-Abschnitt den Wert der Textdekorationseigenschaft als “als“ als “zuZeile”.

CSS

Textdekoration: Zeilenum;

Es ist ersichtlich, dass die Überlieferungseigenschaft erfolgreich auf den hinzugefügten Text angewendet wird:

Um diese Dekoration interessanter zu machen, wenden wir eine Animation darauf an.

Beispiel 2: So wenden Sie Animation auf Strikethrough mit CSS an?

Fügen Sie ein DIV -Element im Körperelement der HTML -Datei hinzu. In der DIV leiten Sie eine Überschrift

Tag mit etwas Text.

Html

Willkommen bei LinuxHint!

Wenden Sie als nächstes Stile auf die HTML -Elemente an.

CSS

Die HTML -Elemente sind mit CSS -Eigenschaften gestaltet. Um die Textausrichtung in der Mitte festzulegen, wird das DIV-Element mit der Eigenschaftstextausrichtung mit dem Wertzentrum versehen:

div
Text-Align: Mitte;

Style Line Div

.Linie
Schriftfamilie: Sans-Serif;
Schriftgröße: 60px;
Farbe: #00154f;
Position: Relativ;
Anzeige: Inline-Block;
Cursor: Zeiger;

Die CSS -Eigenschaften, die auf die Leitungsdiv angewendet werden, werden nachstehend erläutert:

• “SchriftfamilieImmobilien legt die Schriftfamilie des Textes als "fest"serifenlos”.
• “Schriftgröße”Eigenschaft mit Wert“60px”Setzt die Größe der Schriftart auf 60px.
• “FarbeDie Eigenschaft wird verwendet, um die Farbe des Textes anzugeben.
• “Position"Mit Wert"relativ”Passt die Leitungsdiv in Bezug auf seine aktuelle Position ein.
• “Anzeige"Eigentum als"Inline-Block”Ermöglicht die Einstellung der Linienbreite und beschränkt den Inhalt in der nächsten Zeile angezeigt.
• “Mauszeiger"Mit dem Wert"ZeigerGibt an, dass ein zeigter Handcursor, wenn die Maus über dem Text schwebt, angezeigt wird.

Style Line Div nach Selektor

Der untergegebene Code stymt die Zeilendiv nach seiner Auswahl. Der "::nach”Wird als After -Selektor bekannt:

.Zeile :: nach
Inhalt: ";
Bildschirmsperre;
Breite: 0;
Höhe: 20px;
Hintergrundfarbe: #f4af1b;
Position: absolut;
unten: 10%;
Z -Index: -1;
Übergang: Breite 1s;

Nachdem die Linie ausgewählt wurde, werden die genannten Eigenschaften wie erläutert angewendet:

• “InhaltDie Eigenschaft wird verwendet, um den angegebenen Inhalt in das Element einzufügen. Wenn der Wert keiner ist, werden nach der Auswahl der Inhalt gemäß dem genannten Pseudocode festgelegt.
• “Anzeige”Wenn ein Block die verfügbare Bildschirmbreite nimmt und den Block so einsetzt, dass er in einer neuen Zeile startet.
• “BreiteEigenschaft wird verwendet, um die Breite des Elements festzulegen.
• “HöheEigenschaft wird verwendet, um die Höhe des Elements festzulegen.
• “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements festzulegen.
• “Position”Da sich absolut bezieht, dass sich die Linien -DIV relativ zu ihrer Eltern Div nach der Auswahl positionieren wird.
• “UnterseiteDie Eigenschaft fügt 10% Platz am Ende der Linie hinzu.
• “Z-IndexDefiniert die Reihenfolge überlappender Elemente.
• “ÜbergangDie Eigenschaft legt die Bewegung des Elements fest, in dem der Breitenwert den Übergang darstellt, der auf die Breite Eigenschaft eines Elements angewendet werden muss, und 1s ist seine Dauer.

Style Line Div nach dem Schwebe

Stellen Sie die Breite des Linienbehälters als 100% ein, wenn die Maus schwebt:

.Zeile: Hover :: nach
Breite: 100%;

Infolgedessen fügt das Überziehen über dem hinzugefügten Text einen animierten Strikethrough hinzu:

Textdekoration: Unterstreich

Der "unterstreichen”Textablagerungseigenschaftswert stellt eine Zeile unter den Text. Diese Eigenschaft wird hauptsächlich verwendet, um den erforderlichen Text herauszustellen.

CSS

Textdekoration: Unterstreichung;

Ausgang

Textdekoration: Überaus

Die Überliniendekoration bezieht sich auf den Text mit einer horizontalen Linie darüber. Es ist auch als Overs bekannt. Insbesondere, um einen Textüberdruck zu überschreiten, die “zuweisen“Textdekoration”Eigenschaft ein Wert“überaus”.

CSS

Textdekoration: Überaus;

Durch die Zuweisung des Wertschöpfungsüberschichts kann beobachtet werden, dass ein Balken über dem Text angezeigt wird:

Textdekoration: Keine

Wenn Sie keine Textdekoration benötigen, weisen Sie den Wert zu “keiner" zum "Textdekoration" Eigentum.

CSS

Textdekoration: Keine;

Ausgang

Bisher haben wir die textdekorationseigenen Eigenschaften, Zeilen-, Untersteuer-, Überstreichungs- und keine mit Beispielen diskutiert. Im nächsten Abschnitt werden die Attributwerte der Textdekoration erläutert. So lass uns gehen!

Textdekorationsattributwerte

Sie können auch andere Attributwerte hinzufügen:

• Textdekoration: Es definiert den Zeilenart wie Untersteine, Linien, Überlieferung und mehr.
• Textdekorationsfarbe: Es definiert die Linienfarbe.
• Text-Decoration-Stil: Es gibt den Stil der Linie an, ob wellig, gepunktet, gestrichelt usw.
• Textdekoration Dicke: Es definiert die Breite der Linie.

Sehen Sie sich das folgende Beispiel an, in dem die oben diskutierte Textdekoration mit mehreren Werten angezeigt wird.

Beispiel

Fügen Sie zunächst eine gepunktete Zeile über den Text mit einer Breite von 10px und der angegebenen Farbe hinzu:

Textdekoration: Überausgepunktete 10px #00154F;

Dann unterstreicht eine gewellte Unterstreichung mit der erforderlichen Breite und Farbe:

Textdekoration: Unterstreiche Wellen 9PX RGB (249, 253, 2);

Die obigen CSS-Codezeilen zeigen die folgenden Ergebnisse an:

Wir haben die Informationen zu den CSS -Schlägen und anderen Textdekorationseigenschaften bereitgestellt.

Abschluss

Die textdekorationseigenschaften von CSS setzen das Erscheinungsbild verschiedener dekorativer Linien auf dem hinzugefügten Text. Insbesondere fügt Striiken eine Zeile durch den Text hinzu, der angewendet werden kann, indem der Wert der Textdekoration als “festgelegt wirdZeile”. In diesem Beitrag wurde die CSS-Striften, andere Textdekorationseigenschaften und Attributwerte erörtert.