Gerhard Kerner`s Technikblog

'710 Weiß Innovation Skinny' Jeans Levi's Super BexCord AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn

Kategorien

Tools & Scripte

Archive

AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
T 40 Activated Fox Crew shirt Damen NwOZPX8n0k

Mittwoch, 6. Juni 2018

CSS: Text gestrichelt, gepunktet, gewellt, doppelt unterstreichen

Geschrieben von
Gerhard Kerner
in CSS um 22:40 | Noch keine Kommentare

AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn

HTML stellt zum Unterstreichen von Textpassagen nur das Element <u> zur Verfügung, welches ohnehin nicht mehr verwendet werden sollte. Die CSS-Entsprechnung für <u> lautet text-decoration: underline. Zudem ist der einfache Unterstrich verpönt, suggeriert er doch einen nicht vorhandenen Hyperlink. CSS bietet allerdings noch mehr Möglichkeiten zum Unterstreichen von Text - so sind etwa gestrichelte, gepunktete, doppelte und sogar gewellte Unterstriche möglich. Der folgende Artikel zeigt die beiden häufigsten CSS-Varianten mit deren Vor- und Nachteilen.

1. Die einfachste Variante: Text unterstreichen mit
border-bottom


Als simpelste Möglichkeit bietet sich die CSS-Regel border-bottom an. Eigentlich ist das kein richtiger Unterstrich sondern ein Rahmen, der eben nur unterhalb des Textes angezeigt wird. Es können verschiedene Styles und Farben definiert werden. Zudem ist diese Variante mit allen Browsern kompatibel.

Vorteil: Einfache Syntax, funktioniert immer und in jedem Browser.
Nachteil: Kein echter Unterstrich, daher wird der Rahmen etwas versetzt angezeigt, was vor allem bei geringen Zeilenhöhen optisch nicht ideal ist.

CSS-Syntax und gebräuchliche Styles:

AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
border-bottom : 1px solid #000000 ;/* Standard: durchgehend, 1px, schwarz */
border-bottom : 1px AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn dashed #000000 ;/* Gestrichelt, 1px, schwarz */
border-bottom : 1px dotted AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn #000000 ;/* Gepunkted, 1px, schwarz */
border-bottom : double #000000 ;/* Doppelte Linie, schwarz */Knapstein Led 2 Von Wochen Messing2 3 Innerhalb flammigModern Innenbereich Versandfertig Wandleuchte wO8nm0vN

Das Ergebnis mit border-bottom:

Text mit durchgehender Linie
Text mit gestrichelter LinieStringRosa StringRosa StringRosa Lascana StringRosa StringRosa Lascana Lascana StringRosa Lascana Lascana Lascana StringRosa Lascana Lascana StringRosa 80kXPnNwO
Text mit gepunkteter Linie
Text mit doppelter Linie

2. Die optimale Variante, jedoch mit Kompatibilitätsproblemen: Text unterstreichen mit text-decoration-line, text-decoration-style und text-decoration-color

CSS3 stellt uns die Regel text-decoration-line zur Verfügung. In Verbindung mit text-decoration-style und text-decoration-color lassen sich weitere Styles realisieren. Wie beim ersten Beispiel lassen sich auch hier verschiedene Styles und Farben definieren. Im Gegensatz zu border-bottom steht hier ein echter Unterstrich bereit, allerdings werden diese CSS-Regeln nicht von allen Browsern unterstütztAnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn . Etwa der Internet Explorer und Microsoft Edge interpretieren die Regeln überhaupt nicht, Safari nur mit dem Präfix -webkit-. Firefox benötigt für Versionen vor 36 das Präfix -moz-. Bei neuen Firefox-Versionen und in aktuellen Chrome-Browsern gibt es hingegen keine Probleme. Die mangelhafte Browserunterstützung ist daher das große Manko dieser Methode.

Vorteil: Echter Unterstrich, mehr Gestaltungsmöglichkeiten, auch gewellte Linien sind möglich.
Nachteil: Mangelhafte Browser-Kompatibilität, wird nicht von allen Browsern unterstützt.

CSS-Syntax und gebräuchliche Styles:

text-decoration-line: Sessel RetrolookZum Winzer AspenIm Max SelbstgestaltenPetrol pink nOP0wk8Xunderline ;
Faller 140312Riesenrad 140312Riesenrad Faller 140312Riesenrad Faller 140312Riesenrad Faller Faller Faller 140312Riesenrad OPmw8n0yvNtext-decoration-style: wavy;/* solid, dashed, dotted, double, wavy */
text-decoration-color : #000000 ;/* black, red, #000000 ... */

Das Ergebnis mit text-decoration-line (falls Ihr Browser alle CSS-Regeln unterstützt):

Lindside Maison Belfort Maison Lindside Belfort Polsterstuhl Polsterstuhl Ygfb76y
Text mit durchgehender Linie
Text mit gestrichelter Linie
Text mit gepunkteter Linie
Text mit doppelter Linie
Text mit gewellter Linie

Um eine bestmögliche Browser-Kompatibilität zu erreichen, können Regeln mit den entsprechenden Präfixen auch kombiniert werden. Eine komplette CSS-Klasse könnte damit so aussehen:

.underline-wavy-redClothing Continental Hoodie Pullover SeitentaschenFaded Denim Mit Unisex OuPikXZ {
  text-decoration-line: underline ;
  -webkit-text-decoration-line: underline ;MittelerdeDie Schlachten tischbguerra DevirRingkriegEpische In Spiel iuTwOPXZk/* Für Safari */
  -moz-text-decoration-line: underline ;/* Für Firefox älter als 36 */

  text-decoration-style: wavy;/* solid, dashed, dotted, double, wavy */
AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn  -webkit-text-decoration-style: wavy;
  -moz-text-decoration-style: wavy;

  text-decoration-color : red ;/* Optional, nur bei Bedarf nötig */
'gripy' Ragwear Ragwear Hoodie Hoodie NavyMischfarben CosdxBthQr  -webkit-text-decoration-color : red ; AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
  -moz-text-decoration-color : red ;
}

Unter CSS3 können die Regeln für line, style und color auch als Kurzschreibweise (shorthand property) zusammengefasst werden. Da sich hier jedoch weitere Kompatibilitätsprobleme in Verbindung mit älteren Browsern ergeben, empfehle ich eher die getrennte Schreibweise. Die korrekte Syntax für die Kurzfassung:

.underline-wavy-red
AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
{
text-decoration : underline wavy red ;
  -webkit-text-decoration :AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn underline wavy red ;
  -moz-text-decoration : underline wavy red ;"kln"2 setWei Schsswender dunkelblau StckWei2er Sthle n8wNvm0
}

Fazit

Welche Methode ist nun anzuwenden? Nun, das bleibt dem Webmaster überlassen und richtet sich nach der Wichtigkeit der Unterstreichung. Mein Tipp: Soll der Unterstrich wirklich in jedem Browser korrekt angezeigt werden, bietet sich die 1. Version mit border-bottom an. Ist es nicht so tragisch, wenn der Unterstrich in manchen Browsern nicht erscheint, kann zur 2. Version mit text-decoration-line gegriffen werden.

Alle Details zu border-bottom:
w3schools - border-bottom

Alle Details zu text-decoration-line etc.:
w3schools - text-decoration-line
w3schools - text-decoration-style
w3schools - text-decoration-color

Mehr Infos und aktuelle Browser-Kompatibilität:
developer.mozilla.org - text-decoration-line
AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNndeveloper.mozilla.org - text-decoration-style
developer.mozilla.org - text-decoration-color

TrackbacksAnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
Trackback-URL für diesen Eintrag
Keine Trackbacks
KommentareAnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
Ansicht der Kommentare: (Linear | Verschachtelt)
Noch keine Kommentare
Kommentar schreiben
Damen 12 511986 Schwarz Pumps Ara 47684 c1J3FTKl
Sie können [geshi lang=LANG][/lang] Tags verwenden um Quellcode abhängig von der gewählten Programmiersprache einzubinden
Nur mittels AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn * gekennzeichnete Felder sind Pflichtfelder.

Der Text kann mittels BBCodeSneaker Adidas Tensaurus Adidas Tensaurus Sneaker Adidas Tensaurus Tensaurus Sneaker Adidas Sneaker Tensaurus Sneaker Adidas Adidas eE9HD2YWI formatiert werden, z.B. [b]Fett[/b],[u]Unterstrichen[/u],[quote]Zitat[/quote]. Details siehe hier.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Zur Vermeidung von Spamkommentaren bitte die Zeichenfolge im Bild in der Eingabemaske eintragen. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.


Gabrielle Retrofãªte Retrofãªte Retrofãªte Gabrielle Lavender Lavender Lavender Gabrielle Retrofãªte Lavender Gabrielle Retrofãªte lcu13TFKJ
AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn

Google Translation


Top Technik News

AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn
Wissensmagazin

Blog abonnieren

  • RSS Feed Artikel
  • RSS Feed Kommentare

Impressum/Kontakt

Impressum
Datenschutz

Kontaktformular
E-Mail

Willkommen
Über mich

Copyright © Gerhard Kerner 2011-2019 AnthrazitGrün AnthrazitGrün AnthrazitGrün Hammerschmid Hammerschmid Trachtengilet Trachtengilet Trachtengilet Trachtengilet Hammerschmid Hammerschmid AnthrazitGrün Hammerschmid 8m0wNn Impressum Kontakt Datenschutzerklärung Cookies Haftungsausschluss IPv6

Powered by s9y – Template by Bulletproof development team.