Du bist hier: bueltge.de » test »
Der folgende Absatz ist mit Inline-Style formatiert.
<p style="color:#ba0100; font-size: 2em;">...
Ich bin ebenso mit Inline-Style formatiert
Ich bin mit Inline-Style formatiert und werde zurück gesetzt mit Hilfe von Style-Angaben im head
Ich bin mit Inline-Style formatiert und werde zurück gesetzt mit Hilfe von Style-Angaben im head; allerdings auf neue Werte, nicht auf vererbte Eigenschaften
Um die Inline-Styles zu überschreiben und auf den „normalen“ Wert zu setzen, nutze ich folglenden CSS-Syntax.
Zum Ansprechen des Elementes nutze ich den Attribut-Selektor style. Das Schlüsselwort inherit dient in diesem Fall, um dafür zu sorgen dass ein Element vererbt wird.
[*]Attribut Selektoren werden nicht von allen Browsern erkannt, können also zu Problemen führen.
inheritJeder CSS-Eigenschaft ist zugeordnet, ob sie vererbbar ist oder nicht. Seit CSS Version 2 kann mit Hilfe des Schlüsselwortes inherit angegeben werden, dass eine Eigenschaft, die nicht vererbbar ist, vererbt werden soll.
Damit erreicht man in diesem Fall hier, dass die Inline-Styles überschrieben werden, mit den Eigenschaften, die aus vorhergehenden Eigenschaften vorliegen.
p.override2[style] {
color: green !important;
font-size: 1.5em !important;
}
p.override[style] {
color: inherit !important;
font-size: inherit !important;
}
<p style="color:#ba0100; font-size: 2em;">Ich bin ebenso mit Inline-Style formatiert</p> <p class="override" style="color:#ba0100; font-size: 2em;">Ich bin mit Inline-Style formatiert und werde zurück gesetzt mit Hilfe von Style-Angaben im head</p> <p class="override2" style="color:#ba0100; font-size: 2em;">Ich bin mit Inline-Style formatiert und werde zurück gesetzt mit Hilfe von Style-Angaben im head; allerdings auf neue Werte, nicht auf vererbte Eigenschaften</p>
Die obige Lösung kann auch auf den body angewnadt werden, so dass alle auftretenden Inline-Styles überschieben werden, ein einfaches Beispiel für die Farbe der Fonts.
body *[style] { color: inherit !important; }