Style-Sheets und Klassenhierarchie

[Ina]

Hi Leute!

kann mir jemand mal ein paar gute Seiten im Netz nennen, die das Theme Klassen und Klassenhierarchien in Style-Sheets beschreiben? , das soll wohl irgend wie möglich sein, hab aber keine Ahnung wie das ablaufen soll.

Danke!

[kaepten]

Hallo

kann mir jemand mal ein paar gute Seiten im Netz nennen, die das Theme Klassen und Klassenhierarchien in Style-Sheets beschreiben? , das soll wohl irgend wie möglich sein, hab aber keine Ahnung wie das ablaufen soll.

So arg kompliziert wie das bei Deiner Fragestellung klingt ist das doch gar nicht. Hast Du im SelfHTML mal nachgeschaut?

cheers
kaepten

[Ina]

So arg kompliziert wie das bei Deiner Fragestellung klingt ist das doch gar nicht. Hast Du im SelfHTML mal nachgeschaut?

cheers
kaepten

Hi kaepten!

dort ist ja nur beschrieben, wie ich unterklassen zu bereits definierten Klassen also den bereits in HTML festgeschriebenen befehlen wie <p> und so weiter definiert. Das habe ich zumindest nur gefunden. Aber ich habe gehört, daß man ebend auch eigene richtige Basisklassen definieren kann und davon dann Unterklasse ableiten und davo wieder und so weiter, ebend eine eigende richtige Klassenhierarchie aufbauen, wie zum Beispiel in C++

[kaepten]

Hi

»»Aber ich habe gehört, daß man ebend auch eigene richtige Basisklassen definieren kann und davon dann Unterklasse ableiten und davo wieder und so weiter, ebend eine eigende richtige Klassenhierarchie aufbauen, wie zum Beispiel in C++

Ok, jetzt weiss ich was Du meinst. Basisklasse selbst machen mit der uneingeschränkten Möglichkeit der Ableitung/Vererbung.

Ich nehme an, selbst eine Basisklasse zu definieren geht in Richtung XML. Soweit ich das (im SelfHTML) gelesen habe gibts im CSS auch nur eine Vererbungsstufe (class).

Also kann ich auf Deine Frage keine Antwort geben. Nur, dass Du eine "Vererbung über mehrer Stufen" ja einfach simulieren kannst...

p.stufe1 {font-family:Arial;}
p.stufe1_stufe2 {font-family:Arial;font-size:10pt}
p.stufe1_stufe2_stufe_3 {font-family:Arial;font-size:10pt;font-weight:bold;}

;-))

cheers
kaepten

[kaepten]

Ach ja:

Und vergleiche HTML nicht mit C++... :-)

Mir selbst (als C++ Programmierer) ist es immer wieder unangenehm, wenn ich mehrere Male den gleichen DateiPfad in einem HTML Dokument "Hardcodiert" schreiben muss.

Jedesmal umgibt mich ein ungeheuerliches und beklemmendes Gefühl, nicht eine Konstante im Head angeben zu können und diese dann im Dokument mehrere male verwenden zu können...

:-))))))

kaepten

[Ina]

Ach ja:

Und vergleiche HTML nicht mit C++... :-)

Mir selbst (als C++ Programmierer) ist es immer wieder unangenehm, wenn ich mehrere Male den gleichen DateiPfad in einem HTML Dokument "Hardcodiert" schreiben muss.

Jedesmal umgibt mich ein ungeheuerliches und beklemmendes Gefühl, nicht eine Konstante im Head angeben zu können und diese dann im Dokument mehrere male verwenden zu können...

:-))))))

kaepten

sorry!!! war ja auch kein direkter Vergleich gemeint... nur als Bespiel, damit man herausbekommt, wie das ganze nacher aussehen soll.
Ich fange gerade an mich durch C++ durchzuwuschteln ;) und da ist mir diese Sprache als objekorientierte Sprache ebend eingefallen....

ach ja!
Kannst du die Konstanten nicht in VBScript definieren und dann im HTML immer wieder aufrufen. (nur so eine Idee) ?=)

Luxy

[Stefan Muenz]

Hallo Ina

Aber ich habe gehört, daß man ebend auch eigene richtige Basisklassen definieren kann und davon dann Unterklasse ableiten und davo wieder und so weiter, ebend eine eigende richtige Klassenhierarchie aufbauen, wie zum Beispiel in C++

Hmm, ich weiss noch nicht so recht, wonach du da genau suchst. Es gibt in CSS 2.0 eine Sache, die in SELFHTML noch nicht beschrieben ist, und die die explizite Vererbung von CSS-Definitionen zwischen ueber- und untergeordneten Elementen regelt. Beispiel:

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

und dann in HTML:
<span class="level1">roter Text mit<span class="level2">rotem und fettem Text</span> mittendrin</span>

Mehr dazu in der Original-CSS-Spec unter http://www.w3.org/TR/REC-CSS2/cascade.html#inheritance

viele Gruesse
  Stefan Muenz

[Ina]

Hi Stefan!

mir wurde diese Klassenhierarchie ebend so erklärt, daß sie wohl irgend wie so aussehen soll:

Beispiel:

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

.level21 {...}
}

kann das funktionieren? kommt mir ein wenig Cryptisch vor....

vor allem stellt sich dann die frage, wie rufe ich das dann im HTML auf?

viele Gruesse
Ina

[Stefan Muenz]

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

[Thomas J.S.]

Hallo Ina!

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

.level21 {...}
}
---------

Es ist erlaubt blocks (sie beginnen mit { und enden mit } ) zu verschachtelt, aber es wird an den Browser scheitern.
Eine möglichkeit dieser Verschachteleung ist bei den 'at-regeln' z.B:
@media print {
@page { margin: 10% }
H1, H2, H3 { page-break-after: avoid; page-break-inside: avoid }
UL, OL, DL { page-break-before: avoid }
}

Es wäre möglich eine "Basisklasse" zu definieren und dann Unterklasse zu erstellen. Dazu müßtest du dich mit den 'inheritance' Regeln befassen (funktioniert aber nur sporadisch in dem Browser) wie Stefan es schon sagte, dann mit den diversen 'selectors'. (funktioniert ebenfalls mehr schlecht als recht)

Paar Beispiele we du verschachteln kannst:
body div {...} betrifft alle div's innerhalb von body.

div p + h6 > a[href][title="selfhtml"] span.klein  {...}
dies betrifft eine Unterklasse namens 'klein' die zum <span> Element zu geordet ist, das sich innerhalb von einem <a> element befindet, das die Attribute 'href' und 'title="selfhtml"' hat und ein 'child-element' von<h6> ist, das selbst unmittelbat auf einem <p> folg, das sich in einem <div> befindet.
Nett oder? ;-)  ...also weiter....

div.heute.morgen.gestern {....}
betrifft ein <div> das im class="" die Werte 'heute' 'morgen' und 'gestern' in irgendeine Aufreihung enthält:
zB. <div class="gestern tag woche morgen monat heute"> ist betroffen, nicht aber <div class="jahr gestern morgen"> .

Eine Kombination von den verschiedenen Selektoren ist ohne weiters möglich. Generell kann man sagen, daß die von CSS gebotene möglichkeiten fast unendlich sind, nur leider all diese schönen Dinge scheitern daran, daß die Browser sie nicht unterstützen.

Weitere Erklärungen findest du beim W3C:
http://www.w3.org/TR/REC-CSS2/

Grüße
Thomas