Vererbung

[Jochen Kubik]

Hallo Leute,

kann mir jemand in einfachen Worten erklären, was wann wie bei CSS vererbt wird, wenn man z.B. seine Klassen so definiert:

.wichtig {color:#FFFFFF; font-size:16pt, font-weight:bold;}

.unwichtig {color:#000000}

h1 { line-height:18pt; }

Viele Grüße aus Ludwigsburg

[Cheatah]

Hi,

kann mir jemand in einfachen Worten erklären, was wann wie bei CSS vererbt wird, wenn man z.B. seine Klassen so definiert:

hier wird gar nichts vererbt (oder kaskadiert - ich weiß ja nicht, was Du meinst), da erst mit HTML-Code eine Vererbung oder Kaskadierung stattfinden kann. Bitte spezifiziere die Struktur, in der Du etwas über die CSS-Anwendung erfahren möchtest.

Cheatah

[Jochen Kubik]

Hallo Leute,

ja wie wird denn dann 'was kaskadiert?

so etwa:

.nav1 { color:#FF0000; font-size:22pt; }
.nav2 { font-size:12pt; }
.nav3 { font-size:10pt; }

bleiben da nav2 und nav3 rot?

Viele Grüße aus Ludwigsburg

[Cheatah]

Hi,

.nav1 { color:#FF0000; font-size:22pt; }
.nav2 { font-size:12pt; }
.nav3 { font-size:10pt; }
bleiben da nav2 und nav3 rot?

diese drei Dinge haben ohne einen entsprechenden HTML-Code nicht das geringste miteinander zu tun. Da wird weder was kaskadiert noch vererbt. Eine zufällige Bezeichnungsähnlichkeit ist absolut bedeutungsfrei.

Cheatah

[Jochen Kubik]

Hallo Cheatah,

bitte verstehe mich nicht falsch, aber Deine Antworten empfinde ich hier wie auch weiter unten mindestens sehr verwirrend wenn nicht arogant. Du deutest immer nur an, daß es so oder so nicht geht, sagst aber nie wie es denn richtig aussehen sollte.

Würdest Du mal etwas konkreter werden, und ein Beispiel nennen wie etwas _richtig_ vererbt wird, oder willst Du mich noch eine Weile raten lassen?

Wie gesagt, nicht böse gemeint, aber leicht verwundert!

Viele Grüße aus Ludwigsburg

[Henning]

Hallo,

Schreib mal den HTML Code dazu, dann kann man mehr sagen. Du hast bisher nur Klassen in CSS definiert, aber ohne zu wissen, wo man sie im HTML Code zugewiesen hat, ist die Frage nicht zu beantworten.
Gruß,
Henning

[Jochen Kubik]

Hallo Leute,

ich verwende die Klassen wo immer ich sie brauche, mal so:
<td class="xy">
mal so:
<h1 class="xy">
mal so:
<DIV class="xy">

Ist das falsch?

Viele Grüße aus Ludwigsburg

[romy]

Hallo Leute,

schau mal hier:
http://forum.de.selfhtml.org/archiv/2000_3/t18223.htm

hope it helps
(hat übrigens google ausgespuckt!)

Viele Grüße aus Ludwigsburg

romy

[Jochen Kubik]

Hallo romy,

it helps !!!!
thnx

Viele Grüße aus Ludwigsburg

[Cheatah]

Hi,

bitte verstehe mich nicht falsch, aber Deine Antworten empfinde ich hier wie auch weiter unten mindestens sehr verwirrend wenn nicht arogant. Du deutest immer nur an, daß es so oder so nicht geht, sagst aber nie wie es denn richtig aussehen sollte.

wenn Du meine Bitte erfüllt hättest, HTML-Code zu nennen, hättest Du festgestellt, dass meine Antwort _nicht_ arrogant ist. Wie Henning schon sagte: Ohne HTML-Code kann Dir nicht geholfen werden. Kaskadierung und Vererbung finden erst _in_ HTML statt; wenn man sie ohne entsprechenden Code erklären möchte, ist das eine mehrseitige Abhandlung, was Deiner Bedingung "in einfachen Worten" garantiert nicht mehr gerecht wird.

Cheatah

[Jochen Kubik]

Hi Cheatah,

leider glaube ich reden wir irgendwie aneinander vorbei, ich will css Konstrukte wie:

---schnipp-----
.nav1inaktiv   { color:#FF0000; font-weight:bold; font-size:10pt; }
.nav2inaktiv   { color:#FF5F00; font-weight:bold; font-size:10pt; }
.nav3inaktiv   { color:#FF7F00; font-weight:bold; font-size:10pt; }
.nav4inaktiv   { color:#FF9F00; font-weight:bold; font-size:10pt; }
.nav5inaktiv   { color:#FFBF00; font-weight:bold; font-size:10pt; }
.nav6inaktiv   { color:#E00060; font-weight:bold; font-size:10pt; }
.nav7inaktiv   { color:#DF0000; font-weight:bold; font-size:10pt; }
.nav8inaktiv   { color:#6699CC; font-weight:bold; font-size:10pt; }

.nav1 { color:#FF0000; font-style:normal; font-weight:bold; font-size:22pt; }
.nav2 { color:#FF5F00; font-style:normal; font-weight:bold; font-size:22pt; }
.nav3 { color:#FF7F00; font-style:normal; font-weight:bold; font-size:22pt; }
.nav4 { color:#FF9F00; font-style:normal; font-weight:bold; font-size:22pt; }
.nav5 { color:#FFBF00; font-style:normal; font-weight:bold; font-size:22pt; }
.nav6 { color:#E00060; font-style:normal; font-weight:bold; font-size:22pt; }
.nav7 { color:#DF0000; font-style:normal; font-weight:bold; font-size:22pt; }
.nav8 { color:#6699CC; font-style:normal; font-weight:bold; font-size:22pt; }

.kl { font-size:14pt; line-height:14pt;}

.nav1kl { color:#FF0000; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav2kl { color:#FF5F00; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav3kl { color:#FF7F00; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav4kl { color:#FF9F00; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav5kl { color:#FFBF00; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav6kl { color:#E00060; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav7kl { color:#DF0000; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}
.nav8kl { color:#6699CC; font-style:normal; font-weight:bold; font-size:14pt; line-height:14pt;}

-----schnapp-------

vermeiden, und nicht immer alles neu schreiben, sondern nur, das was ich ändert. Ich dachte ich kann dies durch Vererbung von einer Klasse in die andere erreichen. Wie das im HTML aussieht kann ich doch nicht wissen, wenn ich nicht weiß wie ich es vererben soll!

Ich werde mich erst mal mit einem guten Buch bewaffnen, und euch zur Not dann nochmal nerven ;-)

Grüße aus Ludwigsburg

[Cheatah]

Hi,

Ich dachte ich kann dies durch Vererbung von einer Klasse in die andere erreichen.

nein, Klassen vererben nicht ineinander. Die CSS-Eigenschaften der Klassen, Elemente, IDs etc. werden immer dann genutzt, wenn der HTML-Code sie verlangt, d.h. wenn es Übereinstimmungen gibt. Dabei werden von Element zu Element bestimmte (nicht alle!) CSS-Eigenschaften vererbt, sofern sie nicht weiter innen überschrieben werden; also wenn ein HTML-Element mit irgendwelchen CSS-Eigenschaften versehen wird, vererbt es diese in enthaltene HTML-Elemente.

Vererbung findet _nicht_ innerhalb von CSS statt. Es handelt sich um Vererbung _von_ CSS-Eigenschaften in HTML.

Wie das im HTML aussieht kann ich doch nicht wissen, wenn ich nicht weiß wie ich es vererben soll!

Du erstellst den HTML-Code so, dass Vererbung stattfinden kann, nicht umgekehrt.

Ich werde mich erst mal mit einem guten Buch bewaffnen, und euch zur Not dann nochmal nerven ;-)

Lesetipp: "CSS kurz & gut" von O'Reilly, 8 Euro. AFAIK ist die neueste Ausgabe leider von 2001 und damit nicht wirklich aktuell; die Grundlagen stimmen aber noch immer.

Cheatah

[Orlando]

Hi Jochen,

.nav1inaktiv   { color:#FF0000; font-weight:bold; font-size:10pt; }
.nav2inaktiv   { color:#FF5F00; font-weight:bold; font-size:10pt; }
.nav3inaktiv   { color:#FF7F00; font-weight:bold; font-size:10pt; }
.nav4inaktiv   { color:#FF9F00; font-weight:bold; font-size:10pt; }
.nav5inaktiv   { color:#FFBF00; font-weight:bold; font-size:10pt; }
.nav6inaktiv   { color:#E00060; font-weight:bold; font-size:10pt; }
.nav7inaktiv   { color:#DF0000; font-weight:bold; font-size:10pt; }
.nav8inaktiv   { color:#6699CC; font-weight:bold; font-size:10pt; }

du willst Redundanz vermeiden - das ist eine gute Idee. Du kannst natürlich eine zweite Klasse definieren:

.inaktiv { font-weight:bold; font-size:10pt; }
 .nav1    { color:#FF0000; }
 .nav2    { color:#FF5F00; }
  ...

Anschließend weist du deinen Elementen beispielsweise class="nav1 inaktiv" zu. Beachte aber, dass Netscape 4 nur die erste angegebene Klasse berücksichtigt.

Besser, du weist der Navigation eine ID zu, so zB id="nav". Anschließend kannst du mit den Selektoren

#nav { ... }
 #nav a { ... }
 #nav a.aktiv { ... }

die enthaltenen Elemente formatieren (gib dort alles an, was auf alle zutrifft). Klassen kannst du dann zusätzlich einsetzen.

Siehe auch die in meiner ersten Antwort verlinkten Seiten und zusätzlich noch

http://selfhtml.teamone.de/css/formate/zentrale.htm
 http://jigsaw.w3.org/css-validator/

LG Roland

[Thomas J.S.]

Hallo,

leider glaube ich reden wir irgendwie aneinander vorbei, ich will css Konstrukte wie:

Das ist vollkommen irrelewant! Cheatah hat dir bitte schon soooooo oft gesagt, dass deine CSS erst dann "gedeutet" werden kann, wenn du es auf HTML-Element anwendest.

Du kannst nochmal 50 Klassen definieren, die aber weder verwerbt noch sonstwie kaskadiert werden, wenn du diese Klassen nicht auf HTML-Elemente anwendest. Und genau auf die "Anwedung" kommt an.

Ohne gesehen zu haben wie du deine Klassen einsetzt kann man dir nur eines sagen, nämlich: nichts.

Also um es dir zu verdeutlichen, so einen Code würde man von dir brauchen um dir erklären zu können was und wie vererbt bzw. kaskadiert wird.(und natürlich die CSS dazu)

<div class="nav1">
   <p class="nav1kl">
      <a class="nav8inaktiv">bla bla bla</a>
   </p>
   <div class="nav8">
    <a class="nav8inaktiv">bla bla bla</a>
   </div>
</div>

Grüße
Thomas

[Jochen Kubik]

Hallo Thomas,
so langsam dämmert es auch bei mir, den Code wollte ich euch natürlich nicht verheimlichen, ich konnte nur nicht so richtig verstehen, was das mit dem HTML Code zu tun hat...

Die Seite ist inzwischen online unter:
[http://www.hanwig.fotografenmeister.de/engel.html]

Die meisten verlinkten Seiten gibt's noch nicht!

Das externe CSS ist hier:
http://www.hanwig.fotografenmeister.de/css/hanwig.css

Wie gesagt ist noch schwer Baustelle -> "Eltern haften für ihre Kinder"

Viele Grüße aus Ludwigsburg

[Thomas J.S.]

Hallo Jochen,

so langsam dämmert es auch bei mir, den Code wollte ich euch natürlich nicht verheimlichen, ich konnte nur nicht so richtig verstehen, was das mit dem HTML Code zu tun hat...

so:
-----------
<body>
<table >
<tr>
 <td class="nav2"></td>
 <td class="grau" width="100%"> </td>
 <td class="grau" align="center"><a href="index.html"></a></td>
</tr>

Hier erbt die Tabelle die für Body definierte Eigenschaften: Schriftart, Farbe, etc. Die Tabelle vererbt dann sie weiter an die Zellen.
Bei den Zellen werden die geerbte Eigenschaften von den Eigenschaten der Klassen ergänzt, bzw. überschrieben. Z.B. td hat bei dir: { font-family: Verdana, Arial, Helvetica, "Sans Serif"; font-size:10pt;} und td.nav2 hat { background-color:#FF5F00;}.
Die Klasse nav2 hat bei dir .nav2 { color:#FF5F00; font-style:normal; font-weight:bold; font-size:22pt; }

<td class="nav2"> wird also { background-color:#FF5F00; font-family: Verdana, Arial, Helvetica, "Sans Serif"; color:#FF5F00; font-style:normal; font-weight:bold; font-size:22pt; }.

------------ übrigens ------------------
Sans Serif schreibt man mit sans-serif, ohne Anführungszeichen und klein.
----------------------------------------

Noch ein Bsp.
Die klasse grau hat bei dir:  { border-width:0px; border-style:solid; border-color:#DDDDDD; background-color:#DDDDDD; height:120;}

Der Text im <a> bei <td class="grau" align="center"><a href="index.html"> wird bei dir also (body +/- td +/- .grau +/- a):

{ font-family: Verdana, Arial, Helvetica, sans-serif; background-color:#DDDDDD; color:#0000FF; text-decoration:none; font-style:normal; font-weight:bold; font-size:10pt; }

haben. Entsprechend dann die anderen Pseudoklassen für <a>.

Eigentlich sollte ich noch jetzt nachsehen, was Body an Eigenschaften hatte und gegebenfalls hier anführen, aber du verstehst jetzt in etwa wie es geht.

Würdest du dann noch ein style="" Attribut bei einem Element notieren, würden die Styles darin die geerbten Eingeschaften ergänzen / überschreiben und diese geänderte Eingenschaften dann weitervererben.

Grüße
Thomas

[Danny]

.wichtig {color:#FFFFFF; font-size:16pt, font-weight:bold;}
.wichtig {color:#000000}

Wichtig ist danach schwarz, hat aber sonst genau die Eigenschaften wie oben. Meinst Du sowas?

[Orlando]

Hi Jochen,

kann mir jemand in einfachen Worten erklären, was wann wie bei CSS vererbt wird, wenn man z.B. seine Klassen so definiert:

.wichtig {color:#FFFFFF; font-size:16pt, font-weight:bold;}
.unwichtig {color:#000000}
h1 { line-height:18pt; }

hier wird zunächst gar nichts vererbt. Das ist dagegen der Fall, wenn du beispielsweise zusätzlich

body { color:#f00; background-color:#fff; }

notierst und damit grundsätzlich eine rote Vordergrundfarbe -> Ein ohne weitere Angaben eingefügtes <h1>-Element würde demnach rot (da vererbt) dargestellt werden, <h1 class="wichtig"> dagegen weiß.

Hier etwas passende Lektüre,

http://jendryschik.de/wsdev/einfuehrung/css/kaskade.html
 http://bjoernsworld.de/css/grundlagen.html#vererbung
 http://peliworks.de/css/grundkurs/kontext.htm

sowie natürlich die Referenz:

http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

LG Roland