Textdekoration
Die Kunst des Verzierens
Mit den Mitteln des CSS wirst du zum wahren Kunsthandwerker. Ob Unterstreichen, Überstreichen oder das dramatische Durchstreichen, du gibst deinen Texten den letzten Schliff, wie ein Meister, der seinen Schmuckstücken den finalen Glanz verleiht. Hast du ein Wort, das du nicht mehr magst? Kein Problem, einfach mit line-through durchstreichen. Doch warum bei der einfachen Linie aufhören? Lass Farben in deine Verzierung einfließen, vielleicht ein sanftes Korallenrot oder etwas Mutigeres.
Und das Beste daran: Mit der Kurzschreibweise im CSS kannst du all diese Details in einem einzigen, präzisen Schwung festlegen, wie ein Künstler, der mit wenigen Pinselstrichen ein Meisterwerk vollendet.
Der letzte Schliff für deinen Text
Unterstrichen, durchgestrichen oder glanzvoll verziert – mach ihn besonders!
Unterstreichung
Ein Hauch von Eleganz
Ein Unterstrich ist wie ein feines Band, das deinem Text eine elegante Note verleiht. Besonders beliebt bei Links, hebt er wichtige Worte hervor, ohne sich aufzudrängen.
h1 {
text-decoration: underline;
}Unterstreichungen eignen sich sehr gut
für Links oder wichtige Textelemente.
Überstreichung
Schutz und Betonung
Eine Überstreichung ist wie ein sanftes Dach, das sich über den Text legt und ihm zusätzlichen Schutz verleiht. Dabei verleiht sie deinen Wörtern einen Hauch von Bedeutung.
h1 {
text-decoration: overline;
}Überstreichungen können auch genutzt werden, um Text hervorzuheben und ihm Bedeutung zu verleihen.
Durchstreichung
Streichen und Löschen
Eine Durchstreichung ist wie eine entschlossene, kurze Absage. Einfach durchstreichen und es ist erledigt. Ideal, um klarzustellen, dass dieser Teil der Vergangenheit angehört.
h1 {
text-decoration: line-through;
}Durchstreichungen können auch genutzt werden, um Texte mit falscher Aussage hervorzuheben.
Kurzschreibweise im CSS
Lange Rede, kurzer Sinn
Warum sich mit langen, komplizierten Zaubern herumschlagen, wenn du alles in einem eleganten Schwung erledigen kannst? Mit der Kurzschreibweise in CSS kombinierst du alle deine Werte für Textdekoration in einem einzigen, präzisen Satz. Anstatt mühsam jede Eigenschaft einzeln festzulegen, greifst du zu einem kurzen, magischen Pinselstrich und voilà – dein Text ist dekoriert, verziert und bereit, die Bühne zu betreten.
h1 {
text-decoration-line: line-through;
text-decoration-color: coral;
text-decoration-style: dotted;
text-decoration-thickness: 4px;
}kurz gesagt
h1 {
text-decoration: line-through coral dotted 4px;
}In dieser Lektion hast du gelernt…
- Wie du mit
text-decoration: underlineTexte unterstreichst, um sie hervorzuheben oder klassische Links zu gestalten. - Warum
text-decoration: overlineeine Überstreichung erzeugt, die Texten eine besondere Betonung verleiht. - Wie du mit
text-decoration: line-throughText durchstreichen kannst, um veraltete oder gestrichene Inhalte sichtbar zu machen. - Warum die Kurzschreibweise von
text-decorationpraktisch ist, um Linie, Farbe, Stil und Dicke in einer einzigen Anweisung zu kombinieren. - Wie du gezielt mit Textverzierungen spielst, um deinem Design Struktur, Klarheit und visuelle Raffinesse zu verleihen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Verzierungen der Runen
In den tiefsten Winkeln von Greenwood Hollow existieren Runen, die von mystischen Verzierungen umrahmt werden, fast so, als wollten sie dir etwas Wichtiges flüstern – aber nur, wenn du genau hinsiehst. Um ihre Geheimnisse zu entschlüsseln, musst du lernen, wie man den Text mit dekorativen Linien und Strichen versieht. Mit CSS kannst du diese Runen mit unterstrichenen, durchgestrichenen oder oberhalb schwebenden Verzierungen versehen, die den Schriftzeichen eine ganz neue Bedeutung verleihen.
Deine Aufgabe: Die Anwendung von Textdekorationen
- Grundlegende Textdekorationen (text-decoration-line):
Verwende für die Klassen .underline, .overline und .line-through die entsprechenden Werte: underline, overline, und line-through. - Stil, Dicke und Farbe der Dekoration (text-decoration-style, text-decoration-thickness, text-decoration-color):
Setze für die Klasse .custom-decoration eine text-decoration-line: underline mit einem Stil (text-decoration-style) wie dotted oder dashed, einer Dicke (text-decoration-thickness) von 2px, und einer Farbe (text-decoration-color) wie blue. - Zusammenfassung mit Shorthand (text-decoration):
Fasse die Eigenschaften in einer Shorthand-Deklaration zusammen, z.B. text-decoration: underline dotted 2px blue;.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
.overline {
text-decoration: overline purple solid 4px;
}
.underline {
text-decoration: underline purple solid 2px;
}
.line-through {
text-decoration: line-through purple solid 2px;
}
.custom-decoration {
text-decoration: underline purple dotted 4px;
}