Zusammenfassung
Mit der CSS-Eigenschaft text-decoration-color kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch text-decoration-line. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.
| Initialwert | currentColor |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | Falls der Wert durchscheinend ist, ist der berechnete Wert der entsprechende rgba() Wert. Falls nicht, ist er der entsprechende rgb() Wert. Das transparent Schlüsselwort wird zu rgb(0,0,0). |
| Animierbar | ja, als Farbe |
| Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Syntax
Formale Syntax: <color>wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>wobei
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
text-decoration-color: currentColor text-decoration-color: red text-decoration-color: #00ff00 text-decoration-color: rgba(255, 128, 128, 0.5) text-decoration-color: transparent text-decoration-color: inherit
Werte
<color>- Die Eigenschaft
colorakzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe<color>-Werte für genauere Details.
Beispiel
.beispiel {
text-decoration: underline;
text-decoration-color: red;
}
Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.
<!DOCTYPE html>
<html>
<head>
<style>
.beispiel {
font-size: 24px;
text-decoration: underline;
color: red;
}
.beispiel:hover {
color: blue;
text-decoration: line-through;
}
</style>
</head>
<body>
<span class="beispiel">
<span style="color:black">schwarzer Text mit roter Linie und blauem Hovereffekt</span>
</span>
</body>
</html>
Spezifikationen
| Spezifikation | Status | Anmerkung |
|---|---|---|
| Unknown Die Definition von 'text-decoration-color' in dieser Spezifikation. |
Unbekannt |
Browserkompabilität
| Funktion | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Elementare Unterstützung | ? | 6.0 (6.0)-moz | ? | ? | ? |
| Funktion | Android | Firefox mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Elementare Unterstützung | ? | 6.0 (6.0)-moz | ? | ? | ? |