Stefan Muenz: Style-Sheets und Klassenhierarchie

Beitrag lesen

Hallo Ina

.level2
{
color:inherit !important;
font-weight:bold

.level21 {...}
}

Das hab ich zwar auch schon mal gesehen, aber noch nie ausprobiert. Man sollte aber immer daran denken, dass die CSS von haus aus bereits "kaskadierend" sind, also von allgemein nach speziell hin vererben. Wenn du beispielsweise definierst:
body { font-size:10pt; }
und dann:
h1 { font-size:120% }
dann sollte die Schriftgroesse von <h1>-Tags auf 12pt errechnet werden, da <h1>...</h1> im HTML-Strukturbaum innerhalb von <body>...</body> steht. Das Gleiche kannst du auch erreichen, indem du einfach leere Klassen definierst und diese dann in HTML-Tags verwendest, die du ineinander verschachtelst. Wenn du beispielsweise definierst:
.rot { color:red }
.fett { font-weight:bold }
.grauhinterlegt { background-color:#C0C0C0 }
und dann in HTML notierst:
<p class="rot">Das ist roter Text und das ist <span class="fett">immer noch roter, aber ausserdem fetter Text, und <span class="grauhinterlegt">dieser hier ist rot, fett und grau hinterlegt</span>, dieser hier nur noch rot und fett</span> und dieser hier nur noch rot</p>

viele Gruesse
  Stefan Muenz