nicht angemeldet
Priorität konfligierender css-Angaben
Hallo zusammen,
folgendes Szenario:
In der Datei seite.shtml steht unter anderem
<h3 class="absolvent" style="text-transform:none">Anna</h3>
Meine Frage zielt darauf, warum ich das text-transform:none nicht in eine externe css-Datei auslagern kann. Es sieht nämlich wie folgt aus:
Die css-Angaben für die ganze Seite lagern in mehreren externen css-Dateien. Die oben verwendete Klasse 'absolvent' wird in lingu.css beschrieben.
Dies ist die Datei alpha.css:
@import url(beta.css);
@import url(delta.css);
@import url(gamma.css);
@import url(lingu.css);
Meines Wissens gilt im Fall konfligierender css-Angaben immer die letzte Angabe.
Nun ist es so, dass in delta.css umfangreiche Angaben zur Formatierung von h3 stehen. Unter anderen text-transform:uppercase. Das will ich aber für die Klasse 'absolvent' nicht, daher steht in lingu.css:
.absolvent {
text-transform:none;
margin-top:10px;
margin-bottom:-3px;
}
Die Margin-Angaben werden auch so übernommen, wie ich das möchte. Es kann also nicht sein, dass schlicht ein Schreibfehler vorliegt. text-transform:none wird aber ignoriert. Um den gewünschten Effekt zu erzielen, muss ich wie beschrieben style="text-transform:none" direkt ins HTML schreiben.
Was mache ich falsch?
Danke
Pida
-
Hi,
evtl. ist die andere Angabe <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=höhere Gewichtung?>
~Dave
-
Hi,
Meines Wissens gilt im Fall konfligierender css-Angaben immer die letzte Angabe.
Bei gleicher Spezifität, ja.
Nun ist es so, dass in delta.css umfangreiche Angaben zur Formatierung von h3 stehen. Unter anderen text-transform:uppercase. Das will ich aber für die Klasse 'absolvent' nicht, daher steht in lingu.css:
.absolvent {
text-transform:none;
margin-top:10px;
margin-bottom:-3px;
}> > Die Margin-Angaben werden auch so übernommen, wie ich das möchte. Es kann also nicht sein, dass schlicht ein Schreibfehler vorliegt. text-transform:none wird aber ignoriert. Dann hat diese Regel wohl nicht die gleiche Spezifität wie die, deren Angaben du zu überschreiben versuchst. Installiere dir Firebug - damit kannst du dir sehr schön anschauen, welche Regeln auf ein Element angewandt werden, und welche davon „gewinnt“. MfG ChrisB -- “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam] -
Grüße,
entweder du rechnest es mit der spezifitäten-tabelle von selfhtml aus, oder du klickst die Tabelle rechts an und im Kontextmenü "element untersuchen" dann siehst du die angewandten classen (Opera 10.5+), ggf kannst du entweder die selectoren anpassen, oder, sobald du mit nerven am ende bist, ein !important dran hängen
MFG
bleicher
