Das Unterstreichen eines Dokuments oder eines Textes wird immer als einfach angesehen. Aber wenn wir den Fall für die Websites betrachten, ist es noch einfach? Die meisten von uns würden ja sagen, aber eine horizontale Linie mit einigen benutzerdefinierten Designs macht diese einfache Aufgabe mühsam. Beginnen Sie die Reise der Textdekoration mit CSS folgendermaßen:
- Was ist Textdekoration?
- Arten von Textdekorationen in CSS
- Textdekoration mit CSS: Code
- Textdekoration überspringen
Was ist Textdekoration?
Es legt das Erscheinungsbild der dekorativen Linien auf dem Text fest. Es ist eine Abkürzung Eigenschaft für:
- Textdekorationslinie
- Text-Dekoration-Farbe
- Text-Dekoration-Stil
Es wird als ein oder mehrere durch Leerzeichen getrennte Werte angegeben, die das Langhand-Te darstellenxt-Dekorationseigenschaften.
Syntax:
Textdekoration: || ||
Wo,
Textdekorationslinie: Es wird verwendet, um die Art der Dekoration festzulegen, wie zunterstreichen, überstreichen und durchstrichen.
Text-Dekoration-Farbe:Hiermit wird die Farbe der Dekoration festgelegt.
Textdekorationsstil: Es wird verwendet, um den Stil der Linie festzulegen, zfest, wellig, gepunktet, gestrichelt, doppelt
Arten von Textdekorationen in CSS
- Overline:
#decoration {text-decoration: overline} 
- Line-Through:
#decoration {text-decoration: line-through}- Unterstreichen:
#decoration {Textdekoration: unterstreichen}- Kombination:
#decoration {Textdekoration: Unterstrich Zeile-durch-Überstrich}Ausgabe:
Textdekoration mit CSS: Code
Code:
CSS-Code:
#overline {Textdekoration: welliger Überstrich Kalk} #underover {Textdekoration: gestrichelte Unterstreichung Überstrich} # gepunktet {Textdekoration: Unterstreichung Überstrich rot gepunktet} # wellig {Textdekoration: Linie durch Wellen}Ausgabe:
Textdekoration überspringen
Eine Eigenschaft, die als Textdekorationssprung bezeichnet wird, kann auch verwendet werden, wenn ein Text über-, durchgestrichen und unterstrichen wird. Es hilft beim Dekorieren des Textes. Es gibt einfach an, wie Über- und Unterstreichungen gezeichnet werden, wenn sie über Auf- und Abwärtsbewegungen fahren.
#decoration {text-decoration-skip: ink}Werte, die mit Textdekorationssprüngen verwendet werden können, sind:
Objekte :: (Standard) Zeile überspringt Inline-Objekte wie Bilder oder Inline-Block-Elemente.
keiner :: Linie kreuzt alles.
Räume :: In der Dekorationslinie werden Leerzeichen, Worttrennzeichen und Leerzeichen mit Buchstabenabständen oder Wortabständen übersprungen.
Tinte :: Die Dekorationslinie überspringt Glyphen, Ab- oder Aufsteiger.
Was ist der Unterschied zwischen einer abstrakten Klasse und einer Schnittstelle?
Kanten :: Die Dekorationslinie beginnt etwas nach der Startkante des Inhalts und endet etwas vor der Endkante des Inhalts.
Kastendekoration :: Die Dekorationslinie überspringt den geerbten Rand, den Rand und die Polsterung.
Da diese Eigenschaft von keinem Browser unterstützt wird, gibt es noch keine Demo. Im folgenden Bild sehen Sie jedoch ein Beispiel dafür, wie die einzelnen Werte nach der Implementierung des Textdekorationsspringens aussehen könnten.
Damit kommen wir zum Ende dieser Textdekoration mit CSS-Blog. Wenn Sie Fragen zu diesem Thema haben, hinterlassen Sie bitte unten einen Kommentar. Wir werden uns dann bei Ihnen melden.
Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „Textdekoration mit CSS“. Wir werden uns dann bei Ihnen melden.