Kann ich Inline-Style übersteuern?

[Thomas Luethi]

Hallo,

Kann ich via CSS ein Element mit Inline-Style übersteuern?

Theoretisch: (IMHO) Nein. Gemäss den Regeln zur Spezifität (specificity)
hat ein Style-Attribut immer mehr Gewicht als irgendein Selektor in
einem zentralen CSS (z.B. im STYLE-Element im HEAD der HTML-Seite oder
in einer externen CSS-Datei).

Lies mal das Kapitel
6.4 The Cascade in CSS 2.0 / CSS 2.1 durch, insbesondere
6.4.1 Cascading order CSS 2.0 / CSS 2.1
6.4.2 !important rules CSS 2.0 / CSS 2.1
6.4.3 Specificity in CSS 2.0 / CSS 2.1 (Unterschiede!)

Und in SelfHTML: http://de.selfhtml.org/css/formate/kaskade.htm,
insbesondere die Abschnitte "Sortierung nach Ursprung und Priorität"
(mit IMHO recht freier Beschreibung der !important Regel) und
"Spezifität - Gewichtung der Selektoren".

Soweit ich die Spec. verstehe, ist !important eigentlich nur dazu gedacht,
im "Machtkampf" Autoren-/Benutzer-Stylesheet zum Einsatz zu kommen,
d.h. mit einer !important-Anweisung könntest Du als Autor die
Einstellung im Benutzer-Stylesheet übersteuern, es sei denn,
der Benutzer hat dort ebenfalls !important stehen, dann "gewinnt"
(seit CSS 2.0) das Stylesheet des Benutzers. (Recht so! ;-)

Du als Autor solltest eher mit der Spezifität arbeiten, um Deine eigenen
Angaben zu übersteuern. (Und sowieso Style-Attribute vermeiden,
da sie noch weitere Nachteile haben, insbesonderen, was die
Wartung betrifft. Bei Deinem genannten "Problem" würde ich
dem Element eine Klasse oder ID geben und für jeden Medien-Typ,
d.h. für screen und print, je ein eigenes externes Stylesheet
machen, wo Du die unterschiedlichen Definitionen festlegst.)

In der Praxis ist es allerdings möglich, mit !important in einem
zentralen CSS die Angaben in einem Style-Attribut zu übersteuern
(sofern diese nicht selbst !important enthalten), wie ich mit
einer kleinen Testseite feststellen konnte:
http://www.tiptom.ch/tests/css/style-vs-important.html

Vereinfachtes Beispiel:

Zentrales CSS:
p.spezial { color:red !important; background-color:yellow !important; }

HTML:
<p class="spezial" style="color:green; background-color:white;">
Es ist fraglich, wie dieser Text dargestellt wird.
</p>

Resultat:
Die Browser MS IE 6.0, Firefox 3.0 und Opera 9.27
übernehmen die Angaben aus dem zentralen CSS und zeigen den Text
in roter Farbe auf gelbem Hintergrund an.

Ich finde das nicht einleuchtend und denke, dass es gegen die
Spezifitäts-Regeln verstösst.
Und ich würde !important selbst nicht benutzen oder weiterempfehlen.

Freundliche Grüsse
Thomas