Stefan Hoba: Vererbung von Eigenschaften

Es steht nirgends, dass es geht, es steht aber auch nirgends, dass es nicht geht...
Ich habe viele Styles, die sich nur in einer Eigenschaft unterscheiden, z.B. der Schriftgröße. Meine Idee: ich definiere ein Style ".alle", in dem alle gemeinsamen Eigenschaften definiert werden. Basierend auf diesem Style entwickle ich verschiedene Styles, die nur noch die Schriftgröße definieren, alle anderen Eigenschaften aber von ".alle" übernehmen.
Also: wie geht das??

Stefan

  1. hi,

    ich hoffe ich habe die frage richtig verstanden.
    das sollte gehen, z.B.
    td {font-size:14px;
        font-family:arial, sans-serif;
       }
    und dann mit class weiter
    td.16 {font-size:16px;}
    dann haben alle td arial+14px und td.16 arial+16px
    nach dem prinzip sollte es gehen

    stefan

    1. hi,

      ich hoffe ich habe die frage richtig verstanden.
      das sollte gehen, z.B.
      td {font-size:14px;
          font-family:arial, sans-serif;
         }
      und dann mit class weiter
      td.16 {font-size:16px;}
      dann haben alle td arial+14px und td.16 arial+16px
      nach dem prinzip sollte es gehen

      stefan

      So einfach verhält es sich leider nicht. Ich möchte innerhalb von selbstdefinierten Elementen weitervererben, ungefähr so:

      .vorlage {
        font-family:Arial;
        font-weight:bold;
        margin-top:12px;
        ...
      }

      Dieses Style wird selbst nie eingesetzt, dient aber als Vorlage für weitere Styles:

      .speziell1 extends .vorlage {
        font-size:24pt;
      }

      .speziell2 extends .vorlage {
        font-size:18pt;
      }

      Trotzdem Vielen Dank für die Hinweise, ich werde weiterprobieren.

      Stefan

      1. Moin

        So einfach verhält es sich leider nicht. Ich möchte innerhalb von

        selbstdefinierten Elementen weitervererben
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^

        Das geht erst in XML :-)

        ungefähr so:

        [Klasse in Klasse]

        Nein, das geht nicht. Du kannst nur ein Klasse je Selektor definieren. Das ist übrgiens auch genau beschrieben: http://www.w3.org/TR/REC-CSS1#class-as-selector "Only one class can be specified per selector. 'P.pastoral.marine' is therefore an invalid selector in CSS1."

        Mehr ist auch nicht nötig, da dir das Cascadierende von CSS schon zuvor (also beginnend mit dem Element body) genügend Freiraum gibt http://www.w3.org/TR/REC-CSS1#cascading-order.

        In deinen Beispiel könntest du also die von gewünschten "stetigen" Merkmale für das Element BODY und/oder P definieren und anschließend mit .kleiner oder p.groesser oder ähnlichem arbeiten.

        Viele Grüße

        Swen

        1. hi swen,

          In deinen Beispiel könntest du also die von gewünschten "stetigen" Merkmale für das Element BODY und/oder P definieren und anschließend mit .kleiner oder p.groesser oder ähnlichem arbeiten.

          vorsichtig, ns will das nicht. gebe in body eine schriftart an und du hast sie nur im body aber nicht in <td> (ich weiss <td> steht im body aber ns will trotzdenm nicht)

          korrigiere mich wenn ich mich irre, aber das habe ich laufend.

          schönen gruß
          stefan

          1. Moin

            korrigiere mich wenn ich mich irre, aber das habe ich laufend.

            Ich sprach von der Spec - also, wie es sein soll - nicht von der schnöden Realität - also was Browser oder Programme von Netscape daraus machen :-) . Denn dann würde ich sohttp://www.teamone.de/selfaktuell/forum/messages/92532.html antworten

            Viele Grüße

            Swen

        2. Hallo Swen!

          »»  [Klasse in Klasse]

          Nein, das geht nicht.

          Das geht!

          Das ist übrgiens auch genau beschrieben: http://www.w3.org/TR/REC-CSS1#class-as-selector "Only one class can be specified per selector. 'P.pastoral.marine' is therefore an invalid selector in CSS1."

          CSS1! Eben!

          Aber nicht mehr in CSS2

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

          Allerdings:

          <p class="green bold">güner und fetter text</p> wird nur vom IE5 verstanden.

          Grüße
          Thomas

          1. Moin,

            Das geht!

            Aber nicht mehr in CSS2

            Okay, Überzeugt, dass das _geht_. Ich sollte wohl mehr Zug fahren :-) Da habe ich etwas dazugelernt.

            Ob das aber sinnvoll ist, wage ich gleichwohl zu bezweifeln: Mit CSS 2 bewegen wir uns doch in Bereiche hinein, wo "normalerweise" nur "wohlgeformte" Dokumente auf ihre Darstellungform warten. (Ich weiß, das hört sich elitär an, aber seinen wir doch mal ehrlich: CSS2/3, XHTML etc werden doch nicht für den Homepagebastler entwickelt - in diesem Bereich werden wir auch noch 10 Jahren mit HTML 3.2 und ein wenig CSS 1 auskommen können)
            Einfach nutzbare multiple Gestaltungmöglichkeiten sind doch wieder nur ein _Einfallstor_ in Markup a la Word 95, wo das böse Erwachen immer erst dann kommt, wenn man beim Versuch, ein Inhaltsverzeichis für seine Diplomarbeit zu generieren, merkt, dass diese komischen Formatvorlagen irgendwie doch einen Sinn haben.

            Andersherum hätte ich es noch verstanden: In CSS 1 wird es "für die private Homepage" ermöglicht, mit <p class="groesser gruener fetter kursiver"> (und damit auch mit gewisser Ignoranz gegenüber dem M in HTML) die "persönliche Überschrift" zu gestalten. Mit CSS 2 hätte man dann aber bitte den Weg in die "richtige" Richtung gehen können.

            <p class="green bold">güner und fetter text</p> wird nur vom IE5 verstanden.

            Irgendwie ja konsequent, dass MS so etwas sofort unterstützt ;-))

            Viel Spaß

            Swen

            1. Hallo Swen!

              Ich weiss du bekommst es hier nicht mehr mit ... aber:

              Mit CSS 2 hätte man dann aber bitte den Weg in die "richtige" Richtung gehen können.

              »»

              Sie sind gegangen.

              denn wie ist es damit?
              .monolog {
              font-family:Times;
              font-size:10pt;
              }
              .dialog {
              font-family:Arial;
              font-size:14pt;
              }
              .mann {
              color:blue;
              }
              .frau {
              color:red;
              }

              <p class="dialog mann">...</p>
              <p class="dialog frau">...</p>
              <p class="monolog mann">...</p>
              <p class="monolog frau">...</p>

              und das ist nr ein sehr sehr einfaches Beispiel, was man alles mit Verschachtelung von Klassen in CSS2 erreichen könnte.

              Grüße
              Thomas

      2. Hallo Stefan!

        So einfach verhält es sich leider nicht. Ich möchte innerhalb von selbstdefinierten Elementen weitervererben, ungefähr so:

        .vorlage {
          font-family:Arial;
          font-weight:bold;
          margin-top:12px;
          ...
        }

        Dieses Style wird selbst nie eingesetzt, dient aber als Vorlage für weitere Styles:

        .speziell1 extends .vorlage {
          font-size:24pt;
        }

        .speziell2 extends .vorlage {
          font-size:18pt;
        }

        Umgekehrt würde es gehen:

        .vorlage {
          font-family:Arial;
          font-weight:bold;
          margin-top:12px;
          ...
        }

        .vorlage .speziell {
        font-size:18pt;
        }

        Du muss aber die Klasse .vorlage irgendwo bei einem übergeordneten Element anwenden sonst wird die Verschachtelung
        .vorlage .speziell  nie gültig werden können.

        Grüße
        Thomas

  2. Moin

    sei vorsichtig mit zu vielen Klassen. Definiere die stetig bleibenden Eingenschaften besser am Element. Schau auch mal hier nach: <../../tdbb.htm#a3>.

    Falls du Problem hast, poste deinen code oder stell ihn online.

    Viele Grüße

    Swen